UI擬真風趨勢即將捲土重來?

過去幾年是扁平風格大行其道的光輝年代,雖然現在在各個網站設計當中還是保有極高的市佔率,但仔細發現,現在的扁平風格已經跟過去的Metro UI式的純扁平已有明顯的差別,不僅僅是扁平既有缺點的改善,最重要的是,設計師們對於介面設計更加講究細節,更講究對於現實世界的合理化原則。

擬真風格的發跡與沒落

在過去,人們並不熟悉裝置的操作時,現實感強烈的UI介面有助於快速理解操作方式。例如垃圾桶圖標代表可以把不要的文件丟進去、寫實的月曆中被釘選的日期、把可點擊按鈕做得極其立體,一眼就知道可以點擊,而這強烈立體感的表現手法一直都是Mac / ios的強項。如下圖:

圖片來源:https://www.graffletopia.com/stencils/413#fullscreen

過去的ios介面中充滿陰影、玻璃反光等元素。因此,更精確的來說,這就是『擬物風格 Skeuomorphism』- 強調物件的實體感。

擬物風格最大的優勢,就是對於初上手的使用者可以用以對現實的連結,快速的理解各個元件是如何操作以增加其效率。

隨著對物件的刻畫越來越極致,到達巔峰時期時卻也開始讓人詬病,質疑的聲音開始出現。當物體畫的越來越細膩,目的也就只是美觀罷了,過度的裝飾不僅喧賓奪主,對於UI的操作沒有幫助反而令使用者混淆,讓人分心。

圖片來源:https://www.imore.com/no-more-skeuomorphs

另一方面,擬物的對象本身也有時代性的問題,過去習慣使用的東西如電話簿,名片盒,月曆,甚至指南針等等,很多都已漸漸淘汰,淪為功能的代表性圖示罷了,現代人的使用習慣早已取代過去的舊產物,用這些舊時代的物品來試圖引導現今UI操作是很詭異的事。

再來就是,現今極簡設計的美感當道,回頭看這些寫實且過度花俏的擬物風格顯得突兀,更遑論複雜的細節刻畫佔用太多設計師的時間、拖累整個工作效率、以及對於檔案大小及效能等等問題…種種缺點,擬物風格勢必被扁平風格取代,最後沒落。

圖片來源:http://materialdesignblog.com/how-material-design-sparked-evolution-of-web-design/

既已沒落,又為何提到捲土重來呢?

回歸到擬真風格的定義:一般在 UI 的應用上,是代表一些看起來、或是使用起來很像現實世界中的相對事物。

上述提到的都是過去的擬真風格表現方式,強調對單一物件的細節刻畫。如果從更廣義的範圍去討論,只要與現實世界有所連結,是否就可稱之為擬真?而如今的設計趨勢,便是越來越強調現實世界的物理特性。

2014年Google發表了一套設計語言 — Material Design

一系列的設計規範中,物理特性就是其中一個很重要的概念。從紙的型態模擬觀點來想像,由於電子螢幕是完全平面化的,不像現實當中的物體是3D的,所以介面中的物件就像是一張張的紙,利用紙張的特性模擬空間感,凸顯資訊內容間的階級關係,而這樣的空間感表現是利用陰影的投射決定物件的高低位置,這樣的陰影不只是渲染的方式而已,而是利用光照的原理,模擬出陰影的角度,產生更合乎現實,更自然的感覺。

圖片來源:https://www.inside.com.tw/2014/08/15/material-design-trend

Material Design其中還有一個設計概念,就是轉場動畫,同樣賦予物理特性,在動畫的過程中,拉伸,回彈時的動態效果模仿了橡皮筋的特性,也多了更真實的細節,例如垃圾桶圖標有了傾倒的動畫,或是通過指示條的旋轉告訴你刪除的過程。

在今年,windows也推出了一套自己的設計語言-Fluent Design System,主要目的是為了因應未來ARVR裝置而做的設計準備,因此配合現實環境的考量相當重要,當中包含的五大設計原則都與物理特性息息相關:

光照 Light :在點擊或是hover的動作上加入光照效果,或是像柔和的光源灑落於空間中,物件本身的反光質感,與material design的光影效果是用陰影的擴散是不同的概念。

深度 Depth — 深度的概念從Material Design就已經被強調過,但FDS則是用更多的方式去呈現,如景深的模糊效果、視差滾動的動態效果、物件彼此的大小與位置。

