來源：好奇心日報
作者：吳羚瑋

“并不是扁平化設(shè)計降低了效率，而是不好的設(shè)計降低了效率。”

9 月 3 日，咨詢公司 Nielsen Norman 發(fā)布了一篇研究報告，指出扁平化設(shè)計會使用戶導(dǎo)航的效率降低 22%。

他們找來了 71 名用戶，分別跟蹤他們在瀏覽 9 組網(wǎng)站時的眼球運(yùn)動，并將用戶們花在內(nèi)容上的時間記錄下來。

被作為“對照組”的網(wǎng)站上，按鈕擁有陰影、浮雕的效果，超鏈接則被突顯為加粗的藍(lán)色字體。而實驗組的按鈕和超鏈接們的視覺元素則被弱化了。

當(dāng)瀏覽那些被弱化視覺元素的網(wǎng)站時，平均每位參與者會多花 22% 的時間在網(wǎng)頁內(nèi)容上。

不像以往的用戶粘度實驗，Nielsen Norman 沒有把用戶多花的時間算作網(wǎng)站用戶的主動停留時間，而是將它們解釋為“用戶在瀏覽文字內(nèi)容時的不確定性”——這些參與者花費(fèi)了更多時間用來定位他們希望看到的元素。

簡而言之，他們的結(jié)論是，扁平化設(shè)計（flat design）是一種不那么直觀的設(shè)計，抹去了網(wǎng)頁按鈕與內(nèi)容之間的差別。這使得用戶將可點擊的元素和不可點擊的圖標(biāo)與文本混淆，因而影響了效率，還可能導(dǎo)致廣告商和電子商務(wù)網(wǎng)站們損失數(shù)十億美元。

盡管這個觀點自打扁平化設(shè)計流行于數(shù)字屏幕后就被頻繁討論，但 22% 這個具體數(shù)字還是第一次被提出來。

扁平化是如何慢慢成為主流的

設(shè)計師們對扁平化的解釋不一，常常是從“它不是什么”說開去的。它在擬物化（skeuomorphism）盛行的時候橫空出世，大膽剝離了三維表現(xiàn)形式的沉重設(shè)計風(fēng)格，只留下沒有紋理、沒有質(zhì)感效果、沒有陰影的平面元素。但發(fā)展到現(xiàn)在，扁平化似乎又將陰影和深度重新吸納，炮制出“偽 3D”的效果。

“所以我從來都不認(rèn)可‘扁平化’這個詞，我覺得來描述這種風(fēng)格更好的一個詞是平面化”，frog 視覺設(shè)計師 Jaskni Wong 對《好奇心日報》說。

但曾經(jīng)稱作 Metro 的設(shè)計語言被一致認(rèn)為是真正的扁平化設(shè)計：它由不同顏色鮮亮的方框色塊組成，抹去了一切陰影、投影、斜角等設(shè)計元素，徹頭徹尾的平面設(shè)計風(fēng)格。

發(fā)布 Metro 的微軟，也因此成了第一個將扁平化設(shè)計風(fēng)格用于數(shù)字界面的公司。

2012 年 Computex Taipei 大會，微軟公開宣布，Metro 會被用在即將發(fā)布的 Windows 8 和 Windows Phone 上。

那時，蘋果還站在扁平化風(fēng)格的對立面，以擬物化設(shè)計界面和現(xiàn)實主義審美聞名。而微軟在 2007 年發(fā)售的 Windows Vista 也才剛剛更新了一種叫“Aero”的界面風(fēng)格，它被看做是微軟對擬物化設(shè)計的成熟嘗試，而毛玻璃質(zhì)感會帶給用戶更強(qiáng)烈的審美感受。

Windows Vista 界面

Metro 則好像突然讓微軟走向了自己的對立面：一切看起來立體的元素都取消了。它的靈感來自于機(jī)場和地鐵的指示牌，旨在明確。

