段欣如

（廣州美術(shù)學院 廣東 廣州 510220）

引言

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

1 對傳統(tǒng)擬物化游戲UI風格的探討

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

1.1 傳統(tǒng)擬物化游戲UI的特點

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

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

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

1.2 傳統(tǒng)擬物化UI的優(yōu)缺點

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

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

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

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

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

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

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

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

2.2 扁平化UI的優(yōu)缺點

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

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

3 “半擬物化”UI出現(xiàn)的必然性

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

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

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

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

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

3.3 強調(diào)UI和場景之間的聯(lián)系，用鏡頭切換界面

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

3.4 扁平控件的3D透視

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

4 小結(jié)

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