編輯導語：在産品設計中，小細節也可能影響用戶的實際使用體驗，比如選項組件，其交互狀态相對簡單，但具體到設計層面上，産品設計師就需要将許多因素納入考量。本篇文章裡，作者總結了單選、複選、撥動開關等選項元素的細節和設計技巧，感興趣的話就一起來看看吧。

在UI設計中，無論從效率角度、還是視覺角度來講，組件元素始終在界面中扮演着極其重要的角色，其作用主要是提升應用的可用性、易用性，以幫助用戶輕松完成任務。

選項看起來是一個很簡單的組件，交互狀态僅僅隻是選中（填充）、未選中（描邊）、不可選（置灰）三種，但在真正的設計過程中，比你想象的要難的多，其視覺樣式、元素大小及選項數量都是至關重要的因素。

一個好的選項從來都不缺乏細節，雖然看起來并不複雜，實際要考慮的因素非常多，因為這不僅關系着用戶體驗，還涉及一些界面交互邏輯的問題，需要結合不同的使用場景、合理的将各選項靈活運用到界面當中，這其中的細節不容忽視。

本篇文章将圍繞單選、複選、撥動開關三種選項元素的設計細節及使用場景展開分析，希望能幫助新手設計師避開選項設計的誤區，為用戶打造出更好的操作體驗。

一、單選：獨一無二

1. 什麼是單選？

單選按鈕最早來源于老式的汽車收音機上的電台頻道的切換按鍵，按下其中的一個按鍵就成為了被選中狀态，其他就會被彈出，用戶可通過這種方式快速切換不同的電台。

在UI設計中，單選是指當界面中存在兩個或以上的選項時，且各項之間相互排斥，用戶僅能在選項列表中選擇其中的一個來使用，即便反複選擇，最終的結果始終獨一無二。單選框有選中、未選中兩種狀态（極少數不可選），主要通過填充和描邊互換的樣式将當前狀态反饋給用戶。

單選是一種較為精簡的模式，它至少包含兩個選項，為了提升操作效率，需要盡可能的将所有選項展示給用戶，無需多餘的操作和思考，即能快速完成任務。

如果是必填選項，最好提供一個與當前用戶較匹配或選中率最大的一個選項作為默認值，即便默認值有誤，對用戶也不會有什麼影響，因為用戶本來就需要去操作，可一旦匹配到對應的用戶，就能免去這一步的作，且默認值是經過多方面分析、反複推敲後才進行預設，隻會是有益無害。

2. 單選組件樣式

1）按鈕式

按鈕樣式适合用在選項不多、文案不長的場景，可平鋪在界面中或以彈窗的方式呈現。例如，購買衣服時，品牌、尺碼、顔色都可以設計成按鈕樣式。

2）圓形組合

未選中都是淺灰色描邊的圓形，選中後，Android常見的是描邊變主色 内圓點填充，而iOS更多則是描邊變填充 對勾圖标組合。

其實這些不重要，真的沒必要糾結是用圓點組合還是對勾組合樣式，隻要在同一個産品中統一樣式即可，用戶不會因為這兩種表現方式的不同而影響後續的操作。

3）對鈎

對勾樣式經常出現在彈窗列表選項中，隻有選中後才會有“✔”标記，相比圓形組合，給用戶的引導性更強。

在單個任務中，首次進入選擇頁面時，列表中沒有任何标記（有默認選項除外），選中條件後，标記對勾的同時，無需其他操作即自動進入下一步任務流程，再次回到選項列表時，系統會标記上次的選擇作為參考。另外，這種樣式不會太過于局限選項的數量和字數。

4）選擇器

通常作為表單項以彈窗的形式出現，适合二級、三級聯動選項。例如：選擇地址（省/市/區）、日期（年/月/日）、時間（時/分/秒）等選項較多且具有關聯性的選項組。

3. 單選的使用準則

首先要确保單選組件的可用性，所有單選項需要清晰的呈現給用戶，避免嵌套或隐藏二級單選，否則會影響結構的識别性。

其次為确保可讀性，單選組件的布局要符合用戶認知。選項較少且标簽較短時，使用多行多列的按鈕式布局比較常見，例如電商APP的商品屬性選擇等；标簽較長則使用圓形圖标、對鈎樣式單列多行顯示，例如選擇退款原因；聯動選項需根據關聯的等級數量，在選擇器中多列顯示，例如三級聯動地址，省、市、區三列并行。

如果将選項毫無章法的平鋪、标簽/圖标上下排布，會造成視覺動線混亂、内容緊湊及一些不可預知的問題出現。

4. 提供默認選項

如果可以的話，盡量給用戶提供一個默認選項，這并非随意設定，需要經過多方面分析綜合決定。

舉個例子，你的産品屬社交類型，大多數為男性用戶，那麼将男性設定為默認的性别選擇，這類用戶就可以直接跳過這一步，節約了大量用戶的操作成本，即便面對的是女性用戶，這也不影響原本就需要手動選擇的步驟。

默認選項需合理設定，切不可亂用，否則一些“偷懶”的用戶并不會更換默認選項，導緻後續數據分析的精準度。

二、複選：循環往複

1. 什麼是複選？

複選操作不會像單選那樣出現信息阻隔，也沒有撥動開關那麼強的視覺幹擾，通常包含一個或多個選項供用戶選擇，其選項條件不是互斥的，用戶可從中選擇一項或者多項，具體情況則根據選項條件的限制而定。

1）選擇一項

一些設計師将複選理解為多選，且先不論對錯，筆者想說明的是，多選隻不過是複選的一種選擇方式。在真實的設計中，有很多場景是不設限的，我們可以将選中/未選中理解為“是/否、同意/不同意、開啟/關閉……”等意思。

例如，注冊頁面中必定存在的「用戶服務協議」，單個選項可反複操作；管理系統或B端的批量操作、權限設置等，選擇其中的一項也可進入下一步操作流程。

2）選擇多項

強制多選一般會設定需選擇數量的下限和上限。例如：首次進入某些APP時，需選擇個性化定制标簽，通常最少不低于3項，最多不超過6項；還有，在填寫調查問卷的多項選擇時，最少選中兩項、不設上限等，這些就是複選中真正意義上的多選。

2. 複選的使用準則

相比單選，複選需要配備提交按鈕，提交後才會記錄被選中的信息。

對于批量性的選項操作，複選框的操作效率比撥動開關要高出許多，例如，在某些頁面開啟/關閉幾個權限，每個權限用單獨的撥動開關進行控制，完全沒問題，但涉及到幾十個權限的控制，這種批量操作使用複選框一定是最佳的選擇，隻要用戶能清楚操作之後會發生什麼即可。

3. 常見的使用場景

1）标簽選擇

個性化标簽選擇中最為常見，在标簽文字、選項數量較少的情況下，使用外觀大小完全相同的标簽按鈕多列顯示，有助于用戶浏覽，還能節約頁面縱向空間，用淺色描邊/主色填充或明暗等級來區分選中/未選中狀态，部分産品還會在選中的狀态上增加一個小圖标（✓、 /-），區分會更加明顯。

這種方式切記标簽不能過長，否則可能會導緻文字折行或容器内很擁擠，不利于用戶閱讀。

2）列表選擇

當選項過多、标簽長短不一時，适合使用列表式選擇。WEB端常見的是圓角矩形勾選填充，例如管理系統的商品列表；移動端更多則是原型勾選填充，例如購物車，當然并沒有明顯的界定，所有頁面統一樣式即可。

4. 未定狀态

與單選視覺樣式唯一不同的是多了一個未定狀态。常見于管理系統或B端，當選項存在多個子級時，隻是某些子級被選中，但并未全部選中，這時父級狀态尚不确定，即為未定狀态。

三、撥動開關：白天與黑夜

1. 什麼是撥動開關？

撥動開關就像生活中控制燈泡的開關，它是在兩個互斥的選項中始終存在默認值、且操作會立即生效的按鈕，操作後必定是對立的選項，例如開啟/關閉、是/否、同意/不同意等。

2. 撥動開關的使用準則

撥動開關必須表意明确，用戶在操作之前就能清楚操作後會發生什麼，使用時，需遵循以下原則：

• 用于操作後立即生效的場景；
• 标簽和按鈕是兩個分離的視覺焦點，當用戶有可能産生疑惑、或标簽不足以言明時，需增加輔助文字予以說明；
• 主要用于控制全局，權重較高，針對單個任務流程的控制，請使用單選/複選；
• 默認就是開啟/關閉狀态，若存在子級，父級關閉的同時将子級隐藏（避免置灰）；
• 當操作有風險時，必須給予明确的提示；
• 避免大面積使用，如果存在太多需要開啟/關閉的條件，建議使用複選；

3. 背景與文案

撥動開關的背景通常隻介于兩種狀态，關閉狀态下為置灰（全服通用），開啟後為綠色，也有很多産品将其設定為品牌色，統一顔色樣式即可。

輔助文案常見有兩種類型，第一種為當前狀态反饋，例如：獲取設備通知權限“消息推送已開啟/關閉”，這種反饋在應用中可靈活運用，尤其是在關閉狀态下，可起到一定的引導作用。第二種為标簽輔助提示，例如：操作後的好處或風險，告知用戶會發生什麼，提前讓用戶有一定的心理預期。

四、單選控件的糾葛

1. 單選框vs複選框

是用單選框還是用複選框，似乎是最好界定的，筆者查閱了很多資料，得到的信息是“需選擇一個選項用單選、多個選項用複選”，答案出奇的一緻，這好像什麼都說了（确實如此）、又好像什麼都沒說（是個設計師都懂），當我們仔細分析之會發現，并非僅僅如此。

在PC端遇到兩個對立的選項（如：是/否、同意/不同意、通過/不通過）時，除了用兩個單選項之外，也可以使用複選框，尤其是在權限控制中，必定是複選。

另外，移動端注冊登錄流程中，用戶服務協議也是最具代表性的複選框（同意/不同意二選一）使用案例。除去這些特殊的使用場景，其他大部分就直接單選。

2. 單選框vs撥動開關

僅存在兩個選項時，單選與撥動開關的使用，有一些設計師就将其混淆了。筆者曾遇到過這樣的設計案例，有産品将性别（男/女）、O2O取貨方式（送貨上門/到店自取）隻有兩個選項的任務用撥動開關來呈現，操作後，通過開關上的滑塊左右移動 文案輔助來确定當前選中的條件。

筆者認為，這種方式不可取，最大的弊端就是在當前狀态下，用戶并不知道另一個選項是什麼，需要通過猜測或試錯來确定，無疑讓增加了任務的完成難度，也打破了用戶對常用操作的固有認知。

至于什麼時候需要用撥動開關，上述3-2《撥動開關的使用準則》中有詳細說明，除此之外使用單選框，能解決設計中80%的單選與撥動開關的選擇性問題。

3. 單選框vs下拉列表

選項較少可直接在當前頁面用單選框（選擇性别）、按鈕（标簽）呈現，當用戶需要在大量的選項中進行選擇時，PC端可使用下拉列表，移動端更多使用的是操作欄彈窗或跳轉到新頁面讓用戶操作。其實這方面沒有明确的界限，需根據使用場景以及選項的屬性根據實際情況靈活變動。

五、必備常識和使用技巧

1. 選項的幾種狀态

單選、複選、撥動開關各自都有不同的狀态，在設計之前，設計師需要清楚地知道這些狀态所代表的含義以及不同的使用場景，避免後續在使用中給用戶造成困擾。

2. 符合用戶認知的控件樣式

首先，選項框樣式應符合用戶認知，不能為了所謂的差異化、個性化打破用戶固有認知，而帶來額外的認知負擔。

例如單選/複選常見的是圓形填充 對鈎（PC端）、圓角矩形填充 對鈎（移動端）兩種方式，雖然這并不是唯一，但至少不會出錯。雖然鼓勵跳出常規的設計思維做出改變，但一切都以不增加用戶使用難度、提供更好的用戶體驗為出發點，不然還不如不變。

3. 注意對齊方式

按鈕式不用多說，文字跟容器上下左右居中。列表中的對齊方式無非兩種，選項框在前，文字和選項框都是左對齊，單選/複選均可采用這種方式；選項框在後，則文字左對齊、選項框右對齊，采用這種方式的單選居多；撥動開關則是全網統一，标簽左對齊，開/關右對齊。

4. 清晰簡短的标簽

選項标簽需清晰簡短、直接表達核心含義，盡量避免否定的表達方式，以免用戶産生誤解。像撥動開關這種兩極分化的選項，當用戶不清楚對立的選項内容時，可以使用副标題進行描述，讓用戶在操作之前有一定的心理預期。

5. 批量選擇、節約操作成本

雖然都是将選擇權交給用戶，但面對不同的場景，需提供一個「全選」操作，幫助用戶一次完成多個重複的操作，降低操作成本。

例如：B端的内容管理，批量操作能節省很多時間，還能降低因多次重複操作産生的失誤概率；C端最具代表性的有購物車、以及初次進入部分應用時的個性化标簽選擇。

6. 觸控熱區的設定

針對移動端，點擊區域切勿直接使用選項框的範圍大小，需單獨設定熱區範圍。大家都知道，大拇指在移動端應用中使用頻率是最高的，相對來說，要有足夠大（非絕對）的操作區域以供手指進行精準交互，以免無效操作或操作失誤。需要将文本标簽、選項框以及各選項區域均分後四周的留白都作為觸動熱區，操作起來就會輕松很多。

六、結語

本文筆者主要總結了單選、複選、撥動開關的使用規範及常見問題，不過設計規範隻是基于産品本身構建的一個标準，為了約束後續的視覺統一而存在的規範參考。

在真實的設計中，這些設計規範并不是唯一，需要根據産品的特點和使用場景進行靈活變動，設計出最适合自身産品的控件才是最重要的。

遵循設計規範隻是最基礎的标準，遵循的同時跳出規範的束縛才會有創意，這就離不開我們平時的積累，鑽研各産品中優秀的設計細節，通過查漏補缺、揚長避短，在其他産品的亮點中找到與自身産品的平衡點并将其融合，這才是我們學習和總結的最終目的。

#專欄作家#

大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Pexels，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部