UI設(shè)計中的扁平化與擬物化視覺傳達(dá)解析

孫驍莉 賀鵬

摘 要：在當(dāng)前的UI設(shè)計中，扁平化與擬物化是其最為常見的兩種設(shè)計方式與設(shè)計風(fēng)格，其各自擁有的優(yōu)勢特點也不盡相同。本文將通過簡單說明UI設(shè)計以及扁平化與擬物化設(shè)計的基本內(nèi)涵，結(jié)合具體UI設(shè)計案例，通過對比分析UI設(shè)計中的扁平化與擬物化，指明二者各自存在的優(yōu)勢與劣勢，并思考未來UI設(shè)計的發(fā)展方向。

關(guān)鍵詞：UI設(shè)計;扁平化;擬物化

0 引言

通過解析UI設(shè)計中的扁平化與擬物化設(shè)計，一方面可以使得人們對UI設(shè)計當(dāng)中的扁平化設(shè)計、擬物化設(shè)計予以深刻認(rèn)知，準(zhǔn)確掌握兩者的聯(lián)系與區(qū)別，另一方面也可以在厘清扁平化與擬物化內(nèi)在關(guān)聯(lián)性的基礎(chǔ)上，為如何有效落實UI設(shè)計，進(jìn)一步強化UI設(shè)計效果提供相應(yīng)的理論參考與指導(dǎo)幫助。

1 UI設(shè)計及其扁平化設(shè)計與擬物化設(shè)計的內(nèi)涵分析

1.1 UI設(shè)計

UI為User Interface的首字母縮寫，意思是用戶界面。UI設(shè)計簡單來說就是用戶界面設(shè)計，即通過將軟件人機交互、操作邏輯以及界面美觀等視作一個有機整體的設(shè)計形式。UI設(shè)計不僅旨在促使系統(tǒng)朝著個性化與內(nèi)涵化的方向發(fā)展，同時也將提高系統(tǒng)操作便捷性，明確系統(tǒng)定位以及突出系統(tǒng)鮮明特征作為其主要設(shè)計目的。[1]在UI設(shè)計中，按照具體分工不同，其設(shè)計師可以細(xì)分成用戶體驗師、視覺設(shè)計師等等，其中用戶體驗師主要負(fù)責(zé)利用各種途徑了解用戶對于體驗以及界面的想法和需求，在此基礎(chǔ)上有針對性地開展項目設(shè)計工作。而交互設(shè)計師則主要負(fù)責(zé)各項目交互環(huán)節(jié)，要求其研發(fā)出與用戶體驗相適宜的多種設(shè)計方案。而視覺設(shè)計師則主要負(fù)責(zé)完成對各種界面的視覺設(shè)計，結(jié)合具體品牌形象、用戶需求等提高設(shè)計界面的交互性。

1.2 扁平化設(shè)計

在當(dāng)前的UI設(shè)計中，扁平化設(shè)計指的就是一種通過以直觀清晰、簡潔明了的方式展現(xiàn)各種信息與事物，以有效避免產(chǎn)生大量認(rèn)知障礙的設(shè)計形式。扁平化設(shè)計以摒棄所有裝飾效果為設(shè)計核心，采用扁平化設(shè)計的圖標(biāo)中，圖標(biāo)各元素中均無任何添加修飾，如陰影、漸變或是羽化、斜面等特效修飾。譬如在IOS 7的系統(tǒng)圖標(biāo)設(shè)計中便采用了典型的扁平化設(shè)計方式，所有圖標(biāo)均由各種簡單的、顏色明亮的純色色塊組合而成，搭配粗重醒目的字體，在省略一切不必要的界面元素如按鈕、圖標(biāo)等基礎(chǔ)上，以突出功能本身的使用，在有效增強信息直觀性的同時使得界面與用戶使用之間形成良好交互。不僅如此，在IOS 7系統(tǒng)中的各類通信APP設(shè)計中也運用了扁平化設(shè)計方式。其通過一律使用綠色與白色相互組合的色塊，使得用戶在長期交互中形成固定思維，可使其迅速聯(lián)想到白色與綠色的組合在系統(tǒng)界面設(shè)計中代表通信，進(jìn)而幫助用戶快速鎖定圖標(biāo)。

