UI設計,扁平化與擬物化的進化史

1 評論 12629 瀏覽 7 收藏 6 分鐘

2010,當windows phone開始扁平化的時候,換來的是世人的嘲笑。
2011,當安卓4.0開始扁平化的時候,人們把這當作安卓是為了和蘋果抵抗,標新立異。
2013,ios 7開始扁平化,這股設計風格成為設計潮流。

擬物設計就是追求模擬現實物品的造型和質感,通過疊加高光、紋理、材質、陰影等各種效果對實物進行再現(也可適當程度變形和夸張扁平化設計就是摒棄以上對效果(尤其是高光、陰影等能造成透視感的效果)的追求,追求通過抽象、簡化、符號化的設計元素來表現。

關于擬物化和扁平化,我們可以通過以下兩張圖片直觀感受一下:

黃健明《Salvation》

519c9ef3e744f949580000011

畢加索《亞維儂的少女》

519ca459e744f92cb60000011

擬物風格VS扁平化風格

一、如何區別扁平化 (Flat) 和擬物化 (Skeumorphism) 兩種風格?

擬物化設計-skeuomorphism
特點:界面模擬真實物體的材質、質感、細節、光亮等;人機交互也擬物化,模擬現實中的交互方式 擬物設計的會讓你認出這是個什么東西。

好處:
·認知和學習成本低:我外婆能看懂iOS里面幾乎所有原生應用的圖標;各種樂器類應用的擬物化設計;
·各種按鈕的視覺質感和按下去之后的交互效果,養成用戶對這類“東西”的統一認知和使用習慣;
·人性化的體貼:我相信有很多同學都非常喜歡ibooks的體驗,用它來閱讀確實是一種享受。
壞處:
擬物化本身就是個約束,會限制功能本身的設計。

扁平化設計-Flat

特點:界面上單色極簡的抽象矩形色塊、大字體、光滑、現代感十足;交互的核心在于功能本身的使用,所以去掉了冗余的界面和交互,而是使用更直接的設計來完成任務;扁平化設計則讓你意會這是個什么東西。

好處:
·簡約而不簡單,扁平的設計搭配一流的網格、色彩設計,讓看久了擬物化的用戶感覺煥然一新;
·突出內容主題,減弱各種漸變、陰影、高光等擬真視覺效果對用戶視線的干擾,讓用戶更加專注于內容本身,減少用戶使用這類產品的負擔,在扁平化的視覺和優秀的架構設計下顯得非常簡單易用;
·設計更容易,優秀扁平的設計只需要包含良好的架構、網格和排版布局,色彩的運用,高度的一致性,而不需要考慮更多的陰影、高光、漸變等等。(其實也是相對來說的,這里爭論比較大,扁平化對于色彩運用和排版布局的要求更加高了;

壞處:
需要一定的學習成本,且傳達的感情不豐富,甚至過于冰冷。
我們看一下Chrome的Logo的扁平化設計:

519c9425e744f93e760000013

另一個扁平化例子:

519c94258ddf8751480000013

擬物化ROM

519c9425e744f935960000013

扁平化ROM

二、UI設計,扁平化 (Flat) 還是擬物化 (Skeumorphism)?

在數碼設備普及度不高的時代,擬物化是有效果的,尤其對于孩子和老人來說,擬物化設計更直觀有趣。但是隨著數碼科技的發展,擬物化的好處會越來越少,隨之帶來的是開發成本增加、審美疲勞等問題,擬物風格更多地作為一種視覺裝飾。

事物總是需要一個抽象的過程,就如同畢加索畫的這只牛。

519ca0518ddf8709c20000013

關于扁平化和擬物設計有很多爭論,偏激點的說法就是扁平化即將取代擬物化設計。扁平風格還是擬物風格?其實還要根據產品功能。比如,閱讀類或者資訊類的產品就可以極盡扁平,樂器類的產品我無法想象如何扁平。所以,功能先行而不是設計先行。

原文地址:視覺中國

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!