作者：魏澤征，游戲系統(tǒng)策劃

首發(fā)知乎
https://zhuanlan.zhihu.com/p/355281206

本系列將以移動(dòng)端游戲?yàn)橹鳎斀馊胄幸詠?lái)我搭建游戲交互時(shí)的理論體系。希望能幫助大家在做交互時(shí)能多一些參考。本篇以系統(tǒng)策劃視角為主，長(zhǎng)文連載，實(shí)用性強(qiáng)，請(qǐng)放心收藏使用。

一、界面設(shè)計(jì)流程

游戲界面一般是策劃把系統(tǒng)設(shè)計(jì)完成后，呈現(xiàn)的視覺(jué)交互模型。

大家都知道系統(tǒng)設(shè)計(jì)會(huì)有一個(gè)明確流程：首先分析目標(biāo)玩家需求，根據(jù)需求定位系統(tǒng)在項(xiàng)目框架中的優(yōu)先級(jí)和位置，推導(dǎo)具體內(nèi)容和反饋，確定方案可行后提單制作并測(cè)試。恰如系統(tǒng)，界面設(shè)計(jì)也有流程先后之分，也是以目標(biāo)玩家為基礎(chǔ)，從整體推演到局部，從交互到包裝完成全過(guò)程。

游戲界面設(shè)計(jì)流程

【核心設(shè)計(jì)】：玩家需求確定界面設(shè)計(jì)方向，界面規(guī)范確保界面穩(wěn)定產(chǎn)出。

【結(jié)構(gòu)設(shè)計(jì)】：界面劃分區(qū)域來(lái)影響信息秩序的感知。

【信息設(shè)計(jì)】：界面信息的分類，排布，優(yōu)化與反饋。

【體驗(yàn)設(shè)計(jì)】：操作負(fù)擔(dān)，便捷度與容錯(cuò)率。

【表現(xiàn)設(shè)計(jì)】：主題表達(dá)，個(gè)性化，美觀度與溝通。

不過(guò)界面設(shè)計(jì)是抽象系統(tǒng)的視聽(tīng)具現(xiàn)化，游戲相比產(chǎn)品APP更富有情緒化的感知，因此也可以從美術(shù)效果開(kāi)始反推，甚至是為了表現(xiàn)效果犧牲部分便捷度和邏輯性。但本文我仍會(huì)以邏輯便捷的傳統(tǒng)目標(biāo)為主。

經(jīng)歷過(guò)以上五個(gè)步驟后，一個(gè)完整界面將會(huì)誕生。本文主講核心設(shè)計(jì)，其含義為做某個(gè)界面之前應(yīng)該最先考慮的事情：界面設(shè)計(jì)大方向（理想）與界面設(shè)計(jì)規(guī)范（現(xiàn)實(shí)）。

二、剖析玩家需求

玩家使用一個(gè)系統(tǒng)時(shí)，明面上的需求為達(dá)成目標(biāo)，隱性的需求為釋放情緒。作為策劃，我們需要通過(guò)界面同時(shí)回應(yīng)目標(biāo)和情緒兩個(gè)玩家預(yù)期。

舉個(gè)例子，玩家打開(kāi)強(qiáng)化界面目標(biāo)是將武器從+1強(qiáng)化到+12，同時(shí)他的內(nèi)心會(huì)因?yàn)楦呤÷识话?。一方面我們需要讓玩家可以一鍵或者分幾步快速到+12，另一方面需要在關(guān)鍵強(qiáng)化時(shí)延長(zhǎng)等待時(shí)間，并在成功時(shí)給予界面上的激勵(lì)。

這兩種需求代表了整個(gè)界面貫徹目的為主還是裝飾為主的路線。

2.1顯性：完成目標(biāo)

功能性為主的系統(tǒng)，界面應(yīng)以實(shí)用性為主，視覺(jué)感官要素僅為輔助。

（1）重視策劃設(shè)計(jì)的交互體驗(yàn)。

《DNF手游》簡(jiǎn)潔易懂的強(qiáng)化界面

本系列大多數(shù)界面均以此目標(biāo)為主，希望突出主體，提升便捷度，降低信息處理壓力。

如果有UI為了整體美觀度犧牲了信息展示（比如在顯示重要數(shù)值的底板上加了底紋，讓信息不夠清晰），我們策劃可立即指正。

（2）設(shè)計(jì)界面同時(shí)也在設(shè)計(jì)功能。

