【乾貨】遊戲介面設計 (三)資訊設計

關聯閱讀：

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

上期設計完介面結構後，玩家能明白大類資訊之間的父子關係，心中也決定好了資訊閱讀的先後順序，隨後便開始消化具體資訊了。

我們需要對資訊進行加工處理，讓玩家能夠有條理地處理複雜資訊，即“一看就知道是什麼”，“一讀就明白怎麼做”，“一做就清楚為什麼”，總結起來即【易學性】，【合理性】，【完備性】。本篇文章將梳理我做介面時資訊處理的全過程，並詳解了過程中如何達成這三個目的。

一、整體設計階段

此階段我們會對介面總體資訊的呈現做個總綱和規範，以達到資訊設計中【易學性】要求。

我個人認為，理解是使用的先決條件，只有看懂才有使用意願和行為，最後才有機會感覺到好用，因此讓資訊呈現易學性是所有步驟的開始。

玩家看到介面第一眼時並不會閱讀具體資訊，而是對介面整體進行模糊處理，以理解介面中所有元素的關係和作用。這個模糊處理的時機我們可以透過給予心理預期。

1.1給予心理預期

就像有預習習慣的孩子考試成績更好一樣，如果玩家對介面的組成和佈局有了預期，介面學習壓力就更小。這種預期可從四方面入手：心理模型；現實擬物；遵循主流；規則統一。

前三者是利用本遊戲外部的方式引導和教育玩家，而最後一點則是利用遊戲內的規則減少玩家認知負擔。

1.1.1 心理模型

人類認知事物存在普遍規律，即與生俱來的心理模型。如果我們所做介面符合此模型，則能讓不同認知和教育程度的玩家都能快速瞭解介面整體佈局。在此推薦業內應用範圍最廣的格式塔（Gestalt）心理學原理。這種理論優點在於足夠下沉，應用範圍足夠廣，應用時間足夠久，已被市場證實可行。

• 簡單（simplicity）
  

具有對稱、規則、平滑的簡單圖形特徵的各部分趨於組成整體。我們大腦在處理資訊時，首先會將區域性組合成一個易於理解的整體圖形（方形，圓形，三角，環狀，叉型，對角線等），而不是把區域性圖形拆解出來逐個分析。大多遊戲介面的整體構圖上都會參考，以達到減少玩家理解成本的目的。

• 相似（similarity）
  

某一方面相似的獨立視覺個體趨於組成視覺整體。玩家通常把那些明顯具有共同特性（如形狀、趨勢、色調、大小等）的事物歸為一類。這個應用範圍就更廣了，介面中相似視覺元素會被視為一組。

• 接近（proximity）
  

介面中空間接近的視覺元素，大腦會視作一個整體，從而削弱視覺元素個體特徵的感知。遊戲中角色陣容，按鈕矩陣等經常用到，可以讓玩家一眼區分介面結構。

• 閉合（closure）
  

玩家在面對日常生活中熟悉的事物時，即使不完整大腦也會腦補出剩餘的樣子，並仍將此事物當作一個整體形象感知。但需注意如果區域性形象過於陌生或簡略，則不會產生整體聯想。遊戲中一般在展示較大主題，凸顯某個重要的資訊時會用到。特別注意：留白的部分成為負形閉合，也能被感知。

• 連續（continuity）
  

如果介面元素具有某個方向延續的趨勢，那麼玩家會將這個地方看作是整體並會將視線調整為趨勢的順序。連續與閉合結合應用比較多。



1.1.2 現實擬物

現實生活中每人都擁有一定的社會生活經驗，如果能將一個系統的運作包裝成日常熟悉的道具使用形式/自然現象，那麼玩家直接利用記憶即可快速掌握介面要點，無需額外學習，這也是種傳統可行的方法。


1.1.3 遵循主流

除了剛接觸遊戲的一小撮使用者，有同類遊戲經驗的玩家會對市面既存的互動方式感到熟悉，這屬於市場天然帶來的教育結果。如果專案存在同類標杆產品，做的系統類似，且找不到比他更好的解決方案時（改善不明顯也算），則可參考對方互動做法，減少玩家不必要的學習過程。


1.1.4 規則統一

遊戲內部如果應用了某個理念（比如目標在左，執行在右之類），那麼在做其他任何介面時最好都應用這個規則。玩家在學習了一次後就能固化印象，如果能一直強化這種印象便能極大減少玩家的認知成本。


