“扁平化設計”的使用正逐漸成為網頁和UI設計近期的大趨勢，同時也是時下的一個熱門話題，各種探討和學習研究紛至沓來。鑒于我本身一直鐘情于極簡主義，所以扁平化設計中的美學對我極有啟發(fā)，特別是在近期對QuoteRobot（我在2010年與他人共同完成的一個提案書寫應用）進行重新設計時。

在本篇文章中，我將與大家探討什么是扁平化設計，并審視其他設計師對扁平化設計的看法，然后為大家提供一些能用于自己設計工作的小建議。

什么是扁平化設計？

從實踐角度說，扁平化設計就是指不采用近幾年流行的漸變、像素完美陰影和擬物化方法（在后面的部分會詳細介紹）實現“扁平化”的界面。

Layervault的Allen Grinshtein也許算得上是“扁平化設計”一詞的始作俑者。他曾在HackerNews上大為流行的一篇文章中說道：

“Web端上廣受喜愛的產品都有著相似的設計審美，它們的斜面、插入陰影和投影都大致相同。對于設計師，達到這種讓人“垂涎”的界面水平也許值得驕傲。但是對我們，以及作為少數存在的UI設計師來說，這就大錯特錯了?！?/p>

~ Allan Grinshtein (Layervault)

以Layervault為例，其設計的美妙之處在于簡約，并且摒棄了我們作為設計師拼命想達到的很多額外的設計細節(jié)。我們當下奉為UI設計潮流，并廣為使用的各種漸變和風格正在潛移默化的發(fā)生著改變，而對這一潮流的學習和研究將充滿著趣味。

扁平化設計范例

在Squarespace的新版本中，設計師選用了一套近乎完全扁平化的界面。想來他們一定在線框圖和UI上花費了大量的時間，盡管設計過程如此復雜，但導航卻十分簡單。

我自己雖然從來沒用過LayerVault，但根據我的觀察，其的扁平化UI很簡單易用。

Facebook一直是扁平化設計審美的簇擁者——其僅在近期才剛剛開始使用少量的斜面。

“Facebook是界面向扁平化發(fā)展的一個完美范例。其主要的操作按鈕雖然還留有少量的斜面，但大量的二級操作都已經完全扁平化。鑒于他們一直沒有再修改界面樣式，這種方法肯定是成功的?！?/p>

~ Ian Storm Taylor (Segment.io)

盡管Facebook近些年因為頻繁修改界面而備受批評，但扁平化仍然是互聯(lián)網上使用最多的網站樣式，想來大眾的口味是不會錯的。

的Rdio界面也采用了扁平化和極簡主義風格，并幾乎完全拋棄了陰影、漸變甚至彩色。

我有幸曾為Nest的前端代碼做過一些小的貢獻，并被他們推出的扁平化審美完全吸引住了。這些簇擁扁平化設計的設計師對這一風格還確實熱情滿滿。

“…作為交互設計師——我們應該熱衷于自己所使用的方法，并堅決拒絕擬物化和投影一類我們已經深陷其中的玩意?！?/p>

~ Daniel Howell (Howells)

抵制擬物化

正如20世紀建筑界的極簡主義運動強烈抵制先前幾個世紀的建筑裝飾主義一樣，扁平化設計審美也可能成為對多年來網站和界面過度設計或過渡修飾的抵制運動。其中最常見的一個例子，就是Apple近年來飽受詬病的過度使用擬物化。

Apple因在日歷應用中過度使用皮革材質而備受設計師的批評。

維基百科將擬物化定義為：

對原產品設計中因功能性而存在的設計要素進行模仿，并使之成為新設計中裝飾性元素的一種產品設計元素。

舉例來說，我們經常對用做按鈕的元素應用漸變和投影效果，因為真實世界中的按鈕就具有這些屬性，但在計算機用戶界面環(huán)境中實際上這些屬性并非必要。

“一個天氣類應用使用玻璃溫度計的圖片，這就是擬物化：玻璃在原始環(huán)境（真實世界的溫度計）下是必要的，但在新的設計中卻純粹是個裝飾?！?/p>

~ Sacha Greif

在日歷應用上使用皮革材質是否真的必要？同樣，對按鈕應用漸變和3d邊緣是否真的必要？難道不這樣用戶就不知道去點按鈕了嗎？裝飾到什么程度算是必要？沒有裝飾就不行了嗎？

“真實生活中，人在按按鈕時會感覺到彈性，但是在手機或者屏幕上卻沒有這種物理的反饋。雖然在你腦中能夠想象這種物理性，但在擬物化的現實中它并不真實存在。所以說，或者至少對我來說，擬物化在這一方面并不能達到期望的高度，這讓我很失望?！?/p>

~ Allan Yu (svpply / eBay)

因此，扁平化設計完全可以成為對界面設計濫用裝飾的抵制，正如極簡主義抵制過去華而不實的豪華建筑風格。

