視窗介面設計規範：介面關閉方式及介面疊加

導讀：在遊戲中，無論是手遊/端遊/主機遊，視窗介面的數量都十分巨大，上一期，學院君推送了視窗介面的型別以及互動設計的規範：

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

本次，網易遊戲使用者研究中心將繼續和大家一起探討視窗介面關閉方式，以及如何處理介面疊加。

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

一、視窗介面關閉方式

每開啟一個新介面，都意味著需要有關閉方式來將其關閉，保證玩家在不同的介面之間進行自由地切換。一般情況下，全系統要對關閉方式進行統一規劃，這包括：

a)位置統一

按鈕的位置統一在介面的某個部位，不可以忽左忽右、忽上忽下；

b)樣式統一

通用關閉按鈕的尺寸、大小、外觀應保持始終一致，除少數需要特殊做表現的介面可以允許稍微不同。同時，按鈕的樣式要符合玩家的通用認知：如關閉使用叉號，返回使用向左箭頭符號；

c)邏輯統一

使用返回或者關閉，應在全系統內進行統一邏輯；除特殊需求外，切忌部分介面使用返回、部分介面使用關閉；

d)特殊關閉方式特殊處理

如果使用手勢、3D touch、重力感應、聲音輸入等特殊關閉方式，必須謹慎使用，並且提供明確新手引導確保玩家學會。

遊戲內常用的關閉方式有以下幾種：

1)關閉按鈕

最常用的關閉方式，除非有明確的設計目的，一般情況下都放置在右上角。設計時要保證比較好點選的相應區域。圖示設計一般為叉號，若使用其他符號，需保證玩家易於理解。視窗介面、全屏介面、偽視窗介面中都可以使用。


2)返回按鈕

此為iOS應用自帶關閉方式，用在有明顯上下層級關係的介面中。使用時一般放置在介面的左上角，少數情況會放在右上角。GUI設計時採用的圖示應是向左的按鈕。

此種關閉型別通常情況下只適用於全屏或者偽視窗介面，視窗介面因其介面形式靈活，比較少使用到。

通常情況下，在介面數量不多的休閒、MOBA、卡牌等遊戲中比較適用，但在比較複雜的大型MMO遊戲中，因其介面資訊量大、層級深，此種關閉方式會讓玩家經過多次點選才能回到主介面，不建議使用。

3)通用按鈕

許多反饋介面中，會採用通用按鈕作為關閉按鈕來關閉介面，但這種方式因為介面佈局的原因，比較少會作為通用的方式去使用。

4)二次確認窗

通常情況下，二次確認窗因為其本身選項中就帶有取消操作，因此允許不顯示關閉按鈕。但是，如果提供給玩家的選項中並無取消一類的操作的話，則必須要有關閉按鈕或者其他系統預設存在的關閉方式。


5)點選介面外空白區域關閉

點選介面外空白區域關閉介面也是一種較為常用的關閉方式，其在遊戲中的應用主要有兩種方式：

a)只用於反饋提示類資訊的關閉，例如升級提示、促銷活動等；該類提示不仔細閱讀也對遊戲程式無影響，方便玩家快速跳過；

b)運用於遊戲全域性的情況，比如《亂鬥西遊》。如果需要在遊戲全域性中使用，必須全系統通用，即所有彈出介面都可以通過點選介面外空白區域關閉介面，並且在前期新手中充分做好引導教學，確保玩家能夠發現並熟悉這一套操作流程。也可以在介面底部等不重要區域使用文字提示告知玩家，如“點選介面外空白關閉”。



6)其他手勢、3Dtouch、重力感應的方式

原則上不建議使用這些方式作為系統主要的關閉返回方式，這類操作具有隱蔽性，玩家比較難意識到。只建議可以作為少量系統的亮點或輔助方式進行。

如果要使用這種特殊的操作關閉返回方式，必須有非常充分的新手指引，保證玩家能夠100%學會關閉介面的方式，並且不會與系統其他的手勢、3Dtouch、重力感應的互動形式發生衝突；或提供其他明顯的返回關閉方式（如關閉按鈕），這些特殊操作只作為快捷方式補充。

二、介面疊加

介面與介面之間，往往都會出現重疊的情況。如何處理疊加層級，需要在設計中期就進行精心規劃設計。

1)介面歸類分層

在設計介面達到一定體量的時候，需要進行大致的歸類。

通常情況下，在一般MMORPG遊戲中，介面可以歸為以下幾個大類別：

公告提示：用以顯示全服的公告、個人的提示、戰鬥力變化等資訊；

狀態提示：用以顯示各種反饋類的提示，如任務完成、等級提升等；

基礎介面：包含一二三級介面，各種確認彈窗，成就提示反饋等；

場景提示：掛接在場景中的反饋提示，如掉血跳字；經驗獲取跳字、自動尋路標識等。


這四大型別介面，位於頂層的通常是公告提示，次一層的是狀態提示，接下來是基礎介面，最後是場景提示。

當這些介面元素出現的時候，公告提示始終位於最頂層，會蓋住等級提升等狀態反饋，而等級提升又會覆蓋基礎介面，基礎介面又會覆蓋場景提示。（注：本文以常見的MMORPG型別遊戲為例進行討論。其他型別遊戲資訊量沒有這麼大的情況下，可自行進行調整設計）

2)每一層的資訊處理

根據上文的思路，我們已經對介面進行了4類分層，接下來我們就需要處理每一層內的資訊。

首先，我們應當儘量保證，單層內的資訊儘量少出現重疊，如在公告提示層，應儘量避免個人資訊、全服公告、走馬燈公告彈出的時候相互重疊。

如果單層內會有介面重疊的情況，需要有覆蓋規則。比如在基礎介面層中，三級彈窗應該覆蓋在二級皮膚上，二級皮膚應該覆蓋在一級介面上；並且處理好每一層與下層的關係，如是否疊加黑色半透明底，多層半透明底出現的時候是否只顯示最上層一個。


3)跨層資訊處理

將所有層級的資訊疊加在一起，檢視是否會出現重疊的狀況，尤其是頻繁彈出或長時間持續出現的資訊：比如走馬燈公告的彈出位置是否會干擾到通用介面上的資訊顯示；個人資訊反饋是否會遮擋自動尋路狀態等。

儘量把長時間持續出現的資訊（如走馬燈、自動尋路等）與其他關鍵資訊錯開，放置在介面上比較次要的位置上。尤其要考慮到玩家在進行緊張戰鬥時的操作體驗。


4)結合動態資訊進行考慮

部分資訊會涉及到動效或動畫，比如個人資訊彈出的時候有彈出動畫，要充分考慮動畫彈出的位置、播放次序等問題：

a)動畫彈出的時候，是否會發生位移，位移後是否會遮擋其他關鍵資訊；

b)同一位置短時間內彈出多個動畫時應如何處理？（播放最新的/次序播放/忽略播放n秒以前的；）

c)連續多條動畫之間是否有銜接（多條走馬燈播放時是否需要重新撥出公告欄等。）

以上，就為我們總結的視窗介面關閉方式及介面層級處理規範，在實際的操作中，不同目的的介面佈局以不同的特徵為首要目標，不同形式的介面可以用不同的方法來實現。希望能給大家一點啟發。

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