【乾貨】遊戲介面設計 (四)體驗設計

關聯閱讀：

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

（前言：經歷大半年的折騰，我總算有機會從手遊過渡到了PC/主機遊戲。但轉型勢必帶來陣痛，手遊介面的思路和經驗無法照搬到其他平臺，這導致後續的積澱和總結更像重新開始，更新也被耽擱。但體系總是破而後立，不斷完善的，因此我會找時間補充前面幾章）

經過前三章，互動中“眼”的部分設計完成，但“手”以及“手眼協調”的部分不夠，第四章即是將“可用”變為“好用”。篇幅有限，本章只淺列要素和常見解決方法，希望大家能全面考慮，有所啟發。

一、操作舒適

操作設計的目標就是讓玩家在操作時獲得手與腦的雙重舒適感。

為此本節先從“手”開始探討，手在不同輸入端的姿勢和具體操作，以及這些操作會對介面設計有何影響。

1.1明確手指的職能

手指作為現階段輸入端最常用的器官，是操作設計中最需考量的一點。而手指怎麼用起來舒服又取決於手在輸入端上的握持姿勢。握持狀態下反覆操作感受最快捷且不累的手指可承擔頻繁操作，其餘承擔次要或輔助操作。

T1大拇指&食指承擔了最頻繁的操作（比如普攻，跳躍，轉視角，溝通交流等核心操作）；

T2中指（有時候也包括了無名指）承擔了次要操作（比如PC的WSAD中WA的移動方向，手柄中LT,RT鍵位操作等）；

T3無名指&小拇指僅提供支撐或同時承擔了不太重要的輔助操作（比如PSV嘗試用無名指操作背板等）


1.2考慮輸入端差異

1.2.1 手機端-螢幕

手機（也包括平板）螢幕特點為既是顯示區域又是操作區域，因此手指的操作習慣對其介面設計的影響非常大。


手機螢幕特殊在於，它幾乎只用到大拇指和食指（T1），只有極少數情況下會用到其他手指（比如部分音遊將螢幕固定在桌子上多指並用）。因為在上述握持姿勢下用拇指和食指之外的手指反而降低操作效率。

因此，市面上絕大多數橫屏手遊HUD的重要按鍵位置基本和握持的舒適區相吻合。但是UI介面中非高頻操作，比如商業化，便捷視窗，退出和標題按鈕等還是會放在邊角。


1.2.2 主機端-手柄

主機和PC端的操作和顯示區域是分離的，因此在介面上按鍵提示和圖示都可以做得很小，排列位置也相對更自由。


手柄類遊戲每個操作（包括點選/滑動）都會有對應按鍵提示，不然玩家操作的過程中可能會忘。但鍵盤由於有空格，Enter這種熟知作用的按鍵，加上滑鼠點選不需要提示，因此PC遊戲按鍵提示會少一些



手柄的握持區域內，十字鍵和左搖桿其實地位相近，習慣用左搖桿操作人物位置移動的更多，但也有不少更習慣十字鍵（可以避免斜角操作）。因此二者都可算是T1。

手柄有左右雙搖桿，其舒適的按鍵反饋讓滑動搖桿成了UI和HUD介面中的高頻操作，這是與PC鍵鼠相當不同的地方。搖桿滑動在介面上也會以游標形式存在，但和滑鼠游標相比有很多缺點：


（1）活動範圍小，操作不夠快捷和精準

搖桿輸出的是一個向量，沒法像滑鼠一樣輸出一個位置，因此無法快速準確移動到目標點。在列表中搖桿想檢視第7個道具就需要老老實實在左搖桿向下滑動7下，而滑鼠只需要移動一下即可。

（2）沒辦法選中互動區域之外

