遊戲交互設計規範-規範怎麼寫[下]

zhuanlan.zhihu.com

4.[頁面層級和交互邏輯]

快到了大家熟悉的[組件規範]了，但但在組件規範之前，還要定義頁面層級和頁面見的交互規範。

產品一般不定義頁面層級，因為層級相對固定和簡單：一般分為[內容層]、[頂欄/導航欄]、[彈出層]。

但遊戲不同於產品，它擁有更多更複雜的頁面層級結構，且每個遊戲可能還有需要特殊定義的層級。

且不論遊戲核心玩法頁面含有[地圖層]、[角色層]、[特效層]，光遊戲大廳這邊的層級就很複雜了。

就例如大廳導航欄吧，它可能有可能沒有，可能可以收縮可能部分可以收縮可能全部可以收縮，它的位置可能是橫的豎的也可能是彎曲的，它的表現方式可能是一排圖標可能是分散在場景里的入口可能是……——每種不一樣的變化，都會導致界面層級規範的改變。

再舉上個遊戲項目為例子，相對來說它已經是個接近產品風格的、規整的大廳了，但例如彈窗本身因功能主次不同，就需要多劃分出層級來。

因為遊戲的界面多且複雜，所以不容易在最開始就定義完所有層級和層級間關係，需要跟著功能的增加，看需求往規範里增加層級。

定義新層級時，要儘可能全面地考慮它和舊層級之間的互斥關係、優先關係等，以及定義層級的操作方式、數量、內容等。

層級交互

[1 - 層級]僅次於A1層

[2 - 操作]彈出後，背景用半透明黑色蒙版，屏蔽其他所有操作

[3 - 數量]N≤ 1——彈窗間為互斥關係，不允許兩個及以上彈窗同時存在：新彈窗打開後，舊彈窗自動關閉

[4 - 互斥關係]與B層為互斥關係：A層彈出時，自動關閉所有其他B層；且A層在的時候，不允許B層彈出新窗口

層級內容

有多級／多種操作的信息（設置）

當前操作核心任務（添加好友、創建自定義房間等）

在定義新層級前要明確跟開發部門溝通好能否實現這些關聯和邏輯。

確認定義完之後，也要同步告訴開發部門這些信息，什麼類型的頁面歸於什麼層級，讓開發部門在增加新頁面時可以有效處理頁面間的邏輯結構，避免出現各種頁面間關係混亂的問題。

5.[組件]

終於到了大家最熟悉的組件時刻。

組件這塊跟產品的組件規範差不多，基本就是把組件進行規整和規範。

但因為遊戲場景比較多，為了適配不同的場景，同樣的功能可能需要不同的表現方式，這個時候就需要進行[規範]和[表現]之間的平衡，而且是時常會遇到這個權衡問題。這時候就需要全面地考慮組件在界面中特殊化的價值，以及開發成本和維護成本。

這塊參考很多，我就不細說了（或者以後有空再講）。

6.[視覺/動效/音效]

前面在[交互風格]里提到，交互規範應該定義整個遊戲的「故事」，由它來引導視覺、動效、音效、操作交互的細節。

因為視覺設計師一般在前期確定完風格稿之後，後期的視覺規範就只是通過風格稿擴展到字體規範、顏色規範、按鈕規範、彈窗大小規範這些細節的內容上，方便不同的視覺設計師協同工作。

所以交互設計師在前期制定視覺風格時，就應該積极參与其中。

動效和音效設計師一般也是在有需求時，通過自己的理解去進行動效配置和配音，但可能會缺乏對整個遊戲的感受性，無法準確表達出感覺。這個時候就需要交互設計師進行溝通配合。

-視覺

視覺規範一般包含了字體等。一般視覺規範有視覺設計師去進行撰寫和維護。

但在視覺設計這塊，什麼時候應該加一條線，什麼時候不加這種細節卻是難以把控到的。所以在上一個項目的時候，我也順便從交互設計的角度，對「點、線、面」3個方面制定了一個規範（主要是我們的視覺設計師沒有視覺規範文檔，我也順便做了視覺設計，也就順便寫了個操操的視覺規範文檔orz）。

舉之前定義「有形線」和「無形線」的例子：

-動效

在交互文檔中，我也定義了動效規範，什麼時候應該怎麼用什麼樣的交互動效。

我用 Hype3 來模擬動效，調整出最合適的時間數值和動效樣式，然後對什麼地方適用什麼動效樣式進行規範和描述。

-音效

這塊暫時沒有涉及到，也不是很清楚，以後了解了再來做補充。

7.[交互自查]

這塊是參考了產品交互的需求補充進來的。

交互設計中要細緻考慮的一個地方就是各種分支情況，但這些細枝末節的分支情況有時候容易被疏漏，所以需要[交互自查]來查漏。

用騰訊高手的交互自查表，快速搞定設計中的分支流程和異常情況

以上就是對遊戲交互規範內容的說明。

附帶上一個項目整理的遊戲交互規範文檔 英霸世界遊戲交互文檔。

因為當時第一次接觸遊戲交互，也是第一次寫遊戲交互文檔，裡面多少有寫的不合理或者缺漏的地方，大家僅做參考，還是要根據自己的項目來量身定做交互文檔。

下一次會給大家講講交互文檔應該什麼時候寫，以及維護和執行的問題。

整理這篇文章幫自己梳理了很多內容。

覺得有幫助，請點個贊，謝謝各位老鐵！

歡迎老鐵們進入我的專欄了解更多遊戲交互設計相關的內容。