推薦給各個類似功能建立一個模板，只要不是太重要的功能向介面，直接用現有模板填充即可，不必過多費心力。

1.2控制資訊總量

把握好整體資訊設計方向後，此時需要敲定一個資訊總量的範圍，進一步加強資訊【易學性】。

以我的經驗來看，整體介面的資訊量存在一個合理範圍，大於此範圍資訊爆鋪嚴重，降低玩家閱讀意願，小於此範圍資訊過於分散或不全，同樣影響介面互動體驗。想要制定合理資訊總量範圍，可透過對介面層級的最佳化和視覺元素數量的控制來完成。

1.2.1 限制層級數量

依據自己經驗，資訊接受量和結構設計強相關，介面層級越清晰，玩家能接受的資訊越多。目前主流玩家推薦接受的單個介面層級為3，即除介面本身外，另外包含1個一級和1個二級頁籤。如果介面層級表現方式合理，單個介面層級最高可為4，也就是包含一級二級三級頁籤。


1.2.2 限制元素數量

除層級外，玩家感知上每一組相似的資訊中，需要獨立處理的物件極限是6個。這裡根據格式塔的相似和接近原理，類似框架的獨立個體會被視作一個整體，稱為一組相似資訊。而這個整體內獨立個體一般6個以內為最優解。這是因為人類一眼能辨識的個數是5或者6，因此很多遊戲不斷迭代後，會將同一組資料中個體限制在6個及以內。


有些人可能會疑惑，這個例子中角色槽位數量是6×2（水平×垂直），也不是6個呀？因為如果水平和垂直方向上獨立視覺個體排列位置都比較緊密，那麼玩家會傾向將數量較多的方向看做是一組。玩家一眼能看出水平方向個體是6，垂直是2，辨識速度還是比較快的。

所以如果沒有其他視覺因素情況下，如果介面中僅僅只有獨立視覺個體，6×5或者5×6已經是極限了，6×6會讓玩家一時難以將獨立個體進行視覺分組。


單個介面層級≤4+單組視覺元素數量≤6+良好的介面結構和視覺分層，是目前個人推薦的資訊量方案。但這個並不絕對，只要能把控好介面易學性，完全可以塞下更多視覺元素，具體問題具體分析，各個專案制定的資訊量範圍也不會相同。

這裡再放一個我個人認為的，介面資訊有點突破資訊量極限認知的例子。


1.2.3 簡約與簡陋

不少策劃和UI都崇尚“簡約”這個理念，但這裡需特別提到一個誤區：執著於對資訊做減法。具體表現為：（1）對關鍵資訊進行刪減或者隱藏（2）使每個介面資訊量儘可能少。

沒錯市面上大家推崇簡約有力的介面，但簡約≠簡陋。簡約是將大量集中的資訊量進行分批投放到每個介面，使玩家每次能處理合理的資訊量。簡陋則是刪減/簡化關鍵資訊從而犧牲遊戲體驗，讓玩家更加困惑。簡陋的介面上資訊太少也會導致介面資源浪費，資訊全被摺疊隱藏時玩家想找到目標資訊就需要花費更多步驟。

要達成簡約目的而避免簡陋，解決以上兩個問題，我的參考方案如下（1）如果關鍵資訊量比較大，我們在不刪減的情況下儘可能分批投放，讓複雜資訊顯示在位置比較大的次級介面。


（2）單個介面資訊過簡（不需要大腦額外思考處理）會導致介面體驗沉悶單調，將部分必要資訊和補充資訊新增進來，建立介面邏輯即可。

另外，簡約也不是達到控制資訊量的唯一方法，只要讓玩家在面對紛繁複雜資訊時仍然可以保持條理，知道該如何處理也有意願去處理更多資訊就行。

二、資訊處理階段

總體設計完成後，策劃需要對互動案上所有資訊進行精細化處理，以確保達到【合理性】與【完備性】。

2.1篩選資訊

2.2.1按重要度分類

資訊是玩家體驗介面（檢視和互動）的最終物件，也是左右介面體驗的關鍵。此階段需要挑選中最終呈現在皮膚上的所有資訊。不同型別系統資訊形式千奇百怪，但都可基於想要達成的介面目標，按重要性分為：必要資訊；補充資訊；無用資訊。

• 必要資訊
  