看起來也的確如此：大號無襯線字體，弱化圖像，依賴排版。微軟描述它“直覺、易懂、現(xiàn)代”，稱這種新的設(shè)計風(fēng)格是“真正的數(shù)字化”。當(dāng)時這種簡潔的設(shè)計形式的確令人耳目一新，獲得了包括 Jaskni 在內(nèi)不少設(shè)計師追捧。

事實上，微軟用上扁平化設(shè)計還要更早：他們在 2006 年發(fā)布的媒體播放器 Zune 中就使用了這種風(fēng)格。

Zune 的誕生始于微軟試圖與蘋果 iPod 的較量。微軟的商業(yè)發(fā)展總監(jiān) Will Tschumy 號稱微軟每年花費(fèi) 200 億元在設(shè)計上。

“我們做了無數(shù)用戶體驗背后的調(diào)研”，Will Tschumy 說，“微軟是唯一一家在各個屏幕上擁有統(tǒng)一設(shè)計語言的公司了?！?/p>

很快地，Zune 的產(chǎn)品設(shè)計風(fēng)格延伸成為所有微軟產(chǎn)品的設(shè)計語言。扁平化設(shè)計風(fēng)格也成了最流行的設(shè)計趨勢。

蘋果也加入了扁平化設(shè)計的熱潮中，甚至還成了扁平化的最大擁躉和推動者。要知道，擬物化和寫實主義設(shè)計在很長一段時間內(nèi)都是蘋果的設(shè)計標(biāo)志。

直到 2012 年，蘋果的主頁導(dǎo)航欄還是光滑的球面型，按鈕們則像是裹了糖衣一般發(fā)光。2013 年 6 月 10 日世界開發(fā)者大會，蘋果借著 iOS 7 發(fā)布推出了全新的 UI 設(shè)計風(fēng)格。這一切都發(fā)生在蘋果副總裁 Scott Forstall 離開蘋果后，Jony Ive 掌管了整個公司的交互界面。

蘋果水晶質(zhì)感的界面

以 Metro 的扁平化標(biāo)準(zhǔn)來看，iOS 7 其實不算完全扁平，它還保留了一些紋理。但它相比自己過去的設(shè)計，拿掉了光澤、斜角和陰影。圖標(biāo)們更簡潔了，顏色也更鮮亮了。照片的圖標(biāo)從一株現(xiàn)實的向日葵變成了七彩色輪；相機(jī)圖標(biāo)則由原來描繪細(xì)致的鏡頭變成了一臺黑色的相機(jī)剪影。

不過 iOS 7 初揭曉時，遭到了一些批評，曾獲德國設(shè)計獎終身成就獎的 Erik Spiekermann 就專門拍了個視頻批評蘋果過于纖細(xì)而難以閱讀的字體。更大的硬傷還在于：控制中心（control center）對于可點與不可點元素的混淆，以及沒必要的細(xì)線分割（蘋果在后來的版本中對這點做出了改進(jìn)，用更深的色塊表示可點元素，也取消了細(xì)線）。

iOS 上滑界面不光混淆了可點與不可點元素，還用沒必要的細(xì)線分割。

改進(jìn)后的版本，將可點元素用深色塊框住

但這顯然無礙無數(shù)設(shè)計師們跟隨蘋果一起擰轉(zhuǎn)了設(shè)計趨勢。最顯著的變化莫過于那些登上蘋果 APP Store 的應(yīng)用們。要是給它們的圖標(biāo)按照時間順序梳理下來，你會發(fā)現(xiàn)圖標(biāo)們也基本遵循立體、描繪細(xì)節(jié)到拍扁、簡潔的路徑變化著。

扁平化與日漸普遍的極簡主義

這種趨勢并非無端出現(xiàn)。

被譽(yù)為建筑史“現(xiàn)代主義之父”的美國建筑師 Louis Sullivan 創(chuàng)造了現(xiàn)代摩天大樓的原型，他留給后世更大的財富，還在于放之四海而皆準(zhǔn)的設(shè)計格言：形式追隨功能（ Form follows function）。

這句話的意思很簡單，即設(shè)計首先得考慮功能性。

從擬物化和現(xiàn)實主義，到極簡的扁平化，再由扁平化升級為更具兼容度的設(shè)計風(fēng)格，都是用戶界面設(shè)計風(fēng)格順應(yīng)了當(dāng)下潮流所得的結(jié)果。

1994 年，萬維網(wǎng)的出現(xiàn)使得互聯(lián)網(wǎng)開始引起公眾注意。大部分美國的上市公司開始視一個公開的網(wǎng)站為必需品。但此時，個人電腦的滲透率極低。只有專業(yè)工作人員熟悉電腦桌面軟件，更不用說那些看了令人疑惑的數(shù)字接口了。設(shè)計師們花了大量時間制作網(wǎng)站按鈕、菜單和跳轉(zhuǎn)鏈接，使他們看起來略微友好一些。

在網(wǎng)頁設(shè)計幾乎無可參照的當(dāng)時，人們認(rèn)為網(wǎng)站設(shè)計的黃金準(zhǔn)則就是去模仿電腦桌面的界面設(shè)計。

1995 年發(fā)布的 Windows 95 就是 3D 模擬的經(jīng)典例子。

它的對話框使用了很深的陰影和高光來制造 3D 效果。它們的凸起凹陷都遵循著兩個基本原則：

• 凸起的元素是可以用鼠標(biāo)點擊按下的。它經(jīng)常被用來表示按鈕。

• 凹陷的元素則是被用來填充的。諸如搜索框等輸入框就常使用內(nèi)陷的視覺元素。

就如同美國 1840 年代的鐵路、1920 年代的汽車和收音機(jī)所帶來的技術(shù)繁榮一樣，巨大的互聯(lián)網(wǎng)泡沫積聚起來，又因為過熱的投機(jī)行為經(jīng)歷了一場名為“Dot Com”泡沫的破裂。

不過很快地，互聯(lián)網(wǎng)經(jīng)歷泡沫破滅以后再次起飛，一大批新的創(chuàng)業(yè)公司出現(xiàn)，讓自己的界面充斥著陰影、氣泡、眩光、巨大投影等時下流行的元素。

微軟在 2003 年發(fā)布的 Outlook Web Access，被認(rèn)為是網(wǎng)頁設(shè)計的杰出代表。

這個在如今標(biāo)準(zhǔn)看來頗為簡陋的界面，在當(dāng)時是 .NET 網(wǎng)站的標(biāo)準(zhǔn)，以及很多 AJAX 庫所渴求的設(shè)計。

與此同時，蘋果的擬物化設(shè)計和現(xiàn)實主義風(fēng)格也搭載著產(chǎn)品的出售被更多用戶接受。

擬物化是對物理世界一些特征的模仿。它用在設(shè)計中，能讓用戶在對現(xiàn)實存在物品的了解基礎(chǔ)上，學(xué)會使用一種全新的交互界面。

蘋果的用戶界面上，那些反光的圖標(biāo)其實是現(xiàn)實生活中的物體在電子屏幕上的一種轉(zhuǎn)移。在大部分人還未被智能手機(jī)牢牢擒住時，這種對現(xiàn)實物品的模仿其實能消除人們對電子事物的疏離感。

蘋果的第一套界面就開始擬物了。

蘋果將虛擬鍵盤做成精致的水晶玻璃質(zhì)感，正是為了讓人們習(xí)慣虛擬鍵盤的存在?？梢院芸隙ǖ卣f，假如它沒有做得如此“直覺”，它的體驗就沒有說服力，也無從培育消費(fèi)者的習(xí)慣。

擬物化風(fēng)格愈演愈盛，并被蘋果對細(xì)節(jié)的極致描繪推向了高點。