1.3 擬物化設(shè)計

UI設(shè)計中的擬物化設(shè)計主要指的是，在設(shè)計中對現(xiàn)有實體進(jìn)行充分運用，使得即便無須在新設(shè)計中使用其原來功能，也可以有效保障新設(shè)計具有較高的親和度。[2]例如，在IOS擬物化設(shè)計中，閱讀軟件ibook界面模仿真實的書面，其將書籍紙張作為整體界面背景，細(xì)看時甚至可以清晰看出紙張的紋路。用戶在翻上一頁或下一頁界面時，其還會模擬發(fā)出類似“唰唰”的真實翻書聲，令整個體驗過程極具趣味性與親和性。由此可見，擬物化設(shè)計突出界面對實物材質(zhì)、質(zhì)感以及各種細(xì)節(jié)的真實模擬，在交互上以對現(xiàn)實中存在的各種操作形式進(jìn)行模擬，使得擬物化設(shè)計具有豐富的感性化色彩交互形式，其學(xué)習(xí)成本相對較低，用戶可憑借個人實際經(jīng)驗快速掌握具體操作方法。

2 UI設(shè)計中的扁平化與擬物化對比分析

2.1 空間占用對比分析

在實用角度下，UI設(shè)計對其占用系統(tǒng)資源量的關(guān)注度逐漸提高。相比擬物化設(shè)計，UI設(shè)計中的扁平化設(shè)計，所占用的系統(tǒng)資源量更小。其直接體現(xiàn)在IOS 7系統(tǒng)的圖標(biāo)設(shè)計中，采用擬物化設(shè)計的系統(tǒng)短信圖標(biāo)，其占用的手機硬件空間在70kb左右。在對此類圖標(biāo)進(jìn)行設(shè)計制作時，需要設(shè)計人員同時使用包括底色層等在內(nèi)的若干圖層，即設(shè)計人員需要在底色層上增加繪圖圖層，畫出短信的對話框云朵，同時將包括描邊、投影等在內(nèi)的諸多特效加入圖層使用中，從而有效完成圖標(biāo)設(shè)計。但在此過程中，大量使用各種圖層與特效也在一定程度上增加了其占用的手機硬件空間。相比之下，在使用扁平化方式設(shè)計IOS 7系統(tǒng)中的短信圖標(biāo)時，設(shè)計人員只需使用兩個圖層，在省略大部分其他圖層特效下，使得圖標(biāo)設(shè)計所占用的空間大幅壓縮，有助于加快系統(tǒng)自然運行速度，對延長設(shè)備使用壽命也具有一定的積極作用。而通過對比IOS 7系統(tǒng)中的返回鍵圖標(biāo)設(shè)計，采用扁平化設(shè)計與擬物化設(shè)計下所占用的手機硬件空間分別為40kb與32.6kb。因此，UI設(shè)計中的扁平化在占據(jù)手機內(nèi)存方面更具優(yōu)勢，如果選擇使用擬物化設(shè)計方式則極有可能在界面設(shè)計中出現(xiàn)占用過多系統(tǒng)內(nèi)存，影響系統(tǒng)運行速度和用戶體驗等情況。

2.2 互動體驗對比分析

UI設(shè)計中的擬物化設(shè)計具有更多的設(shè)計元素，在互動體驗中相比扁平化設(shè)計，擬物化設(shè)計更加具有表現(xiàn)力。這主要是由于使用擬物化設(shè)計的過程中，人們可以直接在虛擬設(shè)備中，運用其實際生活中所使用的各種真實操作體驗與思維邏輯，進(jìn)而有助于降低用戶使用難度。例如，在手機APP的設(shè)計中，無論是IOS系統(tǒng)還是Android系統(tǒng)，手機界面中的黃色便簽圖標(biāo)均代表著備忘錄軟件，其正是通過在軟件圖標(biāo)設(shè)計中將用戶現(xiàn)實生活中使用的便箋紙這一元素放大，但其并非單純意義上的簡單擬物，而是通過以擬物為基礎(chǔ)，加入簡潔、明快的主題風(fēng)格，因此UI設(shè)計中的擬物化設(shè)計具有更強的視覺沖擊力與吸引力。尤其是在采用擬物化設(shè)計方式下所呈現(xiàn)的設(shè)計狀態(tài)，與現(xiàn)實生活高度貼合，此種交互方式可有效簡化用戶認(rèn)知過程，將豐富多樣且充滿人性化的感情透過UI設(shè)計傳遞給用戶。與扁平化設(shè)計相比，雖然擬物化設(shè)計中所使用的圖層、特效等相對較多，會在一定程度上占用一定量的系統(tǒng)資源，但其也因此比扁平化設(shè)計更加具有細(xì)膩的細(xì)節(jié)設(shè)計。