和介面主題強相關，且其存在與否會對玩家介面操作行為產生直接關係的資訊。比如一個限時玩法介面中，玩法名稱和有效期限，參與入口和限制條件，獎勵預覽等是必要資訊。

必要資訊一般如下處理（1）突出顯示：常見為塑造差異（顏色/特效/形狀等）；提升佔比（面積大小/層級先後）；調整位置（放在視覺中心處或偏中間等非視覺邊緣位置）。


（2）普通顯示：有些資訊重要不可隱藏，屬於玩家看一遍就能記住的一次性資訊。比如只有穿戴裝備，對應部位槽位寶石才會生效的提醒文字，還比如通行證介面活動截止時間等。

此類資訊佔比小，位置比較邊緣，但是需要讓玩家清晰看到。


當然此類資訊視重要情況也可臨時以懸浮框形式展示，數秒後消失，可以避免增加介面資訊冗餘度。

• 補充資訊
  

和介面主題相關，玩家需求不夠明顯或者使用頻率低的資訊。比如限時玩法介面中，玩法背景預覽，玩法劇情介紹，兌換商城/快捷購買等配套小功能等。

補充資訊一般如下處理（1）弱化顯示：比如採用背景相似色調融入背景，扁平化處理，面積佔比縮小等。


（2）隱藏摺疊：將部分資訊或資訊入口摺疊在某個整合按鈕裡。

• 無用資訊
  

和介面主題無關，對實現介面目標沒有幫助，或者有關但此資訊已被其他資訊所傳達，構成了完全的重複資訊。此類資訊只要認真分析一般都可分辨出來。

無用資訊一般如下處理（1）遮蔽：直接刪掉。（2）弱化顯示：非完全的重複資訊就可以保留，弱化方式同上。

再次強調，重要度分類是基於想要達成的目標來分類。比如某個玩法需要玩家對關卡內某個BOSS進行陣容調整，那麼介面上BOSS角色的形象，技能，屬性等資訊就會抬升至必要資訊。如果玩法只是日常資源向，則BOSS相關為無用資訊。這個目標如果不清楚，可參見第一章：核心設計。

2.2.2 遍歷資訊狀態

承接上一步，最終挑選出的資訊根據時間和遊戲程式不同，會產生資訊變動，我們需列出資訊所有狀態，確保每一條資訊的表述都是完整的。下面為資訊常見的狀態。

根據資訊極端情況可分為：

空態：介面沒有遊戲元素可展示給玩家，或者介面處於起始狀態。

滿態：決定介面的某個遊戲元素到達峰值，介面無法繼續改變。

這兩類極端狀態無論是否會最終呈現一定需要規劃好，否則系統修改時極易翻車。

根據資訊變動情況可分為：

靜態：完全不會變動的資訊，比如固定日期：X年X月X日X時。

變動態：會隨著時間或遊戲程式改變的資訊，比如活動剩餘時間：X日X時X分X秒。

這兩類狀態看似普通，其實很值得策劃考慮。玩家在特定情況下是需要靜態資訊的還是動態的，動態資訊又在什麼時候會改變成另一種樣子。

根據資訊是否可互動還可衍生出：

不可互動態：一般稱作灰態，最早用處是告訴玩家沒有達到互動條件，點了沒有反應。但現在趨勢為灰態點選也最好由反應。

可互動態：操作有反饋，可達成玩家的介面目的。

2.2塑形包裝

2.2.1 挑選形式與載體

同樣的資訊本身可以是圖片，文字，影片，音訊等表現形式。比如“角色釋放技能A的時候可以同時釋放技能B”這條戰鬥技巧提示，可以直接用文字展示，也可以圖文，或者影片方式展示出來。

越是複雜重要的資訊越推薦使用影片或圖文的方式展示，方便表達的則可用文字。


在同一個介面中，我更推薦資訊以多樣化的方式出現。單一的資訊（尤其是純文字）表達效率低下，也會影響到介面觀感。


另外資訊需要合適的UI載體，不同UI皮膚上展示的同樣資訊含義輕重有別。比如同樣是獲得道具提示，懸浮框就比單獨獲得介面更輕量操作步驟更少，但玩家獲得感獎勵感更低。兩種方案適用不同環境，並無直接優劣之分。



無論是資訊形式還是載體，我都推薦按資訊場景和玩家需求劃分，以適應不同情境下的資訊需求。

2.2.2 適度包裝

包裝相當於給資訊進行特定封裝，以達到特定玩家群體的情感代入的需要。