但和過去數(shù)百年建筑、藝術(shù)的發(fā)展軌跡類似，扁平化設(shè)計所代表的“極簡主義”，也是在堆疊裝飾風(fēng)潮達(dá)到極盛之后，開始一股由繁入簡的風(fēng)潮。

扁平化設(shè)計常被視作網(wǎng)頁和界面設(shè)計發(fā)展到成熟階段的象征。

這種成熟首先體現(xiàn)在設(shè)計師身上，他們對于設(shè)計圖標(biāo)和界面已經(jīng)得心應(yīng)手，開始轉(zhuǎn)而尋求創(chuàng)新和現(xiàn)代性。

互聯(lián)網(wǎng)的滲透意味著遠(yuǎn)比過去更多的人熟悉如何與電子設(shè)備互動。我們已經(jīng)習(xí)慣于與數(shù)字設(shè)備的交互方法。即便是某個頁面上只有一個細(xì)線條方框，只要上面寫著“Go”，你也清楚地知道那是個可以被點擊的按鈕。

同樣的發(fā)展軌跡，你可以在印刷物上的“扁平化”上找到。

這種更“原始”一些的載體，早在 60 年前就已經(jīng)見證過這種極簡風(fēng)格的鼎盛時期。當(dāng)時扁平化設(shè)計的名稱還叫做“瑞士設(shè)計風(fēng)格”，也稱為“國際印刷風(fēng)格”（International Typographical Style）。

如它名字所指，這種設(shè)計風(fēng)格始于瑞士，在 1940–1950 年代推廣至全球，成為戰(zhàn)后西方的設(shè)計基礎(chǔ)。

推動者是現(xiàn)代最著名的平面設(shè)計師之一 Armin Hofmann。從蘇黎世藝術(shù)學(xué)院畢業(yè)后，他作為一名版師流轉(zhuǎn)于 Basel 和 Bern。1947 年，在火車上遇見時任 Basel 藝術(shù)學(xué)院校長的 Emil Ruder 后，他得知那兒正缺一名教師，于是開始了 40 年的教學(xué)生涯，并在后來接替了 Ruder 的校長位子。

Hofmann 一生中大部分時間都在設(shè)計扁平設(shè)計風(fēng)格的海報。因為他認(rèn)為，海報是最好和最有效的溝通形式之一。

ArminHoffman，1959

他的海報永遠(yuǎn)高效審慎地使用顏色和字體。他將這種做法稱為“色彩的瑣碎化”。即便以當(dāng)下的審美標(biāo)準(zhǔn)評判，它們依舊融合了創(chuàng)意與藝術(shù)氣質(zhì)，完全不過時。

事實上，Hofmann 用在海報中的元素和如今的扁平化設(shè)計元素并無太大區(qū)別：照片蒙太奇，強(qiáng)調(diào)排版和實驗性的構(gòu)圖，以及大量無襯線字體。

他還將自己的設(shè)計哲學(xué)和實踐寫入了一本名為 Graphic Design Manual 的設(shè)計指導(dǎo)手冊，成了無數(shù)平面設(shè)計師的必讀書目。

瑞士汽車俱樂部海報，Joseph Müller-Brockmann，1955

這種“剝離非必要元素”的風(fēng)格專注于可讀性，和同樣以清晰可讀為準(zhǔn)繩的 Helvetica 字體一起，在二戰(zhàn)后的西方設(shè)計史中，占據(jù)了一席之地。

扁平化設(shè)計在原本就是平面的海報中，并沒有遭遇太大問題。這也是極簡排版風(fēng)格在印刷物中長盛不衰的原因之一。

數(shù)字屏幕就沒有這么簡單了。盡管不少設(shè)計師全心擁抱扁平化設(shè)計，但這種早期只有兩個維度的設(shè)計風(fēng)格，也很快就暴露出局限性。比如拋棄一切三維元素的 Metro，它的誕生就伴隨著反對者對其易用性的質(zhì)疑。