非老手策劃在設(shè)計(jì)系統(tǒng)時(shí)大多能設(shè)計(jì)得符合要求，俗稱“能用”，但成品便捷度低導(dǎo)致后期頻提優(yōu)化需求。遇到個(gè)吹毛求疵的上司，說(shuō)不定會(huì)讓重改一版UI，美名曰“微調(diào)”，到時(shí)候就知道能有多痛苦。

策劃完成案子的規(guī)劃從絕不意味著功能設(shè)計(jì)的終結(jié)。這個(gè)時(shí)期需要額外關(guān)注的有便捷性設(shè)計(jì)與玩家行為提示。下圖為常見(jiàn)的便捷設(shè)計(jì)，用于改善游戲體驗(yàn)：

《一人之下》強(qiáng)化界面快捷購(gòu)買強(qiáng)化所需貨幣

策劃寫案子時(shí)思維大多抽象，不方便即刻思考便捷功能，留在制作界面時(shí)設(shè)計(jì)事半功倍。

設(shè)計(jì)時(shí)策劃需明確系統(tǒng)與外部有哪些交互，比如輸入的道具是否從外部購(gòu)得，輸出的結(jié)果是否被其他系統(tǒng)調(diào)用。然后把自己當(dāng)玩家，在假設(shè)情境中模擬玩家交互行為（這一步更考驗(yàn)策劃經(jīng)驗(yàn)，系統(tǒng)越大越不容易想得全面），比如玩家完成目的一共需要幾步，是否能縮減步驟等。

另一種是玩家行為提示，用于判斷玩家當(dāng)前的行為和狀態(tài)是否合理，增加玩家的容錯(cuò)率，給玩家兜底。這類提示與系統(tǒng)設(shè)計(jì)時(shí)就必須想到的反饋不同，專門服務(wù)于系統(tǒng)規(guī)則允許但對(duì)玩家體驗(yàn)不利的行為或狀態(tài)。這類設(shè)計(jì)也是有具體界面模擬玩家行為時(shí)更容易想得全面。

《獵人》退出副本時(shí)提醒玩家有部分獎(jiǎng)勵(lì)將無(wú)法獲得

以上例子很多，比如自動(dòng)戰(zhàn)斗時(shí)彈窗提示玩家評(píng)分可能會(huì)下降；裝備槽為空且剛好有裝備可用玩家卻打算離開(kāi)界面時(shí)提示可穿戴；玩家戰(zhàn)力指標(biāo)吃緊提示可能需要增加戰(zhàn)力才方便通關(guān)。

界面功能設(shè)計(jì)具體可查閱第四章：體驗(yàn)設(shè)計(jì)。同時(shí)需要提一下，這種精細(xì)化的體驗(yàn)一般是手游做得比較多，端游主機(jī)考慮得比較少。

2.2隱性：釋放情緒

部分界面信息重要度不高或關(guān)鍵信息量少，但展示時(shí)恰逢玩家?guī)в心撤N情緒，天然適合回應(yīng)玩家的情感期待，有助于增強(qiáng)游戲體驗(yàn)。此類界面多為提示或付費(fèi)類的系統(tǒng)（成功結(jié)果提示，福利界面，等待結(jié)果界面之類）。但此類界面的方法論大多被忽視，我多講下該類界面的思路：

（1）界面方向以美觀度和表現(xiàn)力為主，略微弱化游戲信息，重視美術(shù)意見(jiàn)。重要信息需要在此界面之前展示，策劃把握情感強(qiáng)度和世界觀范圍即可。

《神都夜行錄》七日簽到圈?！懊佬g(shù)看不上策劃的方案，自己拿來(lái)做，結(jié)果很出彩”。獨(dú)特的剪紙風(fēng)讓當(dāng)時(shí)的玩家眼前一亮。對(duì)剪紙完整模樣的期待與最終簽到大獎(jiǎng)的期待相輔相成，整個(gè)界面色調(diào)和氛圍輕松愉快，獎(jiǎng)勵(lì)感強(qiáng)，滿足了玩家心中的情感需求。

（2）識(shí)別并準(zhǔn)確滿足玩家的情感期待。

雖說(shuō)人的悲歡并不相同，但情感產(chǎn)生的原因在根本上還是有相似之處。我覺(jué)得可以從：玩家社會(huì)屬性（用戶分析） → 玩家體驗(yàn)游戲的理由（內(nèi)因） → 玩家使用系統(tǒng)的理由（外因），這個(gè)鏈條配合系統(tǒng)流程來(lái)識(shí)別情感需求。

