【乾貨】遊戲介面設計 (五)表現設計

關聯閱讀：

（1）遊戲介面設計 (一)核心設計
（2）遊戲介面設計 (二)結構設計
（3）遊戲介面設計 (三)資訊設計
（4）遊戲介面設計 (四)體驗設計

大多數使用者在評價介面時往往會先記起美術表現的程度和特色，稍後才能回憶起使用感受，這暗示了表現設計在介面設計中的重要地位。

策劃由於專業所限，無法客觀評價美術美醜，但可評估介面美術風格帶來的感覺是否滿足玩家需要，設計中的獨特點在哪，應該採用哪種包裝，介面完成度是否足夠等。透過溝通此類問題，策劃能更容易把控介面質量。

而需要回答以上問題，策劃可以和UI美術就“需不需要”和“有沒有”【帶入感】，【個性化】，【獎勵感】，【注意點】四大話題友好地溝通。

一、帶入感

介面的帶入感指的是讓玩家覺得介面表現貼合遊戲背景設定，並能讓玩家願意主動沉浸在世界觀和故事中。與帶入感相對的是功能性，即介面以滿足玩家的系統目的為主。（題外話，介面只能增強帶入感，但無法帶來代入感，後者只能在遊玩體驗中塑造）

介面的帶入感可以幫助塑造世界觀，增加作品可信度，進而幫助角色的塑造從而獲得玩家的好感。

但不是所有專案的介面都需要承載帶入感。遊玩體驗以關卡場景為主的專案，玩家注意力集中在角色與環境上，介面更應注重功能性，防止體驗喧賓奪主（舉例：開放世界，硬核動作，箱庭解謎）。


而遊玩體驗主要是在UI介面上進行的，介面可更注重代入感，以防體驗單薄（舉例：卡牌，模擬經營，回合制角色扮演）。


確定介面需要帶入感後，可參考以下思路：

1.1主題元素

表現主題的方法：

（1）正面表現：選取世界觀中特定物件實體/文化符號，與介面融合。

是業界最常見的做法，可取之處在於：玩家在回憶遊戲體驗時會習慣性地腦內重建該世界觀下特徵最明顯的物件或者符號。如果可以反覆強調，則有助於玩家深刻記憶遊戲特徵，並聯想到遊玩時的樂趣體驗，繼而萌發好感。

具體做法上，介面可以：承載在某件特定物件上（如《輻射4》中介面顯示在3D終端實體中）；模擬成某件物品的樣子（如成就等系統介面會做成書的形狀）；將物體/符號置於介面內（如《幻塔》將二級選單按鈕做成六邊形暗示科幻世界觀）。


（2）側面烘托：使用形狀/顏色/明暗等方式暗示主題。

此方法透過理念而不是實體，塑造出想要的感受或氛圍，使玩家能夠察覺到處於怎樣的世界觀。此類方法會組合熟悉的事物來傳遞主題資訊，玩家更能潛移默化地接受設定，並聚焦於遊戲本身的內容。


（3）配套支援：文字措辭需要適應遊戲主題

此點主要是文案策劃注意，文字的修飾需要與介面風格/理念一致。比如輕鬆活潑的二次元風格遊戲介面上可以運用更多口頭化的詞語。

1.2互動元素

介面上點選互動後只是展示一小段動畫，沒有系統目的的元件一般稱為互動元素。它在世紀初早期作為對帶入感的補充在各個遊戲中都比較常見。需要打磨品質和介面體驗相對重要的專案推薦嘗試。


1.3儀式感

介面在達成系統目標之前，增加若干由玩家操作的中間過程，這種過程稱為儀式感。它是一種由玩家賦予其達到目標的意義。

可能有人認為儀式感是可以省略的中間過程，但對於二次元向或者年輕化（或者說有一些現實背離傾向）的玩家而言，這種過程可增加其掌控感和沉浸感，甚至還有些玄學式的神秘美感。

介面中的儀式感一般出現在重大變化之前（比如角色養成重大提升，開啟新的劇情）。或者重要且不可預測的結果之前（比如抽卡，隨機獎勵釋出）。但說白了這種儀式感本質上還是玩家的操作成本，只是起帶入增強作用，不可濫用。


1.4音效

音效是高頻次調動聽覺感官的重要內容，也是構成帶入感不可獲取的因素，但因為對收入資料帶來的提升不明顯而在國內長期受到漠視。音效對帶入感有重要意義，值得花費時間打磨，好在近年也越來越受重視。

介面音效的運用注意以下幾點：

（1）貼合互動元件（按鈕）的實際形象。

即闡述點選後發生了什麼事情，如果按鈕有具體的形態就使用對應材質的碰撞聲。如果按鈕為扁平化，則更適合電子合成聲。

（2）根據可互動狀態區分音調高低。

可點選使用時音調偏高亮，灰態不可使用時音調沉悶。需注意同一個按鈕的聲源需一致。

（3）高頻次的非功能性互動元件的音效，做一些隨機化。

一般二次提示框介面為純功能式的介面，其按鍵音的功能屬性＞情緒屬性，必須唯一確定。但非功能類的介面元件，在音效上做一些隨機變化能緩解介面使用的單調。


（4）根據介面核心需求分配音效時長。

當介面展示了一個確定結果，且此結果為正面的（比如獲得獎勵提示，戰鬥勝利提示）則可以根據程度分配1-2.5秒的音效，幫助情感共鳴；結果為負面時（比如戰鬥失敗提示；強化失敗提示）時長需縮短在1.5秒內，防止挫敗感發酵。

二、個性化

玩家常說某個遊戲介面的美術“有特色”，但又說不上來具體是什麼，這種介面中強烈的設計傾向可稱為介面表現中的個性化。

