編者按 最近時間比較多，筆者趁這個機會寫了這篇文章，一方面是把自己基本功牢固牢固，另一方面也希望能夠幫到一些對控件不太熟悉的設計師。

作者：小王

（本文內容由公眾號「小王的交互筆記」提供，轉載請徵得同意。文章僅為作者觀點，不代表GWB立場）

一、寫在前面

我一直認為遊戲交互本質是一門語言學，設計師通過遊戲中界面，音效，動效等形式傳達給玩家信息。而「控件」類似於英語中的「詞組」，都是通過把幾個基本的元素以固定的形式組合起來，傳達出可以立馬理解的信息。若是後面有空則會寫幾篇關於交互語言學中更基礎的存在的文章，例如「設計規範」，「網格系統」等，他們其實就對應着英語中的「單詞」，「語法結構」等。

本篇文章會通過「官方定義」，「我的理解」，「基本構成」，「操作手勢」，「詳細說明」，「特別注意」六大個維度來分析遊戲中最常用的11種控件，其中「詳細說明」又分了「①設計準則」，「②樣式」，「③狀態」，「④構成說明」，「⑤手勢」五個小維度來加強分析，方便大家理解。

好啦，廢話不多說，讓我們進入正題。

二、幾個最常用的控件

按鈕（Button）

官方定義：命令按鈕的作用是對用戶的鼠標單擊作出反應並觸發相應的事件，在按鈕中既可以顯示正文，也可以顯示位圖。（百度百科）

我的理解：按鈕在遊戲中通常作為觸發某種事件的鑰匙，作為最基礎的控件，在遊戲中幾乎每個界面都會使用，使用頻率極高，比如遊戲首頁的進入遊戲，創角界面的創建角色。

基本構成：背景圖片，文本。

操作手勢：點擊，長按，拖動。

詳細說明：

①按鈕應該保持一個準則：玩家學習成本越低越好。要像按鈕，讓玩家知道可以點擊；熱區大小需要方便點擊；當前狀態需要告知玩家，要不用顏色，要不用文字。

②按樣式通常情況下分為三個種類：通用按鈕，異型按鈕和其他。通用按鈕是指設計初期制定下來的，在遊戲中最為常用，也是最符合遊戲風格的按鈕。異型按鈕是指在某些頁面，為了美術氛圍的渲染所特殊設計的按鈕。其他是指遊戲中一些基本的組件，他們更多是承擔著顯示信息的功能，比如頭像框，道具框等。

③按鈕的狀態一般用顏色分四種。跟UI顏色相符合的通常按鈕，採用UI對比色的推薦按鈕，灰色的禁用按鈕，紅色的警示按鈕。、

④按鈕的文本一定要準確精簡。一般用動詞+名詞，比如升 級技能，創建角色，前往組隊，接下來打開的界面名稱，要不就叫名詞，要不就是名詞+動詞，比如技能/技能升級，角色/角色創建。

⑤手勢一般以點擊為主，長按一般是用作調整狀態，比如長按技能圖標進入編輯狀態。拖動較為少見，類似的有技能的拖動確定釋放的方向，背包倉庫界面，通過拖動存入倉庫。

特別注意：前期制定按鈕規範的時候一定要邏輯清晰，注意細節。熱區多大，狀態幾種，使用規則都需要考慮清楚。後期設計的時候嚴格遵守規範，不然會因為按鈕出現場景太多，造成玩家認知困難，以及編輯器維護成本過大。

開關（Switch）

官方定義：開關可打開或關閉單個項目的狀態。它們是在移動設備上調整設置的首選方法。（Material Design）

我的理解：遊戲中的開關和終端設備UI（Ios,Android）中的開關稍微有些區別。遊戲中開關是按鈕的一個變體，它是觸發固定事件的鑰匙（狀態切換），局限性比較大，使用頻率很低，一般只會在需要切換狀態的界面上使用，比如設置界面，切換某項功能的開啟或關閉。

基本構成：背景圖片，開關圖片，文本。

操作手勢：點擊，滑動。

詳細說明：

①開關作為按鈕的變體首要的準則為「易懂」，要讓玩家一眼看出是開關以及當前的狀態。

②若狀態只有兩種，樣式則比較統一，都是模擬現實中開關的樣式。若狀態大於兩種一般都用類似頁簽的表現形式。

③開關的狀態只有選中和未選擇兩種，一般都是用文本的顏色以及底圖圖片的顏色來區分。

④底圖因為面積最大，所以一般都會在這裡通過顏色做狀態的區分，例如開用綠色，關用灰色。開關圖片只要符合UI風格就好。若狀態較難理解的情況需要用文本來說明的狀態名稱，例如「魔法」「物理」。

