莫憂（廣東白云學(xué)院）

一、用戶界面設(shè)計(jì)的發(fā)展歷程

（一）早期圖形用戶界面

隨著20 世紀(jì)80 年代計(jì)算機(jī)技術(shù)的發(fā)展，用戶界面實(shí)現(xiàn)了從命令行界面向圖形界面的跨越。早期的圖形用戶界面采用了視覺隱喻的方法進(jìn)行設(shè)計(jì)，即模仿用戶現(xiàn)實(shí)生活中熟悉的事物的外形及其交互模式。

1984 年，Macintosh 計(jì)算機(jī)System 1.0 操作系統(tǒng)，首次將圖形用戶界面概念帶給了大眾。桌面隱喻開始使用，文件和應(yīng)用程序顯示為圖形圖標(biāo)，用戶可以在虛擬桌面上隨意放置。交互和圖形表意明確，如文件看起來像一張紙，用戶可以通過把文件和文件夾拖入廢紙簍來刪除文件。基于隱喻性的圖形用戶界面設(shè)計(jì)將晦澀難懂的電腦語言包裝成簡單易懂的圖形，降低了用戶的學(xué)習(xí)成本，提高了使用效率。

早期的圖形用戶界面受限于設(shè)備的顯示性能，圖形無法呈現(xiàn)精美細(xì)致的色彩與線條。因此其視覺特征多為純色與黑色描邊結(jié)合，低分辨率下呈現(xiàn)像素化的視覺表現(xiàn)，圖形輪廓具備擬物特征。初代圖形用戶界面的隱喻性視覺語言為后來用戶界面的視覺設(shè)計(jì)奠定了基礎(chǔ)。隨著數(shù)字產(chǎn)品設(shè)備的不斷更新，用戶界面設(shè)計(jì)進(jìn)入了全新的時(shí)代，擁有了更多可能性。

（二）擬物化界面

2007 年隨著數(shù)字設(shè)備的普及，擬物化UI 設(shè)計(jì)風(fēng)格開創(chuàng)。擬物化界面的視覺表現(xiàn)延續(xù)了早期圖形用戶界面的隱喻性視覺語言。并且由于設(shè)備的快速發(fā)展與升級，屏幕分辨率和色域有了顯著提高。在此基礎(chǔ)上的界面設(shè)計(jì)豐富了元素的細(xì)節(jié)與質(zhì)感，最大程度還原了現(xiàn)實(shí)物體的形狀、色彩、光影、紋理。映射真實(shí)生活場景的UI 界面給用戶提供了使用參考，用戶可以基于原有經(jīng)驗(yàn)快速上手。熟悉的場景也給用戶帶來了豐富的情感體驗(yàn)。擬物化界面非常適合對數(shù)字產(chǎn)品缺乏認(rèn)知的第一代用戶。

2012 年擬物化界面設(shè)計(jì)發(fā)展到達(dá)頂峰。隨著數(shù)字技術(shù)、社會(huì)環(huán)境、用戶需求的不斷發(fā)展，擬物化界面弊端逐漸顯現(xiàn)。例如，厚重的紋理、質(zhì)感、配色形成視覺干擾，用戶無法快速獲取重要信息；設(shè)計(jì)占用設(shè)備更多的存儲(chǔ)空間，加載速度慢；設(shè)計(jì)成本高，效率低，多終端適配性差。

此時(shí)，對數(shù)字界面認(rèn)知成熟的用戶已不再需要一個(gè)栩栩如生的界面來指引用法。為了克服這些問題，提供更加高效、直觀、便捷的交互體驗(yàn)，另一種新興設(shè)計(jì)風(fēng)格應(yīng)運(yùn)而生。

（三）扁平化界面

