【乾貨】遊戲介面設計 (二)結構設計

關聯閱讀：遊戲介面設計 (一)核心設計

想清楚介面的方向問題後，我們正式邁入介面設計的首步：結構設計。

介面結構包含橫向結構（二維平面中資訊的區域劃分）和縱向結構（多個橫向結構的堆疊）。二者構成了介面的骨架，而各類資訊則是附著於骨架的血肉。


一、橫向結構

橫向結構概括了一個介面資訊的大致排布位置，是玩家對資訊秩序與邏輯關係的感知。其表現形式有兩種：【全屏】和【彈窗】。

全屏承載資訊更大，表現力和操作體驗拉滿。但全屏會對主介面進行遮擋，連續的全屏還會加重介面認知負擔。彈窗則更加適合輕度，適合需要連續視覺認知和快速操作反應的場合。不同遊戲型別使用全屏/視窗的比例不同，混用居多。設計介面結構時，選擇重點全屏還是視窗的表現形式往往是第一步。

而無論哪種方式，橫向結構上的資訊型別都可以劃分為三個區域：標題區；頁籤區；功能區。

1.1標題區


在縱向結構中，連線所有其他介面的中心位置稱為【主介面】，其餘介面可以看作是主介面的子集，無論前往哪個介面最終都可以回到主介面，這是介面結構的基礎。而承擔與主介面相互聯絡的區塊我們稱之為標題區。

標題區主要功能有：告訴玩家當前所處位置；概括當前介面內容；切換當前介面層級；檢視/執行當前介面公共任務。分別對應三大元件：標題文字；層級切換；公共行為。


1.1.1標題文字

橫向結構中是對整個介面的概括（相當於0級頁籤），縱向結構中是所處位置的闡述。大多介面標題位於標題區左側或中間，部分資訊較少，功能簡單的提示類介面中，標題可位於功能區。

1.1.2層級切換

該元件是對縱向層級的管理，為標題區最主要的功能。最主要分類：【關閉】；【返回】；【跳轉】。

（1）關閉與返回

這三種元件中，大多遊戲標題區只用關閉或返回，可滿足標題區的基本需求。二者混用也很常見，但都用則很少見。

使用【返回】的介面，玩家在認知上是很清晰的，子功能返回到系統介面最後返回到主介面天然符合層級之間關係的解釋。加上返回介面大多全屏，資訊展示空間大，成了主流遊戲的做法。（下圖左側）


但返回體系的介面是全屏互切，層級一多就對玩家記憶前後介面形成了挑戰。

為方便層級認知，【關閉】體系形成了——把子功能變成視窗形式，系統介面仍然保留全屏形式，二者返回方式都變為右上角的關閉。（上圖右側）

關閉有“終止”的意味，這樣做不僅同樣適應介面邏輯，而且玩家能投過子功能和遮罩看到系統介面的資訊，這樣也讓玩家形成了清晰的層級認知。

但是這也不意味著視窗體系比返回體系更強。（a）關閉體系多用視窗，有需要遵循的“視窗金字塔”原則：層級越高的視窗大小要比層級越低的視窗小，讓玩家看清層級，加強對多層級介面的忍耐度。如果視窗會跳到一個更大的視窗或全屏則會打亂認知，需要慎用。


（b）視窗顯示介面資訊有限，不利於展示。（c）兩個或以上帶關閉的全屏介面疊加在一起相比帶返回的全屏介面邏輯性更弱，理解上會有些違和感。

現在也有部分遊戲會把【關閉】/【主介面】和【返回】同時放在標題區，來便捷化介面體驗。但作為介面，“達到同樣目的卻提供兩種不同方法”也增加了玩家的思考抉擇時間。可以根據專案實際需求選擇性使用。


（2）跳轉

跳轉介面功能在網際網路產品中比較常見，比如麵包屑導航。


麵包屑雖然看起來清晰便捷，但遊產品在設計上就單個系統縱向層級比較少，玩家也不需要記憶前後介面關聯，所以並不推薦。

而遊戲產品的系統數量眾多，相互跳轉不經過主介面來節省時間則是實打實的需求。相比返回和的回到主介面同時出現，跳轉按鈕雖然也增加了介面冗餘度，但功能上強於僅回到主介面。

如果遊戲內層級過多，則推薦可嘗試快捷跳轉其他系統，實際上現在也成了越來越多遊戲的標配，案例如下：


（3）關閉/返回與確定/取消的區別

並不是所有的介面都有標題區，像結果類的提示介面（比如強化成功之類），標題文字和對介面層級的控制都是放在功能區的。而功能區產生的介面層級切換行為和標題區的其實略有區分。


系統中子功能的盡頭要麼是獨立的附屬功能，要麼是跳轉到外部的功能。附屬功能因為在功能聯絡上和系統主幹稍有距離，而外部功能本身不屬於系統主幹，用返回會有點怪。所以二者使用關閉比較合適。


但是這二者介面並不是功能的盡頭，還有結果提示頁面和決策提示視窗，他們才是系統層級關係中最外圍的。這類提示的介面顯示是需要玩家對其提示內容作出反應之後（讓玩家對遊戲內容“自主決策”）才確定的，玩家點選右上角關閉，實際上含義是“對當前內容的忽略”，相當於拒絕作出反應，這和提示介面設立的目標是衝突的。因此這類介面的關閉，顯示的優先順序是弱於【取消】或【確定】（點選任意位置關閉）的。

如果要把取消和關閉放一起，要麼是應用於非重要資訊確認，為了方便玩家快捷操作，，常常點選視窗之外也能關閉視窗。要麼是讓取消和關閉完全等價，並能讓玩家瞭解這一點。

1.1.3公共行為

某些覆蓋整體的需求和行為也適合放在標題區，比如資源情況，全域性搜尋，全域性篩選，遊戲說明等。全域性類行為的覆蓋範圍延伸到了整個介面，適合放在標題區。


但資源貨幣這種常用功能來自外部，屬於便捷小功能，因為其存在可以節省繁瑣的資源兌換操作所以被玩家所接受。按照這個思路，其實外部系統的提示/功能都有潛力放在標題欄。

1.2頁籤區


頁籤本質是對介面樹狀從屬結構的展現，表現上頁籤的切換會改變某個皮膚的狀態。對策劃而言，梳理頁籤是一次對功能呈現重新整理的機會，其效果會直接影響到玩家對系統結構的認知。

頁籤的位置：由於頁籤和附屬介面的關聯性強，需要放在被改變頁面的附近。且人的視線規律是從左上到右下，因此頁籤的黃金拜訪位置為左右兩側與上方。


由圖可知，從屬結構的介面一定會天然形成不同級別的頁籤。除了最高介面層級的標題區，次級的頁籤可以改變其他介面和頁籤的顯示，我們稱此類頁籤為“一級頁籤”。同理順延可得二級，三級，以及更多層級頁籤。

1.2.1側邊頁籤

除標題外，對該系統概念和功能區分很大的內容使用側邊頁籤區分，同樣可稱為一級頁籤。

側邊頁籤黃金位置為頁籤區左右兩側，尤其是左側居多，既方便點選，又符合人體自然的視覺規律。（縱向螢幕的遊戲則以頂部和底部為黃金位置）



1.2.2垂直頁籤

概念區分度/功能差異不夠大，可使用垂直頁籤，這類頁籤往往是二級頁籤。其黃金位置位於標題區之下，頁籤區的頂部或者底部。手機橫向距離長，尤其適合展示分類多，需要頻繁切換的系統。

部分介面比如視窗形式的獨立商城/活動類介面，由於分類的概念相似（都是XX商城或XX活動）且分類眾多，使用垂直頁籤作為一級頁籤更為合適。


底部頁籤的情況比較侷限，雖然操作舒適，也有利於介面美觀，但底部位置屬於閱讀的終點，一般來說放操作類的按鈕比較好，作為頁簽在概念上可以接受但是並不那麼推薦。


1.2.3篩選框與摺疊頁籤

設定三級及以上頁籤時需要格外慎重，介面頁籤越多意味著從屬結構越複雜，不利於閱讀理解與內容展示。介面頁籤數量請儘可能控制在三級內。

為了減少頁籤層級，除了在內容上動刀，也還有頁簽收納和摺疊頁籤兩種。



如果三級或以上頁籤選項眾多，如果其分類有規律可循，則可容納進進篩選框，點選後彈出下拉框選擇。這種方式有助於介面簡潔顯示，但操作繁瑣。


1.3功能區


功能區是發生實際系統互動的區域。此類介面相比標題區和頁籤區規則感更弱，可以更自由地安排系統資訊。不過自由不代表混亂，對功能區的資訊仍可以進行合理規劃，達到最佳呈現效果。

我將功能區資訊劃分為四大類：資訊元件；執行元件；裝飾元件；混合元件。

1.3.1資訊元件

資訊元件是系統規則展示的核心，提供了玩家決策的依據，是一個介面最重要的展示主體。它可以是文字，圖片，影片或者混合等任何表現形式，其視覺面積大視覺層級高。

不同系統有不同展示的主體，角色系統的主體是角色列表或角色詳情，福利介面主體是獎勵道具等，根據系統需求確定。


1.3.2執行元件

（1）按邏輯劃分

執行元件是玩家可對資訊做出反應的部分，常見有按鈕，選中框，滑動區域等可互動部分。其位置一般放在資訊元件之下或右側，讓玩家閱讀完資訊後再做出反應。

執行元件可以按照邏輯分類為：

執行；切換 ；選中 ；跳轉 （內部/外部） 等。

這些邏輯基本都有對應的特殊符號，在介面資訊不多，且按鈕文字有閱讀壓力的情況下，按鈕上的文字前新增符號是個不錯的選擇。


但如果按鈕代表的含義比較簡單常規，為了介面整潔考慮，只顯示文字也是主流選擇。在進一步簡化思路下，偏輔助向重要度一般的功能入口，按鈕也可以只顯示符號。

（2）按重要度劃分

執行元件在介面中地位不同導致視覺強烈程度不同，作為通用元件時需要與UI訂好規範。


一級決策類按鈕：通常和遊戲核心相關係統的執行有關，需要儘可能顯眼（比如大尺寸，和背景色相對，特效輔助等）。

二級輔助決策類按鈕：輔助達成主要決策時的按鈕，相比一級按鈕視覺上更加弱化，但是樣式一般和一級按鈕相關聯，比如跳轉，領取，二級確認彈窗的確定和取消等。

三級附屬類按鈕：適用與介面上非常用功能，附屬功能，便捷功能，比如詳情tips，選擇數量按鈕，提示皮膚按鈕，一鍵勾選框等。

1.3.3裝飾元件

裝飾元件常見於角色立繪，UI底紋，UI特效，場景原畫等，以靜態或動態方式呈現。雖然其重要程度不夠，但裝飾元件本身也可以承載部分資訊，且圖形化色彩豐富的裝飾資訊讓大腦注意力快速被吸引。因此裝飾元件主要有以下作用：

（1）毗鄰於資訊元件，幫助玩家快速注意到關鍵資訊。


（2）強化介面預設的情緒。

勝利/失敗等結果介面最為典型，分別提供積極/偏消極情緒。


福利和付費向介面也常出現，他們更傾向於用角色展示來塑造更強的獎勵感或引導玩家對付費行為的正面情緒認知。


（3）增強介面美觀度。

裝飾元件基本的作用，在合理範圍內往介面填充裝飾物，


（4）幫助塑造情境化介面，或加強展現遊戲世界觀。


需要注意裝飾元件的呈現方式（立繪，場景等）≠裝飾元件。當某個圖示/立繪等作為介面中某個主體的視覺呈現展示出來時，它是資訊元件而不是裝飾元件。


這類案例在充值介面中尤為常見，展示的主體一般和資訊元件沒有過於直接的聯絡時才能叫做裝飾元件，需要注意區分。

1.3.4混合元件

混合元件是將以上三種元件進行組合得到的元件，是壓縮介面資訊量的有效方式。這類元件往往會採用閉合的視覺印象，將不同作用的元件結合在一起。

（1）資訊+執行

屆滿標題+返回按鈕


資訊欄+跳轉按鈕


（2）資訊+裝飾

對關鍵資訊的美化包裝，方便凸顯關鍵資訊。下圖舉例排行榜中前三位的資訊中增加了裝飾處理。


（3）執行+裝飾

這種太常見了，各種特色或擬物的按鈕。


二、縱向結構

縱向結構是不同介面層級堆疊在一起的狀態，我們需要對堆疊的各個介面層級做好規劃，主要有兩個目的：1.避免各個介面引發遮擋衝突（比如提示層級蓋住了主介面讓引導無法進行）；2.保證玩家清晰理解介面結構，塑造快捷方便的介面使用體驗。


我個人認為合理的疊加層級示範如下：

主介面 → 普通遊戲功能介面（可疊加）→ 引導層


普通功能介面內部也是有層級之分的，UI背景底板→3D模型→普通UI元件→UI特效

→ 主動彈出式的功能介面 → 浮動資訊層 → 全域性提示/彈窗層

主動彈出式的功能介面可以在縱向結構中插隊，直接顯示在最頂層。部分遊戲可能有這功能（比如簽到，提醒，強制顯示的運營活動等），但對整體層級體驗來說有些糟糕，這種功能往往需要玩家手動關閉，需要放在引導之上，以免引導卡住。


浮動資訊多為可自動隱藏顯示的提示訊息，比如獲得資訊浮動框，成就提示窗等。這類資訊一般不可互動，過幾秒就會自動消失，但是顯示權重高，會蓋住各功能介面。


全域性性的提示或者彈窗一般是對遊戲整體執行狀態的體現，一般需要在頂層顯示，並且大多需要加遮罩方便聚焦。這類一般是遊戲效能/退出彈窗，以及網路狀況/遊戲報錯提示。


三、結構最佳化

總結一下，上文講了遊戲介面結構分橫向和縱向兩種，其中橫向結構會用分割槽的方式，將資訊的位置大致排布在一個介面上。縱向結構會將多個橫向介面按順序排布在一起。

規劃介面結構時，需要經歷全屏/視窗的抉擇，返回/關閉體系的抉擇，通用頁籤區和功能區的位置規劃等。設立了介面結構的通用規則後，將會有利於資訊的統一規範化表達，降低玩家學習成本。

但僅規劃結構還不夠，想讓玩家覺得介面結構好用，無外乎最佳化兩點：看清介面與減少層級。

3.1看清橫向介面


玩家停留在介面中會先認知後行為，保證介面（此處指的是橫向結構）清晰易懂是首要目的，否則沒耐心玩家會急速流失，也不會有介面行為。因此我認為清晰的介面結構反而比便捷的操作會稍微重要一點。

3.1.1平面策略（色調/擬物/頁籤規則）

玩家進入介面會習慣性地尋找視覺焦點和父子關係，來感知介面結構，並決定閱讀的順序。而剛好平面設計中的一些美術技巧可以幫助玩家理解這些。

（1）區域色調

介面顏色的飽和度，灰度會影響玩家對層級的判斷。一般來說，，在自然世界中由於光線作用，灰度偏白可表示“更近”的物體，越黑的地方離玩家 “越遠”。因此偏白的部分越容易表示更深層級的介面，也能表示視覺上更重要的區域。

因此想要表示介面上父子層級包含關係，可用色塊幫助玩家理解。


左圖是資訊拼湊未處理的結果，整體很平，看不出進度條與培養的關係。右圖在對齊基礎上用深色淺色色塊區分視覺層級先後關係，玩家更容易懂進度條是下面三個培養的統計之和。如果二者用的是同色相不同灰階，區分效果會更好

左圖是資訊拼湊未處理的結果，整體很平，看不出進度條與培養的關係。右圖在對齊基礎上用深色淺色色塊區分視覺層級先後關係，玩家更容易懂進度條是下面三個培養的統計之和。如果二者用的是同色相不同灰階，區分效果會更好

舉個例項，這種色調的運用也可以應用至標題區和頁籤區，讓玩家對介面結構一目瞭然。


《黑潮之上》中，通用彈窗的標題區和一級頁籤區用了同樣深色系的色塊，功能區用的白色塊，並且還錦上添花地將標題頁籤區的部分稍微縮小，塑造出堆疊關係，這樣凸顯內容與解釋結構兩不誤，屬於非常優秀的結構最佳化設計。

（2）模擬實物

想要表現介面順序，除了抽象方法，實物之間的堆疊關係，比如書頁，頁籤，地圖等關係能天然讓玩家知道層級關係，在第五章表現設計的時候可以考慮。


另外，遊戲裡直接使用現實中存在的事物進行包裝，很多時候可以實現介面教學0成本。最常見的是手機介面的包裝，玩家是其使用方法是非常熟悉的。



（3）頁籤擺放規則

多個頁籤放在一起時，如果不加區分會影響玩家對層級的判斷。為了區分同一個介面中頁籤誰是一級誰是二級，一般有兩種處理方法。第一種如下圖，一二級頁籤一個放側邊，一個放上下兩端。玩家很容易明白左邊是一級頁籤，上面是二級。


如果想要一二級頁籤放在同一側，一般會透過形狀，顏色，大小等加以區分，防止玩家產生誤解。下圖中用圖文，頁籤形狀等做區分，效果很不錯。


3.1.2介面動效

和美術有點不同，策劃眼中的動效對引導玩家視線，幫助玩家理解介面結構的幫助更大，而美觀和銜接只是附帶的。

具體的應用方法，比如漸隱，滑動，彈跳，面積放縮，動效師經驗會更多。作為策劃只想說，動效的順序，一般是按照介面結構順序來的，先出現內容主體/父層級物體/頁籤，再出現子層級物體，附屬區域等。玩家只要注意一般都能知道介面結構是怎樣。動效的順序比較自由，也可以先展示無關緊要的部分，最後展示需要關注的主體內容。


重點表現的區域需要使用動效和特效一併“強調”，配合聲效效果更佳。另外嚴格控制動效時間，防止玩家等待時間太久。

3.1.3牽引介面

將一個主體物與介面繫結，切換介面同時會改變主體物的視角和形態，用主體物的變化來幫助玩家記憶介面內容，起到一個類似頁籤指示器的作用，包含這種方式的介面叫做牽引介面。

牽引介面最常用的方式就是和人物部位相連，比如裝備部位的不同強化等，比起普通頁籤效果要直觀得多，還有助於遊戲世界觀設定的代入。


這裡需要舉一個反例，如果僅僅只是伴隨角色視角切換，而形態未有改變則牽引的作用會大打折扣。



3.2減少縱向層級


想要玩家記憶縱向結構比較困難，除了上文提到的“金字塔原則”讓玩家能看到更低層級的介面是什麼外，剩餘要做的就是儘可能實際地或者在感知上減少層級。

3.2.1父子層級介面

子介面顯示在父介面中的處理方法可稱為父子層級介面。其表現形式為不彈出新介面（視窗子介面或者全屏子介面覆蓋父介面），而是改變父介面某個區域的顯示。


這種方法能在一定程度上減少介面層級，避免頻繁的介面切換，因此廣泛存在各類遊戲介面中。但需注意這類方法也會增加橫向結構的複雜度，需要配合動效和介面效果讓玩家認識到這是一個子介面。也需要注意父子層級介面與切換，頁籤之間的區別。

3.2.2抽屜介面

抽屜介面是把實際上是擁有父子關係的介面透過中間物和滑動方式建立聯絡，能讓玩家在感受上保持只有一個介面的體驗。


這種方法能實際上並沒減少介面層級，但是可以在玩家感知上，因為中間物和動效的存在，會把父子介面看作是一個層級，建立清晰的介面認知。好處是能讓玩家忍耐更多介面資訊和層級，缺點也還是沒有解決操作不夠便捷的問題。

實際上最佳化介面還有一些小技巧，囿於篇幅就不展開來講了。

四、本章知識框架


知道了資訊大體的位置，規劃起了整個介面骨架後，我們可以探究：資訊的分類細化，資訊之間的關係與空間位置，資訊出現的時機，以及如何加工資訊以降低玩家的認知成本等。下一章我們將會構建起一個功能上可用的介面。敬請期待。


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