搖桿游標在滑動時會將游標瞬間切換到另一個按鈕上，滑鼠則可以將游標停留在任何地方。這就導致PC遊戲可以做道具詳情窗，移動一下滑鼠道具詳情就會消失，但是搖桿只能選中某個可互動的東西，要做成懸浮窗就需要一個額外的鍵來開啟/隱藏詳情窗，會非常麻煩，因此一般手柄遊戲介面會有個固定的地方顯示道具/選中物體的詳情。

對應的解決辦法治標不治本：

（1）新增快捷翻頁設計

比如搖桿向左或向右滑動可從第1欄跳到第10欄，可以稍微減少一些操作步驟。

（2）滑動搖桿的時間越長，游標位置移動的頻率越快

可以減少手柄遊戲中游標到達想到位置的時間，但實際體驗下來仍然沒有滑鼠好控制。

如果專案是以手柄操作為主，那麼建議參考發售時以索尼微軟為重點的動作類遊戲比如《戰神》，《蜘蛛俠》，《怪物獵人》，《忍龍》系列；競速類遊戲有《GT》，《地平線》系列，RPG類的《最終幻想》系列，《傳說》系列等。

1.2.3 PC端-鍵鼠

PC輸入端分為滑鼠和鍵盤，鍵盤按鈕多，滑鼠移動範圍大，能滿足絕大多數操作要求，適應性強。且鍵鼠位置分離互不干擾，遊戲可以做成全鍵盤/鍵鼠同時操作，靈活度也足夠。因此T1和T2利用率充分，T3操作相對螢幕和手柄也更舒適。


鍵鼠最大的優勢在滑鼠，按鍵部分和手柄可看作一致：手柄因為沒滑鼠，介面格外重視層級，想達成目的可能要點好多下。但PC滑鼠因為有懸浮狀態可以直接突破層級，看到哪裡點哪裡，速度格外快。

但滑鼠的優勢不止於此，它帶來的互動的好處能讓手指和手柄汗顏：

（1）快捷的游標無形中讓整個顯示區域都成了可互動空間，可以承擔巨量的資訊和互動，且不會對整個介面有多少遮擋。

（2）相比手指，滑鼠的操作準確性讓其很少誤觸，因此互動元件的體積可以儘可能壓縮，無形中又增加了顯示區域的資訊容量。


（3）滑鼠自帶的游標懸停狀態更是讓手指和手柄汗顏，這等於直接增加了一種互動狀態，可以讓某些解釋資訊（比如道具詳情）被隱藏掉，介面能顯示更多內容。


有這麼多優點，在操作舒適方面，只要互動師基礎不差，PC端的介面閉著眼睛都能做及格。同樣的，部分型別遊戲也需要鍵鼠互動才方便施展，比如有切螢幕或快速轉動螢幕需求的遊戲（FPS，MOBA，RTS）就需要滑鼠才能完整體驗。而部分對操作要求低（傳統RPG，劇情向）則無論移植在哪個平臺都很合適。

以鍵鼠為主的專案建議可參考育碧家的一些經典系列：《刺客信條》，《看門狗》，《孤島驚魂》，這些工業品的體驗經過多次迭代已經比較成熟，介面水準在平均線之上。

1.2.4 多平臺適配

跨平臺遊戲面臨著不同輸入端操作差異的挑戰，處理不好會降低遊戲的整體體驗。但各遊戲情況不同，多平臺適配的策略差異會很大，以下幾種最為常見：

（1）以某個輸入端操作為主，在設計時兼顧其他平臺

這是業界最常見的一種做法，先把重點平臺照顧好，在發行其他版本時迎合或擴充此輸入端思路，這樣做體驗雖不是最好，但玩家一般都可以接受，而且省時省力。

手機，PC，主機三端都有適配的例子可參考米哈遊的《原神》。


（2）僅把按鍵一一對應，簡單粗暴地移植

在時間緊張或資源極其有限的情況下，將PC上的游標和手柄的游標等同，或乾脆直接在手柄操作中將滑鼠游標作為常駐互動存在，這會導致手柄操作稀爛，正宗的擺爛之選。