2013 年，某互聯(lián)網(wǎng)巨頭公司在產(chǎn)品的系統(tǒng)界面中應(yīng)用了全新扁平化界面風(fēng)格。清新的糖果色調(diào)與干凈簡約的視覺風(fēng)格頓時(shí)讓用戶眼前一亮。扁平化風(fēng)格就是去除擬物化風(fēng)格中所有的立體與材質(zhì)裝飾效果，以點(diǎn)線面的形式表現(xiàn)可識別的視覺元素，色彩傾向于高飽和度、高明度的色調(diào)。扁平化界面去除了非功能性的視覺干擾，提高了用戶的識別效率。

在適配性方面，扁平化元素可以以矢量格式呈現(xiàn)，前端開發(fā)效率較高，能夠適配任何尺寸的屏幕且不失真。至此，扁平化成為主流的設(shè)計(jì)風(fēng)格延續(xù)至今。

然而，扁平化風(fēng)格的大量使用及其單調(diào)的表現(xiàn)讓用戶產(chǎn)生了審美疲勞。同時(shí)，界面層級的平面化易導(dǎo)致誤操作，過于簡單的界面?zhèn)鬟_(dá)情感的能力較弱等問題逐漸顯現(xiàn)出來。很多設(shè)計(jì)師開始挖掘新的UI 設(shè)計(jì)風(fēng)格，對擬物的重新思考成為突破口。

二、新擬態(tài)風(fēng)格的突破

在扁平化風(fēng)格發(fā)展到鼎盛時(shí)期，人們對扁平化越來越熟悉之后，出現(xiàn)了一種叫作新擬態(tài)（Neumorphism）的視覺風(fēng)格。該風(fēng)格起源于2019 年11 月5 日烏克蘭設(shè)計(jì)師Alexande Plyuto 在設(shè)計(jì)網(wǎng)站Dribble 發(fā)布的一組手機(jī)銀行界面設(shè)計(jì)作品。其UI 設(shè)計(jì)融合了擬物化的質(zhì)感和扁平化的簡約，清新的外觀讓人們眼前一亮并紛紛模仿，同時(shí)涌現(xiàn)出了大量概念設(shè)計(jì)作品。

雖然有擬物的參與，但新擬態(tài)風(fēng)格削弱了材質(zhì)的表現(xiàn)，把重點(diǎn)放在對真實(shí)光影的模仿，以此表現(xiàn)出從界面中擠出凸起或凹陷的部分。其背景使用純色，不帶任何紋理修飾，僅搭配光影就能讓人感受到逼真的啞光塑料質(zhì)感平面。新擬態(tài)風(fēng)格的圖形元素輪廓與扁平化相似，在簡約的基礎(chǔ)上多了些細(xì)節(jié)刻畫，具有強(qiáng)表意性，能讓用戶與其認(rèn)知體系聯(lián)系在一起。光影塑造是新擬態(tài)風(fēng)格的重點(diǎn)，需要充分運(yùn)用內(nèi)陰影、外陰影、內(nèi)發(fā)光、外發(fā)光去打造層次感和立體感，如圖1。新擬態(tài)風(fēng)格有深色版和淺色版，在大面積深灰色或米白色基礎(chǔ)上，通過飽和度高的亮色對重要元素進(jìn)行強(qiáng)調(diào)。

新擬態(tài)風(fēng)格給用戶營造了一種簡約、清新、微立體的視覺感受。輕質(zhì)感的特征增強(qiáng)了界面與現(xiàn)實(shí)的聯(lián)系，使用戶產(chǎn)生親切感，增添了扁平化缺少的情感因素。與眾不同的視覺形象也增加了新鮮感。這在當(dāng)下獨(dú)樹一幟的設(shè)計(jì)風(fēng)格給設(shè)計(jì)者們帶來的啟發(fā)不局限于它具體的表現(xiàn)形式，更多的是對“物感” “微寫實(shí)”設(shè)計(jì)的思考與探索。

三、輕擬物UI設(shè)計(jì)的興起

