淺析游戲UI中的“半擬物化”風(fēng)格

段欣如

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

引言

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

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

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

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

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

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

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

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

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

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

2 對(duì)扁平化游戲UI風(fēng)格的探討

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

2.1 扁平化游戲UI風(fēng)格的特點(diǎn)

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

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

③多層界面的切換上，會(huì)使用細(xì)膩的動(dòng)效緩解窗口間疊加的生硬過渡感，整個(gè)體驗(yàn)十分順暢。

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

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

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

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

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

3.1 巧妙點(diǎn)綴意象元素在界面上

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

3.2 改變?cè)O(shè)計(jì)策略，合理控制擬物和扁平風(fēng)的出現(xiàn)比例

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

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

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

3.4 扁平控件的3D透視

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

4 小結(jié)

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