功能決定形式，擁抱扁平化

20世紀建筑界的極簡主義運動還產生了一些我們至今仍津津樂道的設計名言，例如“功能決定形式”、“少即是多”等等。同樣，雕塑家米開朗基羅在談到自己如何塑造其標志性的大衛(wèi)像時，也有一句名言讓我大愛：

“很簡單。只要去掉看起來不像大衛(wèi)的石頭就行了?！?br style="padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;padding-right:0px;" /> ~ Michaelangelo)

具體運用到用戶界面設計中，這通常就是說要去掉讓界面貼近真實生活的內容。37signals的團隊因在其產品（如Basecamp）中運用這一原則而名聲大振（而且大獲成功）。在扁平化設計界，“少即是多”是絕對的真理。為了表現出扁平化設計的美感，設計師必須注重于對象的功能，而不是外觀。這是關鍵，也是線框圖對設計流程如此重要的原因所在。

審美因人而異

在寫這篇文章前的調研過程中，我?guī)缀鯖]找到任何科學論斷來支持屏幕上的按鈕越真實就越顯得“可點”這一說法。雖然有很多證據為對比、顏色理論和層級理論提供支持，但我敢肯定的說，一個扁平化的橙色按鈕和一個斜面橙色按鈕放到恰當的背景下效果完全不會有差別。下面是一些其他設計師的看法：

“這就跟T臺的流行趨勢一樣——流行起來大家就都跟風，但是作為一名設計師，你恰恰需要避免這個。”

~ Cemre Güng?r (Branch)

“說擬物化設計差勁，就像說紫色很丑或者橢圓不適合web應用一樣，完全沒意義的話?！?/p>

~ Sacha Greif

“為什么要在沒有證據的情況下大肆宣傳某個設計美學優(yōu)于其他美學？難道說為了提高美觀就可以降低使用性嗎？”

~ Geoff Stearns (formerly YouTube)

好設計就是好設計，跟審美無關

那么，如果斜面、漸變和陰影只是因人而異的東西，到底什么才是一項好的設計呢？不論你是否要用扁平化的審美，用戶界面的關鍵都在于規(guī)劃。我想扁平化的設計能夠讓人更加輕松的識別出一項好的設計，因為在設計與功能之間雜七雜八的東西更少。

 下面是一些不錯的用戶界面設計建議：

一致性

使用通用的UI元素和樣式可以幫助用戶減少對產品的困惑，從而讓應用的使用更加簡單。

對比

可點擊的元素應該與不可點擊的元素形成對比。例如可以使用顏色、大小、位置和樣式等方法進行對比。

布局

使用基于960g布局的網格是為你的設計界定某些視覺指導原則的好方法。你的眼睛會自然地跟隨內容所建立起的線條和比率移動，因此，了解和使用網格是強化視覺平衡的好方法。

層級

我更傾向于把這一點看作是“用戶操作”。關于這一點我有一肚子話可說，總之，把最常見的用戶操作（有時也稱為用例）放在顯眼位置同時把不常見的操作隱藏起來是簡化界面，讓產品更加易用的絕佳方法。重要的東西要顯眼，這是一條通用的規(guī)則。

“根據我的經驗，扁平化還是“現實化”并不重要。重要的是讓用戶一眼就能看明白應用的層級，并能夠輕松找到下一個可以操作的對象?！?nbsp;

~ Caroline Keem (writer)

目標受眾
不同的目標受眾會傾向于不同的審美風格。例如，建筑師、設計師和關注時尚的受眾可能會簇擁扁平化設計，而孩子、小丑等其他人可能喜歡比較好玩的材質和顏色。

反饋

在進行點擊時，快速、明確的反饋很重要。動畫通常是提供視覺反饋的好方法。例如，在點擊某個對象后旋轉加載圖標。有關于反饋我要說的另外一點是，需要在恰當的時機提供吸引人并且內容翔實的幫助和狀態(tài)信息。

減少阻力

一般來說，減少用戶實現某項目標期間的操作步驟可以打造更加流暢的體驗。任何打斷或額外的步驟都會降低產品的用戶轉化率。

鼓勵探索

在用戶結束對界面的最基本使用后，應該在他們進一步探索后給他們展現其預期的效果作為其自主探索的獎勵。

線框圖

如果你想打造一套有效的扁平化設計，那么我還想再強調一次線框圖和規(guī)劃的重要性。確定最常見的用例，寫下來，然后反復修改線框圖直到一切完美。我個人喜歡在紙上做，但是現在也有很多不錯的線框圖工具。

“扁平化設計有著自己的位置，但是也不要忘記其只不過是眾多設計美學中的一種。光澤化設計、扁平化設計、啞光設計、木質感設計等等，都只是放置在優(yōu)秀信息結構和交互設計之上的樣式而已。

~ Mike Cuesta (carecloud)