越來越普遍的扁平化設計，真的會降低人們使用頁面的效率嗎？

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

他們找來了 71 名用戶，分別跟蹤他們在瀏覽 9 組網站時的眼球運動，並將用戶們花在內容上的時間記錄下來。

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

當瀏覽那些被弱化視覺元素的網站時，平均每位參與者會多花 22% 的時間在網頁內容上。

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

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

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

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

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

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

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

發布 Metro 的微軟，也因此成了第一個將扁平化設計風格用於數字界面的公司。

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

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

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

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

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

Zune 的誕生始於微軟試圖與蘋果 iPod 的較量。微軟的商業發展總監 Will Tschumy 號稱微軟每年花費 200 億元在設計上。

“我們做了無數用戶體驗背後的調研”，Will Tschumy 說，“微軟是唯一一家在各個屏幕上擁有統一設計語言的公司了。”

很快地，Zune 的產品設計風格延伸成為所有微軟產品的設計語言。扁平化設計風格也成了最流行的設計趨勢。

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

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

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

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

但這顯然無礙無數設計師們跟隨蘋果一起擰轉了設計趨勢。最顯著的變化莫過於那些登上蘋果 APP Store 的應用們。要是給它們的圖標按照時間順序梳理下來，你會發現圖標們也基本遵循立體、描繪細節到拍扁、簡潔的路徑變化著。

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

這種趨勢並非無端出現。

被譽為建築史“現代主義之父”的美國建築師 Louis Sullivan 創造了現代摩天大樓的原型，他留給後世更大的財富，還在於放之四海而皆準的設計格言：“形式追隨功能”（ Form follows function）。

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

從擬物化和現實主義，到極簡的扁平化，再由扁平化升級為更具兼容度的設計風格，都是用戶界面設計風格順應了當下潮流所得的結果。

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

在網頁設計幾乎無可參照的當時，人們認為網站設計的黃金準則就是去模仿電腦桌面的界面設計。

1995 年發布的 Windows 95 就是3D 模擬的經典例子。

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

• 凸起的元素是可以用鼠標點擊按下的。它經常被用來表示按鈕。
• 凹陷的元素則是被用來填充的。諸如搜索框等輸入框就常使用內陷的視覺元素。

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

不過很快地，互聯網經歷泡沫破滅以後再次起飛，一大批新的創業公司出現，讓自己的界面充斥著陰影、氣泡、眩光、巨大投影等時下流行的元素。

微軟在 2003 年發布的 Outlook Web Access，被認為是網頁設計的傑出代表。

這個在如今標準看來頗為簡陋的界面，在當時是 .NET 網站的標準，以及很多 AJAX 庫所渴求的設計。

與此同時，蘋果的擬物化設計和現實主義風格也搭載著產品的出售被更多用戶接受。

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

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

蘋果將虛擬鍵盤做成精致的水晶玻璃質感，正是為了讓人們習慣虛擬鍵盤的存在。可以很肯定地說，假如它沒有做得如此“直覺”，它的體驗就沒有說服力，也無從培育消費者的習慣。

擬物化風格愈演愈盛，並被蘋果對細節的極致描繪推向了高點。

但和過去數百年建築、藝術的發展軌跡類似，扁平化設計所代表的“極簡主義”，也是在堆疊裝飾風潮達到極盛之後，開始一股由繁入簡的風潮。

扁平化設計常被視作網頁和界面設計發展到成熟階段的象征。

這種成熟首先體現在設計師身上，他們對於設計圖標和界面已經得心應手，開始轉而尋求創新和現代性。

互聯網的滲透意味著遠比過去更多的人熟悉如何與電子設備互動。我們已經習慣於與數字設備的交互方法。即便是某個頁面上只有一個細線條方框，只要上面寫著“Go”，你也清楚地知道那是個可以被點擊的按鈕。

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

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

如它名字所指，這種設計風格始於瑞士，在 1940-1950 年代推廣至全球，成為戰後西方的設計基礎。

推動者是現代最著名的平面設計師之一 Armin Hofmann 。從蘇黎世藝術學院畢業後，他作為一名版師流轉於 Basel 和 Bern。1947 年，在火車上遇見時任 Basel 藝術學院校長的 Emil Ruder 後，他得知那兒正缺一名教師，於是開始了 40 年的教學生涯，並在後來接替了 Ruder 的校長位子。

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

他的海報永遠高效審慎地使用顏色和字體。他將這種做法稱為“色彩的瑣碎化”。即便以當下的審美標準評判，它們依舊融合了創意與藝術氣質，完全不過時。

事實上，Hofmann 用在海報中的元素和如今的扁平化設計元素並無太大區別：照片蒙太奇，強調排版和實驗性的構圖，以及大量無襯線字體。

他還將自己的設計哲學和實踐寫入了一本名為 Graphic Design Manual 的設計指導手冊，成了無數平面設計師的必讀書目。

這種“剝離非必要元素”的風格專註於可讀性，和同樣以清晰可讀為準繩的 Helvetica 字體一起，在二戰後的西方設計史中，占據了一席之地。

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

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

盡管在 Jaskni 看來，Metro 難以推廣的原因還在於 Windows Phone 可憐的市場份額，以及它對開發者的高要求，“它基於wayfinding（路牌指示），是非常需要功力的一個領域。”

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

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

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

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

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

Jaskni 和 Frog 另一名視覺設計師胡玥申都認為這份報告傳達的並非扁平化的缺陷，而是“不好的設計”的缺陷。

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

他們說，設計風格其實是設計師審美與硬件基礎之間的拉扯結果。比如 Jaskni 認為“非常好看”的 Windows Vista 界面，限於硬件，在拖動窗口會出現卡頓現象。即便微軟擁有推廣這種精細設計的熱情，開發者也會因為懼怕消耗系統資源而放棄優化。

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

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

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

在它發布這個設計語言以前 ，Google 在設計上的戰術頗有些小心翼翼 ：設計沒有重大變化，只是在每次新產品發布時實施一些小小改變。

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

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

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

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

盡管一些設計師認為 Material Design 在顏色、陰影方向等都做了過於死板的限制，令他們創意受限，但Material Design 的發布算是扁平化設計“進化”成功的嘗試。

與 Material Design 發布同年，設計師 Jeff Escalante 也在Dribbble 等設計網站上發起了一次關於扁平化設計趨勢的討論，並提出了一種頗為簡單粗暴的解決方案：長陰影（Long Shadow）。

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

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

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

但除此以外，長陰影的使用廣度欠奉。和理論更成系統的 Material Design 相比，它並沒有辦法走得更長遠。

2013 年，人們關於扁平化設計的討論，還在於“它是一個趨勢，還是一次革命”。

但從現在它們的發展看來，扁平化設計已經成了一個容納度極高的存在。它還在依照變體不斷延續自己的影響力。

蘋果實際上也沒有將自己限定在最初那個扁平化設計的框架裏。在走扁平路線的 iOS7 中，“遊戲”圖標在一眾被拍扁的圖標中顯得不同，依舊擁有閃亮的光澤感。

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

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

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

比如微軟發布的全息設備 HoloLens。盡管用戶能夠與全息照相機進行互動，但 HoloLens 的操作系統與微軟其它設備所用的界面並不相同。

微軟希望能發布一套像 Metro 那樣，貫穿所有產品線的設計語言。

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

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

題圖來自：upslash

文章來源：