什麼是介面設計規範？
將瑣碎的東西整理量化成「通用規則」吧！
在遊戲開發的過程中，常常會遇到需要設計「介面」的時候。
無論是由企劃經手，或是由專業的UI設計師，都會遇到不少問題。
這行字要放多大？
這個訊息要彈出視窗嗎？還是用簡單的頂部提示就好？
這裡的字體用跟其他地方一樣的嗎？顏色呢？
如果每一次追加新功能，都需要重新設計一遍，那可能會花上不少時間。
因此，專業的開發團隊會需要一個「介面設計用的準則」，這個東西就稱為「UI 設計規範」。
UI 設計規範
軟體開發中相當重要的設計準則，除了介面內的「顏色」、「字體大小和字型顏色」之外，什麼樣的資訊用什麼樣的介面顯示，提示訊息停留幾秒等等，這些規則都應該在一開始就設定好，讓後面的開發人員有規範可以遵循，以免讓不同的功能看起來像是拼裝車一樣硬湊在一起。先來聊聊「資訊分級」
在進入設計規範的內容之前，我們先來了解一下何謂「資訊分級」。
遊戲需要向玩家傳達各種不同的「資訊」，例如事件成功失敗的資訊（像是購買寶石）或是有好友傳送訊息等等。
不同重要性的訊息，在介面中佔的大小和位置也會有差異，最重要的標題通常字體都是最大的，然後根據重要性漸漸縮小。
依照內容的重要性，訊息的展現方式也會有很大的差別。
訊息的強度通常分為四個等級，越不重要的訊息提示，就要做的越「輕」，而非得要玩家知道不可的資訊，就要做得很「重」。
除了同一個畫面內資訊強度的分級，展示的方式也有差異。
「展示方式」由輕到重，大概可以分為下列四種：
- <最輕>不需即時獲知的訊息
例如信箱中有新的信件，如果不需要即時處理，可以在功能按鈕上方顯示個小紅點就好，不打擾玩家的遊戲體驗。 - <次輕>短暫的提示或通知型訊息
例如「體力滿了」或是「好友邀請」等，需要通知玩家，但不希望中斷玩家操作的訊息。
通常會以頂部提示（又稱Toast，註1）的方式，或是跑馬燈等形式展示。
偶爾也會有小範圍的彈窗跳出，但隨意點擊螢幕任意位置就可以關閉。 - <次重>重要的訊息
例如「是否消耗寶石購買道具」，或是「吃掉/刪除稀有角色或道具」這類「不可復原的一次性操作」，需要玩家當下「非常清楚自己的行為」會導致何種後果。
此時的訊息就需要有正式的彈窗，跳出來打斷玩家的視野，並且需要玩家點擊確認才能繼續執行功能。
通常這種等級以上的訊息彈窗，都無法單純點擊視窗的外圍來關閉，也就是會強制使用者和這則訊息有互動操作。 - <最重>必要的訊息
最重要的訊息，例如「使用者合約」或是「很重要的解說和對話」，這種訊息除了彈窗之外，還需要玩家執行特定的操作才能繼續下去。
例如使用者合約常常需要玩家把合約拉到最底下，確保玩家看過（雖然大部分還是直接略過）之後，才能點擊繼續。
或者例如新手教學，必須要點擊指定的區域，或是等待數秒才能繼續下一步驟。
這些都是為了確保玩家有「吸收到資訊」。
註一Toast
Toast是安卓系統中的一種訊息提示方式。訊息框會從手機正上方往下彈出，僅佔上方一小部份，停留數秒後縮回。這個名稱的由來是因為這個訊息彈出的動作很像是烤好的吐司從吐司機裡跳出來。Snackbar
Snackbar剛好就是Toast的相反，是在手機螢幕正下方彈出。除了通知特定訊息，有時也會附上一個簡易的操作按鈕，例如回復上一個動作等等。
介面大小的使用時機
依照資訊量以及重要程度，「介面」的大小和位置也會不同。
介面大概可以分為以下這幾種
1.滿版/全螢幕
滿版是比較好理解的，就是直接把玩家全部的視覺訊息都佔掉。通常用在「需要長時間閱讀」以及「不需要頻繁開關」的介面上。
例如「公告」、「組隊介面」或是「轉蛋」等等。
2.視窗/彈窗
這邊的視窗指的是「有明確邊框」的資訊區塊。例如是否花費金幣購買道具的確認窗就是彈窗的一種。
3.懸浮窗/懸浮框
所謂的懸浮窗，是指暫時顯示資訊的小區塊。
遊戲中常常看到「按住顯示技能介紹」或是PC遊戲游標經過時會顯示的文字介紹，這些都屬於懸浮框。通常用在「需要快速查看，但只要使用者理解後就不需展示」的內容
4.快閃提示
快閃提示這類資訊只會顯示極為短暫的時間，不需要使用者操作就會自己消失。
例如手機頂端和底端的提示，僅僅只是提醒使用者某些執行結果（例如上傳成功），不需要停留太久。
5.隱藏式介面
隱藏式介面其實和懸浮框有點像，差異在於這種介面貼著螢幕的邊緣設計。
例如安卓系統或是ios系統，就可以從上方下拉來開啟功能選單，這種的就歸類在隱藏式介面裡。
和懸浮框一樣，顯示這些資訊的前置動作都需要先讓使用者學會才行，學習的門檻稍微高一些。
彈窗的種類
除了訊息展示的樣式外，是否強制使用者要對這則訊息「做回應」也是區分訊息輕重度的標準。
在Android和ios設計規範的定義中，彈窗分為兩種，分別是
模態彈窗（Modal Dialogue Box）
模態彈窗不需要使用者做出反應，訊息不需要確保被看見。
例如手機的頂端通知或是跑馬燈這類短暫的資訊提示，就是模態彈窗。
非模態彈窗（Non Modal Dialogue Box）
非模態彈窗就剛好相反，需要「確保使用者看見」。
所以這類彈窗需要使用者主動「操作」，例如點擊確認或取消的按鈕等等，確保資訊有傳達到。
但非模態彈窗也可以做的比較「輕」，例如雖然有確認按鈕，但其實使用者點擊彈窗外圍也能把這個彈窗關閉，相對之下對操作比較友善，也比較不那麼中斷體驗。
在現今遊戲中，把 UX 做的好的範例，都幾乎會加入便捷關閉彈窗的功能，尤其是按鈕比較小的時候，這個設計更能降低使用者在操作時被卡住的頻率。
設計規範需要有的內容
好的，上面聊了這麼多 UI 的基礎知識，總算可以進入今天的重點了，究竟設計規範要「規範」哪些內容呢？
筆者這邊列出幾個重點供大家參考
1.介面尺寸和布局
所謂的介面尺寸，是指例如「內容資訊和介面邊界的距離」以及「資訊之間的距離」，或者也可以簡單理解為介面的「排版」。
也需要知道一個介面中有哪些種類的資訊，例如「彈窗標題」、「內文」以及「按鈕敘述」等等。
又或者是「確認和取消按鈕」，要在手機螢幕上的左側還是右側，這些和橫持或豎持有關，事先定義清楚會比較好。
有了基本的規則之後，工程師在串 UI 的時候會方便很多。
2.字體字型
介面的標題或一級資訊要放多大？二級三級要放多大？
內文要使用怎樣的字體？也要留意字體的版權問題？
公告內容是否有範例（雖然這一般是營運在煩惱的）？
內文敘述到例如「道具」、「角色」之類的資訊時，字體字型或顏色是否要改變？
3.顏色的使用
例如確認和取消按鈕的底色必須要統一，或是文字敘述到特定物件（例如稀有度）時的顏色色碼。
顏色對於不同文化中的含意也是有差別的，使用正確的顏色，並且確保整個遊戲中顏色對應的意義有統一準則。
詳細也可以參考筆者之前寫的：如何做好遊戲的UX設計？
4.符號的使用
與上一條相同，怎樣的符號代表哪些意義，很重要。
例如遊戲中代表「攻擊」的符號就應該要唯一且獨特，不能跟其他符號混用，「法術」、「防禦力」這些有特定意義的符號也應該要有個規範。
5.提示方式的選用
怎樣類型的訊息需要彈窗提示？怎樣等級的只需要紅點提示？
通用提示的介面應該怎麼安排？
（紅點提示這類大量被運用的東西，程式最好有一套完整的工具來管理和除錯。）
6.互動操作與控件
例如哪一種等級的介面可以點擊介面外來關閉，哪一種不行。
哪些介面則需要滿版，哪些需要有右上角的叉叉按鈕。
除此之外，「上下滾動頁面（Scroll）」、「滑桿（Slider）」、「開關（Switch）」等這些介面基本控件的互動邏輯，最好也一開始就定義清楚。
（細節甚至可以到手指滑動距離多少、多快才算是有滑動等等，這些參數通常 UIUX 設計師會有經驗，但工程師還是需要有個基礎值當參考）
名詞解釋：控件/控制項（維基百科）
所謂的控件（Widget / Control）指的是介面中的可視化操作模塊，包括按鈕、滑桿、文字輸入框等等，某些開發引擎會把這些控件納入開發套件中，視同打包好的工具組，可以直接使用，快速開發。7.通用動畫和特效
介面跳出時是怎麼跳出的？移動閃動或漸隱的秒數是多少？在介面切換途中玩家如果點擊會發生什麼事，按鈕會不會有反應？
點擊按鈕的時候需不需要有按下的動態變化？通用按鈕點擊時需不需要有特效？
參考資料
面對「設計規範」你該知道的幾件事
（P.S.上面這篇提到的設計規範，是指安卓和蘋果系統，為了讓平台上的眾多 app 有相似的體驗，才提出的準則，和本篇探討的內容不太一樣，但還是可以參考一下）
設計規範的重要性
設計規範存在的意義，其實是確保「不同人設計出來的東西，看起來有統一性」。有點像是主美的工作是統整美術風格一樣。
不僅僅發生在一個團隊內有很多成員和設計師，也可能是同一組人員，但因為開發時間太長，導致前後時期開發出來的東西不一樣。
為了避免這樣的問題，所以才需要由設計規範來統整。
當然，規範並非一成不變的，很有可能會在開發過程中不斷的修改。但有一份設計準則，用來處理「那些不確定的瑣碎小細節」，把這些東西從大腦中清除，將資源用在更重要的事情上面，對節省時間和溝通成本來說還是非常有效的。
寫在最後
設計規範這種東西，家家有本各自的經。
上述也是筆者根據自身經驗總結出來的內容，但在不同流派或是平台，這些內容的名稱以及習慣用法都不同。
因此這篇僅僅只是提供完全沒有接觸過的朋友作為參考。團隊在開發中還是要尋找最適合自己的規範內容才是最好的。
那麼，這次的分享就到這邊。
我是水狼，我們下次見。
也可以到臉書追蹤我喔： 粉絲專頁連結
最後，請多利用我的個人文章列表，會持續更新：