育碧的《刺客信條：奧德賽》，《看門狗2》等多款遊戲均是如此，非常不推薦大家學它。


但有些遊戲會嘗試用其他辦法改善，比如：（1）手柄滑動持續時間長，游標的移動速度會逐漸加快。只能說能改善但仍與滑鼠體驗相去甚遠；（2）像《2077》一樣兼具模擬游標和十字鍵選擇介面元素的雙重選擇。（阿育就是懶）

（3）重做介面互動，不同平臺用不同介面方案

時間充裕的情況下推薦可以重做互動，一方面各個輸入端操作差異很難透過適配完全消弭，重新制作介面是帶來體驗最好的選擇。但重做也需要考慮到各平臺各輸入端的差異，非常考驗互動師的功底。


總結下，介面整體設計難度上主機＞手機＞PC。在考慮不同輸入端適配時往往需要將HUD和UI上都有哪些操作羅列在一張表上，比對後設計適配的介面。


1.3設計容錯率

人是不完美的生物，自出生起就在時刻對抗錯誤。操作也不例外，過於靈敏和機械且沒有防錯機制的設計都不會是最舒適實用的體驗。

最常見的防錯功能——二次確認（後文會講），實際上是對已經發生錯誤後的補救，而想預防錯或者讓玩家迅速意識到發生了錯誤，可有以下方法：

• 設定長按/連按的檢測上限值，避免極端值出現；
• 增加避免按錯的功能（比如MC按住Shift可防止角色在高處移動過程中跌落）；
• 增長最短響應時間（比如按下0.3秒後才會跳躍）；
• 部分操作採用長按形式。
  

螢幕類容錯方法側重點有所不同，：

• 加強輸入後按鈕的視聽反饋，讓玩家意識到自己剛才點了什麼；
• 放大按鈕尺寸及按鈕的間距，讓手抖的人也不易點錯；
• 響應區域（也有人稱“熱區”）做得比顯示區域略小一點，避免點到邊緣也觸發了命令；
  

1.4自定義設定

每個玩家操作習慣不同，理論再科學也無法照顧到所有人的體驗，因此自定義操作功能逐漸成了標配。常見的有：（1）預製操作方案；（2）按鍵尺寸和佈局調整；（3）按鍵替換。



二、便捷感

介面便捷感的塑造來源於兩個方面：最小程度的操作和最小程度的思考就可以達成介面目標。

2.1操作的選擇

對於操作形式本身的選擇，則比較靈活多變。即便如此，各種操作的適用範圍也有所不同。

（1）單次點選（按下）

玩家做出快速選擇判斷的最優操作。特點為：（1）簡單直接直觀，操作負擔小；（2）稍微容易誤觸。此種操作非常適合讓玩家有明確預期，能判斷會產生什麼結果的場合，是遊戲內最基礎最廣泛的操作。

（2）連點（按）

按多個鍵但只執行一個指令。特點為：（1）在鍵位少的情況下能容納大量的指令需求；（2）操作容易產生疲勞感，且如果沒有操作提示，玩家記憶成本相當高。

一般來講，這種體驗並不理想（甚至可以說有點反人類）。首先是記憶複雜，其次多個操作間隔時間短的話操作門檻高，間隔長的話無法和其他單個指令區分。就算是能正常識別那麼操作的即時性也得不到保證。

現代遊戲設計理念裡，除了傳統ACT仍堅持連按搓招外，ARPG或新式ACT已經使用宏指令/增加鍵位，使用單按/一個鍵位放多個技能，有先後次序等方式規避這種操作方式。

（3）拖拽

用滑鼠或手指按住某個物件並自由移動。特點為：（1）在按住狀態下，被拖拽的物件仍會顯示，方便玩家預覽比較；（2）在確定選擇前可以給玩家更多思考判斷的時間。

