遊戲互動的基礎！詳細解讀遊戲中最常用的11個控制元件

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


本篇文章會通過“官方定義”，“我的理解”，“基本構成”，“操作手勢”，“詳細說明”，“特別注意”六大個維度來分析遊戲中最常用的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。參考他們的底層，再根據自己的遊戲進行鍼對性的設計，這樣才能事半功倍。

最後謝謝大家的觀看，希望能夠幫到你們，感謝！


來源：騰訊GWB遊戲無界
原文：https://mp.weixin.qq.com/s/zqmmYp89I7Q3d8ZOy26bIA