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

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

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

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

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

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

~ Allan Grinshtein (Layervault)

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

扁平化設(shè)計(jì)范例

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

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

Facebook一直是扁平化設(shè)計(jì)審美的簇?fù)碚摺鋬H在近期才剛剛開始使用少量的斜面。

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

~ Ian Storm Taylor (Segment.io)

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

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

我有幸曾為Nest的前端代碼做過一些小的貢獻(xiàn)，并被他們推出的扁平化審美完全吸引住了。這些簇?fù)肀馄交O(shè)計(jì)的設(shè)計(jì)師對這一風(fēng)格還確實(shí)熱情滿滿。

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

~ Daniel Howell (Howells)

抵制擬物化

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

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

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

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

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

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

~ Sacha Greif

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

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

~ Allan Yu (svpply / eBay)

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

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

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

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

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

審美因人而異

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

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

~ Cemre Güng?r (Branch)

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

~ Sacha Greif

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

~ Geoff Stearns (formerly YouTube)

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

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

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

一致性

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

對比

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

布局

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

層級

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

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

~ Caroline Keem (writer)

目標(biāo)受眾
不同的目標(biāo)受眾會傾向于不同的審美風(fēng)格。例如，建筑師、設(shè)計(jì)師和關(guān)注時(shí)尚的受眾可能會簇?fù)肀馄交O(shè)計(jì)，而孩子、小丑等其他人可能喜歡比較好玩的材質(zhì)和顏色。

反饋

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

減少阻力

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

鼓勵探索

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

線框圖

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

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

~ Mike Cuesta (carecloud)