舉例：裝修家園系統中移動傢俱的位置；將角色技能拖入槽位中（其實點選操作也可以勉強用，但不夠自然直觀）。

（4）滑動

（手柄）滑動是將搖桿撥到某個程度和方向。可以說是手柄中拖拽操作的平替，某種程度上還可以代替點選。（滑鼠）滑動是移動滑鼠位置，常用，簡單，快捷。

（手柄）滑動在角色行走方面或物體移動方面表現比鍵盤優秀，既可以控制程度方向又比鍵盤多；在操作體驗上也勝過搓玻璃。但頻繁切換對立移動方向時，即時性不如鍵盤。手柄上滑動操作較為舒適快捷，因此主機遊戲介面中很多選項也是滑動切換的（下圖）


（5）長按

需要玩家在按下時控制程度的操作。特點為：（1）不斷維持某個操作且響應時間稍長；（2）需要對應的UI進度提示。

非常不適合放在需要時機的場合中，比如快節奏動作遊戲的反應類技能，大招也許可以。非常適合找準時機的操作，因為鬆開比按下更輕鬆，速度更快。也適合承擔某些需要玩家仔細決策的操作，比如確定進入車內，而不是攻擊車子。

2.2操作原則

介面中用哪些操作必須遵從某些原則，以達到讓玩家少思考就知道怎麼使用的目的。

（1）統一

有經驗的人都清楚，大腦非常喜歡有規律的事物，會自然地把之前學到的經驗用於新的事物上。因此不同介面中相同性質的操作需要保持一致，可降低學習成本，減少迷惑。

舉例：將技能裝備在技能槽上，如果一開始規劃時採用點選而不是拖拽，那麼後面類似寶石鑲嵌之類的功能也需要用點選。如果要改則需一併修改。

（2）最少

根據大多數人的遊戲體驗需求，玩家對於操作“寧可等待，不願多動”：一方面指相比連續按鍵，按住或者懸停一段時間更容易被接受，又指能夠由系統幫忙決策的事情，系統可以自動或者彈出提示詢問是否要去做。

舉例：Windows的雙擊開啟程式操作會讓很多不熟悉滑鼠操作的老年人很難達到目的，因此加了個右鍵並點選來彌補；很多手遊中，獲得更好的裝備會彈出快捷裝備提示讓玩家免去進入揹包，查詢屬性並裝備的諸多步驟，只需一鍵即可完成。

（3）全面

很多系統都存在一些收益很低的行為操作，玩家大機率不會做，我們一般稱之為“邊緣需求”。很多小夥伴會直接忽略省去這些操作，但可能會傷害到某些玩家的體驗感，最好還是要保留。

比如裝備夥伴可以讓角色在戰鬥中多一個技能，某些策劃可能認為卸下夥伴對玩家而言是負收益，於是做成只能替換夥伴無法卸下夥伴。但這是不對的，也許玩家想要測試主角技能傷害佔比，或者乾脆只是想挑戰無夥伴技能通關之類。

玩家的需求是多變的，策劃很少能完全得知，只能儘可能保留可能性。給玩家兼顧的選擇越多，介面體驗就越好。

2.3便捷功能

便捷功能的目的是讓玩家以最小思考限度地達成介面目標，而這涉及到了介面設計者（策劃或者UE）對功能的理解。在設計介面階段透過增加不佔用太多介面尺寸的小功能，往往可以讓介面使用更便捷順心。

2.3.1 化繁為簡-流程封裝

無論是現實中的系統還是遊戲應用裡的系統，去中間化是使用者永恆的目標。反映在遊戲中，系統需要幫助玩家思考怎麼節省達成目標前的步驟。

常見的有：（1）增設篩選/排序/自主選擇的小功能，預判玩家接下來的行動；


（2）以目標為導向刪去不重要的步驟；

比如鑲嵌寶石才能達成某個屬性效果，其中可能需要玩家手動在寶石孔一個個鑲嵌。可以直接在皮膚上選擇想要的屬性效果，然後系統會一鍵鑲嵌/替換現有寶石孔，方便快捷。