新擬態(tài)風(fēng)格在其諸多優(yōu)勢的情況下，也因可訪問性、代碼實(shí)現(xiàn)效率等問題沒有成為當(dāng)下主流的UI 設(shè)計(jì)風(fēng)格。但新擬態(tài)風(fēng)格給之后UI 設(shè)計(jì)風(fēng)格的發(fā)展指引了方向，一類半現(xiàn)實(shí)主義的擬態(tài)設(shè)計(jì)——輕擬物UI 設(shè)計(jì)如雨后春筍般涌現(xiàn)。輕擬物UI 設(shè)計(jì)延續(xù)了新擬態(tài)風(fēng)格的設(shè)計(jì)理念，以功能性為主導(dǎo)，對于物理質(zhì)感做輕量化處理，重點(diǎn)仍然放在光影的塑造，視覺表現(xiàn)介于擬物化與扁平化之間。與此同時(shí)衍生出了多元質(zhì)感的輕擬物UI 設(shè)計(jì)風(fēng)格，包括但不限于新擬態(tài)、玻璃擬態(tài)、粘土擬態(tài)等。各互聯(lián)網(wǎng)巨頭開始在部分界面中采用輕擬物的UI 設(shè)計(jì)，印證了這一趨勢，如圖2。

圖2 某產(chǎn)品備忘錄UI風(fēng)格對比（圖片來源：iPad界面截圖）

（一）輕擬物UI 的特征分析

1.圖形

用戶界面中的圖形元素一般包括各種控件及圖標(biāo)。圖形元素在界面中是一種視覺語言，向用戶傳遞著應(yīng)用的交互邏輯、功能信息，和狀態(tài)。因此，輕擬物UI 的圖形元素需要有極強(qiáng)的表意性，通過與用戶熟悉的事物形象建立聯(lián)系，使用戶能夠快速且準(zhǔn)確理解圖形指代的含義。

在控件圖形方面，造型使用大量圓角來創(chuàng)造柔和與親近的感受。圖標(biāo)的造型輪廓與扁平化一致，具有簡約的特征，但也增加了少許細(xì)節(jié)。

2.色彩

在色彩方面，輕擬物UI 設(shè)計(jì)的組件與背景傾向于使用同類色，元素之間對比度較低，給人一種清透干凈的感覺，避免使用純黑或純白，這樣不利于后續(xù)光影的打造。圖標(biāo)和層級較高的元素則使用飽和度高、對比度大的色彩突出其重要性，同時(shí)營造活潑、時(shí)尚的氛圍。作為輕擬物風(fēng)格雖然有擬物的參與，但其僅保留部分的實(shí)物色彩特征，維持一定的抽象感。色彩具有傳遞情緒體驗(yàn)和樹立產(chǎn)品形象作用，因此在創(chuàng)建配色方案時(shí)需考慮品牌調(diào)性和應(yīng)用場景。

3.光影

光影的塑造是輕擬物UI 的核心視覺表現(xiàn)手法。它能夠?qū)⑵矫婊膱D形轉(zhuǎn)換成立體的效果。光源分為主光源和環(huán)境光。同一個(gè)應(yīng)用里的界面其主光源照射方向與角度需一致，以符合現(xiàn)實(shí)邏輯。通常情況下，主光源從左上方向右下方以45 度角照射。環(huán)境光的色彩由UI 元素的背景顏色決定，會(huì)在元素的暗部體現(xiàn)出來。環(huán)境光的參與增加了界面的氛圍感。因主光源和環(huán)境光的影響，元素表面會(huì)產(chǎn)生極為豐富的層次，分為高光、亮部、暗部、環(huán)境反光、投影。在塑造光影層次時(shí)應(yīng)確保各區(qū)域過渡自然，色彩柔和。輕擬物UI 的光影效果不以高度現(xiàn)實(shí)還原為目的，而是注重柔和、精致。

4.肌理

