層級明確、元素簡單、顏色豐富、精簡文字–Flat UI的設(shè)計原則

扁平化的UI設(shè)計風(fēng)格正在逐漸流行起來,Thinglist、 Currency、Letterpress等應(yīng)用都采用這種風(fēng)格并取得了好評。最近Carrie Cousins寫了一篇文章名為《Principles of Flat Design》的文章談?wù)摼烤谷绾巫鯢lat UI設(shè)計。
沒有多余的效果
Flat UI得名于它的二維平面風(fēng)格——產(chǎn)品里的每一個細(xì)節(jié),無論是圖像、文字、按鈕還是導(dǎo)航欄,他們的邊緣都干脆簡潔的切斷聯(lián)系,而非平滑過渡,去除了陰影、斜角、浮雕、漸變等加深層次感的效果。
Carrie Cousins認(rèn)為這種設(shè)計風(fēng)格的好處是:在各個模塊之間沒有多余的元素去干擾用戶,而是通過明確的層次結(jié)構(gòu)設(shè)計讓用戶能夠更容易理解產(chǎn)品功能并與之交互。尤其是在移動終端上,因為這種設(shè)計風(fēng)格更適合容納功能模塊較少的小型屏幕。
簡單的組成元素
在Flat UI中,不僅元素之間沒有過多的效果去做切換,元素本身的構(gòu)成邏輯也相對簡單——設(shè)計師經(jīng)用最簡單、常見的幾何形狀進(jìn)行設(shè)計,例如矩形、 圓形或正方形,它們之間可以完美的利用各類線條聯(lián)系起來。并且,這些 UI 元素應(yīng)該是簡單并容易點擊的,交互效果也應(yīng)該十分直觀。
除了形狀上的樣式簡單外,F(xiàn)lat UI的設(shè)計理念中還鼓勵設(shè)計師對可點擊的按鈕大膽用色,產(chǎn)生層次感,但一點不要讓配色方案變得過于復(fù)雜,否則只會適得其反。
精簡文字
因為Flat UI本身是十分簡潔的,所以在它上面擺放文字是一個不小的挑戰(zhàn)。
總的來說,使用的字體應(yīng)該符合UI的整體風(fēng)格,過于精細(xì)的字體反而會與簡單的UI設(shè)計產(chǎn)生較大的沖突。而文本措辭也應(yīng)該是簡單、高效的。而整體排版版式和大小也應(yīng)該尊重整個產(chǎn)品的UI架構(gòu),選用適當(dāng)?shù)臋?quán)重去表現(xiàn)。
更豐富的顏色
與傳統(tǒng)的設(shè)計相比,F(xiàn)lat UI設(shè)計中的顏色往往更為鮮艷、明亮。并且也擁有更為豐富的色調(diào)——傳統(tǒng)網(wǎng)站設(shè)計中,一個網(wǎng)站的色調(diào)最好控制在2~3個,但在設(shè)計合理Flat UI中,采用6~8個色調(diào)的配色方案也不為過。
在這些色調(diào)中,初級色是最受歡迎的,即那些統(tǒng)一色調(diào)中最單純的顏色。以目前的趨勢,淺橙色、藍(lán)色、綠色和紫色都十分流行。
類Flat UI設(shè)計
現(xiàn)在有許多工程師喜歡采用類Flat UI的設(shè)計。與Flat UI相比,他們會在其中的某些部分適當(dāng)添加一些效果,例如輕微的漸變或投影。不過需要注意的是,大部分情況下,為了保持整體的扁平感,在一個產(chǎn)品中,通常只會使用一種效果。
文章來源:PingWest中文網(wǎng)
非常感謝撒,找了好久關(guān)于扁平化設(shè)計的。。。。頂一個