「並不是扁平化設計降低了效率,而是不好的設計降低了效率。」

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

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

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

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

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

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

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

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

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

「所以我從來都不認可『扁平化』這個詞,我覺得來描述這種風格更好的一個詞是平面化」,frog 視覺設計師 Jaskni Wong 對《好奇心日報》說。

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

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

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

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

Windows Vista 界面

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

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

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

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

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

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

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

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

蘋果水晶質感的界面

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

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

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

改進後的版本,將可點元素用深色塊框住

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

文章出處/ 好奇心日報

誠摯邀請你成為好朋友-->
        

About The Author

之所以叫「好奇心日報」,是因為我們認為好奇心是人類最美好的品質之一,我們篩選最有價值的信息,你能在這裡看到全球最有想法、最值得關注的各界動態,以及它們背後的故事

Related Posts

留下你的看法: