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

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

什么是扁平化設(shè)計？

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

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

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

~ Allan Grinshtein (Layervault)

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

扁平化設(shè)計范例

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

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

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

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

~ Ian Storm Taylor (Segment.io)

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

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

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

“…作為交互設(shè)計師——我們應(yīng)該熱衷于自己所使用的方法，并堅決拒絕擬物化和投影一類我們已經(jīng)深陷其中的玩意。”

~ Daniel Howell (Howells)

抵制擬物化

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

Apple因在日歷應(yīng)用中過度使用皮革材質(zhì)而備受設(shè)計師的批評。

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

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

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

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

~ Sacha Greif

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

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

~ Allan Yu (svpply / eBay)

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

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

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

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

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

審美因人而異

在寫這篇文章前的調(diào)研過程中，我?guī)缀鯖]找到任何科學論斷來支持屏幕上的按鈕越真實就越顯得“可點”這一說法。雖然有很多證據(jù)為對比、顏色理論和層級理論提供支持，但我敢肯定的說，一個扁平化的橙色按鈕和一個斜面橙色按鈕放到恰當?shù)谋尘跋滦Ч耆粫胁顒e。下面是一些其他設(shè)計師的看法：

“這就跟T臺的流行趨勢一樣——流行起來大家就都跟風，但是作為一名設(shè)計師，你恰恰需要避免這個?！?/p>

~ Cemre Güng?r (Branch)

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

~ Sacha Greif

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

~ Geoff Stearns (formerly YouTube)

好設(shè)計就是好設(shè)計，跟審美無關(guān)

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

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

一致性

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

對比

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

布局

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

層級

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

“根據(jù)我的經(jīng)驗，扁平化還是“現(xiàn)實化”并不重要。重要的是讓用戶一眼就能看明白應(yīng)用的層級，并能夠輕松找到下一個可以操作的對象。” 

~ Caroline Keem (writer)

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

反饋

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

減少阻力

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

鼓勵探索

在用戶結(jié)束對界面的最基本使用后，應(yīng)該在他們進一步探索后給他們展現(xiàn)其預期的效果作為其自主探索的獎勵。

線框圖

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

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

~ Mike Cuesta (carecloud)