肌理就是物體表面的紋理，用戶結(jié)合自己的生活經(jīng)驗(yàn)與認(rèn)知，可以通過肌理感受到元素的物理質(zhì)感。肌理可以模仿物質(zhì)表面的紋理結(jié)構(gòu)進(jìn)行視覺表現(xiàn)，如木紋、布料、皮革、磨砂。肌理與光影共同作用能表達(dá)出UI 元素的粗糙程度、透光程度、軟硬程度。單一物質(zhì)感受即能形成一種獨(dú)立的輕擬物UI 風(fēng)格，如玻璃擬態(tài)風(fēng)格，因此定義風(fēng)格的核心元素的肌理表現(xiàn)基本為一種。

（二）輕擬物UI 的優(yōu)勢與局限分析

1.優(yōu)勢

輕擬物UI 具有較強(qiáng)的情感性，即能滿足用戶一定程度的情感需求，通過創(chuàng)造積極的情緒建立產(chǎn)品與用戶之間的連結(jié)。輕擬物UI 通過復(fù)刻較柔和的現(xiàn)實(shí)光影效果，創(chuàng)造了熟悉感、場景感、舒適感，再結(jié)合用戶的心理聯(lián)想，可以帶來輕松舒適的情感體驗(yàn)。它是滿足了用戶對于產(chǎn)品的外觀視覺、功能性和易用性之后，進(jìn)一步滿足了更高層次的心理需求。

輕擬物UI 在色彩的選擇上較淡雅，畫面干凈、整潔，僅在重要信息上采用高飽和、高亮度的色彩突出。因此在信息主次關(guān)系的表現(xiàn)上，輕擬物UI 有明確的引導(dǎo)性。3D 質(zhì)感的按鈕和圖標(biāo)，配上明確的動(dòng)效反饋，能給用戶真實(shí)的點(diǎn)擊感和觸發(fā)感，并引導(dǎo)用戶做出正確的操作。

輕擬物UI 的獨(dú)特性給用戶帶來了極大的新鮮感，緩解了用戶對于扁平化界面的審美疲勞。只要設(shè)計(jì)者在恰當(dāng)?shù)膱鼍叭?yīng)用，并處理好識別性、可訪問性等影響使用體驗(yàn)的因素，就會(huì)給界面帶來整體視覺上的提升。局部使用輕擬物風(fēng)格也能夠在界面中起到畫龍點(diǎn)睛的作用。在數(shù)字產(chǎn)品數(shù)量劇增，且同質(zhì)化問題嚴(yán)重的情況下，輕擬物UI 能夠讓產(chǎn)品形成獨(dú)特的品牌形象，提升品位、格局、個(gè)性化，在視覺效果上達(dá)到突破創(chuàng)新，從而打動(dòng)消費(fèi)者。

2.局限性

輕擬物UI 雖然給扁平化界面增添了不少光彩，但其擬物化的特征降低了信息的傳遞效率。柔和的光影過渡和較低的對比度導(dǎo)致其可訪問性降低。視力較弱的人群難以辨別信息分區(qū)與層級。輕擬物UI 風(fēng)格在界面當(dāng)中更多是以裝飾的功能存在，因此不適合大面積使用，否則會(huì)出現(xiàn)膨脹感、擁擠感。應(yīng)該在適合的組件或圖標(biāo)中少量使用。如果過分強(qiáng)調(diào)質(zhì)感而不注重界面易用性，將會(huì)造成負(fù)面效果，影響交互體驗(yàn)。

（三）輕擬物UI 的應(yīng)用分析

基礎(chǔ)的輕擬物UI 風(fēng)格能在界面中創(chuàng)造立體感的圖形元素，因此該風(fēng)格較多應(yīng)用于圖標(biāo)，或具有特殊功能的工具型按鈕。而一般組件、面板則傾向于使用同樣屬于輕擬物風(fēng)格類型的新擬態(tài)風(fēng)格，或是扁平化風(fēng)格。全輕擬物UI 信息層級的表現(xiàn)能力較弱，因此界面的層級結(jié)構(gòu)宜控制在3個(gè)以下，頁面信息量保持簡約，采用高邏輯性布局。為了保持界面柔和的調(diào)性，元素形狀都使用圓角。

