扁平化設(shè)計(jì)美學(xué)

最近一個(gè)在網(wǎng)頁(yè)和UI設(shè)計(jì)上逐漸增長(zhǎng)的趨勢(shì)是“扁平化設(shè)計(jì)”的使用，而且現(xiàn)在已經(jīng)是一個(gè)非常熱門(mén)的話題了。滿大街的現(xiàn)場(chǎng)討論會(huì)以及大量的教程。我常常被吸引到極簡(jiǎn)主義設(shè)計(jì)中，所以扁平化設(shè)計(jì)是一種很自然的給我啟發(fā)的設(shè)計(jì)美學(xué)，特別是在最近的一個(gè)項(xiàng)目的重新設(shè)計(jì)中。

在本文中，我將討論下什么是扁平化設(shè)計(jì)、回顧其它設(shè)計(jì)方式，并提供如何在你自己的設(shè)計(jì)中實(shí)現(xiàn)的一些技巧。

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

實(shí)際上，扁平化設(shè)計(jì)意味著在設(shè)計(jì)中不使用常用的漸變、像素完美的陰影，然后通常是近年來(lái)蔓延的用來(lái)實(shí)現(xiàn)看起來(lái)“平面”的用戶界面。

Layervault的Allen Grinshtein或許最初定義了“扁平化設(shè)計(jì)”。在一篇發(fā)表于HackerNews的文章中，他說(shuō)：

“網(wǎng)頁(yè)中廣受歡迎的產(chǎn)品通常都有一些類(lèi)似的設(shè)計(jì)美學(xué)，比如一些立體、內(nèi)陰影、外陰影等。對(duì)設(shè)計(jì)師來(lái)說(shuō)，他們會(huì)以實(shí)現(xiàn)這種“媚俗”的界面而感到自豪。但對(duì)我們，對(duì)其它的少數(shù)設(shè)計(jì)師來(lái)說(shuō)，這樣做很2。。。“
~ Allan Grinshtein (Layervault)

如果你去看Layervault，它的美在于其簡(jiǎn)潔，甚至沒(méi)有任何我們作為設(shè)計(jì)師常常會(huì)去挖空心思實(shí)現(xiàn)的額外的細(xì)節(jié)設(shè)計(jì)。了解和琢磨作為當(dāng)前趨勢(shì)來(lái)使用的漸變和其它樣式是件蠻有趣的事情，這些慢慢在變化~~

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

在新版Squarespace網(wǎng)站中，他們選擇了一個(gè)幾乎完全扁平的界面, 你可以估算出它們花在原型和設(shè)計(jì)UI上的時(shí)間，這個(gè)界面相當(dāng)復(fù)雜，但是卻非常易用。

盡管我只看過(guò)而從來(lái)沒(méi)有自己用過(guò)LayerVault，新的扁平化UI看起來(lái)真的很簡(jiǎn)潔易用。

Facebook幾乎一直擁抱扁平化設(shè)計(jì)美學(xué)——只是最近才加入一些輕微的立體化。

“Facebook是一個(gè)扁平化設(shè)計(jì)趨勢(shì)的完美例子。它們的主要操作按鈕依然使用輕微的立體化，但大量的次要按鈕采用了完全的扁平化設(shè)計(jì)。而且依據(jù)事實(shí)判斷，它們從未改變過(guò)界面風(fēng)格，它一直是這樣的。“
~ Ian Storm Taylor (Segment.io)

盡管它們?cè)谶^(guò)去這些年一直被批判要大改它們的界面，它依然是網(wǎng)上被使用最多的網(wǎng)站之一，嗯，用戶是不會(huì)錯(cuò)的。。。

最新的Rdio的界面亦是如此扁平和極簡(jiǎn)，它幾乎完全沒(méi)有陰影、漸變、甚至是顏色。。。

在Nest上線之前，我很高興為它貢獻(xiàn)了一點(diǎn)兒前端代碼，我被它所展現(xiàn)出的扁平化美學(xué)給迷倒了。
擁抱扁平化設(shè)計(jì)的設(shè)計(jì)師們真的是發(fā)自內(nèi)心的迷戀它了。