2.3 視覺效果對比分析

從視覺效果的角度來看，UI設(shè)計中的扁平化設(shè)計比擬物化設(shè)計具有更強的視覺效果，在扁平化設(shè)計下的界面具有更高的美觀持久度，其在視覺引導(dǎo)方面的優(yōu)勢也明顯強于擬物化設(shè)計。例如，在Photoshop的軟件圖標(biāo)設(shè)計中，其最初設(shè)計版本為一只眼睛，后期變?yōu)橐恢в鹈?，而現(xiàn)在該款軟件圖標(biāo)為底深字淺的一種圖標(biāo)字母。隨著用戶越來越多，圖標(biāo)的簡潔程度也越來越高。在扁平化設(shè)計下，圖標(biāo)摒棄以往所有的裝飾效果，只采用深藍(lán)色背景底搭配淺藍(lán)色邊框，將粗體窄長的“PS”字樣放置在淺藍(lán)色邊框內(nèi)的中心位置，使得用戶可以清晰直觀地了解軟件類型及其具體應(yīng)用功能。而在設(shè)計過程中，只采用簡單的圖形以及單色塊，可以有效減少人體的視覺疲勞，用清晰、簡潔的圖形突出主要元素，在有效引導(dǎo)用戶視覺、視線的同時也大大增強設(shè)計的干練、一目了然之感。同樣，在移動終端UI設(shè)計中運用扁平化設(shè)計相比使用擬物化設(shè)計，可以更加精準(zhǔn)、有效地為用戶提供相關(guān)的重要信息。這主要是由于扁平化設(shè)計的運用下能夠使得移動應(yīng)用各功能模塊實現(xiàn)扁平化，進(jìn)而有效突出其使用功能減少多余操作和信息的干擾。[3]譬如在我國許多城市地區(qū)的地鐵查詢系統(tǒng)界面設(shè)計中，使用不同的顏色表示對應(yīng)的地鐵線路。采用扁平化設(shè)計方式的地鐵線路圖中，能夠清晰準(zhǔn)確地將各條地鐵線路信息準(zhǔn)確傳遞給乘客。而在視頻軟件愛奇藝的分類界面設(shè)計中，同樣也通過扁平化設(shè)計的方式，利用不同顏色的色塊代表各界面功能，如電影和電視劇部分分別使用棕黃色與藍(lán)色色塊，界面中的少兒和綜藝娛樂部分則分別使用黃色與粉色色塊。在利用色彩區(qū)分方式的基礎(chǔ)上，在其空白位置處搭配使用相應(yīng)的文字，從而在有效增強界面視覺引導(dǎo)的同時避免多余的線條、邊框等設(shè)計元素增加視覺上的雜亂感。

3 UI設(shè)計中扁平化與擬物化的發(fā)展趨勢

通過結(jié)合前文的分析研究，可知UI設(shè)計中，扁平化設(shè)計具有更強的視覺效果與占用系統(tǒng)資源少等優(yōu)勢。而擬物化設(shè)計因其具有更多的設(shè)計元素，加之用戶可直接運用其現(xiàn)實生活中的操作經(jīng)驗及思維方式，因此在擬物化設(shè)計方式下，用戶認(rèn)知過程更短，設(shè)計體驗交互感更加強烈。故而在現(xiàn)階段的UI設(shè)計中，出現(xiàn)了以扁平化設(shè)計代替擬物化設(shè)計的趨勢，但值得注意的是，雖然擬物化設(shè)計在系統(tǒng)資源占用量、界面美觀持久度等方面缺乏優(yōu)勢，但其同樣具有一定的應(yīng)用優(yōu)勢。因此本文認(rèn)為，在UI設(shè)計中，完全使用扁平化設(shè)計代替擬物化設(shè)計的方式并不可取。設(shè)計人員還需要充分結(jié)合實際情況與具體設(shè)計需求，合理選擇相應(yīng)的UI設(shè)計方式，從而獲得更為理想的設(shè)計效果。

