UI設計中的扁平化與擬物化視覺傳達解析

孫驍莉 賀鵬

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

關鍵詞：UI設計;扁平化;擬物化

0 引言

通過解析UI設計中的扁平化與擬物化設計，一方面可以使得人們對UI設計當中的扁平化設計、擬物化設計予以深刻認知，準確掌握兩者的聯系與區別，另一方面也可以在厘清扁平化與擬物化內在關聯性的基礎上，為如何有效落實UI設計，進一步強化UI設計效果提供相應的理論參考與指導幫助。

1 UI設計及其扁平化設計與擬物化設計的內涵分析

1.1 UI設計

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

1.2 扁平化設計

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

1.3 擬物化設計

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

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

2.1 空間占用對比分析

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

2.2 互動體驗對比分析

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

2.3 視覺效果對比分析

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

3 UI設計中扁平化與擬物化的發展趨勢

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

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

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

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

4 結語

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

參考文獻：

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

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

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

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