“…作為交互設(shè)計(jì)師——我們應(yīng)該在我們的工作中擁抱這種方法，并堅(jiān)定的避開(kāi)我們身處的擬物化、陰影的泥淖?！?br>~ Daniel Howell (Howells)

對(duì)擬物化設(shè)計(jì)的挑戰(zhàn)

就像上個(gè)世紀(jì)在建筑領(lǐng)域極簡(jiǎn)主義運(yùn)動(dòng)對(duì)過(guò)度裝修的沖擊，扁平化設(shè)計(jì)可能是一個(gè)對(duì)已經(jīng)被使用多年的過(guò)度設(shè)計(jì)、或者過(guò)于花哨的網(wǎng)站和界面的一個(gè)顛覆。一個(gè)典型的例子就是最近人們批判Apple的擬物化設(shè)計(jì)的過(guò)度使用。

Apple收到了大量的來(lái)自于設(shè)計(jì)師對(duì)其在日歷app中大量使用無(wú)用的皮革材質(zhì)的批判。

Wikipedia 這樣定義擬物化:

一個(gè)產(chǎn)品的設(shè)計(jì)元素模仿其在原始產(chǎn)品設(shè)計(jì)中是必要功能，但是在新的設(shè)計(jì)中變?yōu)檠b飾的設(shè)計(jì)元素

比如，我們通常給元素用上漸變和陰影以至于看起來(lái)像按鈕，因?yàn)楝F(xiàn)實(shí)世界中按鈕大都帶有特性，盡管它們?cè)陔娔X用戶界面的設(shè)置中是不必要的。

“所以一個(gè)使用玻璃溫度計(jì)圖片的天氣app就是擬物化：玻璃在原來(lái)（現(xiàn)實(shí)中的溫度計(jì)）是必要的，而在新設(shè)計(jì)中變?yōu)橥耆难b飾。“
~ Sacha Greif

在日歷APP中使用皮革元素是否真的有必要呢？同樣的，用漸變和立體邊角來(lái)設(shè)計(jì)按鈕是否也真的有必要？或者用戶知道去點(diǎn)擊它們么？有多少裝飾是必須的？有么？

“在現(xiàn)實(shí)世界中，當(dāng)一個(gè)按鈕按下，你能感受到它的彈性和彈力，但是在手機(jī)或者屏幕上，有物理上反饋的先天不足。你的意識(shí)知道物理性的存在而擬物化沒(méi)有。所以至少對(duì)我來(lái)說(shuō)，它事實(shí)上沒(méi)有達(dá)到預(yù)期和讓我失望的時(shí)刻。”
~ Allan Yu (svpply / eBay)

所以，扁平化設(shè)計(jì)可能是在界面設(shè)計(jì)中裝飾被過(guò)度使用的一種顛覆，就和過(guò)去極簡(jiǎn)主義是華而不實(shí)的裝飾風(fēng)格的一種顛覆一樣。

形式遵循功能，擁抱扁平化

20世紀(jì)建筑領(lǐng)域的極簡(jiǎn)主義運(yùn)動(dòng)中，一些偉大的設(shè)計(jì)引用我們今天依然在談?wù)摰摹靶问礁S功能(form follow function)”和“少即是多(less is more)”的理念。簡(jiǎn)單的來(lái)說(shuō)，我喜歡這句來(lái)自雕刻家Michaelangelo(米開(kāi)朗其羅)在被問(wèn)道它是如何創(chuàng)造標(biāo)志性的大衛(wèi)雕像的時(shí)候說(shuō)到的話。

“很簡(jiǎn)單，你就削掉那些看起來(lái)不像大衛(wèi)的石頭就好了。“
~ Michaelangelo)

在用戶界面設(shè)計(jì)，常常去掉真正將界面帶入生活的那些東西。37signals的團(tuán)隊(duì)因?yàn)閼?yīng)用這個(gè)理念到它們的產(chǎn)品中——比如BaseCamp——而臭名昭著（但也很成功）。在扁平化設(shè)計(jì)的世界中，少，真的是多。

