羅胖子的這一錘子又砸起了設計界有關 UI 設計風格的討論,那我也借此聊聊自己的觀點,純當做一個思考記錄。
先說說標題中的這兩個詞,或許對一些搞設計的朋友并不陌生,但今天前我也只是知曉后者,前者算是剛剛學到。為此特地去網上查了相關出處,結果中文圈里基本翻不到有用的資料,最后在英文版的維基中才算找到些答案。
skeuomorphism 是個合成詞,原型是 skeuomorph,取自希臘語中的 skeuos 和 morphê,意思分別相當于英語中的 container 和 shape,而 ism 則是一個后綴名,表明這個詞來源于拉丁語或希臘語。skeuomorph 在詞典中被解釋為[同形物],也可以理解為[仿制品],而它的變形 skeuomorphism 則更直接,意為[借殼]。至于有沒有別的更貼切的翻譯我就不得而知了,不過這都不是事兒,只是因為我第一次看到這個詞就感覺這貨不像英語,結果一查果然來自于外來語,考慮到網上又沒幾個答案,所以貼在這里僅供參考。
那么,說回正題。如今的 UI 領域中流行兩種風格迥異的設計手法,其一就是 Apple 所引領的 Skeuomorphism Design,俗稱[擬物化設計];其二則是以 Microsoft 為代表的 Flat Design,俗稱[扁平化設計]。何謂 Skeuomorphism 又何謂 Flat ?
首先來看 Skeuomorphism 風格的代表 - Convex。它是 iOS 平臺下的一個單位轉換軟件,除了華麗麗的視覺效果之外,每個選項都可以模仿現實中物品的操作方式來設置數值。比如溫度計可調整水銀高低,轉速表可以左右擺動…即使是初次使用,你也不會因為看似復雜的界面而感到無從下手。
Skeuomorphism 設計的好處在于,可以通過對實物外形和質感的模擬而帶來強列的觀感,因為這樣的設計符合大多數人的審美觀,對產品的印象分會有很高的加分作用,而更重要目的在于通過人們對某物體的習慣性認知來加快使用產品的學習速度,提高易用性。所謂的[習慣性認知]就好比你看到[按鈕]會去[按],看到[書本]會去[翻],在這個過程中所表現出的是人們對于生活中各種常項潛移默化的自然反應,這種反應所帶來的好處不言而喻,既可以盡量少的花費資源來指導用戶如何使用產品,同時也可以讓用戶在對產品產生親切感的同時更快的形成反射弧,降低因多次記憶所可能帶來的挫敗感。
所以我認為 Skeuomorphism 設計最好的詮釋是要[形][神]兼具。當然,如果只是追求純粹的[形]似也并不是一件錯事,只不過在設計過程中要把握好一個[度]的存在,因為一些過度的設計看似錦上添花,但卻可能畫蛇添足,甚至還可能幫倒忙,導致用戶出現認知預期之外的困惑感。
再來看 Flat 風格的代表 - Windows Phone。起初微軟給這套界面起名為 Metra UI,后來貌似是版權問題,在 Win8 發布后定名為 Windows UI。相當大膽和另類的反傳統設計,雖然一露面就招來了褒貶不一的爭論,但不得不說這套 UI 在視覺上讓如今被 Apple 侵蝕了多年的眼睛有一種如沐春風般的清新感。
Flat 的本意是[平坦的,扁平的],所以也讓一些人把平面化的設計都歸為此類,從詞意本身來理解是沒錯的,但是就如同 Skeuomorphism [形][神]兼具,在我看來平面化只是 Flat 的表現形式,它的核心是[簡],即用簡潔和抽象的手法來完成設計所要達到的效果,也正因此而不再去追求 Skeuomorphism 中的細節和質感,轉而通過更加明確的引導方式來幫助用戶完成操作。
不過[簡潔]并不表示[簡單],從見到 Windows UI 的第一眼,我就說這套 UI 不簡單。雖說它可能不需要你去掌握各種紋理、高光以及陰影的實現方法,只要有點制圖軟件基礎的人就可以輕松畫出一個界面,但[畫的出]和[畫的好]完全是兩碼事,在它看似簡單的色塊拼湊下,蘊含著對色彩和布局功力的考驗,沒有深厚功力的設計師是絕對搞不定的。Windows App Store 里那些[花里胡哨]的應用就是最好的佐證。再不信?你自己試試就知道了。
總的來說,Skeuomorphism 是讓操作更自然,而 Flat 則是讓操作更直接。無論是哪一種,都不能簡單的從字面意思去理解,因為它們不僅僅是一種設計手法的視覺呈現,對一款產品來說,更重要的是其中要包含更多細膩和妥貼的交互體驗,只有這樣才能做到真正的設計以[人]為本,而不是為了設計而設計。