盡管在 Jaskni 看來，Metro 難以推廣的原因還在于 Windows Phone 可憐的市場份額，以及它對開發(fā)者的高要求，“它基于wayfinding（路牌指示），是非常需要功力的一個領(lǐng)域?！?/p>

越來越多設(shè)計師厭倦了它的魅力，開始尋求解決方案。

扁平化，真的就是指完全扁平嗎？

這恰恰是 Nielen Normann 這份報告存在的缺陷之一：這份報告對扁平化設(shè)計的理解似乎還停留在它們最初的印象，忽視了這種設(shè)計語言進(jìn)入數(shù)字屏幕以來的進(jìn)化。

在它的對照組中，扁平化就是徹底沒有紋理和陰影的存在。

但現(xiàn)實情況是，扁平化設(shè)計其實與擬物化設(shè)計的概念并行不悖。它擁有物理世界中的規(guī)則，甚至開始主動摹仿現(xiàn)實中的“層次”和“維度”，比如不少設(shè)計師利用深淺不一的色塊表現(xiàn)出陰影，而不是過去的投影、斜角和漸變，仿造出真實的投影。此時它的對立面已經(jīng)不是擬物化了，而是“豐富設(shè)計”（rich design）。

Jaskni 和 frog 另一名視覺設(shè)計師胡玥申都認(rèn)為這份報告?zhèn)鬟_(dá)的并非扁平化的缺陷，而是“不好的設(shè)計”的缺陷。

報告忽視的另一個問題在于，網(wǎng)站瀏覽效率不僅僅由用戶導(dǎo)航的速度決定，網(wǎng)頁加載也是重要因素。

他們說，設(shè)計風(fēng)格其實是設(shè)計師審美與硬件基礎(chǔ)之間的拉扯結(jié)果。比如 Jaskni 認(rèn)為“非常好看”的 Windows Vista 界面，限于硬件，在拖動窗口會出現(xiàn)卡頓現(xiàn)象。即便微軟擁有推廣這種精細(xì)設(shè)計的熱情，開發(fā)者也會因為懼怕消耗系統(tǒng)資源而放棄優(yōu)化。

而扁平化圖標(biāo)使用簡潔的圖像傳達(dá)信息，少有漸變、紋理和陰影，圖標(biāo)更小，頁面加載時間也更快。它們既有裝飾性，也能導(dǎo)航到網(wǎng)站的正確位置。

不過，扁平化并非完全摒棄紋理和陰影的存在，進(jìn)化使得它解決了過去那些缺陷。

2013 年，Google 發(fā)布的 Material Design 引發(fā)了不少扁平化設(shè)計愛好者的狂歡。

在它發(fā)布這個設(shè)計語言以前，Google 在設(shè)計上的戰(zhàn)術(shù)頗有些小心翼翼：設(shè)計沒有重大變化，只是在每次新產(chǎn)品發(fā)布時實施一些小小改變。

但作為在設(shè)計上具有高要求和高用戶期望的大公司，Google 在發(fā)布 Material 時做了超前的一步：它不僅為自己的設(shè)計語言取了名字，還專門設(shè)定了相對完整而明晰的設(shè)計規(guī)則。

這為設(shè)計師們提供了便利。因為對設(shè)計師來說，當(dāng)憑空設(shè)計出一套新的風(fēng)格時，需要付出巨大的研究成本與溝通成本。而 Material Design 相當(dāng)于一個框架，在其中生發(fā)出來的設(shè)計，是已經(jīng)被驗證過的。

要解釋 Material Design 的概念也很簡單，它試圖在最簡化的設(shè)計中引入一些擬物化設(shè)計的特征：

它將所有設(shè)計元素都想象成在固定光源下的紙片，因為光源遠(yuǎn)近表現(xiàn)出深淺不同的色彩和陰影。雖然它看起來依舊扁平，但就連運(yùn)動模式都模擬了物理世界的規(guī)則。

