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

DT
2 評論 9330 瀏覽 1 收藏 5 分鐘

扁平化的UI設計風格正在逐漸流行起來,Thinglist、 Currency、Letterpress等應用都采用這種風格并取得了好評。最近Carrie Cousins寫了一篇文章名為《Principles of Flat Design》的文章談論究竟如何做Flat UI設計。

沒有多余的效果

Flat UI得名于它的二維平面風格——產品里的每一個細節,無論是圖像、文字、按鈕還是導航欄,他們的邊緣都干脆簡潔的切斷聯系,而非平滑過渡,去除了陰影、斜角、浮雕、漸變等加深層次感的效果。

Carrie Cousins認為這種設計風格的好處是:在各個模塊之間沒有多余的元素去干擾用戶,而是通過明確的層次結構設計讓用戶能夠更容易理解產品功能并與之交互。尤其是在移動終端上,因為這種設計風格更適合容納功能模塊較少的小型屏幕。

簡單的組成元素

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

除了形狀上的樣式簡單外,Flat UI的設計理念中還鼓勵設計師對可點擊的按鈕大膽用色,產生層次感,但一點不要讓配色方案變得過于復雜,否則只會適得其反。

Filetypes

精簡文字

因為Flat UI本身是十分簡潔的,所以在它上面擺放文字是一個不小的挑戰。

總的來說,使用的字體應該符合UI的整體風格,過于精細的字體反而會與簡單的UI設計產生較大的沖突。而文本措辭也應該是簡單、高效的。而整體排版版式和大小也應該尊重整個產品的UI架構,選用適當的權重去表現。

Flatmate

更豐富的顏色

與傳統的設計相比,Flat UI設計中的顏色往往更為鮮艷、明亮。并且也擁有更為豐富的色調——傳統網站設計中,一個網站的色調最好控制在2~3個,但在設計合理Flat UI中,采用6~8個色調的配色方案也不為過。

在這些色調中,初級色是最受歡迎的,即那些統一色調中最單純的顏色。以目前的趨勢,淺橙色、藍色、綠色和紫色都十分流行。

Squirrel-Settings

類Flat UI設計

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

Coming-project

 

文章來源:PingWest中文網

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 非常感謝撒,找了好久關于扁平化設計的。。。。頂一個

    來自山東 回復