摘要：2012左右，扁平化設(shè)計開始成一種流行的網(wǎng)頁設(shè)計風(fēng)格,。至今,，它仍然被廣泛使用，但同時也導(dǎo)致了一些嚴(yán)重的易用性問題,。其中一個最大的問題就是扁平化設(shè)計導(dǎo)致了可點擊元素的信號缺失,。扁平化2.0也許能提供更好選擇。

扁平化設(shè)計是一種流行的設(shè)計,，它的定義是：不在網(wǎng)頁的圖形元素中使用平滑或3D的視覺效果,。許多設(shè)計師就此認(rèn)為它其實是極簡主義網(wǎng)頁設(shè)計的一個分支。

要為扁平化設(shè)計下個定義的話,，我們就必須先定義：什么不是扁平化設(shè)計。扁平化設(shè)計通常被解讀成一種反3D效果,、反擬物化和反寫實主義設(shè)計風(fēng)格的運動,。一個完全的扁平化設(shè)計是不會運用以上任何一種風(fēng)格的。

3D效果

3D效果會在交互界面上制造出深度的錯覺,，而這可以幫助用戶了解界面的視覺層級及哪些元素是可交互的,。

· 那些凸出的元素看起來是可以按下（用鼠標(biāo)點擊）的。這種手法經(jīng)常被用作于按鍵的提示信號,。

· 那些下沉或凹陷的元素看起來則是可以被填充的,。這種手法通常被用于輸入框的提示信號，例如搜索框,。

從圖形界面的出現(xiàn)初期起,，我們的界面上就經(jīng)常出現(xiàn)模擬3D效果（陰影、漸變,、高光）,，用以幫助用戶在一瞥之下就能了解可使用的交互行為。然而,，這些模擬3D效果在早期的圖形界面上顯得過分且富有侵略性,，容易使用戶分心。

這個Win 95 的對話框使用了很深的陰影和高光來制造3D效果,。注意那些按鈕是如何表現(xiàn)出凸出效果,，而輸入框是如何表現(xiàn)出凹陷效果的。它也很清晰的表明了3個tab中,，哪一個是位于另兩個之上的,。然而，深重的陰影也很容易使界面看起來毫無吸引力,。

擬物化

在設(shè)計中,，擬物化設(shè)計完全是一種不必要的、純粹觀賞性的,、模仿現(xiàn)實存在物品的特征,。擬物化設(shè)計本身是希望能幫助用戶在對現(xiàn)實存在物品的了解基礎(chǔ)上，學(xué)會如何使用一種新的交互界面,。

在早期的亞馬遜 Kindle平板上,，安卓系統(tǒng)使用了擬物化的書架設(shè)計，完全使用了3D效果的“架子”和木質(zhì)紋理,。書架的隱喻是為了幫助用戶將過去對書架（作為一個存儲并管理實體媒介的地方）的認(rèn)知轉(zhuǎn)移到數(shù)字環(huán)境下,。這個有著木質(zhì)紋理的“架子”和系統(tǒng)功能完全不相干，但也許會加強(qiáng)隱喻的效果。亞馬遜之后就從UI 中移除了這個擬物化的書架設(shè)計,。

寫實主義

寫實主義是一種出于美學(xué)原因,，模仿物理物品或紋理的設(shè)計。

人們常?；煜龜M物化設(shè)計和寫實主義設(shè)計,。在網(wǎng)頁設(shè)計中，這兩種設(shè)計往往同時出現(xiàn),。它們最主要的區(qū)別就在于：寫實主義設(shè)計是純粹出于美學(xué)目的的一種視覺風(fēng)格,，它使用設(shè)計元素和紋理去模仿物理的現(xiàn)實世界；而擬物化是出于隱喻的目的,，期望能幫助用戶理解交互界面,。

例如早期的Kindle平板，Sprouts grocery chain的網(wǎng)頁使用了3D木材紋理,。然而,，這個寫實主義的設(shè)計純粹只是為了美學(xué)目的。它并不包含任何隱喻,，也不能幫助用戶理解如何使用這個交互界面,。

微軟的Metro設(shè)計語言和Win 8 在2011年的發(fā)布對于扁平化設(shè)計的普及做出了特別大的影響和推動。微軟的設(shè)計文檔稱呼這種新的風(fēng)格為“真實的數(shù)字”——這個短語準(zhǔn)確的抓住了扁平化設(shè)計的特點,。和擬物化設(shè)計不同的是，扁平化設(shè)計被看作是探索數(shù)字媒介的一種方式,，而不再是對于物理世界存在的復(fù)制,。

而蘋果的主頁則為扁平化設(shè)計日益增長的普及趨勢提供了有效的標(biāo)桿。擬物化和寫實主義設(shè)計在很長一段時間內(nèi)一直是蘋果設(shè)計的標(biāo)志,，蘋果的主頁直到2013年仍然還堅持使用非扁平化的設(shè)計,。

2007年蘋果的主頁。導(dǎo)航欄仍然的是光滑3D效果的tab,。

2012年蘋果的主頁,。標(biāo)簽欄的隱喻已經(jīng)消失了，但是導(dǎo)航欄仍然是光滑球面型的（這是個很好的寫實主義設(shè)計的例子,，而非擬物化）,。新的搜索欄加入了陰影使得它看起來是凹陷的（看起來是個比17年前Windows的輸入框優(yōu)雅得多的視覺效果，但從概念上而言是一樣的）,。下方右側(cè)的可視icons都太光滑了,，這對于用戶去理解它們到底是什么是一種非常大的干擾。這些按鈕看起來不僅是凸出的,，而幾乎就是在發(fā)光,。

2015年的蘋果主頁。整個導(dǎo)航欄包括logo，都徹底的扁平化了——沒有可見的陰影,、紋理,、或者高光。完全沒有3D,、寫實主義,、或者擬物化效果。用戶了解導(dǎo)航欄中的選項是可點擊的唯一途徑就是約定俗成的規(guī)則：一條帶有強(qiáng)烈色彩,，貫穿網(wǎng)頁頂部的帶狀紋往往就是導(dǎo)航欄（除非它其實是個廣告,，但這個又太細(xì)）。

自從2011年扁平化設(shè)計出現(xiàn)以來,，Nielsen Norman組織已經(jīng)多次批評它與生俱來的易用性問題了,。其對扁平化設(shè)計的主要異議之處就在于，扁平化設(shè)計試圖犧牲用戶的需求去滿足時尚美學(xué),。

多年來,，用戶已經(jīng)接受了傳統(tǒng)的可點擊信號。例如帶有藍(lán)色下劃線的鏈接和帶3D效果的按鈕,。當(dāng)設(shè)計趨勢變換時,，用戶會逐漸接受新的設(shè)計樣式，用戶直觀識別鏈接元素的能力也已經(jīng)逐步進(jìn)化,。但用戶能較好地發(fā)現(xiàn)鏈接元素并不代表他們就完全不需要被給予線索,。事實上，我們也發(fā)現(xiàn)扁平化設(shè)計的長期過度使用正緩慢地降低用戶的使用效率,，因為他們需要區(qū)分哪些元素是可點擊的,，而哪些不能。

當(dāng)我們在問詢一位22歲的加拿大被試時,，她說她知道在網(wǎng)頁上是可以進(jìn)行點擊的,，她也給了我們以下的回答?！爱?dāng)它（指可點擊元素）是藍(lán)色而且還有下劃線時,，你就會知道如何開始。即使（那些元素）是單詞或其他的一些東西,。說真的,，那真是很有效（的提示），尤其當(dāng)它有下劃線時,。又或者當(dāng)它是一個按鈕時,，不需要提示用戶‘點這里’，只要寫‘立即購買’或者‘加入購物車’就好,?！?/p>

以下例子清楚的闡明了幾種用戶用來判斷何處可點擊的線索類型：

· 傳統(tǒng)的,、外表一致的信號（例如帶藍(lán)色下劃線的文本，凸出的按鈕）

· 一些懷舊的信號（例如帶有下劃線的其它顏色文本,，帶有外框的文本）

· 上下文線索（例如可操作的文本,、頁面頂部的布局）

Trader Joe的主頁展示了多種可點擊信號。（1）帶有下劃線的藍(lán)色文本”View All“是傳統(tǒng)的信號,。（2）扁平帶紅色背景的”Find“是懷舊的按鈕,，即使它毫無3D或?qū)憣嵉囊曈X效果。（3）黑色的主導(dǎo)航欄鏈接只通過布局和文本傳達(dá)出它們可點擊的信號,。（請注意,，大多數(shù)扁平化設(shè)計網(wǎng)頁不會使用任何擬物化的元素——好比放置著推薦產(chǎn)品的木質(zhì)架子。）

近來,，設(shè)計師們開始認(rèn)識到扁平化設(shè)計的易用性問題,。因此，一種更成熟,、更平衡的扁平化設(shè)計應(yīng)運而生,。設(shè)計師們發(fā)現(xiàn)他們可以”返璞歸真“，在不影響易用性的同時,，不斷探索各種可能性,。

這種設(shè)計有時被稱為’半扁平‘、’似扁平化設(shè)計‘,、或‘扁平化2.0’,。這種設(shè)計風(fēng)格幾乎是扁平化的，但同時也使用微妙的陰影,、高光,、或者用圖層來創(chuàng)造一些UI上的層級深度。

帶有長陰影的扁平化設(shè)計,，這種設(shè)計風(fēng)格風(fēng)靡了2013年。帶有長陰影設(shè)計只是扁平化2.0的錯誤之一——3D效果僅只是純粹的美學(xué)展示而并不帶有任何有意義的信息,。謝天謝地,，這種設(shè)計的流行已經(jīng)衰退了，但是帶有長陰影的圖標(biāo)設(shè)計仍被用于一些扁平化的界面,。

Google的Material design語言是一個比較好的例子,，它展現(xiàn)了扁平化2.0設(shè)計正確的層級：它使用了與物理世界一致的隱喻和規(guī)則來幫助用戶理解交互界面，同時在內(nèi)容中區(qū)分視覺層級,。

安卓上的印象筆記是一個扁平化2.0的好例子,。盡管它在頁面主要使用了扁平化UI，這款A(yù)pp依然在導(dǎo)航欄里設(shè)計了一些微妙的陰影和漂浮的新增按鈕,。它也使用了卡片的隱喻以展現(xiàn)3D控件中的扁平層級效果,。

與任何設(shè)計趨勢一樣，我們建議（扁平化設(shè)計）應(yīng)該保持平衡和適度。別為了流行而犧牲易用性,。永遠(yuǎn)不要忘記——除非你是在為其他的設(shè)計師做設(shè)計——你其實并不是用戶,。你對于可點擊信號的選擇和理解能力并不等同于你的用戶，因為你知道每個設(shè)計中的元素是用來干什么的（而你的用戶并不清楚）,。

早期的虛擬3D圖形界面和Steve-Job式的擬物化設(shè)計總是制造出沉重,、笨拙的用戶界面。適度縮減這些行為對于易用性而言才是有益的,。但去除視覺區(qū)別以創(chuàng)造不帶有任何信號的完全扁平化設(shè)計也會走向另一個糟糕的極端,。而扁平化2.0提供了一個妥協(xié)的機(jī)會——（使用）簡潔的視覺信號。

這篇文章是上下兩篇扁平化設(shè)計文章中的上篇,。明天更新下篇,， 扁平化設(shè)計的長期過度使用是如何緩慢降低用戶效率的