2014-11-10 周周
“扁平化設(shè)計(jì)”的使用正逐漸成為網(wǎng)頁(yè)和UI設(shè)計(jì)近期的大趨勢(shì)，同時(shí)也是時(shí)下的一個(gè)熱門話題，各種探討和學(xué)習(xí)研究紛至沓來(lái)。鑒于我本身一直鐘情于極簡(jiǎn)主義，所以扁平化設(shè)計(jì)中的美學(xué)對(duì)我極有啟發(fā)，特別是在近期對(duì)QuoteRobot（我在2010年與他人共同完成的一個(gè)提案書寫應(yīng)用）進(jìn)行重新設(shè)計(jì)時(shí)。
在本篇文章中，我將與大家探討什么是扁平化設(shè)計(jì)，并審視其他設(shè)計(jì)師對(duì)扁平化設(shè)計(jì)的看法，然后為大家提供一些能用于自己設(shè)計(jì)工作的小建議。
什么是扁平化設(shè)計(jì)？
從實(shí)踐角度說(shuō)，扁平化設(shè)計(jì)就是指不采用近幾年流行的漸變、像素完美陰影和擬物化方法（在后面的部分會(huì)詳細(xì)介紹）實(shí)現(xiàn)“扁平化”的界面。
Layervault的Allen Grinshtein也許算得上是“扁平化設(shè)計(jì)”一詞的始作俑者。他曾在HackerNews上大為流行的一篇文章中說(shuō)道：
“Web端上廣受喜愛(ài)的產(chǎn)品都有著相似的設(shè)計(jì)審美，它們的斜面、插入陰影和投影都大致相同。對(duì)于設(shè)計(jì)師，達(dá)到這種讓人“垂涎”的界面水平也許值得驕傲。但是對(duì)我們，以及作為少數(shù)存在的UI設(shè)計(jì)師來(lái)說(shuō)，這就大錯(cuò)特錯(cuò)了。”
~ Allan Grinshtein (Layervault)
以Layervault為例，其設(shè)計(jì)的美妙之處在于簡(jiǎn)約，并且摒棄了我們作為設(shè)計(jì)師拼命想達(dá)到的很多額外的設(shè)計(jì)細(xì)節(jié)。我們當(dāng)下奉為UI設(shè)計(jì)潮流，并廣為使用的各種漸變和風(fēng)格正在潛移默化的發(fā)生著改變，而對(duì)這一潮流的學(xué)習(xí)和研究將充滿著趣味。
扁平化設(shè)計(jì)范例
在Squarespace的新版本中，設(shè)計(jì)師選用了一套近乎完全扁平化的界面。想來(lái)他們一定在線框圖和UI上花費(fèi)了大量的時(shí)間，盡管設(shè)計(jì)過(guò)程如此復(fù)雜，但導(dǎo)航卻十分簡(jiǎn)單。
我自己雖然從來(lái)沒(méi)用過(guò)LayerVault，但根據(jù)我的觀察，其的扁平化UI很簡(jiǎn)單易用。
Facebook一直是扁平化設(shè)計(jì)審美的簇?fù)碚摺鋬H在近期才剛剛開(kāi)始使用少量的斜面。
“Facebook是界面向扁平化發(fā)展的一個(gè)完美范例。其主要的操作按鈕雖然還留有少量的斜面，但大量的二級(jí)操作都已經(jīng)完全扁平化。鑒于他們一直沒(méi)有再修改界面樣式，這種方法肯定是成功的。”
~ Ian Storm Taylor (Segment.io)
盡管Facebook近些年因?yàn)轭l繁修改界面而備受批評(píng)，但扁平化仍然是互聯(lián)網(wǎng)上使用最多的網(wǎng)站樣式，想來(lái)大眾的口味是不會(huì)錯(cuò)的。
的Rdio界面也采用了扁平化和極簡(jiǎn)主義風(fēng)格，并幾乎完全拋棄了陰影、漸變甚至彩色。
我有幸曾為Nest的前端代碼做過(guò)一些小的貢獻(xiàn)，并被他們推出的扁平化審美完全吸引住了。這些簇?fù)肀馄交O(shè)計(jì)的設(shè)計(jì)師對(duì)這一風(fēng)格還確實(shí)熱情滿滿。
“…作為交互設(shè)計(jì)師——我們應(yīng)該熱衷于自己所使用的方法，并堅(jiān)決拒絕擬物化和投影一類我們已經(jīng)深陷其中的玩意。”
~ Daniel Howell (Howells)
抵制擬物化
正如20世紀(jì)建筑界的極簡(jiǎn)主義運(yùn)動(dòng)強(qiáng)烈抵制先前幾個(gè)世紀(jì)的建筑裝飾主義一樣，扁平化設(shè)計(jì)審美也可能成為對(duì)多年來(lái)網(wǎng)站和界面過(guò)度設(shè)計(jì)或過(guò)渡修飾的抵制運(yùn)動(dòng)。其中最常見(jiàn)的一個(gè)例子，就是Apple近年來(lái)飽受詬病的過(guò)度使用擬物化。
Apple因在日歷應(yīng)用中過(guò)度使用皮革材質(zhì)而備受設(shè)計(jì)師的批評(píng)。
維基百科將擬物化定義為：
對(duì)原產(chǎn)品設(shè)計(jì)中因功能性而存在的設(shè)計(jì)要素進(jìn)行模仿，并使之成為新設(shè)計(jì)中裝飾性元素的一種產(chǎn)品設(shè)計(jì)元素。
舉例來(lái)說(shuō)，我們經(jīng)常對(duì)用做按鈕的元素應(yīng)用漸變和投影效果，因?yàn)檎鎸?shí)世界中的按鈕就具有這些屬性，但在計(jì)算機(jī)用戶界面環(huán)境中實(shí)際上這些屬性并非必要。
“一個(gè)天氣類應(yīng)用使用玻璃溫度計(jì)的圖片，這就是擬物化：玻璃在原始環(huán)境（真實(shí)世界的溫度計(jì)）下是必要的，但在新的設(shè)計(jì)中卻純粹是個(gè)裝飾。”
在日歷應(yīng)用上使用皮革材質(zhì)是否真的必要？同樣，對(duì)按鈕應(yīng)用漸變和3d邊緣是否真的必要？難道不這樣用戶就不知道去點(diǎn)按鈕了嗎？裝飾到什么程度算是必要？沒(méi)有裝飾就不行了嗎？
“真實(shí)生活中，人在按按鈕時(shí)會(huì)感覺(jué)到彈性，但是在手機(jī)或者屏幕上卻沒(méi)有這種物理的反饋。雖然在你腦中能夠想象這種物理性，但在擬物化的現(xiàn)實(shí)中它并不真實(shí)存在。所以說(shuō)，或者至少對(duì)我來(lái)說(shuō)，擬物化在這一方面并不能達(dá)到期望的高度，這讓我很失望。”
~ Allan Yu (svpply / eBay)
因此，扁平化設(shè)計(jì)完全可以成為對(duì)界面設(shè)計(jì)濫用裝飾的抵制，正如極簡(jiǎn)主義抵制過(guò)去華而不實(shí)的豪華建筑風(fēng)格。
功能決定形式，擁抱扁平化
20世紀(jì)建筑界的極簡(jiǎn)主義運(yùn)動(dòng)還產(chǎn)生了一些我們至今仍津津樂(lè)道的設(shè)計(jì)名言，例如“功能決定形式”、“少即是多”等等。同樣，雕塑家米開(kāi)朗基羅在談到自己如何塑造其標(biāo)志性的大衛(wèi)像時(shí)，也有一句名言讓我大愛(ài)：
“很簡(jiǎn)單。只要去掉看起來(lái)不像大衛(wèi)的石頭就行了。”
~ Michaelangelo)
具體運(yùn)用到用戶界面設(shè)計(jì)中，這通常就是說(shuō)要去掉讓界面貼近真實(shí)生活的內(nèi)容。37signals的團(tuán)隊(duì)因在其產(chǎn)品（如Basecamp）中運(yùn)用這一原則而名聲大振（而且大獲成功）。在扁平化設(shè)計(jì)界，“少即是多”是絕對(duì)的真理。為了表現(xiàn)出扁平化設(shè)計(jì)的美感，設(shè)計(jì)師必須注重于對(duì)象的功能，而不是外觀。這是關(guān)鍵，也是線框圖對(duì)設(shè)計(jì)流程如此重要的原因所在。
審美因人而異
在寫這篇文章前的調(diào)研過(guò)程中，我?guī)缀鯖](méi)找到任何科學(xué)論斷來(lái)支持屏幕上的按鈕越真實(shí)就越顯得“可點(diǎn)”這一說(shuō)法。雖然有很多證據(jù)為對(duì)比、顏色理論和層級(jí)理論提供支持，但我敢肯定的說(shuō)，一個(gè)扁平化的橙色按鈕和一個(gè)斜面橙色按鈕放到恰當(dāng)?shù)谋尘跋滦Ч耆粫?huì)有差別。下面是一些其他設(shè)計(jì)師的看法：
“這就跟T臺(tái)的流行趨勢(shì)一樣——流行起來(lái)大家就都跟風(fēng)，但是作為一名設(shè)計(jì)師，你恰恰需要避免這個(gè)。”
~ Cemre Güng?r (Branch)
“說(shuō)擬物化設(shè)計(jì)差勁，就像說(shuō)紫色很丑或者橢圓不適合web應(yīng)用一樣，完全沒(méi)意義的話。”
~ Sacha Greif
“為什么要在沒(méi)有證據(jù)的情況下大肆宣傳某個(gè)設(shè)計(jì)美學(xué)優(yōu)于其他美學(xué)？難道說(shuō)為了提高美觀就可以降低使用性嗎？”
~ Geoff Stearns (formerly YouTube)
好設(shè)計(jì)就是好設(shè)計(jì)，跟審美無(wú)關(guān)
那么，如果斜面、漸變和陰影只是因人而異的東西，到底什么才是一項(xiàng)好的設(shè)計(jì)呢？不論你是否要用扁平化的審美，用戶界面的關(guān)鍵都在于規(guī)劃。我想扁平化的設(shè)計(jì)能夠讓人更加輕松的識(shí)別出一項(xiàng)好的設(shè)計(jì)，因?yàn)樵谠O(shè)計(jì)與功能之間雜七雜八的東西更少。
下面是一些不錯(cuò)的用戶界面設(shè)計(jì)建議：
一致性
使用通用的UI元素和樣式可以幫助用戶減少對(duì)產(chǎn)品的困惑，從而讓應(yīng)用的使用更加簡(jiǎn)單。
對(duì)比
可點(diǎn)擊的元素應(yīng)該與不可點(diǎn)擊的元素形成對(duì)比。例如可以使用顏色、大小、位置和樣式等方法進(jìn)行對(duì)比。
布局
使用基于960g布局的網(wǎng)格是為你的設(shè)計(jì)界定某些視覺(jué)指導(dǎo)原則的好方法。你的眼睛會(huì)自然地跟隨內(nèi)容所建立起的線條和比率移動(dòng)，因此，了解和使用網(wǎng)格是強(qiáng)化視覺(jué)平衡的好方法。
層級(jí)
我更傾向于把這一點(diǎn)看作是“用戶操作”。關(guān)于這一點(diǎn)我有一肚子話可說(shuō)，總之，把最常見(jiàn)的用戶操作（有時(shí)也稱為用例）放在顯眼位置同時(shí)把不常見(jiàn)的操作隱藏起來(lái)是簡(jiǎn)化界面，讓產(chǎn)品更加易用的絕佳方法。重要的東西要顯眼，這是一條通用的規(guī)則。
“根據(jù)我的經(jīng)驗(yàn)，扁平化還是“現(xiàn)實(shí)化”并不重要。重要的是讓用戶一眼就能看明白應(yīng)用的層級(jí)，并能夠輕松找到下一個(gè)可以操作的對(duì)象。”
~ Caroline Keem (writer)
目標(biāo)受眾
不同的目標(biāo)受眾會(huì)傾向于不同的審美風(fēng)格。例如，建筑師、設(shè)計(jì)師和關(guān)注時(shí)尚的受眾可能會(huì)簇?fù)肀馄交O(shè)計(jì)，而孩子、小丑等其他人可能喜歡比較好玩的材質(zhì)和顏色。
反饋
在進(jìn)行點(diǎn)擊時(shí)，快速、明確的反饋很重要。動(dòng)畫通常是提供視覺(jué)反饋的好方法。例如，在點(diǎn)擊某個(gè)對(duì)象后旋轉(zhuǎn)加載圖標(biāo)。有關(guān)于反饋我要說(shuō)的另外一點(diǎn)是，需要在恰當(dāng)?shù)臅r(shí)機(jī)提供吸引人并且內(nèi)容翔實(shí)的幫助和狀態(tài)信息。
減少阻力
一般來(lái)說(shuō)，減少用戶實(shí)現(xiàn)某項(xiàng)目標(biāo)期間的操作步驟可以打造更加流暢的體驗(yàn)。任何打斷或額外的步驟都會(huì)降低產(chǎn)品的用戶轉(zhuǎn)化率。
鼓勵(lì)探索
在用戶結(jié)束對(duì)界面的最基本使用后，應(yīng)該在他們進(jìn)一步探索后給他們展現(xiàn)其預(yù)期的效果作為其自主探索的獎(jiǎng)勵(lì)。
線框圖
如果你想打造一套有效的扁平化設(shè)計(jì)，那么我還想再?gòu)?qiáng)調(diào)一次線框圖和規(guī)劃的重要性。確定最常見(jiàn)的用例，寫下來(lái)，然后反復(fù)修改線框圖直到一切完美。我個(gè)人喜歡在紙上做，但是現(xiàn)在也有很多不錯(cuò)的線框圖工具。
“扁平化設(shè)計(jì)有著自己的位置，但是也不要忘記其只不過(guò)是眾多設(shè)計(jì)美學(xué)中的一種。光澤化設(shè)計(jì)、扁平化設(shè)計(jì)、啞光設(shè)計(jì)、木質(zhì)感設(shè)計(jì)等等，都只是放置在優(yōu)秀信息結(jié)構(gòu)和交互設(shè)計(jì)之上的樣式而已。
~ Mike Cuesta (carecloud)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn