如何做好視窗介面的互動設計？你需要了解這些規範

導讀：在一個遊戲中，視窗介面的數量是十分巨大的，尤其是MMO型別的遊戲，需要設計師在一開始就做好相關的規範。

那麼，如何處理好各級介面之間的關係以及對應的操作，來保證遊戲中所有介面體驗的一致性，以及設計時的擴充套件性呢？本次就帶大家來了解視窗介面的設計。

本文選自網易遊戲研發系列叢書——《大巧不工：使用者體驗設計法則》

1.介面型別

視窗介面在此指的是遊戲中除遊戲主介面之外的所有介面的總和，如目前的遊戲中（無論是橫屏/豎屏、手遊/端遊/主機遊），一般會根據佔用螢幕的空間，將視窗介面分為以下幾種基礎介面型別。一般情況下會選擇一種型別為主要框架，然後同時使用其他幾種作為輔助。

1)視窗

特徵：全部資訊/控制元件都放進一個介面底板內，會透出左右或上下的遊戲場景，佔用螢幕空間較小。


優勢：

a)玩家在開啟介面的過程中，仍然能夠關注到底下的遊戲場景資訊；
b)玩家沒有完全打斷的場景遊戲體驗；
c)資訊扁平化，一鍵關閉返回場景，有安全感；
d)不會涉及到介面跳轉，介面層級簡單易理解，邏輯清晰；
e)很好地展現功能性強的介面。

劣勢：

a)介面四周存在一定空間的浪費；
b)條條框框的東西比較多，介面表現力弱。

適用範圍：

a)與場景有較強互動的遊戲型別，如MMORPG、SLG、模擬經營等；
b)層級單一、流程性弱的遊戲，如休閒小遊戲；
c)功能性、邏輯性強的遊戲。

設計規範：

a)統一的關閉規則&關閉按鈕；
b)背景建議有適當蒙灰處理；
c)如果是MMO可直接選這種。

2)全屏

特徵：沒有框體結構，控制元件散佈、組織在場景中，場景密不透風，對玩家遊戲場景打斷性最強。


優勢：

a)表現力強，給玩家強烈的視覺體驗，視覺效果強；
b)不會造成空間浪費；
c)介面形式發揮空間更多，易於營造更好的視覺效果；
d)單執行緒——玩家同一時間只關心一件事情。

劣勢：

a)設計難度大，資訊層級把控要求更高，資源量大；
b)層級深，進入下一級系統操作比較多，不能快速回到主介面，必須經過多級返回，容易層級眩暈；
c)多系統間跳轉邏輯奇怪。

適用範圍：

a)具有強大世界觀或故事背景，強體驗性的遊戲；
b)核心玩法與介面關聯性不強。在遊戲玩法外玩家可以長之間關注在介面上；
c)純介面玩法比較多，系統設定概念化重。

設計規範：

a)注意統一返回方式；
b)提供快捷返回主介面的方法；
c)介面層級不宜過深；
d)做好多系統跳轉連結；
e)MMO不建議用。

3)偽視窗

特徵：有框體結構，背景為一張靜態圖片，實際上也是一種全屏介面。


優勢：

a)相比起全屏介面，資訊更容易歸類排布；
b)相比起視窗介面，底圖適當地增強代入感；
c)設計難度比全屏介面低，資訊主次更清晰；
d)如果背景的場景非常混亂，可遮擋混亂的背景。

劣勢：

a)表現力上不如全屏介面；
b)與視窗介面混用易出錯：到底哪些要有背景、哪些沒有；
c)比起視窗介面，資源量大一些。

適用範圍：

a)功能性比較強，沒那麼注重體驗性的遊戲；
b)對資源量有要求的遊戲；
c)核心玩法與介面關聯性不強，在遊戲玩法外玩家可以長時間關注在介面上。

設計規範：

a)和視窗介面結合使用的時候，必須定義好哪些要有背景圖、哪些用半透明黑色視窗；
b)要避免場景很亮，底板很暗的尷尬（比如場景是白天，一開啟介面是深色背景）；
c)介面層級不宜過深；
d)做好多系統跳轉連結；
e)MMO不建議用。

4)如何選擇

那麼，要怎麼去選擇主要框架介面呢？

a)首先，要看是否有主場景；

這裡的主場景指的是，除了核心玩法外，是否有個可互動的遊戲世界。因為只有場景作為背景，才能使用視窗類介面作為基礎框架。

有主場景的遊戲，一般是MMO類、RPG類、SLG類、養成類、部分休閒類遊戲（比如《大話西遊》、《COC》、《夢幻花園》等），一般可以在三種介面形式中隨意選擇。

沒有主場景的遊戲，則可能是MOBA類、FPS類、卡牌類、休閒類、棋牌類遊戲，則不可以選擇視窗類介面作為基礎框架介面。

b)其次，要看玩家與場景的互動程度是否頻繁；

在一般的MMO類遊戲中，玩家會與場景發生頻繁的互動：交接任務、移動、尋路、對話、採集等。玩家可能隨時停下當前的介面操作，調整自己的遊戲目標。

比如遊戲在完成20輪師門任務後，會切回主介面開始另一個新的任務，因此推薦使用對玩家場景互動打斷較小的視窗類介面作為基礎框架介面。玩家在開啟介面的時候仍然能夠通過邊緣區域來判斷自己當前所處的位置、角色狀態、是否被攻擊、任務是否完成等等，從而隨時調整自己的遊戲目標。

c)最後，要看遊戲型別是否對於代入感有強烈的需求；

《陰陽師》是非常好的例子。作為一個RPG結合卡牌的遊戲型別，《陰陽師》雖然在核心戰鬥外有一個庭院場景，但依然使用了全屏介面，搭配了比較多的偽視窗介面作為基礎框架。

這是因為遊戲目標在於塑造一個強代入感、強體驗性的遊戲世界觀，使用全屏介面大大提升了這種浸入式體驗。

2.介面資訊層級

定義好了基本框架後，我們基本上已經選好一級介面形式，需要開始規劃基礎介面層級。介面層級主要是定義：

a)介面層級數；
b)每級介面的大概尺寸、形式；
c)每級介面之間的關係。

1)介面層級數

介面層級數，確定的是資訊架構的深度，確定介面最深可以開啟幾個介面。

比如我們從A介面開啟了B介面，從B介面又開啟了C介面，不允許再從C介面上開啟其他的介面。ABC之間是層層深入的關係，那麼介面級數就是ABC三級。

在資訊量不變的情況下，每級承載的資訊量就越少，層級就越深；每級承載的資訊量越大，層級就越淺。好比容積相同的杯子，杯子的杯口越大，深度就越淺；杯口越小，深度越深。UI設計師需要為自己的系統設計合適的杯子，裝下這麼多資訊量。

需要注意的是：

a)通常情況下，介面級數越深，資訊量越少；
b)最後一級一般是二次確認框；
c)可以存在不同尺寸的同級介面（比如二級介面可以根據需要設計幾種不同尺寸的）；
d)跳轉不同系統並不計算在層級內（比如養成裝備的時候缺少材料，跳轉到商城，但養成裝備和商城其實都屬於一級介面）。

建議介面層級不要超過3~4級。一級介面承載一個系統的主要資訊，二級介面承擔這個系統的某一個功能，三級介面承擔二次確認框等提示。特殊情況下根據需要再新增一級。

有一種特殊情況：流程引導性介面。比如，從主介面匹配進入戰鬥的流程，雖然視覺上看是處於同一級的，但玩家經歷了下一步的操作，其實是屬於三個層級。

通常情況下，在專案之初，我們缺少大量的系統設定文件，很難預估系統會需要多少層級介面。可以按照通用管理做3級，並定義好大概的尺寸，做設計的時候儘量往三級介面上去套用，如果套用不上，再進行新增/修改。

也可以根據特定的遊戲型別，預想好一個典型的流程（比如為MOBA遊戲預想好匹配流程），以此作為切入點進行設計。

2)每級介面的關係

思考和定義每層介面直接的關係規則，有助於設計師更合理的做設計，包括：

a)不同級介面的關係

如果我們從A介面開啟B介面，那麼A是應該消失還是鋪在底下？

如果B採用的是視窗介面，需要考慮到是否需要使用黑色不透明蒙版?

不透明蒙版的不透明度是多少？是否允許多個不透明蒙版疊加在一起？是否允許點選空白的地方關閉介面？

b)同級介面的關係

即如果我們從A1介面跳轉到A2介面，那麼關閉A2的時候是返回主介面還是返回A1？

c)一些通用元件的關係：比如財富欄是否跟隨介面？

處理好這些關係和功能邏輯，讓玩家能夠在操作中去等區分整個介面的層級關係，從而帶來好的遊戲體驗。

實際上，視窗介面的數量巨大，設計規則也大有門道，此處只列舉一些基礎的設計規則，在實際的操作中，不同目的的介面佈局以不同的特徵為首要目標，不同形式的介面可以用不同的方法來實現。這需要設計師在平時多觀察多積累，學以致用。


來源：網易遊戲學院
原地址：https://mp.weixin.qq.com/s/atlBC-t_so4baiTR8WNu0A