但如果實施難度太大，可做簡化版本。如果與世界觀衝突，或想保留中間過程加強世界觀體驗感，則可保留，當然也可在世界觀中尋找合理概念給快捷操作一個合適的理由。

（3）給予老手更多跳過的機會；

比如觀看過場動畫時，新手無法跳過，但看過一次的老手能跳過；在新手引導開啟之前，詢問玩家是否需要，給出不同引導方案；UI動效展示時間較長時，點選可直接到結果介面等。

設計介面體驗感時需將玩家分為新手和老手兩個階段，以新手為基準，同時讓老手&潛在的老手更高效便捷地使用同一系統。題外話，不光是介面，改編&移植作品在考慮簡化操作時也都要重構遊戲體驗，兼顧多方玩家的訴求。

2.3.2 提高容錯-二次確認

重要決策都需要二次確認幫助玩家給誤觸/決策考慮留出緩衝餘地。表現形式也很多樣：

（1）普通型

最常見的形式，但也分為游標選擇（效率低，安全高）和按鍵選擇（效率高，安全低），兩者都可以，保持統一即可。



（2）密碼確認型

交易或者刪除賬號時需要輸入賬號密碼或者輸入特定字元，以真正確定玩家的目的。理論上是相當安全的方法，只是效率低只適用於財產變更時使用。

（3）停留等待型

比如部分遊戲的設定介面，在玩家修改引數後會給玩家10秒左右決定時間，時間到了確認修改，中途取消則不儲存。此類形式嚴格上就是再多了一層限時保障，除非極其重要的設定否則一般無需做得這麼深。

2.3.3 提高效率-關鍵指標

有些遊戲中會給予關鍵資訊幫助玩家決策，從而減少潛在的試錯成本和操作次數。比如計算好的資料，或在容易誤解的地方重點標註或將產生的不良結果在介面中展示等。


另一種形式是社群。讓玩家間自發產生的經驗和評價幫助新手。不過這個功能設計方面的，和介面設計關係不大了。

三、流暢度

遊戲介面被很多玩家視為工具或基建，是用來達成目的的中間過程。因此介面反應快速，流暢不卡都是不會說出來但預設要做好的基本需求。動效可以幫助滿足這一點。

3.1動效

動效和程式的介面載入流程息息相關，動效最初的目的之一就是可幫助掩蓋介面僵硬的載入過程，塑造流暢感。此外，還有引導玩家視線；營造氛圍感的作用。

（1）塑造流暢感

玩家傾向認為：動效開始=我的請求被成功響應，因此動效展示帶來的時間成本玩家一般可以忍耐。等動畫效果結束，介面基本也載入完了，這種體驗就是無縫絲滑的。

反之，無動畫過程的介面即便載入速度再快，仍有介面元素憑空出現/短時間內操作無反應的問題，會讓玩家認為系統卡頓不夠穩定。因此程式載入介面時，動效及附帶的特效優先順序應最高，不能有卡頓表現。

動效的持續時間可參考APP的經驗0.1s-0.5s（下圖）。但就個人體驗而言，訊息提示型UI動畫過程0.2s-0.35s我認為最合適，能看清也不佔用時間，非動畫的停留時間1.5-2秒；展示性強一些的時間可延長至0.4s-0.5s；純展示型UI動效（比如角色去到新地圖UI顯示地圖名稱；武器強化的展示過程動效等），均可突破1s限制（但最好不影響玩家做其他事情，或加個跳過）。


另外，為了老手體驗，只要UI載入完畢，無論動效有沒放完，應該都允許玩家觸發按鍵功能。儘量不讓玩家乾等，讓表現和邏輯互不干擾，以取得最佳體驗。

相比APP，遊戲動效展示性更強，表現形式上也更自由，無論極簡還是擬物複雜化都很合適。常見動效思路有：漸入漸出；推拉；放縮；位置移動等。

