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

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

擬真風格的發跡與沒落

ios擬真風格的介面

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

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

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

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

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

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

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

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

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

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

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

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

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

光照 Light:

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

可參考BUILD 2017 Fluent Design Light 影片網址 https://youtu.be/H3hCNSoTou8

深度 Depth:Fluent Design在AR表現上,光線的效果

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

可參考BUILD 2017 Fluent Design Depth影片網址 https://youtu.be/-JOB8MRdKec

動態 Motion:

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

可參考 BUILD 2017 Fluent Design Motion 影片網址 https://youtu.be/NRbFo09mqeI

材質 Material:

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

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

可參考 BUILD 2017 Fluent Design Material 影片網址 youtu.be/e93MrtXS8iA

縮放 Scale:Fluect Design中常見的毛玻璃效果的側邊欄

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

可參考 BUILD 2017 Fluent Design Scale影片網址:https://youtu.be/l7DpQA6JTUI

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

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

設計元素的擬真應用

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

Diffuse Shadow:

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

Diffuse Shadow 大量的使用 也是近年常見的設計風格

文字與圖片的交疊:

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

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

虛實混合的設計虛實混合的設計

微漸層:

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

漸層的使用與新面貌

Parallax:

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

視差滾動的空間感表現更加強烈

3D:

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

3D物件應用

擬真始終沒有真正消失

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