基于以上的特征分析與應(yīng)用分析，輕擬物UI 風(fēng)格適用于功能性界面，功能點(diǎn)較明確的，例如工具類App，包括計(jì)算器、時(shí)鐘、日歷，以及智能物聯(lián)網(wǎng)App，包括智能家居、汽車終端；也適用于展示類界面，如官網(wǎng)介紹頁面、產(chǎn)品展示頁面，目前流行以少量重點(diǎn)信息展示為主。這種控件不多的界面適合整個(gè)應(yīng)用輕擬物風(fēng)格，界面也不會(huì)顯得擁擠，能表現(xiàn)出現(xiàn)代、科技、活力、時(shí)尚的視覺感受，與產(chǎn)品本身調(diào)性一致。其他App 可以在局部應(yīng)用進(jìn)行視覺強(qiáng)化，加強(qiáng)用戶對特定區(qū)域的視覺感知。

輕擬物UI 風(fēng)格能夠幫助產(chǎn)品創(chuàng)造差異性，從眾多同質(zhì)化應(yīng)用產(chǎn)品中脫穎而出。具體的應(yīng)用方式可以分為三種。

一是以主題皮膚的方式設(shè)計(jì)整套UI供用戶切換使用，體現(xiàn)用戶的年輕、時(shí)尚，和個(gè)性。

二是結(jié)合品牌識別元素進(jìn)行設(shè)計(jì)，例如在Logo、輔助圖形、IP 形象等元素上使用輕擬物風(fēng)格，并在UI 界面中充分應(yīng)用這些元素。

三是放大情感性這一優(yōu)勢的影響，在需要帶動(dòng)用戶情緒的頁面加入一些有趣且互動(dòng)性強(qiáng)的元素，例如缺省頁、加載頁、個(gè)人頁等。以上三種設(shè)計(jì)思路能夠充分發(fā)揮輕擬物UI 風(fēng)格的優(yōu)勢，提升產(chǎn)品的差異性和好感度。

四、輕擬物UI設(shè)計(jì)的發(fā)展趨勢

伴隨著輕擬物UI 設(shè)計(jì)理念的盛行，未來將可能衍生出更多質(zhì)感的擬態(tài)設(shè)計(jì)，并成為獨(dú)立風(fēng)格存在。新擬態(tài)、玻璃擬態(tài)、粘土擬態(tài)等皆為根據(jù)其擬態(tài)物質(zhì)定義的風(fēng)格。某種風(fēng)格的獨(dú)立使用有時(shí)無法最大化其優(yōu)勢，反而會(huì)適得其反。例如，新擬態(tài)風(fēng)格凸起、凹陷的單一樣式在界面中完全使用時(shí)帶來的擁擠感和視覺疲勞證明這并不是一個(gè)很好的設(shè)計(jì)方式。因此，根據(jù)實(shí)際需要、視覺效果的綜合考量，將多種風(fēng)格融合使用更能夠使UI達(dá)到驚艷的效果。風(fēng)格融合應(yīng)用是未來輕擬物UI 設(shè)計(jì)的發(fā)展趨勢。

在VR、AR、MR 領(lǐng)域的應(yīng)用中，輕擬物UI 設(shè)計(jì)風(fēng)格具有較大潛力。因?yàn)樗奈⒘Ⅲw的效果看起來像是可觸摸的、真實(shí)的。在未來，用戶有較大可能性傾向于具有3D 感的、有深度感的UI 設(shè)計(jì)風(fēng)格。輕擬物UI 設(shè)計(jì)可以做到這個(gè)效果，盡管是偽3D。當(dāng)然，3D 感的塑造方式也可以是3D 建模，或者其他更多方式。

UI 設(shè)計(jì)是除了功能性之外讓一個(gè)數(shù)字產(chǎn)品脫穎而出的最大因素。隨著了解各種風(fēng)格的誕生、融合、循環(huán)、迭代，我們能夠最大程度設(shè)計(jì)出符合用戶期望的UI。這就是研究和探索設(shè)計(jì)趨勢的意義所在。