淺析游戲UI中的“半擬物化”風格

段欣如

（廣州美術學院 廣東 廣州 510220）

引言

在軟件應用類UI設計領域，扁平化的UI風格占據主導地位。從微軟的Windows phone開始，到android 4.0，再到蘋果的iOS 7，無不采用扁平化設計風格。其主要原因是，扁平化風能把文本信息作為界面主體，信息層級清晰，體驗順暢。并且，極簡的視覺風格符合當前主流的審美趨勢。在游戲UI設計領域，擬物風長期始終占據主流位置。應用類UI主要為解決功能體驗問題，而游戲UI除了讓功能清晰易懂，還需要創造娛樂體驗。并且在大多數游戲內，游戲UI都起到了傳達游戲文化內涵的作用，表現形式會比應用類UI更多元化并且更追求擬物化。但隨手游占據主導地位后，會發現傳統的擬物化UI做法難以適應手機設備，相對于PC端游戲來說，手游屏幕設計空間有限甚至是奢侈的，信息的主次關系需要更明確。一種在傳統擬物化UI風格基礎上做減法，并汲取扁平化UI特點的，折衷化的“半擬物化”設計正在崛起。

1 對傳統擬物化游戲UI風格的探討

傳統擬物化游戲UI，始于PC端單機游戲。UI控件的設計，會盡量抹除其功能化的痕跡。界面里的底板、按鈕、圖標，仿佛天然就是屬于游戲世界的有機組成部分。設計目的，是希望玩家在體驗游戲時，能通過UI感受游戲世界的真實性，讓UI成為傳達游戲文化內涵載體，而非僅僅是實現功能的理性化工具[1]。這樣的游戲UI設計思路，一直沿用至今(如圖1)。

1.1 傳統擬物化游戲UI的特點

①底板、按鈕、圖標的質感表現上，都對現實生活中的物品的材質、色彩、光影進行了高度還原。底板一般是實體材質板和金屬、玉石鑲邊的結合(如圖1)。按鈕的顏色純度高立體感強，一般會加入裝飾紋理甚至鑲邊。圖標的質感，和現實生活物品看起來別無二樣。高度還原的做法，能讓設計對象看起來更真實可信。

②在整體排版上，高度寫實化的UI裝飾元素是界面里的主角，弱化了文字等功能化的信息，文字的周圍偶爾也會加上裝飾。字體的使用，以襯線字體居多。這樣做的目的，是為了讓裝飾性元素象征出游戲的文化內涵。

③多層界面切換方式，大多采用類似windows的窗口疊加模式。新出現的窗口，疊加在舊窗口的上面。界面內使用的動效偏少。

1.2 傳統擬物化UI的優缺點

優點，前期體驗游戲時，通過擬物化裝飾能夠快速地為游戲傳達文化內涵，從而讓玩家產生情感化的共鳴。

缺點，在信息層次復雜程度高的手游界面，過于寫實的UI控件扎堆在一起，難凸顯重點信息，影響到交互體驗的流暢感。細節過度精細的擬物化設計，不僅不利于向玩家傳達游戲世界觀的內涵，反而會讓玩家對界面產生審美疲勞(如圖2)。

2 對扁平化游戲UI風格的探討

本文中指的扁平化游戲UI設計風格，是指的設計語言和應用類、網頁類UI相似的純粹極簡風格。常見于主機類游戲的UI界面里，例如育碧的《刺客信條》、SWITCH上的《塞爾達傳說：荒野之息》等游戲 (如圖3)。

2.1 扁平化游戲UI風格的特點

①底板、按鈕、圖標的質感表現上，基本去除了投影、斜面、浮雕等3D屬性的設計要素，運用二維的視覺語言。底板，基本上以純色半透的色塊為主，或是加入游戲的品牌化底紋。按鈕，基本上是無材質的色塊。圖標的設計，是擬物化圖標的簡化版本，只保留外輪廓和輕薄的材質，或是零材質。這樣的設計語言，和應用類UI的做法相似，偶爾會在UI界面上植入品牌相關的視覺要素。例如，刺客信條系列游戲，會把每一代都做獨立成一個品牌。在游戲內UI界面內植入品牌色或品牌花紋，讓玩家對品牌產生印象，從而產生認同感(如圖3)。

②版面上，遵循簡潔的排版原則，字體和圖標是界面里的主角，裝飾物偏少。圖文排版的比例和留白，對界面的美觀效果起決定性的作用。字體的使用，以非襯線字體居多。這樣做的目的，是為了弱化UI在游戲內的視覺比重，突出美術模型。排版的規范，會用類似網頁設計柵格系統，作為游戲內統一的排版范式。這樣做的目的，是為了能夠快速的統一界面的視覺樣式。

③多層界面的切換上，會使用細膩的動效緩解窗口間疊加的生硬過渡感，整個體驗十分順暢。