動態 Motion — 物件的動態效果更強調細膩的變化,彼此之間的動態效果有個別的時間差,比起單調的同時動作,看起來會更流暢自然,並且與真實的空間前景後景的物理概念一樣,不同的時間差更容易在想要凸顯的主體上達到有效的聚焦效果。

材質 Material — FDS將會出現大量的模糊透明背景,也就是模擬毛玻璃的材質感,通常也會帶入些微光源效果,除了吸睛的視覺,另一方面在AR / VR介面上,感知空間中背景的物件是很重要的,因此模糊背景的利用可以在不影響觀看內容的情況下又能夠做到背景的暗示。

而毛玻璃效果其實最早在windows vista系統中就已被運用,只是在當時由於效能以及干擾視線等問題僅僅應用在小區塊,這次FDS的發表盛大重迎毛玻璃特效,成為其中強烈的視覺焦點。而iOS與MacOS在近幾版也大量的使用模糊效果,而FDS在設計精神上直接強調於AR / VR的應用更再強調出此設計語彙於未來的重要性。

縮放 Scale — 在視覺上,眼前的物體大,越後面的相對較小,因此縮放也是利用來營造空間感的設計特性。

FDS發表的設計概念圖:

可以看出此設計風格有極其強烈的擬真感,光源的帶入、立體空間、投射陰影、以及物件之間前後的深度變化,主要在於模擬環境,而非過去的模擬實體,並且將極簡風格應用在資訊內容呈現上,兩者相輔相成,運用得宜的話視覺效果令人相當驚艷,也許能將UI設計風格拉到新的高度。國外也已有越來越多設計師利用此風格創作。

另外稍微提下在這風格當中觀察到的一點,Fluent design在用色上偏灰,色彩較為中性,是否同樣是在營造現實環境中,我們大多看到的都是中性色彩,不容易會出現過於突兀搶眼的顏色,因此為了看起來自然而刻意考量的設計策略呢?

圖片來源:http://www.independent.co.uk/life-style/gadgets-and-tech/news/microsoft-windows-10-new-design-lose-classic-features-minimise-borders-image-look-a7572996.html

設計元素的擬真應用

除了上述兩套設計語言有明確的提出物理觀點之外,其實在現今流行的設計元素中,也可以從中看出不少端倪,例如:

Diffuse Shadow: 擴散陰影從Material到AppleTV的UI中再度被大量使用,這個時間點開始Diffuse Shadow正式火紅起來,另外陰影反映背景顏色的現象也更加貼和其真實物理特性。

文字與圖片的交疊:利用特殊的修圖方式,讓文字融入圖片當中,產生前後的距離效果。

圖片來源:https://dribbble.com/shots/3447817-420-page-not-found
圖片來源:https://dribbble.com/shots/1937303-Footer-concept

類似的還有破格設計,同樣在呈現前後距離,文字就像是浮在前面一般。透過空間感破格交叉的群組能夠讓物體間的過度更加順暢,而不會有太生硬的區塊切割。

圖片來源:https://dribbble.com/shots/2264604-Muusic-web-concept

微漸層:利用柔和的顏色漸變以及角度的變化,模擬光源帶入的感覺。

Parallax: 除了動態的視差以外,利用前後景模糊,主體清晰來模擬立體空間感。

影片來源:https://dribbble.com/shots/2766478-Three-Failed-Interviews-and-One-Cheat-Sheet-Guglieri-com

3D:過去的3D應用基本上是為了表現立體感,而如今3D越來越成為一套設計風格,並且有趣的是,現在3D設計風格反而不一昧追求真實感,而是利用高彩高亮的顏色或是幻想式的模擬搭配營造出一種超現實的氛圍。

圖片來源:https://dribbble.com/shots/3522736-Mono-Studio
圖片來源:https://kknews.cc/design/oy4e9vo.html
圖片來源:https://kknews.cc/design/oy4e9vo.html

結論

以上這些設計元素都可以看出與現實環境或是物理特性的連結或是衍生,不管有意無意,在虛擬世界中我們或許都下意識習慣與現實有所連結,這也就是為什麼擬真始終沒有真正消失,只是用不同或是比較隱晦的形式存在在各個地方,而如今VR/AR的崛起,看到了未來裝置的應用,而這些擬真特性理所當然就被強調出來了,在未來,或許就是新一代擬真風格的年代。

Like what you read? Give Patrick Tang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.