2015-11-9 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( m.ocunn.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
來(lái)源：莫貝網(wǎng)
扁平化設(shè)計(jì)從2012年開(kāi)始風(fēng)行，直到今天仍是炙手可熱。然凡事過(guò)猶不及，在某些時(shí)候這種風(fēng)格會(huì)造成嚴(yán)重的可用性問(wèn)題。其中之一便是行動(dòng)按鈕的可見(jiàn)性缺失。扁平化2.0則能為我們解決這類(lèi)問(wèn)題，今天從可用性角度幫大家重新梳理一下從擬物化到扁平化2.0的變遷歷史。
何謂扁平化設(shè)計(jì)？光澤、三維視覺(jué)效果不俱存的圖形元素便是。很多設(shè)計(jì)師都傾向于把它當(dāng)做極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)分支。
在明確扁平化設(shè)計(jì)之前，我們先來(lái)看一下有哪些元素是和其絕緣的。扁平化設(shè)計(jì)通常被認(rèn)為是和那些立體效果、擬物化設(shè)計(jì)和現(xiàn)實(shí)主義唱反調(diào)的一種風(fēng)格。在一個(gè)純粹的扁平化設(shè)計(jì)里你絕不會(huì)見(jiàn)到上述元素。
立體效果能在界面上制造深淺不一的感覺(jué)，這能幫助用戶(hù)理解視覺(jué)層級(jí)以及哪些元素是可以互動(dòng)的。
上浮的元素看上去就好像是可以被按下去的（用鼠標(biāo)）。這種設(shè)計(jì)通常被應(yīng)用在按鍵上。
下陷的元素看起來(lái)就好像能夠被填塞。這通常被應(yīng)用在輸入框里，比如搜索框。
鑒于早期的圖形化用戶(hù)界面中，立體效果被大肆用在所有地方，這還包含了陰影、漸變和高光等一系列的效果，其目的是為了讓用戶(hù)能第一眼就識(shí)別出行動(dòng)按鍵。然而，早期的GUI把這些偽3D效果應(yīng)用得太過(guò)火了，在視覺(jué)上造成了相當(dāng)?shù)母蓴_，并極富侵略性。
Windows 95的對(duì)話(huà)窗口使用了大量的陰影和高光來(lái)創(chuàng)建3D效果（注意這些按鍵的上凸和輸入框的下凹）。同時(shí)我們也能清晰地看到上方的三個(gè)tab中哪個(gè)蓋在最上面。然而，過(guò)量的陰影很容易讓界面從視覺(jué)角度失去吸引力。
在數(shù)碼設(shè)計(jì)中，擬物化設(shè)計(jì)就是那些模仿現(xiàn)實(shí)世界事物“非必要”及“裝飾性”的設(shè)計(jì)特征。擬物化設(shè)計(jì)是為了利用用戶(hù)于現(xiàn)實(shí)世界的慣性思維來(lái)快速理解如何使用一個(gè)全新的界面。
早期的亞馬遜Kindle Fire平板電腦，使用了擬物化的書(shū)架設(shè)計(jì)，可以看到其中形似立體書(shū)柜的背景和木質(zhì)的紋理。如此隱喻能幫助用戶(hù)把他們對(duì)現(xiàn)實(shí)生活中書(shū)架的理解（可以存放、 整理書(shū)籍）沿襲到虛擬情境中。雖然這個(gè)架子和木質(zhì)紋理的設(shè)計(jì)與系統(tǒng)的功能性毫無(wú)關(guān)聯(lián)，卻能強(qiáng)化該隱喻。不過(guò)亞馬遜在之后的UI版本中剔除了擬物化的書(shū)架設(shè) 計(jì)。
現(xiàn)實(shí)主義是一種以藝術(shù)的角度模仿現(xiàn)實(shí)事物或紋理的設(shè)計(jì)風(fēng)格。
它通常和擬物化設(shè)計(jì)被混為一談。其主要的區(qū)別在于擬物化設(shè)計(jì)提供隱喻的方式幫助用戶(hù)理解界面，而現(xiàn)實(shí)主義是一種純粹以美學(xué)目的利用設(shè)計(jì)元素和紋理來(lái)模仿現(xiàn)實(shí)事物的視覺(jué)風(fēng)格。
就像早期的Kindle Fire平板電腦一樣，Sprouts的網(wǎng)站也使用了立體木紋設(shè)計(jì)。然而，這種現(xiàn)實(shí)主義的設(shè)計(jì)只是為了讓其在美學(xué)上具備吸引力，而非包含任何幫助用戶(hù)理解如何使用該界面的隱喻，它也沒(méi)有去刻意模仿現(xiàn)實(shí)世界中的任何事物。
2011年微軟的Metro設(shè)計(jì)語(yǔ)言和Windows8的推出對(duì)扁平化的推廣起到了推波助瀾的作用。微軟的設(shè)計(jì)文檔把它的新設(shè)計(jì)風(fēng)格稱(chēng)為“authentically digital”—— 一下讓大量設(shè)計(jì)師抓住了扁平設(shè)計(jì)的精髓。與擬物化設(shè)計(jì)不同，扁平化設(shè)計(jì)并不需要借助復(fù)制現(xiàn)實(shí)事物的外形，這對(duì)于很多人來(lái)說(shuō)是一種全新的設(shè)計(jì)語(yǔ)言。
從蘋(píng)果網(wǎng)站的逐漸扁平化就能窺探到這個(gè)設(shè)計(jì)風(fēng)格的流行程度。擬物化設(shè)計(jì)和現(xiàn)實(shí)主義曾一度是蘋(píng)果設(shè)計(jì)的標(biāo)配，這種堅(jiān)持一直持續(xù)到2013年，然后一切都變了。
來(lái)看看蘋(píng)果2007年時(shí)候的網(wǎng)站，注意那個(gè)帶有高光的立體標(biāo)簽導(dǎo)航欄。
2012年的時(shí)候蘋(píng)果的網(wǎng)站上隱喻的標(biāo)簽導(dǎo)航不復(fù)存在，但仍然采用了高光加圓角的設(shè)計(jì)(注意這是現(xiàn)實(shí)主義而非擬物設(shè)計(jì))。通過(guò)在搜索框里添加陰影讓 它有種凹陷的感覺(jué)，雖然這從視覺(jué)效果上來(lái)說(shuō)確實(shí)要比Windows十七年前的輸入框看起來(lái)優(yōu)雅不少，但它們本質(zhì)上是一樣的。右下角的那幾個(gè)圖標(biāo)采用了非常 夸張的高光處理，或許是為了讓用戶(hù)能一下理解它們各自是做什么的。
蘋(píng)果2015年的主頁(yè)。包括Logo在內(nèi)的整個(gè)導(dǎo)航欄都變得扁平了——無(wú)陰影、無(wú)材質(zhì)、無(wú)高光。沒(méi)有了立體、現(xiàn)實(shí)主義和擬物化的效果。用戶(hù)現(xiàn)在識(shí)別這是個(gè)導(dǎo)航欄的方式是通過(guò)潛移默化的思維定式：一個(gè)置于網(wǎng)頁(yè)頂部的深色條狀物不是導(dǎo)航欄還能是什么？
自從扁平化在2011年面世以來(lái)，Nielsen Norman小組就直言不諱地對(duì)其潛在的可用性問(wèn)題發(fā)出過(guò)質(zhì)疑。我們反對(duì)的主要理由是因?yàn)槲覀冇X(jué)得扁平化設(shè)計(jì)是一種為了迎合流行趨勢(shì)而犧牲用戶(hù)需求的設(shè)計(jì)風(fēng)格。
幾年下來(lái)，用戶(hù)對(duì)傳統(tǒng)的行為按鍵樣式已頗為熟悉，比如帶有下劃線的藍(lán)色文字和立體效果的按鍵等等。設(shè)計(jì)趨勢(shì)的急速扭轉(zhuǎn)帶給用戶(hù)的是一種全新的思維 ——絕大多數(shù)用戶(hù)對(duì)于鏈接元素的直覺(jué)反應(yīng)能力確實(shí)已經(jīng)進(jìn)化，但是他們能更好地理解鏈接元素并不意味著他們完全不需要借助任何線索了。
我詢(xún)問(wèn)了一位22歲加拿大人她是如何知道網(wǎng)站上哪點(diǎn)東西是可以點(diǎn)擊的，她作了如下答復(fù)：
“如果文字是藍(lán)色或者有下劃線的話(huà)可以一下子就反應(yīng)過(guò)來(lái)，Word里不也這么做的嗎？呃下劃線確實(shí)很有幫助，或者按鍵的樣子也可以，沒(méi)有必要標(biāo)注‘點(diǎn)我’這樣的提示文字，如果一定要有，‘現(xiàn)在購(gòu)買(mǎi)’或‘加入購(gòu)物車(chē)’等還是不錯(cuò)的。”
這段回答非常精煉地說(shuō)明了人們借以識(shí)別可點(diǎn)擊元素的視覺(jué)要點(diǎn)：
傳統(tǒng)、外部一致的標(biāo)識(shí)（比如帶有下劃線的藍(lán)色文字、凸起的按鍵等）
一些經(jīng)典的標(biāo)識(shí)（比如帶有下劃線的文字，或者帶有一個(gè)外框的文字）
前后文的線索（比如有意義的文字：購(gòu)買(mǎi)、加入購(gòu)物車(chē)等、頁(yè)面頂端的位置：導(dǎo)航欄、logo居多）
Trader Joe’s的首頁(yè)顯示了一系列的可點(diǎn)擊標(biāo)識(shí)，這包括
1、View All ——帶有下劃線的藍(lán)色文本
2、Find ——紅色背景讓它看起來(lái)就像一個(gè)按鍵
3、在導(dǎo)航欄里的粗黑文字：只能通過(guò)它們的位置和文本信息來(lái)判斷是否可點(diǎn)擊
注意：在產(chǎn)品的輪播圖下還有一個(gè)擬物化設(shè)計(jì)的木質(zhì)架子
如果你的產(chǎn)品要向扁平化方向轉(zhuǎn)變，請(qǐng)遵循我們的《設(shè)計(jì)可識(shí)別點(diǎn)擊元素指南》以確保你不會(huì)讓用戶(hù)產(chǎn)生困惑。
最近，設(shè)計(jì)師們開(kāi)始意識(shí)到了扁平化設(shè)計(jì)的可用性問(wèn)題。對(duì)于扁平化更成熟的新釋義出現(xiàn)了，設(shè)計(jì)師們正在不妥協(xié)于可用性的前提下探索更多的機(jī)遇（此處鼓掌，啪啪啪）。
有時(shí)候這種新思潮被描述為“半扁平”、“近扁平”或“扁平2.0”。這種設(shè)計(jì)風(fēng)格整體上是扁平的，但采用了一些細(xì)微的陰影、高光和圖層來(lái)打造UI的深度。
長(zhǎng)投影，這個(gè)大家可能都挺熟悉了，從2013年開(kāi)始火起來(lái)的。長(zhǎng)投影是扁平2.0走火入魔的一個(gè)例子——這種3D效果只是純粹為了美感而生，并不能為用戶(hù)帶來(lái)任何有價(jià)值的信息。謝天謝地，這種風(fēng)格沒(méi)有興起多大的浪花，但它在圖標(biāo)設(shè)計(jì)領(lǐng)域仍然占據(jù)一席之地。
谷歌的Material design是扁平2.0的一個(gè)正面范例：它使用了借鑒于物理世界的隱喻和理念來(lái)幫助用戶(hù)理解界面并直觀地把內(nèi)容層級(jí)視覺(jué)化。
安卓上的Evernote app可以拿來(lái)看一下，盡管整體上采用了扁平化的風(fēng)格，它在導(dǎo)航欄和浮動(dòng)按鍵上仍使用了一些細(xì)微的陰影。Evernote通過(guò)卡片設(shè)計(jì)賦予其內(nèi)容在3D空間的扁平概念。
正如所有設(shè)計(jì)趨勢(shì)一樣，我們從上平衡和適度。不要為了趕時(shí)髦做出會(huì)犧牲可用性的設(shè)計(jì)決策。務(wù)必牢記除非你是為其它設(shè)計(jì)師設(shè)計(jì)產(chǎn)品，不然你永遠(yuǎn)不應(yīng)把自己幻想為用戶(hù)。你對(duì)于按鍵和鏈接的可見(jiàn)性偏好并不等同于你的用戶(hù)們，不要以為他們和你一樣對(duì)你的設(shè)計(jì)了如指掌。
早期的3D GUI和史蒂夫喬布斯式的擬物化設(shè)計(jì)給人帶來(lái)沉重、雜亂的界面。對(duì)其精簡(jiǎn)確實(shí)可以改善可用性。但是為了實(shí)現(xiàn)純粹的扁平化罔顧元素可見(jiàn)性而肆意刪除視覺(jué)標(biāo)識(shí)的行為只是走下坡路。扁平2.0提供了一個(gè)折中的方案——簡(jiǎn)而不減，這才是我們需要的扁平化。
原文地址：nngroup
譯文地址：jianshu
譯者：勵(lì)定洲
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ocunn.cn