這時般會讓文案和UI美術接手包裝，文案會將資訊透過劇情世界觀等展現出來，UI會盡力提升美觀度。如果是IP產品，甚至會以犧牲可讀性或易學性為代價來封裝資訊。

但系統需要幫忙把控好度——適當包裝，分清重點。和遊戲內容設計相同，做減法很多時候好過做加法。文案想要每個資訊都富有文化內涵，或UI想讓每個介面都讓人印象深刻是不現實也不科學的。人的認知規律決定了感知體驗張弛有度，和遊戲核心內容相關的資訊和介面包裝一下無妨，但偏功能類的資訊，玩家的預期就是快速獲得資訊達到目的，這時候給玩家呈現精良的包裝，既耗費資源也達不到效果。

2.2.3 挑選出現時機

隨著遊戲時間和功能狀態不同，玩家對資訊出現時機的需求均有不同。比如某些簡單的介面操作提示，玩家學會後便不再需要，若該資訊持續顯示則不利於介面保持適中的資訊量。不同型別資訊最佳顯示時期分類如下：

• 重要規則類資訊
  

這類資訊和功能的運作規則強烈相關，如果玩家不清楚則會限制玩家對功能的認知和使用範圍，一般會常駐在介面上。

比如寶石系統中“如果部位沒有穿戴裝備則不生效寶石屬性”這個規則，就必須時刻讓玩家清楚，如果做成臨時顯示，玩家一旦忘記就會對系統體驗產生不利影響，所以推薦常態顯示。

• 時間提示型資訊
  

用於提示玩家重要活動/玩法/功能時間點的資訊。這類資訊出現的時機需要在正式開始的時間點前，持續有限的時間。

比如限時活動的時間提醒，一般會在活動開始前1-5分鐘顯示何時開始，並在活動開始後顯示活動正在進行，活動結束後資訊隱藏。而角色升級時新功能開放預覽，則會持續顯示直到玩家達到相應等級。

• 臨時教學型資訊
  

此類訊息一般是引導並告訴新人玩家某些功能該怎麼用，出現在玩家可能需要幫助時，玩家學完後訊息在某個時間階段不再出現。

形式上比較多變，比如《火影忍者》中分享介面告訴玩家分享有獎勵的固定氣泡框提示，在介面上展示一段時間後今日不再提示。還有玩家在觸發某個潛在的教學節點時，資訊自動彈出，玩家檢視後消失。

• 校正提示型資訊
  

此類訊息是為了防止玩家出現不必要失誤而系統主動告知玩家的提示資訊。出現在玩家可做出不合理行為之後，視情況常駐或持續有限時間。

比如玩家戰力值低於推薦值仍要挑戰副本；考驗操作的副本中開啟自動戰鬥；MOBA類遊戲中使用了對某角色沒有收益的符文等情況下，系統都會主動提示讓玩家確認風險。


以上分類只是粗略統計需要特別注意的資訊時機，實際上具體資訊需要具體分析，我的目的是希望大家在投放介面資訊時考慮好資訊什麼時機出現對改善玩家體驗最好，或者啟發大家在不同時機下思考應該投放怎樣的資訊。

三、組合最佳化階段

到此階段時，區域性資訊已被全部處理完畢，此階段將會把資訊以合理方式拼接起來，並對最終互動體驗進行最佳化。

3.1擺放位置

根據格式塔原理的“接近”原則，靠近的資訊能創造關聯，間隔留白的資訊能體現差異。有邏輯關聯的資訊會擺放在一起，各自獨立的資訊視覺上遠離。

• 父子關係
  

若資訊間有從屬關係，可運用左右，上下，包裹，周圍，對齊的方法展示

• 順序關係
  

資訊之間若存在推導，解釋，補充等邏輯先後關係，那麼就會天然存在閱讀順序。純資訊展示採用上下和左右相鄰效果更好，如果是互動元件，則只推薦上下相鄰，因為對順序的理解上垂直關係比水平關係明顯得多。

• 獨立平級關係
  

資訊之間沒有強烈的邏輯聯絡，甚至屬於不同功能，但它們都為達到某個介面目的而存在，這類資訊只有對玩家的優先順序差異。處理上需要散佈留白，間隔，如果介面空曠，這類資訊之間還不一定要靠近，如果基於介面空間考慮要靠近，那也需要有足夠留白來區分彼此獨立性。