首先，在采用扁平化設(shè)計方式進(jìn)行UI設(shè)計時，設(shè)計人員需要巧妙借助心理暗示的力量，在格式塔原理的指導(dǎo)下，避免用戶在交互過程中產(chǎn)生諸多疑惑。例如，在按鈕或文本框的設(shè)計過程中，設(shè)計人員可以適時將擬物化設(shè)計理念引入其中，即在按鈕與文本框現(xiàn)有圖層的基礎(chǔ)上，為其適當(dāng)增加陰影或下沉效果，使得用戶可以更加清晰直觀地明確按鈕與文本框的位置及應(yīng)用功能，當(dāng)用戶在點擊按鍵或文本框，與之產(chǎn)生交互時，利用適當(dāng)?shù)囊曈X動畫轉(zhuǎn)換的方式對用戶給予及時反饋，使得用戶能夠立即了解其操作正確，提升用戶的使用體驗。

其次，在以使用擬物化設(shè)計為主的方式進(jìn)行UI設(shè)計的過程中，設(shè)計人員應(yīng)當(dāng)跳脫以往過度追求強化視覺效果的“怪圈”，堅定不移地堅持以內(nèi)容為中心。通過對卡姆剃刀理論進(jìn)行靈活運用，即將設(shè)計中多余的線條、邊框等各種設(shè)計元素一并剔除，只使用用戶認(rèn)知領(lǐng)域內(nèi)的交互實體。在此基礎(chǔ)上，積極利用扁平化設(shè)計中的界面布局、字體使用等方式，如通過使用純色塊搭配簡潔明了的文字重點突出主要元素，進(jìn)而使得用戶可以快速掌握圖標(biāo)含義的同時調(diào)用其實際生活經(jīng)驗，在短時間內(nèi)掌握其具體操作方式。

最后，在UI設(shè)計領(lǐng)域中，設(shè)計人員還需要充分發(fā)揮自身的想象力與創(chuàng)造力，發(fā)展“偽扁平化”的設(shè)計模式。即通過將扁平化與擬物化進(jìn)行交互，實現(xiàn)UI設(shè)計的扁平化與虛擬化的有機融合，在有效發(fā)揮二者的優(yōu)勢作用下探尋更多極具創(chuàng)造性和新穎性的UI設(shè)計方式，以此有效防止設(shè)計雷同化，同時達(dá)到促進(jìn)UI設(shè)計實現(xiàn)長效發(fā)展的根本目的。

4 結(jié)語

在UI設(shè)計中，扁平化與擬物化均是其至關(guān)重要的兩種設(shè)計方式。二者均具有自身的優(yōu)勢與不足，因此在實際進(jìn)行UI設(shè)計時，設(shè)計人員還需要充分結(jié)合具體設(shè)計對象與設(shè)計要求，合理運用扁平化與擬物化有機整合、彼此交互的設(shè)計形式，通過充分發(fā)揮二者的優(yōu)勢效用有效增強UI設(shè)計效果。

參考文獻(xiàn)：

[1] 馮敏.界面設(shè)計的擬物化和扁平化的風(fēng)格探討[J].設(shè)計，2019，32（05）：69-71.

[2] 李琨，胡婧琪.扁平風(fēng)格替代擬物風(fēng)格初探——以手游UI設(shè)計為例[J].美術(shù)大觀，2018（02）：126-127.

[3] 任葆軒.試論擬物化與扁平化在UI設(shè)計中的比較[J].藝術(shù)科技，2017，30（11）：123.

作者簡介：孫驍莉（1986—），女，江蘇南京人，本科，實驗師，研究方向：藝術(shù)設(shè)計。