藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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年開始風(fēng)行，直到今天仍是炙手可熱。然凡事過猶不及，在某些時(shí)候這種風(fēng)格會(huì)造成嚴(yán)重的可用性問題。其中之一便是行動(dòng)按鈕的可見性缺失。扁平化2.0則能為我們解決這類問題，今天從可用性角度幫大家重新梳理一下從擬物化到扁平化2.0的變遷歷史。

何謂扁平化設(shè)計(jì)？光澤、三維視覺效果不俱存的圖形元素便是。很多設(shè)計(jì)師都傾向于把它當(dāng)做極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)分支。

立體效果、擬物化設(shè)計(jì)、現(xiàn)實(shí)主義

在明確扁平化設(shè)計(jì)之前，我們先來(lái)看一下有哪些元素是和其絕緣的。扁平化設(shè)計(jì)通常被認(rèn)為是和那些立體效果、擬物化設(shè)計(jì)和現(xiàn)實(shí)主義唱反調(diào)的一種風(fēng)格。在一個(gè)純粹的扁平化設(shè)計(jì)里你絕不會(huì)見到上述元素。

立體效果

立體效果能在界面上制造深淺不一的感覺，這能幫助用戶理解視覺層級(jí)以及哪些元素是可以互動(dòng)的。

上浮的元素看上去就好像是可以被按下去的（用鼠標(biāo)）。這種設(shè)計(jì)通常被應(yīng)用在按鍵上。

下陷的元素看起來(lái)就好像能夠被填塞。這通常被應(yīng)用在輸入框里，比如搜索框。

鑒于早期的圖形化用戶界面中，立體效果被大肆用在所有地方，這還包含了陰影、漸變和高光等一系列的效果，其目的是為了讓用戶能第一眼就識(shí)別出行動(dòng)按鍵。然而，早期的GUI把這些偽3D效果應(yīng)用得太過火了，在視覺上造成了相當(dāng)?shù)母蓴_，并極富侵略性。

Windows 95的對(duì)話窗口使用了大量的陰影和高光來(lái)創(chuàng)建3D效果（注意這些按鍵的上凸和輸入框的下凹）。同時(shí)我們也能清晰地看到上方的三個(gè)tab中哪個(gè)蓋在最上面。然而，過量的陰影很容易讓界面從視覺角度失去吸引力。

擬物化設(shè)計(jì)

在數(shù)碼設(shè)計(jì)中，擬物化設(shè)計(jì)就是那些模仿現(xiàn)實(shí)世界事物“非必要”及“裝飾性”的設(shè)計(jì)特征。擬物化設(shè)計(jì)是為了利用用戶于現(xiàn)實(shí)世界的慣性思維來(lái)快速理解如何使用一個(gè)全新的界面。

早期的亞馬遜Kindle Fire平板電腦，使用了擬物化的書架設(shè)計(jì)，可以看到其中形似立體書柜的背景和木質(zhì)的紋理。如此隱喻能幫助用戶把他們對(duì)現(xiàn)實(shí)生活中書架的理解（可以存放、 整理書籍）沿襲到虛擬情境中。雖然這個(gè)架子和木質(zhì)紋理的設(shè)計(jì)與系統(tǒng)的功能性毫無(wú)關(guān)聯(lián)，卻能強(qiáng)化該隱喻。不過亞馬遜在之后的UI版本中剔除了擬物化的書架設(shè) 計(jì)。

現(xiàn)實(shí)主義

現(xiàn)實(shí)主義是一種以藝術(shù)的角度模仿現(xiàn)實(shí)事物或紋理的設(shè)計(jì)風(fēng)格。

它通常和擬物化設(shè)計(jì)被混為一談。其主要的區(qū)別在于擬物化設(shè)計(jì)提供隱喻的方式幫助用戶理解界面，而現(xiàn)實(shí)主義是一種純粹以美學(xué)目的利用設(shè)計(jì)元素和紋理來(lái)模仿現(xiàn)實(shí)事物的視覺風(fēng)格。