3.2完善方案

有些策劃能考慮到功能資訊的各個狀態，資訊本身闡述也清楚，但提供資訊不對或不全。為保證資訊完備性，系統策劃需要給予玩家最清晰的闡述和解決方案。

比如強化養成系統中玩家材料不足，糟糕和合理的資訊方案完全不同。

• 糟糕的方案：彈出提示 “無法強化”。（只透露發生了什麼事情，但完全沒說出了什麼狀況）
• 不及格的方案：彈出提示 “缺少材料A，無法強化”。（說明了狀況，但玩家不知道怎麼做）
• 及格的方案：彈出確認框“缺少n個材料A，無法強化，是否前往購買？”（說清楚了狀況，也給瞭解決方案，但解決方案比較單一，特定情況下可用）
• 合理的方案：彈出專用介面“缺少n個材料A，無法強化，您可以在以下途徑獲得”，玩家點選各個途徑可跳轉不同介面。（說清楚了狀況，也給了所有解決方案）
  

提供完備資訊本身是一套組合拳，可能有多個資訊疊加或需要開發新的功能，這點需要個人不斷積累。

如果不好把我完備的邊界，那我建議反饋可以多做也儘量不要少做，畢竟囉嗦可以刪減，但反饋缺失或不準確會直接讓玩家迷惑，導致流失。

3.3建立引導

資訊引導是一種透過對資訊進行包裝修飾暗示玩家做出特定行為的弱引導。比如按鈕上的流光特效，紅點，動效，關鍵文字的特殊字色等。資訊引導的程度不像引導功能一樣強烈，但它同樣有助於玩家達到介面目的，或引導玩家按照策劃的想法來操作。

資訊引導是一種天然需求，玩家希望自然而然地知道怎樣操作來達成介面目的，而不是需要停留思索或者閱讀冗長的建議。策劃也希望透過資訊引導提示玩家哪些地方需要特別注意，避免走彎路，比如劇情關鍵資訊，道具的價值感知等。

所有需要玩家自主操作或策劃有資訊展示需求的介面或多或少都需要資訊引導，比如技能裝配介面的高亮按鈕，商城介面的推薦和打折資訊，首充介面中的充值按鈕等。

建立資訊引導主要透過凸顯差異化來完成，方法如下：

3.3.1 視覺差異化

透過色調，形狀，特效，動效等方式凸顯特定資訊差異的方式是最常見的做法。

如果僅是普通決策級別的強調，或者對玩家有利的行為，比如技能中的升級，福利中有獎勵可領取，大多遊戲會採用和UI主色調的對比色來凸顯，或者同色調但明度上升了很多個級別。


而無需強調的決策或行為則一般採用和主色調UI相同的顏色。

形狀差異化或大小有別的強調一般是對資訊相似性和視覺地位的展示。同型別但強調等級不同的功能一般形狀相似但大小有別，如果功能差別很大（比如決策按鈕和跳轉按鈕），則一般用形狀差異表現。


特效和動效的差異化利用動靜對比，這類對比產生的引導效果比靜態的色調和形狀強烈得多。動效產生的引導效果更多體現在提示玩家哪裡需要注意，而特效更多是提示玩家哪個介面元素可以互動，二者時常結合運用。


需要注意動靜產生的引導效果是對比產生的，如果介面滿屏都是動效，特效，則靜止的部分反而會成為強調。如果介面內動效/特效只有1-3處，且幅度有別則更容易產生引導效果。

資訊的動效/特效相比裝飾性的背景動效/特效建議一定要拉開區分度，否則引導的效果也會大打折扣。

3.3.2 提醒功能與聲效

聲效是UI介面上容易被忽視的體驗。如果某個重要功能內部有變化，策劃想玩家立即前去檢視，可新增提醒功能，在主介面等位置新增UI。這種方式屬於功能，但仍和介面體驗相關所以也提下。

常見的有好友上線提示，限時活動開始提醒，等級解鎖功能提示等地方可用到。配合聲效提醒，能起到更強的引導作用，比如《劍靈》好友上線時的提示語音和飄字提醒。

四、本章知識框架


將資訊完全填充到介面後，一個能讓玩家覺得“能看懂”介面就誕生了。但這並不是結束，我們會進入實際體驗階段接著探尋介面是否“好用”，並對我們的互動方案進行進一步調整。下一章進入體驗設計階段，敬請期待。


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