盡管一些設(shè)計師認(rèn)為 Material Design 在顏色、陰影方向等都做了過于死板的限制，令他們創(chuàng)意受限，但 Material Design 的發(fā)布算是扁平化設(shè)計“進(jìn)化”成功的嘗試。

與 Material Design 發(fā)布同年，設(shè)計師 Jeff Escalante 也在 Dribbble 等設(shè)計網(wǎng)站上發(fā)起了一次關(guān)于扁平化設(shè)計趨勢的討論，并提出了一種頗為簡單粗暴的解決方案：長陰影（Long Shadow）。

它的效果如同將圖標(biāo)上的物體置于冬日陽光下：它們都拖著 45° 斜角的長陰影，是物體的 2.5 倍。

長陰影保留了扁平化設(shè)計的基本審美，但也為圖像增加了深度。這使得它的確火了一陣，設(shè)計網(wǎng)站 Dribbble 和 Pinterest 上都出現(xiàn)不少類似作品。教程也在教大家如何以更高效率制作長陰影。

不過這種戲劇化的對角線陰影讓人聯(lián)想起早期的蘇聯(lián)海報或是像俄羅斯構(gòu)成主義、幾何抽象派畫家馬列維奇的拼貼畫作品。它們都呈現(xiàn)出一種積極的、理想主義的風(fēng)格，具有強(qiáng)烈的視覺沖擊力，非常適合用作圖標(biāo)和品牌商標(biāo)。

但除此以外，長陰影的使用廣度欠奉。和理論更成系統(tǒng)的 Material Design 相比，它并沒有辦法走得更長遠(yuǎn)。

2013 年，人們關(guān)于扁平化設(shè)計的討論，還在于“它是一個趨勢，還是一次革命”。

但從現(xiàn)在它們的發(fā)展看來，扁平化設(shè)計已經(jīng)成了一個容納度極高的存在。它還在依照變體不斷延續(xù)自己的影響力。

蘋果實際上也沒有將自己限定在最初那個扁平化設(shè)計的框架里。在走扁平路線的 iOS 7 中，Game Center 圖標(biāo)在一眾被拍扁的圖標(biāo)中顯得不同，依舊擁有閃亮的光澤感。

Dribbble 中不乏好事者將它拍扁，但“這就不是原來的球體了”，Jaskni 說，“蘋果可能不是在一味追求扁平化，而是在尋求好的設(shè)計?！?/p>

顯然，扁平化設(shè)計只是電子屏幕設(shè)計的其中一個階段。到目前為止，2D 界面的通用性已經(jīng)基本得到解決。一旦出現(xiàn)像 AR/VR 這樣更沉浸的視覺需要時，它可能會失去現(xiàn)有的地位。

在過去兩年多，包括微軟在內(nèi)的不少科技公司都在進(jìn)行“包容性設(shè)計”，意即他們開始思考一些相對前沿的事物，并為之做出設(shè)計方案。

比如微軟發(fā)布的全息設(shè)備 HoloLens。盡管用戶能夠與全息照相機(jī)進(jìn)行互動，但 HoloLens 的操作系統(tǒng)與微軟其它設(shè)備所用的界面并不相同。

微軟希望能發(fā)布一套像 Metro 那樣，貫穿所有產(chǎn)品線的設(shè)計語言。

他們也“做到了”。今年 5 月的開發(fā)大會上，微軟發(fā)布了一套叫做“Fluent”的設(shè)計語言，它看起來像是扁平化設(shè)計的延伸，但被賦予了無縫對接 2D 和 3D 操作系統(tǒng)的愿景。

盡管它目前還只是一個概念，但如同每個階段的演進(jìn)一樣，這個依舊很年輕的系統(tǒng)需要時間。

關(guān)于「好奇心日報」：
qdaily.com — 把世界變成問號。每日報道與你有關(guān)的商業(yè)新聞，無論它是科技、設(shè)計、營銷、娛樂還是生活方式。另外還有一個“生活研究所”供你吐槽生活。