就像早期的Kindle Fire平板電腦一樣，Sprouts的網(wǎng)站也使用了立體木紋設(shè)計(jì)。然而，這種現(xiàn)實(shí)主義的設(shè)計(jì)只是為了讓其在美學(xué)上具備吸引力，而非包含任何幫助用戶理解如何使用該界面的隱喻，它也沒有去刻意模仿現(xiàn)實(shí)世界中的任何事物。

扁平化設(shè)計(jì)的誕生

2011年微軟的Metro設(shè)計(jì)語(yǔ)言和Windows8的推出對(duì)扁平化的推廣起到了推波助瀾的作用。微軟的設(shè)計(jì)文檔把它的新設(shè)計(jì)風(fēng)格稱為“authentically digital”—— 一下讓大量設(shè)計(jì)師抓住了扁平設(shè)計(jì)的精髓。與擬物化設(shè)計(jì)不同，扁平化設(shè)計(jì)并不需要借助復(fù)制現(xiàn)實(shí)事物的外形，這對(duì)于很多人來(lái)說(shuō)是一種全新的設(shè)計(jì)語(yǔ)言。

從蘋果網(wǎng)站的逐漸扁平化就能窺探到這個(gè)設(shè)計(jì)風(fēng)格的流行程度。擬物化設(shè)計(jì)和現(xiàn)實(shí)主義曾一度是蘋果設(shè)計(jì)的標(biāo)配，這種堅(jiān)持一直持續(xù)到2013年，然后一切都變了。

來(lái)看看蘋果2007年時(shí)候的網(wǎng)站，注意那個(gè)帶有高光的立體標(biāo)簽導(dǎo)航欄。

2012年的時(shí)候蘋果的網(wǎng)站上隱喻的標(biāo)簽導(dǎo)航不復(fù)存在，但仍然采用了高光加圓角的設(shè)計(jì)(注意這是現(xiàn)實(shí)主義而非擬物設(shè)計(jì))。通過在搜索框里添加陰影讓 它有種凹陷的感覺，雖然這從視覺效果上來(lái)說(shuō)確實(shí)要比Windows十七年前的輸入框看起來(lái)優(yōu)雅不少，但它們本質(zhì)上是一樣的。右下角的那幾個(gè)圖標(biāo)采用了非常 夸張的高光處理，或許是為了讓用戶能一下理解它們各自是做什么的。

蘋果2015年的主頁(yè)。包括Logo在內(nèi)的整個(gè)導(dǎo)航欄都變得扁平了——無(wú)陰影、無(wú)材質(zhì)、無(wú)高光。沒有了立體、現(xiàn)實(shí)主義和擬物化的效果。用戶現(xiàn)在識(shí)別這是個(gè)導(dǎo)航欄的方式是通過潛移默化的思維定式：一個(gè)置于網(wǎng)頁(yè)頂部的深色條狀物不是導(dǎo)航欄還能是什么？

扁平設(shè)計(jì)的可用性問題

自從扁平化在2011年面世以來(lái)，Nielsen Norman小組就直言不諱地對(duì)其潛在的可用性問題發(fā)出過質(zhì)疑。我們反對(duì)的主要理由是因?yàn)槲覀冇X得扁平化設(shè)計(jì)是一種為了迎合流行趨勢(shì)而犧牲用戶需求的設(shè)計(jì)風(fēng)格。

幾年下來(lái)，用戶對(duì)傳統(tǒng)的行為按鍵樣式已頗為熟悉，比如帶有下劃線的藍(lán)色文字和立體效果的按鍵等等。設(shè)計(jì)趨勢(shì)的急速扭轉(zhuǎn)帶給用戶的是一種全新的思維 ——絕大多數(shù)用戶對(duì)于鏈接元素的直覺反應(yīng)能力確實(shí)已經(jīng)進(jìn)化，但是他們能更好地理解鏈接元素并不意味著他們完全不需要借助任何線索了。

我詢問了一位22歲加拿大人她是如何知道網(wǎng)站上哪點(diǎn)東西是可以點(diǎn)擊的，她作了如下答復(fù)：

