大家好，我是小王，最近自己的時間比較多，趁這個機會寫了這篇文章，一方面是把自己基本功牢固牢固另一方面也希望能夠幫到一些對控制項不太熟悉的設計師。
我一直認為遊戲交互本質是一門語言學，設計師通過遊戲中界面，音效，動效等形式傳達給玩家信息。而「控制項」類似於英語中的「詞組」，都是通過把幾個基本的元素以固定的形式組合起來，傳達出可以立馬理解的信息。若是後面有空則會寫幾篇關於交互語言學中更基礎的存在的文章，例如「設計規範」，「網格系統」等，他們其實就對應著英語中的「單詞」，「語法結構」等。
本篇文章會通過「官方定義」，「我的理解」，「基本構成」，「操作手勢」，「詳細說明」，「特別注意」六大個維度來分析遊戲中最常用的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。參考他們的底層，再根據自己的遊戲進行針對性的設計，這樣才能事半功倍。
最後謝謝大家的觀看，希望能夠幫到你們，感謝！
（標題圖片來源於Behance《Mobile game UI design》）