由分析可知，“變強(qiáng)”為該玩家體驗(yàn)我們游戲的理由，也是我們最需要回應(yīng)的情感。按強(qiáng)化界面的流程“強(qiáng)化前消耗道具，強(qiáng)化中等待結(jié)果，強(qiáng)化后成功或者失敗”，可得出以下三個(gè)情感要素：強(qiáng)化時(shí)等待時(shí)間希望強(qiáng)化成功；強(qiáng)化結(jié)果最終是失敗還是成功；成功了變強(qiáng)多少失敗了有什么懲罰。

另一方面是：“精準(zhǔn)”滿足情感期待。這里我在定性后嘗試地對(duì)情感進(jìn)行定量：輕微的情感展示簡(jiǎn)單快速的界面反饋，強(qiáng)烈的情感則展示豐富精致的界面反饋。

承接強(qiáng)化界面的例子，玩家因?yàn)橄胍儚?qiáng)使用強(qiáng)化界面，強(qiáng)化一件裝備+10之前概率在70%以上，裝備屬性的提升，失敗率和失敗懲罰都不會(huì)太大，玩家只是在做一件可控的日常小事，對(duì)應(yīng)的情緒波動(dòng)較小，因此強(qiáng)化反饋的等待時(shí)間可以很短，成功或者失敗顯示也可以簡(jiǎn)單直接，如下圖例子：

《侍魂：朧月傳說(shuō)》強(qiáng)化界面

但是當(dāng)強(qiáng)化到+12以后，強(qiáng)化所需代價(jià)大，強(qiáng)化失敗有可能毀壞武器時(shí)，同樣的強(qiáng)化過(guò)程中玩家情緒相當(dāng)強(qiáng)烈，每一次強(qiáng)化都相當(dāng)于一次豪賭。此強(qiáng)化結(jié)果出來(lái)之前可像希區(qū)柯克一樣延長(zhǎng)等待時(shí)間。強(qiáng)化成功時(shí)給予更強(qiáng)烈的激勵(lì)效果。失敗時(shí)由于損失巨大，特別是工作黨類玩家更難以接受處在失敗的陰影里，因此失敗提示效果不能做得太明顯，提示語(yǔ)中盡可能增加鼓勵(lì)的用詞等。

《阿拉德之怒》激化時(shí)的等待界面

《阿拉德之怒》激化成功界面

我理想中的強(qiáng)化界面反饋應(yīng)該是：前期像《侍魂》簡(jiǎn)單清晰快速展示結(jié)果，無(wú)需浪費(fèi)時(shí)間。后期像《阿拉德》稍微延長(zhǎng)等待結(jié)果前的懸念時(shí)間（但是仍可選擇跳過(guò)），結(jié)果給予更強(qiáng)的反饋回應(yīng)玩家情緒。二者結(jié)合剛剛好。

精準(zhǔn)定量滿足情感有利于UI資源的高效利用與體驗(yàn)的區(qū)分度。但是除了gacha界面，大多市面產(chǎn)品的養(yǎng)成系統(tǒng)只會(huì)做一套完全相同的反饋，個(gè)人認(rèn)為這點(diǎn)值得改進(jìn)。

（3）對(duì)玩家情緒的引導(dǎo)。

界面設(shè)計(jì)的全棧人才不會(huì)滿足于界面只“拼”信息，展示內(nèi)容的規(guī)劃同樣是重要一環(huán)。

比如抽獎(jiǎng)界面中除了功能好用，形式的包裝同樣重要，積攢玩家預(yù)期并快速爆發(fā)情緒帶來(lái)的優(yōu)秀界面體驗(yàn)是傳統(tǒng)排布式界面無(wú)法替代的。

抽獎(jiǎng)界面情感控制常見(jiàn)方法：制造懸念 → 等待揭曉 → 部分揭曉→ 完全揭曉

我們以原神為例。

制造懸念：完全未知的結(jié)果或可能發(fā)生的結(jié)果。

制造懸念：卡池

等待揭曉：富有儀式感與代入感的等待時(shí)間。

等待揭曉：過(guò)場(chǎng)動(dòng)畫(huà)

部分揭曉：縮小結(jié)果范圍，強(qiáng)化/收束玩家期待情緒。