為了實(shí)現(xiàn)扁平化設(shè)計(jì)美學(xué)，我們?cè)O(shè)計(jì)師必須專(zhuān)注于產(chǎn)品是干嘛的，而不是它們要看起來(lái)像什么。這是關(guān)鍵，也是線框?qū)υO(shè)計(jì)流程至關(guān)重要的原因。

美學(xué)是看法的問(wèn)題

在我關(guān)于這篇文章的研究中，幾乎沒(méi)發(fā)現(xiàn)任何科學(xué)研究關(guān)于屏幕上的按鈕看起來(lái)更像按鈕實(shí)際上會(huì)更可點(diǎn)擊。倒是有大量的證據(jù)支持對(duì)比度、色彩、層級(jí)，但是我愿意打賭在一個(gè)適當(dāng)?shù)纳舷挛闹?，一個(gè)橙色的扁平化按鈕會(huì)像一個(gè)立體的橙色按鈕一樣有效。這里有一些來(lái)自于其它設(shè)計(jì)師的觀點(diǎn)。

“這和跑道時(shí)尚(runway fashion)并無(wú)二異——每個(gè)人都開(kāi)始做同樣的事情，當(dāng)它到處都是時(shí)，要突出出來(lái)成為設(shè)計(jì)師，你就必須反其道而行。“
~ Cemre Güng?r (Branch)

“說(shuō)“擬物化是壞設(shè)計(jì)”就像說(shuō)“紫色是一個(gè)骯臟的顏色”或者“在Web app中沒(méi)有橢圓的地兒”。它沒(méi)有任何意義?！?br>~ Sacha Greif

“為什么推廣某種設(shè)計(jì)理念在別的理念之上而不去證明你推崇的真的更好呢？難道更好看比可能降低可用性更有價(jià)值？“
~ Geoff Stearns (formerly YouTube)

好設(shè)計(jì)就是好設(shè)計(jì)，無(wú)關(guān)美學(xué)思想

那么，如果立體、漸變、陰影只是看法的問(wèn)題，那么如何實(shí)現(xiàn)一個(gè)好的設(shè)計(jì)？無(wú)論你是否要使用扁平化設(shè)計(jì)，用戶界面和規(guī)劃相關(guān)。我相信扁平化設(shè)計(jì)使得識(shí)別一個(gè)偉大的設(shè)計(jì)更加簡(jiǎn)單，因?yàn)樵谠O(shè)計(jì)和它如何工作之間少了很多干擾。

這里是一些關(guān)于偉大的界面設(shè)計(jì)的一些技巧：

• 一致性

  通過(guò)使用通用的UI元素和樣式，你可以幫助用戶了解什么是可以期待的，然后使得更容易使用你的應(yīng)用。

• 對(duì)比

  可點(diǎn)擊元素和非可點(diǎn)擊元素之間要有適當(dāng)?shù)膶?duì)比。這可以通過(guò)顏色、大小、位置以及樣式來(lái)實(shí)現(xiàn)。

• 布局

  使用一個(gè)網(wǎng)格布局，比如960gs，是為你的設(shè)計(jì)建立一些可視的指南的好的方法。視線會(huì)自然的準(zhǔn)從由內(nèi)容創(chuàng)建的線條和比例，所以理解和使用一個(gè)網(wǎng)格是一個(gè)強(qiáng)化視覺(jué)平衡的好辦法。

• 層級(jí)

  我更傾向于將此理解為“用戶行為”，我會(huì)寫(xiě)一篇關(guān)于這個(gè)話題的文章，但是實(shí)現(xiàn)最通用的用戶行為(有時(shí)被稱(chēng)為用例)容易發(fā)現(xiàn)，而去掉不太通用的行為是簡(jiǎn)化用戶界面從而使它更好用的好方法。作為通用準(zhǔn)則，最重要的要比不太重要的更醒目。

我的經(jīng)驗(yàn)是，扁平的或者逼真的沒(méi)什么關(guān)系，重要的是，層級(jí)在快速瀏覽以及用戶方便的找到下一個(gè)操作中很重要。

作者: 神飛
愛(ài)好前端設(shè)計(jì)與開(kāi)發(fā)，崇尚一目了然的設(shè)計(jì)?，F(xiàn)居深圳，就職于騰訊ISUX團(tuán)隊(duì) Follow me on twitter@qianduan。