如今，移動APP扁平化設(shè)計是移動UI設(shè)計發(fā)展的必然規(guī)律。我們先不管移動APP扁平化設(shè)計是不是最好的設(shè)計趨勢或是設(shè)計潮流。

作為一名優(yōu)秀的APP設(shè)計師，必須記住好的設(shè)計不應(yīng)當(dāng)局限于某種設(shè)計風(fēng)格，而需要更注重可用性、有用性。因為設(shè)計趨勢并不適合一切項目，所以不能強求所有應(yīng)用都遵從這一風(fēng)格。

那如何做好扁平化設(shè)計？扁平化設(shè)計依賴于清晰的層次結(jié)構(gòu)和元素布局，優(yōu)秀的扁平化設(shè)計應(yīng)該能幫助用戶理解產(chǎn)品以及交互。

設(shè)計也是在遵循這樣一個從繁到簡的發(fā)展規(guī)律，從寫實擬物到抽象扁平。

當(dāng)然，幸運的是我們正在見證這個演變的過程!

那么就跟隨25學(xué)堂來學(xué)習(xí)如何設(shè)計移動APP的扁平化。也就是5點扁平化設(shè)計原則。

1.去掉特效

同樣是鏡頭的設(shè)計，在扁平化中去祛除了漸變，陰影，質(zhì)感，等各種修飾手法，僅用簡單的形體來表達，顯的干凈利落。做減法，這第一步應(yīng)該是最容易的。

2、簡化提取

在移動APP扁平設(shè)計中使用到一些簡單的UI元素，比如按鈕和圖標(biāo)。設(shè)計師更常用矩形、圓形、方形等簡單的形狀。元素獨立。正角、直角、圓弧都非常常見。

UI元素應(yīng)該在保持高可用性的前提下盡可能的簡單，保證應(yīng)用或網(wǎng)站直觀、易用，無需引導(dǎo)。為了同時達到簡單但直觀的效果，你可以嘗試為按鈕填充深色，以鼓勵用戶點擊。

3、妙用色彩

在扁平化設(shè)計中，色彩運用的是否到位，無疑是這種設(shè)計風(fēng)格中很重要的一個環(huán)節(jié)，看很多作品，在色彩上更多的強調(diào)更亮 、 更鮮艷。學(xué)習(xí)配色，除了理論知識外，借鑒優(yōu)秀網(wǎng)站的配色也是個好方法。

在很多時候扁平化的視覺設(shè)計中，是很少有線條出現(xiàn)的，更多是用色塊來表現(xiàn)各種關(guān)系。

4、注重排版和布局

在扁平化設(shè)計中采用的都是極簡的元素，所以，排版布局就顯的尤為重要。

首先是字體：在扁平化設(shè)計風(fēng)格種，字體的設(shè)計顯的很重要，一種新奇的字體用來作為設(shè)計元素會發(fā)揮極其重要的作用，但是要小心，不能因為字體太新奇，而影響到了信息的傳達。

字形上可以應(yīng)該使用粗體，文案要求精簡、干練，最終保證產(chǎn)品在視覺上和措辭上的一致性。

字體選擇上可以使用簡單的無襯線字體，通過字體大小和比重來區(qū)分元素。同時你也可以使用新奇的字體作為點綴，但一定要記得不能過火。用好字體，在設(shè)計中起著至關(guān)重要的作用。

排版的目的在于幫助用戶理解設(shè)計。標(biāo)簽按鈕等其它元素更注重增強易用性和交互性。

5、半透明和大圖的運用

扁平化設(shè)計生而簡單，整體上趨近極簡主義設(shè)計理念。設(shè)計中應(yīng)該驅(qū)除任何無關(guān)元素，盡可能地僅使用簡單的顏色與文本。如果一定需要視覺元素，你可以添加簡單的圖形。

比如APP半透明的運用。在iOS7系統(tǒng)中很多地方都用了這種設(shè)計方式。

使用這些設(shè)計方式最大的好處就是創(chuàng)造對比，可以讓設(shè)計師通過色塊，圖片上的大字體或者多種顏色層次來創(chuàng)造視覺焦急，傳說中的大氣應(yīng)該有這樣一種效果。

這種效果如果運用得當(dāng)?shù)脑?，效果會非常震撼，但是使用這種效果必須謹(jǐn)慎，因為這種效果很難處理得當(dāng)，有一些原則需要掌握：

（1）只有圖片和文字都可以讀時，半透明效果才有意義

（2）在決定半透明位置的時候，你要知道遮擋了什么內(nèi)容，這些遮擋是否合理

（3）透明度的使用錯誤會影響到整體的設(shè)計效果和閱讀性

（4）出于可讀性考慮不要在對比強烈的圖片上放置半透明元素(比如黑白對比或互補色)

（5）不要同時運用過多半透明效果。

立體感：

色塊間的變化也可以呈現(xiàn)出凹凸感。

大圖的合理利用。

一張好看的圖片能吸引大家注意力和點擊的欲望，在加上適當(dāng)?shù)呐虐妫倥浜媳馄浇缑?，瞬間設(shè)計感倍增的。

25學(xué)堂的老譚同學(xué)就跟大家先分享這些官員app扁平化設(shè)計的干貨。