部分揭曉：品質(zhì)透露。黑影不算，基本等同于完全揭曉

完全揭曉：玩家情緒的最終釋放點(diǎn)。

完全揭曉：黑影過(guò)度到立繪展示

2.3目標(biāo)與情感兼得

此類界面就算偏目標(biāo)導(dǎo)向，也往往會(huì)安排很多裝飾部分。此類界面要么層級(jí)較多將信息平攤，要么系統(tǒng)本身非記錄或純功能向的，沒(méi)有繁雜的信息和操作。

如果一個(gè)界面本身就沒(méi)有玩家情感需求，那么強(qiáng)行安插的裝飾僅僅只是改善美觀度，不能算作是一種界面思路。

三、遵守界面規(guī)范

玩家的界面需求我們盡量滿足，這關(guān)乎體驗(yàn)。但玩家需求與項(xiàng)目需求并不完全重合，玩家希望每一個(gè)界面美觀度和便捷性拉滿，這我們肯定是做不到的。項(xiàng)目需求是預(yù)算范圍內(nèi)討好主力用戶，因此根據(jù)項(xiàng)目實(shí)際情況我們需做好取舍。

之所以把規(guī)范放在這里，是希望思考界面時(shí)不受太多現(xiàn)實(shí)因素桎梏，盡可能實(shí)現(xiàn)系統(tǒng)最佳體驗(yàn)。但之后必須面對(duì)現(xiàn)實(shí)，盡力保全設(shè)計(jì)初衷。

3.1界面制作程度

越是使用頻率高，重要度高的系統(tǒng)，配套的周邊設(shè)計(jì)越完善，值得花費(fèi)的時(shí)間較長(zhǎng)。而輔助類系統(tǒng)就算只是滿足大致需求，制作時(shí)間少，體驗(yàn)一般的情況下也可以接受。找到界面?zhèn)戎攸c(diǎn)，無(wú)論是好看好用還是好清晰，圍繞這個(gè)快速出成品也比想要每個(gè)界面都極致滿意現(xiàn)實(shí)得多。

魔方在騰訊游戲?qū)W院《真經(jīng)閣》發(fā)表過(guò)一個(gè)界面的“不可能三角”理論，揭示了界面設(shè)計(jì)無(wú)法十全十美，根據(jù)需求找到側(cè)重即可

這一切都是為了保持合理的制作周期，極致界面體驗(yàn)的后果就是極低的邊際收益。大部分項(xiàng)目組人員不會(huì)那么充足，也不敢將項(xiàng)目制作時(shí)間拖得太長(zhǎng)，因?yàn)闄M跨時(shí)間太長(zhǎng)，老的UI思路不可避免地會(huì)被更新?lián)Q代以適應(yīng)更激烈的市場(chǎng)競(jìng)爭(zhēng)，到時(shí)候大概率就是翻新重做。

3.2美術(shù)質(zhì)量程度

立項(xiàng)時(shí)主UI一般都會(huì)制定通用美術(shù)規(guī)范，確立風(fēng)格，制定原型。我們策劃不可提出超出現(xiàn)有風(fēng)格和質(zhì)量的要求，這是基本。

掌握項(xiàng)目美術(shù)實(shí)力，如果強(qiáng)可多參考美術(shù)意見(jiàn)甚至放權(quán)，如果美術(shù)實(shí)力較弱則可考慮少用裝飾多用現(xiàn)有組件并通過(guò)改良界面交互體驗(yàn)進(jìn)行補(bǔ)救。

項(xiàng)目變動(dòng)需要修改或翻新時(shí)也必須提前帶好制作人等和主UI溝通，確保鍋不在自己身上。如果其他UI的風(fēng)格開(kāi)始逐漸偏離原有規(guī)范時(shí)，也需及時(shí)溝通。

四、本期知識(shí)框架

確立大方向和行為規(guī)范后，我們即可對(duì)著Axure等工具開(kāi)始實(shí)裝界面。首先我們需要知道信息大致放在平面的哪個(gè)位置區(qū)域。不同的平面區(qū)域又組成了垂直的縱向?qū)蛹?jí)。我們下一章講的就是界面的結(jié)構(gòu)設(shè)計(jì)：橫向分區(qū)；縱向?qū)蛹?jí)；如何規(guī)劃合理的結(jié)構(gòu)體驗(yàn)。敬請(qǐng)期待。