“如果文字是藍(lán)色或者有下劃線的話可以一下子就反應(yīng)過來(lái)，Word里不也這么做的嗎？呃下劃線確實(shí)很有幫助，或者按鍵的樣子也可以，沒有必要標(biāo)注‘點(diǎn)我’這樣的提示文字，如果一定要有，‘現(xiàn)在購(gòu)買’或‘加入購(gòu)物車’等還是不錯(cuò)的?！?/span>

這段回答非常精煉地說(shuō)明了人們借以識(shí)別可點(diǎn)擊元素的視覺要點(diǎn)：

傳統(tǒng)、外部一致的標(biāo)識(shí)（比如帶有下劃線的藍(lán)色文字、凸起的按鍵等）

一些經(jīng)典的標(biāo)識(shí)（比如帶有下劃線的文字，或者帶有一個(gè)外框的文字）

前后文的線索（比如有意義的文字：購(gòu)買、加入購(gòu)物車等、頁(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)航欄里的粗黑文字：只能通過它們的位置和文本信息來(lái)判斷是否可點(diǎn)擊

注意：在產(chǎn)品的輪播圖下還有一個(gè)擬物化設(shè)計(jì)的木質(zhì)架子

如果你的產(chǎn)品要向扁平化方向轉(zhuǎn)變，請(qǐng)遵循我們的《設(shè)計(jì)可識(shí)別點(diǎn)擊元素指南》以確保你不會(huì)讓用戶產(chǎn)生困惑。

扁平化設(shè)計(jì)的變體

最近，設(shè)計(jì)師們開始意識(shí)到了扁平化設(shè)計(jì)的可用性問題。對(duì)于扁平化更成熟的新釋義出現(xiàn)了，設(shè)計(jì)師們正在不妥協(xié)于可用性的前提下探索更多的機(jī)遇（此處鼓掌，啪啪啪）。

有時(shí)候這種新思潮被描述為“半扁平”、“近扁平”或“扁平2.0”。這種設(shè)計(jì)風(fēng)格整體上是扁平的，但采用了一些細(xì)微的陰影、高光和圖層來(lái)打造UI的深度。

長(zhǎng)投影，這個(gè)大家可能都挺熟悉了，從2013年開始火起來(lái)的。長(zhǎng)投影是扁平2.0走火入魔的一個(gè)例子——這種3D效果只是純粹為了美感而生，并不能為用戶帶來(lái)任何有價(jià)值的信息。謝天謝地，這種風(fēng)格沒有興起多大的浪花，但它在圖標(biāo)設(shè)計(jì)領(lǐng)域仍然占據(jù)一席之地。

谷歌的Material design是扁平2.0的一個(gè)正面范例：它使用了借鑒于物理世界的隱喻和理念來(lái)幫助用戶理解界面并直觀地把內(nèi)容層級(jí)視覺化。

安卓上的Evernote app可以拿來(lái)看一下，盡管整體上采用了扁平化的風(fēng)格，它在導(dǎo)航欄和浮動(dòng)按鍵上仍使用了一些細(xì)微的陰影。Evernote通過卡片設(shè)計(jì)賦予其內(nèi)容在3D空間的扁平概念。

正如所有設(shè)計(jì)趨勢(shì)一樣，我們從上平衡和適度。不要為了趕時(shí)髦做出會(huì)犧牲可用性的設(shè)計(jì)決策。務(wù)必牢記除非你是為其它設(shè)計(jì)師設(shè)計(jì)產(chǎn)品，不然你永遠(yuǎn)不應(yīng)把自己幻想為用戶。你對(duì)于按鍵和鏈接的可見性偏好并不等同于你的用戶們，不要以為他們和你一樣對(duì)你的設(shè)計(jì)了如指掌。

早期的3D GUI和史蒂夫喬布斯式的擬物化設(shè)計(jì)給人帶來(lái)沉重、雜亂的界面。對(duì)其精簡(jiǎn)確實(shí)可以改善可用性。但是為了實(shí)現(xiàn)純粹的扁平化罔顧元素可見性而肆意刪除視覺標(biāo)識(shí)的行為只是走下坡路。扁平2.0提供了一個(gè)折中的方案——簡(jiǎn)而不減，這才是我們需要的扁平化。

 

原文地址：nngroup
譯文地址：jianshu
譯者：勵(lì)定洲