研發與設計專欄
UI 設計之新興趨勢
此篇文章將整理筆者近期觀察各大 UI 創作平台中,有哪些設計概念開始興起,並從視覺美感、實用面、市場接受度等面向切入,歸納出幾種強勢的應用

承叡揚 e 論壇 93 期 UI Design-Main Trend、Next Trend and Popular,該篇已介紹幾個近年發展多時的主流 UI 風格趨 勢,而此篇文章將整理筆者近期觀察各大 UI 創作平台中,有哪些設計概念開始興起,並從視覺美感、實用面、市場接受度等面向切入,歸納出幾種強勢的應用:例如界內常見且易用的手法、開始受到設計師們爭相嘗試的新概念、或是因應未來科技的發展而順應產生的變化等等。

Blur & Opacity / 半透明模糊

半透明模糊雖已起源多時,蘋果跟微軟都早已將此效果應用於介面中,只是較不被重視,往往只呈現在局部設計。尤其微軟 Windows Vista 系統引入毛玻璃特效 Aero 時,被批為華而不實,導致在 Windows 8 就給取消了,直至 Fluent Design (微軟流暢設計體系,是微軟於 2017 年開發的設計語言) 才再次強調,微軟表示,Fluent Design 新的視覺體驗核心原則不僅僅要美觀,還要讓使用者更快捷自然的使用應用程式。 (圖1)

07.1模糊效果簡單來說就是類似毛玻璃的效果。 隱約地透出背景資訊但不受背景干擾,比起純粹半透明的應用更能加強閱讀體驗。 此特性也與 AR 的發展有關,模糊產生的景深效果對於資訊與背景之間的關係可被強調出來,因此模糊技術在未來也會越來越被重視。(圖2 )

圖三

在視覺層面,也有不少加分效果,大面積的模糊產生出柔美的過渡與漸層,除了能突顯上方資訊外,本身也具有強烈的裝飾性。 簡單的手法卻又適用多種風格,已然成為設計師的熱門選項之一。 以下分析半透明模糊設計應用在不同風格上所產生的不同效果。

初期常見於應用在音樂、電影、遊戲等娛樂性質介面上,由於這類介面有較豐富的色彩,因此模糊效果可以產生出各種色彩斑斕的漸層 色,製作許多花俏吸睛的效果,呈現年輕活潑感的介面。(圖3)

不同的模糊程度與不同的背景有不同的感受, 可活潑也可唯美。當模糊程度最大化時,背景 的過渡變得極淡,若隱若現的底色使得整體色 調更加柔和,搭配簡約的元素即可呈現優雅氣質的效果。(圖4)

圖四

近期最多的應用莫過於商品性質的介面了,尤其在現代感、都會感、未來科技感等類型商品。這裡應用的毛玻璃材質特性,相對給人一種冷感、有距離感的氛圍,能夠把產品的塑造出高級、有質感的形象。 (圖5)

不只是大面積的運用,半透明模糊還有很多呈現方式,例如作為局部強調突顯的區塊、與照片融合做特殊變化、甚至當作照片陰影等等, 已有各式各樣的嘗試,相信未來會有越來越多的介面採用此設計手法。(圖6)

 

圖五圖六

Isometric / 多維視角 

利用特殊的角度 (視角) 呈現不同的畫面 感,多半用於照片或插畫。同樣的場景、 物件利用不同的視角就可能產生出不同的情境、感受。

Front View

最接近人視線的角度,如同經由相機觀景窗取景,前方視線的構圖是主要表現重點,此方式最容易突顯主體,感受最為直觀,若搭配 3D 物件畫面會更顯得寫實有臨場感。 (圖7)

Top View

由上往下的視角,就像在佈置桌面一樣,周邊擺設需要巧思,需要搭配好看的裝飾物件又不至於過分搶戲,以及跟資訊間的視覺拿捏需要掌握平衡。(圖8)

Perspective

透視視角,把原本平面的物件用半 3D 角度呈現,能讓原本呆板的情境增添效果,視覺 上也較吸睛,在當今插畫風格的設計上非常熱門。(圖9)

UI 設計之新興趨勢.06

Mixed Media / 多媒材混合

不同媒材間的組合能讓原本單一的素材變得更加有層次。例如照片中加入插畫元素,使 原本寫實單調的照片增添活潑感 ; 也常見運用於 3D 與 2D 間的互相混合,在 3D 物件中融入扁平化設計,讓畫面更加立體。

不只在網頁設計,此手法同樣流行於其他設計領域,例如網路上已有許多真人實拍影片搭配插畫元素或塗鴉動畫等實際案例。 (圖10) (圖11)

UI 設計之新興趨勢.07

Fluid Border Shape / 大圓角

隨著移動裝置端的崛起,介面自然也相應跟著發展出新趨勢,圓角設計就是明顯的例子。在過去,圓角/圓形的應用不外乎是為了達到吸引目光的視覺效果,而這幾年由於圓角設計應用更貼合手機的介面外框,因此受到許多設計師青睞,加上近幾年 Fluid/Liquid 等有機圖形崛起,搭配出具有更強烈視覺效果的圓角形式。(圖12) (圖13 ) (圖14)

UI 設計之新興趨勢.08

Dark Mode / 深色模式

Dark Mode 近年也有越來越多的應用,常見於系統介面中。最初的發展是蘋果的 System 7 OS 操作系統為了視覺敏感用戶,提供黑底白字的深色顯示模式功能,當時的夜間模式叫 CloseView。利用高對比度,或反色模式的顯示模式,讓使用者緩解視覺疲勞,在夜間模式下更易於閱讀。經過 20 多年的發展,蘋果於去年再次隆重發佈了 mac OS Mojave,其中關注度最高的,莫過於新版 Dark Mode,蘋果也制定了一套完整的使用指南,正式開啟此模式的新一波潮流。(圖15)

UI 設計之新興趨勢.09

目前夜間模式和類似的功能已經出現在各種平台與設備上。在產品的實際案例中,由於深色背景搭配鮮豔色彩易於營造數位/科幻感,又常見於應用在娛樂/科技等相關之產品,(圖16) (圖17) 其突顯色彩的優勢也常會被拿來用在數據/分析圖表。(圖18)

以上簡單介紹近期崛起的設計形式,在未來,相關應用預估將會更為廣泛。當然 UI 設計日新月異,近來活躍的也不只這些,而有些風格受限市場或接受度不高等因素,導致相對冷門的有趣設計,則留待下次介紹。