（2）引導玩家視線

動效的順序比較講究，它能告知玩家介面的執行邏輯，從而感知到系統想表現重點是哪裡。動效的播放順序最好也遵從玩家的自然視線，從左到右從上到下。

介面上需要重點突出的內容有其適合的表現形式。

（3）營造氛圍感

動效也可結合美術效果幫助塑造世界觀，增強體驗感。但此類動效一般都發生在結果展示，純資訊提示等不需要接下來頻繁操作的場合。而且這些動效一般可以手動跳過；或者不會打擾到介面其他操作，時間到了自動消失。

四、適應性

介面的體驗也會受到多國語言文字不同，裝置尺寸型號不同，前作的遺留設計等因素影響。

4.1多語言文字

如果專案在立項時就確定會多語言發售，那麼介面規劃初期就須考慮UI長短和排版問題。

受不同語言文字長短影響，介面設計基本為窄長條列表；文字除了數字能並排外，其餘都需另起一行。文字特別長的需關注葡萄牙語和俄語。如果他倆放得下，那其他語言基本沒問題。


如果文字還是超框，解決方法有：

• “走馬燈”迴圈播放，適合窄長條；
• 多語言字號縮排：以英文字號為基礎，葡萄牙語/俄語-2，德語/西班牙語-1，其餘看情況；
• 多出的部分可不顯示但需做個省略號標記（實在無奈的做法，不推薦）；
• 精簡文字，並讓翻譯想辦法縮減字數；
  

另外介面上屬性等詞彙的縮寫（比如等級LV）並不全是由英語表示，法語德語等都有不同。但以在日本的合作方來看，他們認為中韓可以接受屬性縮略名是英文的寫法。

4.2螢幕自適應

自適應規則也是介面設計前期就需要做的事。

確定一個螢幕尺寸，並以此為基準介面（一般是1920*1080或1280*720）。並確定除了16:9以外的螢幕尺寸（常見的有16:10，15:9，18:9等），以及特殊螢幕（比如手機屏上前攝像頭的位置），UI該怎麼處理。

最簡單的是固定模式：一定以16:9來顯示，多餘部分顯示黑邊。（《黑魂》，《怪獵》等）優點是實現成本低，缺點是不美觀。


另一種為填充模式：移動UI位置/放縮UI大小來填充整個螢幕（當前主流）。優點是美觀體驗好，缺點是不好做，且很難覆蓋所有螢幕型別。


UI的背景2D圖片：左右填充。製作時以最大尺寸為基礎，推薦留1.2-1.5倍的餘裕

基礎元件：九宮格拉伸

浮動視窗：朝著某個方向貼邊（需留出空隙）或固定居中

4.3繼承IP特點

設計系列續作的介面時需考慮還原前作介面的特點，以求“對味”（貼合IP粉絲的思維定式）。


就算過去的介面思路在今天看來不完善/有缺陷，但如果保留就能讓IP粉絲感到熟悉和好用。改動了就會讓粉絲感到不適應和牴觸心理（尤其是日本IP）。改動還是保留，分別佔比多少需綜合判斷：

粉絲群體越老齡化/系列銷量的佔比為老粉絲居多/具有一定國名度的作品，保留遠大於改動。

系列發售有斷檔有創新空間/輕度和年輕的粉絲居多/更側重全球發行的產品，則可正常保留好用的設計，改掉與時代脫軌的設計。

五、本章知識框架


經歷此章節後，介面具備了“好懂”“好用”等特徵，策劃的介面設計職能基本完成，接下來是由UI美術主導將介面變得“好看”。但我仍希望策劃也能懂得基礎的美術知識，能評判介面的美術風格，方向和特點是否符合專案規劃。

因此，下一章將會探討介面的偏感性的部分——表現設計。（歡迎美術的同學多多指教）


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