⑤因為開關熱區過小，點擊滑動兩種手勢的區別不大，所以通常情況下都會採用點擊的方式切換狀態。

特別注意：開關按鈕的狀態切換建議做成位位移動效，強化體驗。根據界面的不同來決定開關按鈕的UI樣式複雜程度，例如重功能的設置界面，開關按鈕盡量簡單，文本也可以省略。狀態切換成功後需要給出反饋（音效，文字）。

切換按鈕（Toggle）

官方定義：切換按鈕可用於從一組選項中進行選擇。（Material Design）

我的理解：切換按鈕在遊戲中起到對某個功能進行開關狀態切換的作用，其實可以算是開關的一個子集。切換按鈕局限性也比較大，使用頻率較低，一般只會使用在功能需要開關狀態切換的界面上，比如裝備強化界面，勾選是否使用綁定材料。

基本構成：勾選框圖片，勾選圖片，文本。

操作手勢：點擊。

詳細說明：

①切換按鈕的首要準則為「便捷」，一般情況下該控件操作頻率不高，但是卻很重要。所以一定要熱區夠大，讓玩家一次成功。

②切換按鈕的樣式通常都比較統一，左側是勾選框，右側是文本。

③切換按鈕的狀態只有兩種：「開」「關」，默認為「開」，通常情況下是通過勾選圖片的顯示隱藏來表達狀態。

④勾選框和勾選的圖片需要區別於單複選框，文本簡潔明了，一般是動詞加名詞，動詞為「開啟」「打開」之類的正向詞語，也可以直接是名詞。

⑤手勢只有點擊一種。

特別注意：切換按鈕的狀態區分需要一目了然，操作需要有反饋。多個切換按鈕同時出現時，需要注意接近性原則，控件內部勾選框和文本的距離要小於控件和控件之間的距離。

頁簽（Navigation）

官方定義：分頁，又稱為頁簽，指的是在賬冊或是資料夾邊緣用來索引用的標籤，抓住的話可以來快速檢索特定頁面。（維基百科）

我的理解：頁簽一般都是成組的出現，組中的頁簽存在互斥性，在遊戲同一界面內作為多段信息之間切換的橋樑。使用頻率較高，一般使用在界面內的信息為父父關係的情況下，比如技能界面，用頁簽切換技能的不同成長線（父父關係）。

基本構成：圖片，文本。

操作手勢：點擊。

詳細說明：

①頁簽其實可以粗暴的看成是觸發事件固定為切換信息的按鈕組，所以設計準則也應該是方便點擊和閱讀。

②頁簽按重要程度，一般分三個層級就好了，需要在視覺樣式上體現出層級高低來，全屏界面一般用1，3兩個層級的頁簽，彈窗一般用2，3層級的頁簽。比如郵件界面左側的郵件列表，夥伴界面的夥伴列表也都算是頁簽的一種，特殊的情況，需要特殊處理。

③頁簽在狀態上只需要考慮選中和未選中兩種就好。

④頁簽的文本同樣需要準確和簡潔，一般用名詞。

⑤手勢一般只有點擊一種，點擊即選中，同時只能選中一個。

特別注意：前期設計頁簽需要重點考慮三個層級的設計以及使用原則，體現出層級高低。後期設計的過程中，需要好好考慮默認選中的規則，因為默認選中在一定程度上是高於其他頁簽的，最好根據每個界面的特殊性制定不同的規則，比如組隊副本界面，建議默認選中的副本根據玩家等級來變化。

垂直菜單

官方定義：暫無。

我的理解：垂直菜單類似Android中的Navigation drawer。可以理解為按鈕和頁簽的組，在遊戲內也是作為同一界面中多段信息之間切換的橋樑，使用頻率較低，一般使用在界面內的信息含有父子關係的情況下，比如活動彈窗，通過垂直菜單切換不同的活動。

基本構成：標題圖片，標題文本，箭頭，子標題圖片，子標題文本。

操作手勢：點擊，垂直拖動。

詳細說明：

①垂直菜單是由按鈕及頁簽構成，主要目的也是為了切換信息，所以設計原則同樣是便捷性以及易讀性。

②根據7±2原則，我們需要把標題以及子標題的數量控制在5個或以下。根據格式塔原理，標題與子標題之間的間距需要小於標題和標題的間距。因為標題和子標題是作為信息的題目，按照視覺閱讀的順序需要把垂直菜單放在界面左側（限閱讀順序為從左往右的地區）

③垂直菜單中的標題以及子標題都需要考慮選中和未選中兩個狀態。

④因為是標題，所以文字一般都為名詞。一般都會在標題上設計一個「小箭頭」表達可展開收起的意思。

