扁平化的UI設(shè)計(jì)風(fēng)格正在逐漸流行起來，Thinglist、 Currency、Letterpress等應(yīng)用都采用這種風(fēng)格并取得了好評(píng)。最近Carrie Cousins寫了一篇文章名為《Principles of Flat Design》的文章談?wù)摼烤谷绾巫鯢lat UI設(shè)計(jì)。

沒有多余的效果

Flat UI得名于它的二維平面風(fēng)格——產(chǎn)品里的每一個(gè)細(xì)節(jié)，無論是圖像、文字、按鈕還是導(dǎo)航欄，他們的邊緣都干脆簡(jiǎn)潔的切斷聯(lián)系，而非平滑過渡，去除了陰影、斜角、浮雕、漸變等加深層次感的效果。

Carrie Cousins認(rèn)為這種設(shè)計(jì)風(fēng)格的好處是：在各個(gè)模塊之間沒有多余的元素去干擾用戶，而是通過明確的層次結(jié)構(gòu)設(shè)計(jì)讓用戶能夠更容易理解產(chǎn)品功能并與之交互。尤其是在移動(dòng)終端上，因?yàn)檫@種設(shè)計(jì)風(fēng)格更適合容納功能模塊較少的小型屏幕。

簡(jiǎn)單的組成元素

在Flat UI中，不僅元素之間沒有過多的效果去做切換，元素本身的構(gòu)成邏輯也相對(duì)簡(jiǎn)單——設(shè)計(jì)師經(jīng)用最簡(jiǎn)單、常見的幾何形狀進(jìn)行設(shè)計(jì)，例如矩形、 圓形或正方形，它們之間可以完美的利用各類線條聯(lián)系起來。并且，這些 UI 元素應(yīng)該是簡(jiǎn)單并容易點(diǎn)擊的，交互效果也應(yīng)該十分直觀。

除了形狀上的樣式簡(jiǎn)單外，F(xiàn)lat UI的設(shè)計(jì)理念中還鼓勵(lì)設(shè)計(jì)師對(duì)可點(diǎn)擊的按鈕大膽用色，產(chǎn)生層次感，但一點(diǎn)不要讓配色方案變得過于復(fù)雜，否則只會(huì)適得其反。

精簡(jiǎn)文字

因?yàn)镕lat UI本身是十分簡(jiǎn)潔的，所以在它上面擺放文字是一個(gè)不小的挑戰(zhàn)。

總的來說，使用的字體應(yīng)該符合UI的整體風(fēng)格，過于精細(xì)的字體反而會(huì)與簡(jiǎn)單的UI設(shè)計(jì)產(chǎn)生較大的沖突。而文本措辭也應(yīng)該是簡(jiǎn)單、高效的。而整體排版版式和大小也應(yīng)該尊重整個(gè)產(chǎn)品的UI架構(gòu)，選用適當(dāng)?shù)臋?quán)重去表現(xiàn)。

更豐富的顏色

與傳統(tǒng)的設(shè)計(jì)相比，F(xiàn)lat UI設(shè)計(jì)中的顏色往往更為鮮艷、明亮。并且也擁有更為豐富的色調(diào)——傳統(tǒng)網(wǎng)站設(shè)計(jì)中，一個(gè)網(wǎng)站的色調(diào)最好控制在2~3個(gè)，但在設(shè)計(jì)合理Flat UI中，采用6~8個(gè)色調(diào)的配色方案也不為過。

在這些色調(diào)中，初級(jí)色是最受歡迎的，即那些統(tǒng)一色調(diào)中最單純的顏色。以目前的趨勢(shì)，淺橙色、藍(lán)色、綠色和紫色都十分流行。

類Flat UI設(shè)計(jì)

現(xiàn)在有許多工程師喜歡采用類Flat UI的設(shè)計(jì)。與Flat UI相比，他們會(huì)在其中的某些部分適當(dāng)添加一些效果，例如輕微的漸變或投影。不過需要注意的是，大部分情況下，為了保持整體的扁平感，在一個(gè)產(chǎn)品中，通常只會(huì)使用一種效果。

文章來源：PingWest中文網(wǎng)