個性化不完全等同於美術風格，而是對理念（體驗感覺）的選擇和凸顯。這種理念可以是具體的題材如“自然，科幻，現代”，也可以是抽象的感覺如“極簡，動態，潮流，熱血”。


介面中的個性化是成本低廉能夠定義遊戲視覺特色的方法，是一張清晰的對外名片，非常容易抓眼球。但過於強烈的個性化會容易小眾（帶來更高的理解成本）。

建議世界觀設定需要突出的專案可以更注重個性化，而故事背景無需凸顯或介面定位為輔助的專案可以減少個性化。如需個性化有以下方法參考：

2.1組合

組合是將某些特定的設計思路或者現有風格有機雜糅在一起成為一種新的風格，並使其貫穿於所有介面中，以突出強調遊戲主題或者環境背景。

組合的方法可以根據背景中的時代和地域特徵，選擇幾樣有代表性的事物或規則進行融合嘗試。這樣做好處是可以定義自己獨特的風格，非常有利於玩家記憶。


2.2誇張

一些遊戲將生活中已有的理念或者原本的設計進行放大，變形，重組，對比或者拉伸，將某種特定感覺進行誇張處理，即可獲得更為強烈的個性化效果。

這種處理很能吸引眼球，但不可避免會降低可讀性，不太適合大眾閱讀。所以其他專案借鑑時會進行溫和調整。


但如果理念執行不夠徹底，就會出現混搭風的彆扭介面設計，因此很考驗設計師的功底。


2.3色彩

有些遊戲會給介面制定一個主色調（有時會搭配一個副色調），並將這種純粹顏色大面積運用到各種介面的中，以此來建立玩家對主題或者遊戲系列（品牌）的認知。此類方法適合比較常見，只是程度各有不同。


三、體現變化

介面表現還有一個作用——體現遊戲內容的變化，並帶給玩家對應情緒。一般可以分為兩種：體現在玩家身上的正面變化（視覺激勵），和體現在遊戲上的客觀變化（呼應內容）。

3.1視覺激勵

當玩家達成遊戲階段目標時，除了遊戲本身提供的獎勵，解鎖的新內容，介面對應地也需在畫面上給予精神激勵，以強化玩家的獲得感和期待感，幫助達到沉浸體驗或者引導某種行為。比如獲得獎勵時的提示介面有更精緻的紋理細節和光效；高品質道具的流光和特別設計的品質框底圖；商業活動介面更豐富的色彩等。



但以上是單向的激勵，擴充到雙向（社交需求）後，就出現了“名片”“頭像框”“卡背”等系統內容。介面美術也可以成為激勵玩家產生獲得感，獎勵感的重要內容，甚至可以成為商品。


3.2呼應內容

專案經歷豐富的UI美術知道，像是關卡難度切換的介面往往需要根據難度做幾張不同的底圖以體現難度變化。這種行為實際上用到了介面變化中呼應內容的原理。


這種介面體現的變化也應遵守同一個風格，並展現進階感。但目前很多遊戲介面因為成本問題並沒有大規模應用這種思路，比如玩家晉升不同段位時，普通的UI框會從青銅轉變為黃金等。以後也觀察下哪家遊戲率先會這麼做，效果如何。

四、注意點

4.1識別優先

一些UI美術會為了極致的表現效果犧牲識別度，但對玩家實際體驗得不償失。需注意的問題包括不限於：

• 裝飾遮擋了重要顯示部分（比如裝飾遮擋了進度條的開始和結束部分）
• 將按鈕包裝得不像可互動元件，和底板相似（也沒做動效或特效提示）
• 需識別的文字和影像沒有清晰化處理（比如直接顯示在HUD上的文字沒有加描邊或底板）
• 裝飾比系統資訊更顯眼（比如頁面一半以上用於立繪，按鈕和文字排列侷促又很小）
• 介面美術精緻但太難懂，這點對手游來說比較不利（比如和主題不相關或風格不符的影像/文字）
  

4.2宗教和組織

在國內，對宗教或者歷史上真實的組織的刻畫都需要慎重避開，如果真需要就側面展示，做一個可以聯想到但又確實不同的東西（甚至疑似也不行）。不然稽核分分鐘會被打回來，上線還會被帶節奏。

即使是發行在國外的專案，也推薦有本地化比較熟悉的人才，不然很難像貝塞斯達一樣能做出《德軍總部》系列還不至於下架。

因此任何美術資源驗收時需要策劃稍微把關下，即使是符咒或者用其他文字裝飾的貼圖也需要美術一應提供其含義。


4.3品味區分

社會上不同階級和年齡段的玩家擁有不同品味，在UI表現設計時需正確對應：

（1）中年群體80後之前會對直接高亮顯眼的影像吸引注意。參考傳奇類閃光大翅膀或中老年人表情包。


（2）青少年群體更接受各種色調對比，但飽和度不會設計得太誇張，長時間觀看也會很累還有光敏性癲癇風險。參考Q版或者兒童類遊戲。


（3）越是偏向東亞文化的玩家，越能接受介面裡承載更多資訊，但西方剛好相反。

（4）越是偏大眾向的專案，設計上越需要折中，去掉偏極端的設計。


以上只是簡單舉例，後續會總結更多，歡迎補充。

五、本章知識框架


經過策劃和UI的共同努力，做出“好看”的介面並不難（當然作為策劃，表現上需要多聽UI美術的）。整個介面設計的知識點到這裡也差不多落幕了。之後我也會就往這個體系裡迭代內容，不斷完善。

感謝大家的觀看，歡迎多提意見，我們在下一個系列裡再見。


原文：https://zhuanlan.zhihu.com/p/616025498