2.2 扁平化UI的優缺點

優點：信息層級簡潔清晰明了，更容易凸顯文本重點內容。極簡的視覺效果，更符合現代人的審美。界面資源輸出時，規范性強，資源量相對擬物化的資源更少。有時甚至不用切圖，直接用代碼控制，能夠降低對硬件的要求，安裝包的內存相對來說更少。滿足了小容量內存手機用戶的使用需求[2]。

缺點：界面內額外的裝飾性元素少。整體效果上，對圖標繪制水準和美術模型精度的依賴度極高。據調研，在游戲開發時，美術效果是投入成本最高的一項，《刺客信條》作品的美術投入的成本，是大多數游戲廠商無法達到水準。倘若，降低界面里模型的精度，整個扁平化界面整體的視覺效果會大打折扣。并且，扁平風的界面設計的表現形式單一，導致目前同質化現象嚴重，產品容易缺乏個性。

3 “半擬物化”UI出現的必然性

基于以上，對傳統擬物化游戲UI風格和扁平化游戲UI風格的分析。可以發現，無論是使用傳統擬物化風格UI，還是設計極簡的扁平化的風格UI，都難以完全做到“即能傳播游戲的文化內涵，又讓功能體驗簡潔順暢”。由此可見，這種在傳統擬物化UI風格基礎上做減法，并汲取扁平化風格的“半擬物化”設計，出現具有一定的必然性。在調研的過程里，發現市面上有不少優秀的半擬物化手游UI界面。它們的出現，為未來游戲UI的發展方向，提供了多種設計思路[3]。

3.1 巧妙點綴意象元素在界面上

在材質運用上，點綴性的提取游戲意象元素表達界面文化內涵，巧用動效為界面添彩，改變過往用厚重材質的表現方式。網易的《楚留香》手游UI，提取了月亮和水墨作為界面的主要元素(如圖4)。以輕薄的水墨為襯底，月亮為光源，畫龍點睛般的將這兩個元素貫徹到了游戲內主要界面上，即創造性的傳達了游戲的核心文化韻味，又讓整體功能清晰明了易用性強[4]。

3.2 改變設計策略，合理控制擬物和扁平風的出現比例

使用頻率低、容易出彩的界面做擬物化處理，使用頻率高、功能復雜的界面輕薄扁平化，減輕玩家的使用負擔。和平精英的界面策略是，背包、商城等玩家每日使用的高頻界面，做簡單的扁平化處理，賽季開啟、送禮物等使用頻率低的界面做精細化的擬物設計。這樣的好處在于，日常高頻使用界面的扁平化設計，讓繁瑣的功能更易于理解。精細的擬物化界面在適當的時機出現，能夠帶給玩家一種驚喜感(如圖4)。

3.3 強調UI和場景之間的聯系，用鏡頭切換界面

從場景內提取UI界面設計元素，巧妙的把美術場景當作是界面背景，界面之間用鏡頭的轉移或放大來切換。這樣做能夠減免界面背景設計的工作量，讓底板看起來更輕薄，又能讓界面和場景直接產生聯系，烘托出氛圍感。網易的《陰陽師百聞牌》的主界面(如圖4)，將主功能入口分布場在主場景之上，主功能入口的切換被包裝成進入主場景內的一個房間。這樣做只需要設計點綴性的元素和主要功能控件。

3.4 扁平控件的3D透視

擬物化UI設計中，在界面框體和圖標造型時，會大量應用透視來表現空間感和其三維屬性。那么在扁平化的界面中如何打破扁平，增加元素的立體感呢？在傳統擬物化風格的影響下，通過為扁平的底板增加透視角度，來營造強沉浸感。《明日方舟》用全息投影的概念包裝主界面(如圖5)，為主面板增加透視角度，手機的信號、電量等信息都被放在和游戲主面板一個層級，能夠隨著陀螺儀移動。這樣的做法，類似微軟Fluent Design的思路，在扁平化的設計里植入空間的概念，其目的是降低視覺效果的信息干擾，用戶在聚焦主要層級信息的同時可以清晰地感受到空間的存在[5]。

4 小結

游戲UI的主要設計目的，是為它所服務的游戲傳達出特有文化內涵，創造出獨有的娛樂體驗，并讓功能信息易于理解，讓體驗順暢無阻礙。當手游占據市場主導地位后，傳統擬物風UI設計難以適應移動端的設備的特點，并且過度寫實的擬物化設計不符合當代主流的審美趨勢。“半擬物化”的UI設計，在傳統擬物化和扁平化的基礎上，結合新的技術進行設計，運用意象化點綴、場景化UI、扁平化3D透視等設計手法，讓游戲的體驗更順暢更有代入感，并讓未來游戲UI表現形式有了更多的可能性。