⑤控件上的手勢會有點擊以及垂直拖動兩種，點擊為選中，標題只能同時選中一個，子標題亦然，默認選擇第一個，選中的標題會展開，未選中的會收起。當垂直菜單太長的時候，通過拖動，上下拉動。

特別注意：垂直菜單重在初期規範的制定，需要詳細的考慮所有細節，除去上面的一些內容外還包括以下內容：文本字數的限制以及對齊方式；箭頭顯示的邏輯，默認和點擊以後分別朝向。這裡對設計樣式給個建議，盡量讓子標題的寬度小於標題的寬度，更好的傳達父子關係這個信息。

下拉框（Menus）

官方定義：下拉菜單是顯示多個選擇的緊湊方式。它在與元素（例如圖標或按鈕）交互時或用戶執行特定操作時出現。（Material Design）

我的理解：下拉框在遊戲中起到切換選擇項的作用，有時候可以代替頁簽。使用頻率為中等，一般在選擇項非常多，或者選擇項之間存在第一優先級的時候使用，比如夥伴界面，利用下拉框來篩選滿足需求的夥伴列表（第一優先級為「全部」）。

基本構成：框體圖片，框體文本，箭頭，下拉列表圖片，列表文本，選中狀態圖片。

操作手勢：點擊，垂直拖動。

詳細說明：

①下拉框的目的是為了了解當前的選擇項以及切換不同的選擇項，所以設計準則為「信息的易讀性」以及「操作的便捷性」。

②下拉框的樣式比較統一，滿足準則即可。盡量放在內容的上方，因為下拉框也有標題的意思。

③箭頭需要根據狀態的不同而變化，選擇項需要在下拉列表中表現出來

④文本盡量簡潔，一般是作為標題使用。

⑤一般為點擊下拉框切換狀態，顯示下拉列表，垂直拖動列表，再次點擊切換選擇項，列表隱藏。

特別注意：設計初期考慮好邏輯就好，比如選中的選項是不是一直處於下拉列表的第一個；切換了選擇項以後，下拉列表需要隱藏嘛；下拉列表有幾種隱藏方式；切換選擇項的時候需不需要做特效作為點擊反饋；下拉列表顯示的方式。

文本框（Text fields）

官方定義：文本字段允許用戶在UI中輸入文本。它們通常顯示在表單和對話框中。（Material Design）

我的理解：文本框的作用是在遊戲中給玩家提供文本輸入，一般會搭配別的不同控件實現功能。使用頻率比較低，一般使用在需要玩家輸入文本的情況下，比如拍賣行界面搭配搜索按鈕，實現搜索物品的功能。

基本構成：框體圖片，默認文本，輸入文本。

操作手勢：點擊。

詳細說明：

①文本框設計的準則有兩個，一是「方便點擊」熱區需要夠大，保證玩家的點擊是有效的，二是「指引清晰」這個是指默認文本的文字需要簡潔明了，指引玩家輸入什麼樣的文本。

②文本框在遊戲中的樣式也比較單一，設計的時候給右側的按鈕留好空間就好。

③文本框在遊戲中因為會調用系統的鍵盤，所以考慮好默認狀態和輸入完成狀態就好，默認狀態的默認文本層級不要高於輸入文本。

④默認文本建議用灰色，輸入文本建議用亮色，一定要拉開層級。

⑤手勢比較簡單，只有點擊一種。點擊文本框觸發系統鍵盤，進行輸入，然後點擊搭配的功能，完成流程。

特別注意：文本框因為涉及到調用系統鍵盤，需要注意不要讓鍵盤遮蓋住重要的信息。比如聊天界面，建議彈出鍵盤的同時，把界面也往上拉，保證玩家能看到最新的消息。

單選框（Radio buttons）

官方定義：暫無。

我的理解：單選框在遊戲中的作用是讓玩家對某項功能的選項進行切換，這項功能的選項必須選且只能選其中的一個，而且所有選項需要顯示出來，比如設置界面的畫質選擇。在遊戲中的使用頻率比很低。

基本構成：選框圖片，選中圖片，文本。

操作手勢：點擊。

詳細說明：

①首要的準則為「易懂」，要讓玩家一眼看出是單選框以及當前的狀態，其次是方便操作。

②單選框樣式比較統一，需要注意的是要和複選框以及切換按鈕區分開。

③狀態只有兩種，選中和未選中，一般用選中圖片的顯示或隱藏來表達。

④選框圖片和選中圖片一般是用「圓形」來設計。

⑤手勢比較簡單，只有點擊一種。玩家點擊單選框來切換兩種狀態。

特別注意：單選框只適用於所有選擇項都顯示出來的情況，若空間較小，顯示不了則使用下拉列表。

