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

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

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

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

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

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

1.去掉特效

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

2、簡化提取

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

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

3、妙用色彩

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

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

4、注重排版和布局

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

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

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

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

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

5、半透明和大圖的運(yùn)用

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

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

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

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

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

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

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

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

（5）不要同時(shí)運(yùn)用過多半透明效果。

立體感：

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

大圖的合理利用。

一張好看的圖片能吸引大家注意力和點(diǎn)擊的欲望，在加上適當(dāng)?shù)呐虐?，再配合扁平界面，瞬間設(shè)計(jì)感倍增的。

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