複選框（checkboxes）

官方定義：複選框允許用戶從一組中選擇一個或多個項目。複選框可用於打開或關閉選項。（Material Design）

我的理解：若要對某項功能的選項進行切換，並且選項之間不互斥，則使用複選框，比如道具分解中選擇道具品質。複選框在遊戲中使用頻率比較低。

基本構成：選框圖片，選中圖片，文本。

操作手勢：點擊。

詳細說明：

①首要的準則為「易懂」，要讓玩家一眼看出是單選框以及當前的狀態，其次是方便操作。

②複選框樣式比較統一，需要注意的是要和單選框以及切換按鈕區分開。

③狀態只有兩種，選中和未選中，一般用選中圖片的顯示或隱藏來表達。

④選框圖片和選中圖片一般是用「方形」來設計。

⑤手勢比較簡單，只有點擊一種。玩家點擊單選框來切換兩種狀態。

特別注意：如果某功能有多個選擇項那麼就用複選框而不是開關。

滑動條（Sliders）

官方定義：滑塊允許用戶從一系列值中進行選擇。（Material Design）

我的理解：滑動條是採用條形圖反應一系列數值，並且提供給玩家選取單個值的控件。在遊戲中使用頻率很低，例如設置界面中對音量的調整用的就是滑動條。

基本構成：背景圖片，進度圖片，滑動桿圖片，文本。

操作手勢：點擊，拖動。

詳細說明：

①滑動條的設計準則應該是「及時反饋」，給予玩家操作的反饋一定要及時。其次才是「便捷”以及」易懂「

②滑動條的樣式一般都是用「長條形」去設計。

③滑動條有開啟以及關閉兩個狀態，一般是用滑動桿圖片是否置灰來表達。

④進度圖片和背景圖片一樣要拉開，滑動桿圖片的兩個狀態也需要拉開，文本能夠看清就好，滑動桿圖片上建議加上當前值的信息。

⑤滑動條的手勢一般都是拖動，建議加上點擊。

特別注意：滑動條一定要給反饋，建議用音效。進度條是滑動條的變體，只需要去掉滑動桿圖片就好。

步進器（Stepper）

官方定義：步進器由一個增加按鈕、一個減少按鈕和一個由按鈕控制的數值組成。每次點擊按鈕數字變化的數量是恆定的。（知乎《這個控件叫：Stepper/步進器》）

我的理解：步進器在遊戲中是專門給玩家控制數量的控件，一般總是會伴隨着「購買」「出售」等情況出現，例如商城界面，玩家選擇購買多少個物品。總的來說，步進器在遊戲中使用頻率為中等。

基本構成：按鈕底圖，按鈕文字，輸入框底圖，輸入框文字。

操作手勢：點擊，長按。

詳細說明：

①步進器的設計準則是「方便點擊」因為玩家大概率會有高頻操作。

②樣式上一般都是由兩個按鈕中間加一個輸入框的組合。

③按鈕需要考慮因達到閾值所以「禁用」的狀態。

④「加」「減」按鈕一定要區分開，並且要說明每次操作的數量。輸入框只需要把數量信息展示出來就好。

⑤手勢一般都是用點擊來操作，少部分遊戲也有添加長按手勢的，玩家長按按鈕數量不斷地增加或減少，直至達到閾值或者玩家鬆開。

特別注意：步進器設計時需要考慮下輸入框帶不帶交互，比如點擊出數字鍵盤這就是一種常用的帶交互的設計。若加了長按，建議每次改變的數量不要是均勻的，而應該是越往後，改變的數量越大。

三、疑難解答

切換按鈕，開關，單選框的具體區別？

我的理解：

頁簽和下拉框的區別？

我的理解：頁簽比下拉列表的層級更高，適用於需要並且能夠把所有內容選擇項顯示出來的情況。

四、最後

整篇文章比較主觀，總結的一些結論是根據目前市場上最常見的設計所得出的，也是最符合大部分用戶認知的，學習成本最小。11種控件中有幾個是其他控件的變體，因為使用頻率較高所以也放在常用控件裏面，其實遊戲中絕大部分控件都是變體或者幾個基礎控件的組合，萬變不離其宗，掌握好基礎控件的本質然後融會貫通就好了。

其實大家不妨多去看看谷歌的material和蘋果的Ios，遊戲中的控件基本上都可以從這兩個系統UI中找到對應的，比如遊戲的系統文字提示對應着Toast，底部彈出的消息比如成就獲得就對應着snackbar，二次確認彈窗對應着Dialogs。參考他們的底層，再根據自己的遊戲進行針對性的設計，這樣才能事半功倍。