2020-11-25 周周
無論是從個性化內(nèi)容還是用戶體驗上來說，為界面內(nèi)容選擇正確的選擇類控件可能比想象的要難，全文10,856字 ，預(yù)計閱讀20分鐘， 建議收藏。
本文主要研究選擇控件的設(shè)計細(xì)節(jié)，雖然是很常見的控件設(shè)計，但也有非常多需要注意的地方。能提煉總結(jié)常見事物的一般規(guī)律，這本身就是對自己已有知識理解加深的過程。
對數(shù)據(jù)進(jìn)行便捷選擇
單選框(Radio button，也叫“單選按鈕”)—— 用戶從一組選項中必須選擇一個選項。
復(fù)選框(Checkbox)—— 當(dāng)有一個或多個獨(dú)立選項時，用戶可以選擇任意數(shù)量的選項，包括零個、一個或多個。
切換開關(guān)(Toggle Switches)—— 兩個互斥狀態(tài)（打開和關(guān)閉）之間的可視切換。
選擇標(biāo)簽(Choice chips)—— 是按鈕選擇的一個替代方案。至少兩個選項，用戶可以選擇一個或多個。
列表選擇(List Select)——可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。
下拉菜單(drop-down menu，也叫“下拉按鈕”)——按鈕包括一個單箭頭指示符，單擊后會顯示包含選項列表的菜單。
單選按鈕的命名（Radio）來源于舊收音機(jī)上用于頻率和預(yù)設(shè)電臺之間切換的的實際物理按鈕。當(dāng)一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處于“按下”狀態(tài)的按鈕。
后來被用于錄音機(jī)，盒式錄音機(jī)和可穿戴音頻播放器中，90年代初-用于“播放/暫停/快退/快進(jìn)”控件。
UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研發(fā)公司，幾乎涉及到我們現(xiàn)在每天使用的計算機(jī)技術(shù)，包括：以太網(wǎng)，圖形用戶界面（GUI），面向?qū)ο蟮木幊?，計算機(jī)鼠標(biāo)，激光打印等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。
單選框用于對信息的選擇，允許用戶從一組選項中必須選擇一個，通常以2-5組顯示，單選框應(yīng)互斥。單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標(biāo)簽。標(biāo)簽的用途除了描述之外，還可以作為操作區(qū)域，當(dāng)用戶選中標(biāo)簽，所應(yīng)的單選框就會被選上。已選上的單選按鈕一般會在圓洞內(nèi)加上一小圓點。單選框僅顯示合理和正確的選項。
單選按鈕的狀態(tài)為打開（實心圓圈）或關(guān)閉（空圓圈）。
單選框一旦選上，除了選擇另一個選項之外，便沒法取消。所以有時會有空白的選擇、重置或默認(rèn)選擇。
每個單選按鈕的標(biāo)題應(yīng)清楚地描述選擇它的效果，通常句子結(jié)束沒有標(biāo)點符號。此外，考慮使用下拉菜單，會比顯示所有選項占用更少空間。
復(fù)選框是一種按鈕類型，可用于打開或關(guān)閉選項。當(dāng)存在選項對象時，復(fù)選框允許用戶從一組對象中選擇一個或同時選中多個和全部項目。每個復(fù)選框都是單獨(dú)的個體，因此選中一個復(fù)選框不會影響其他復(fù)選框的取消選中狀態(tài)，全選除外。
復(fù)選框使操作在兩個相反的狀態(tài)，操作或無操作之間進(jìn)行選擇。復(fù)選框在屏幕上顯示為一個小方框，選中時，它被認(rèn)為是“開”，選中的復(fù)選框包含復(fù)選標(biāo)記，正方形將充滿復(fù)選標(biāo)記。；關(guān)閉時，則被認(rèn)為是“關(guān)”，它是空的矩形框。復(fù)選框一般放置在可選信息左側(cè)(圖片、視頻以宮格形式表現(xiàn)的頁面除外）。
復(fù)選框可以用作單個元素，也可以組合成一個列表或嵌套式的層級列表以從中選擇多個。如果需要將選擇項分成幾組，則使用多級復(fù)選框。
混合狀態(tài)，僅在多級復(fù)選框時出現(xiàn)。如果使用復(fù)選框組，全局啟用和禁用多個子復(fù)選框，當(dāng)這些子項并非都處于同一狀態(tài)時，父復(fù)選框應(yīng)顯示為混合狀態(tài)（用短劃線表示）?；旌蠣顟B(tài)常在嵌套層級等對多個對象一同操作時使用，以代表該選項下的子選項沒有被全選。當(dāng)半選的復(fù)選框被點擊時，它便會變成平常的復(fù)選框，而它的子選項亦會跟隨全選或取消全選。
如果存在多個復(fù)選框時，考慮使用分組標(biāo)簽來進(jìn)行描述。并將標(biāo)簽的基線與組中的第一個復(fù)選框?qū)R。通常，當(dāng)復(fù)選框垂直列出時，更容易區(qū)分它們的狀態(tài)。通常，復(fù)選框應(yīng)左對齊，當(dāng)您需要表示層次結(jié)構(gòu)，例如當(dāng)父復(fù)選框的狀態(tài)控制子復(fù)選框的狀態(tài)時，請使用縮進(jìn)格式。
開關(guān)是兩個互斥狀態(tài)（打開和關(guān)閉）之間的可視切換。總有一個默認(rèn)使用，撥動開關(guān)即立即生效。它是在打開時顏色是可見的，關(guān)閉時出現(xiàn)無色或灰色。
移動端中切換開關(guān)一般有交互動效，PC端沒有。
開關(guān)與其他選擇控件最大的區(qū)別是：開關(guān)操作后，程序立即執(zhí)行相關(guān)操作。而其他選擇控件一般用在表單里，僅反映當(dāng)前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點擊額外的提交按鈕。
注意:
不要為切換開關(guān)創(chuàng)建層次結(jié)構(gòu)，避免使用開關(guān)控制單個細(xì)節(jié)或次要設(shè)置。開關(guān)的層級結(jié)構(gòu)這在視覺上更容易分散注意力，而且會造成一種錯誤的印象，即所有的子選項都是開著/關(guān)著的。所以禁止濫用開關(guān)按鈕。
開關(guān)具有比復(fù)選框更明顯的視覺效果，因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大。如，可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置。因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大。如，可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置。
注意加載狀態(tài)
如果開關(guān)所執(zhí)行的操作需要考慮加載狀態(tài)，例如開關(guān)切換狀態(tài)不是瞬間（短時間）完成的話，開關(guān)則需要顯示加載狀態(tài)。
另外一種目前比較流行的加載方式是視覺上加載成功，服務(wù)器隨后加載成功。用戶操作開關(guān)之后，開關(guān)視覺上立即響應(yīng)改變，然后再向服務(wù)器相應(yīng)改變，中間會存在一定的時間差，這樣能帶給用戶更流暢的體驗。
避免在開關(guān)內(nèi)添加說明標(biāo)簽。關(guān)于開關(guān)的打開或關(guān)閉，可以通過視覺樣式讓用戶很明確的感知。額外的提供文本標(biāo)簽描述開關(guān)狀態(tài)是多余的，還會使界面混亂不堪。
單一的 icon 通過顏色或圖形的變化來表示開或關(guān)的狀態(tài)。常見的且體驗比較好的設(shè)計方案是將開關(guān)樣式設(shè)計為當(dāng)前狀態(tài)樣式。如下圖相機(jī)界面內(nèi)HDR與AI功能的關(guān)閉與開啟狀態(tài)。
當(dāng)然也有其它情況。最典型的就是視頻的播放暫停開關(guān)，他們表示的就是操作后的狀態(tài)而不是當(dāng)前狀態(tài)。
名稱變化，名稱變化指的是開關(guān)按鈕依賴于其名稱的變化告知用戶開關(guān)的當(dāng)前狀態(tài)和操作，如：關(guān)注與取消關(guān)注，已關(guān)注與已取關(guān)。名稱變化的開關(guān)由于語言的模糊性，仍然造成了部分歧義。我們可以在操作后加入其它提示來消除歧義（如：toast 提示）。
是否統(tǒng)一操作狀態(tài)倒不是關(guān)鍵，關(guān)鍵是我們是否能夠讓用戶理解按鈕相應(yīng)的意圖，不做出混亂的選擇便可。
通常用于切換不同的視圖，或者在表單中作為單選組件使用。一個分段tab通常會由2-6個單選項，可以是圖標(biāo)和短詞，它適合導(dǎo)航形式，被設(shè)計成一個水平或豎直的容器進(jìn)行單選。一組選項卡中的所有內(nèi)容應(yīng)該根據(jù)較大的分組原則進(jìn)行分組，每個選項卡的內(nèi)容與其他選項卡的內(nèi)容都互相獨(dú)立。
可以包含下拉列表的選項和使用翻頁。
固定的選項卡應(yīng)該只包含有限數(shù)量的選項，并且保持選項的位置不變，有利于用戶記憶。可滾動選項卡用于有很多選項或選項數(shù)量可變的情況，但不推薦使用。
優(yōu)點：將所有選項都擺在一行或一列，對空間的利用率能達(dá)到最佳，設(shè)計樣式也可以做到非常直觀，漂亮。
缺點：不大適合處理長詞，短語，如果要將這些內(nèi)容放在選項中，就須精簡文本。水平空間非常有限，尤其是移動端，即使是少量的選項，有時候你仍然要精簡文本。
Tab選擇時，不要加載整個頁面，只有選項標(biāo)簽及其內(nèi)容區(qū)域應(yīng)更改。交替切換標(biāo)簽時，用戶應(yīng)該感覺自己在同一位置。不要在選項卡內(nèi)容中包含支持滑動手勢的內(nèi)容，因為滑動手勢是用于在選項之間導(dǎo)航的。例如，避免在選項卡中包含一個可以拖動的地圖，或者一個可以滑動刪除的列表。
當(dāng)功能不可用時，顯示空狀態(tài)，加入情感化提示，不要刪除選項卡，確保所有選項卡都啟用。
空狀態(tài)：是用戶在使用產(chǎn)品時某個界面無法顯示的時刻，即沒有其他元素。良好的空狀態(tài)可以讓用戶知道正在發(fā)生的情況，發(fā)生的原因以及該怎么做。
這是四種常見的空狀態(tài)類型：
首次使用——新產(chǎn)品沒有內(nèi)容可以顯示時，例如打開新注冊的印象筆記時會遇到這種情況。
內(nèi)容被清除——當(dāng)用戶完成類似清空消息或收件箱等操作后，會出現(xiàn)一個空白的屏幕。
出現(xiàn)錯誤——產(chǎn)品由于網(wǎng)絡(luò)問題造成離線時，會出現(xiàn)空狀態(tài)的使用。
無結(jié)果——如果用戶進(jìn)行搜索，但是查詢內(nèi)容為空時會發(fā)生這種情況。
具有3個選擇項的Tab標(biāo)簽，我們能明顯區(qū)分選中和未選中狀態(tài)，應(yīng)為Tab標(biāo)簽是單選控件。但是，如果只有兩個選項，又是矩形按鈕的選擇項，則很難區(qū)分當(dāng)前選擇是哪個，哪個為選中狀態(tài)？我自己某段時間一直默認(rèn)顏色填充形按鈕是選中狀態(tài)，但經(jīng)同事一提，一陣猛驚，那另一個是否為選中狀態(tài)？在兩個選項中存在選擇疑惑，我們?nèi)绾未_定狀態(tài)呢？
因此，我努力在統(tǒng)一風(fēng)格的提前下，找出固有的特征，增強(qiáng)選中狀態(tài)。這個大家如果有更好想法，歡迎留言。
標(biāo)簽選擇通常用于要從3-10個選項中進(jìn)行多次選擇操作情況，它們最適合用一到兩個簡短的單詞或數(shù)字。它們設(shè)計的形式一般是一個個按鈕，通過背景色來區(qū)分“選中”和“未選中”。由于不存在2個選項的情況，所以
面對多選標(biāo)簽時，面對多個選擇項的彼此堆疊，需讓讓用戶知道他們可以選擇多少個選項。添加輔助說明，既可以明確它是多選，又可以規(guī)范的最大選擇項；選項過多時進(jìn)行標(biāo)簽分類。
優(yōu)點：節(jié)省空間，標(biāo)簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的，有趣的。
缺點：這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進(jìn)行折行或者調(diào)整大小，會不方便用戶閱讀，同時使用兩行以上的標(biāo)簽會使得每個標(biāo)簽非常難以快速掃描。
其他樣式：用圓形或其他形狀來表示一個個標(biāo)簽選項，比較重要或更受歡迎的選項形狀更大，用戶選中多個圓形就是選擇了多個選項；也可以在常見的按鈕中加入圖片的元素，這種的話樣式新穎，但要注意選中時的文字圖片的對比，文字是否具有可見性，適當(dāng)加上文字選中效果。
Tab標(biāo)簽和多選標(biāo)簽
選項數(shù)量是tab控件和標(biāo)簽控件之間最大的區(qū)別。一個連續(xù)的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。
列表選擇控件包含選擇按鈕，容器框，項目列表和標(biāo)簽。用戶可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。列表框可能會滾動，具體取決于它包含的項目數(shù)和可見區(qū)域，更復(fù)雜的列表框允許用戶通過將項目從一個列表框移動到另一個列表框來調(diào)整容器框的大小，重新排列項目列表以及進(jìn)行選擇。
優(yōu)點：
交互成本低：列表框不需要用戶單擊任何內(nèi)容即可在進(jìn)行選擇之前顯示其中的選項（但是，如果有太多項，它們可能需要用戶滾動列表）。
增加了可見性：一次查看多個選項的能力可以加快決策速度并提高選擇準(zhǔn)確性。列表選擇為內(nèi)容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。但是，應(yīng)避免在多列列表框中進(jìn)行水平滾動。
用多選雙列表框，用戶可以控制項目的顯示順序，并獲得所選項目的清晰概述，這在列表框包含多個選項時很有用。
缺點：
空間：他們往往很占用空間，不適合用在垂直高度受限的頁面中。
陌生：用戶可能不知道如何立即與列表框進(jìn)行交互-特別是，如果多選列表框中未包含復(fù)選框，則他們可能不知道如何選擇倍數(shù)。這就是為什么將復(fù)選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。
用戶可能無法一次看到所有選定的選項：如果在可見區(qū)域中看不到更多的可用項目，則用戶可能無法同時看到所有選定的項目。為避免此缺點，請在列表框上方將所選項目顯示為標(biāo)記，或在不可滾動的列表中突出顯示所選項目。
可以根據(jù)選擇類型進(jìn)行分類，這些列表框形式都可以滾動。
用戶只能從互斥選項列表中選擇一項。最初的單選按鈕被用于列表中超過6個選項時，被設(shè)計成垂直方向，圓形輪廓，并擺在列表項的開頭，這就是列表單選?，F(xiàn)一些設(shè)計中，選中被設(shè)計成在列表選項外加一個描邊框形式或帶有背景色，用以節(jié)省水平空間。
這種類型的列表框包括使多個選擇更加明顯的復(fù)選框，設(shè)計樣式上，web通常是在列表開頭處設(shè)計一個正方形描邊框（復(fù)選框）。
這種類型的列表框由兩個列表框組成，兩處的列表框內(nèi)容可以相互拖拽。比如左側(cè)的列表框已選中項目可拖拽至右側(cè)列表框，同時支持表內(nèi)上下拖拽更換順序。
點擊“ 右箭頭”按鈕可將左側(cè)的列表框所選項目移動至右側(cè)列表框。多選雙列表框?qū)嶋H運(yùn)用較少。
這是是一種彈出按鈕，單擊后會顯示包含選項列表的菜單。下拉列表以最簡單的形式包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標(biāo)簽。用戶可以單擊向下箭頭以顯示互斥項的列表，從中只能選擇一項。標(biāo)準(zhǔn)下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態(tài)，當(dāng)你點擊文本輸入欄的地方時，它會打開一個菜單。列表項僅在單擊向下箭頭后出現(xiàn)，選擇一個項目或在下拉列表的外部單擊將其關(guān)閉。
下拉列表的優(yōu)點：
為用戶提供最佳選項的功能，默認(rèn)情況下處于選中狀態(tài)。
淡化替代選項和更改：由于下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項并過分強(qiáng)調(diào)了進(jìn)行更改的能力。（這在默認(rèn)值可以滿足大多數(shù)用戶的情況下，并且其他選項可能對非專業(yè)用戶來說是危險的或令人困惑的情況下是有利的。）
熟悉：下拉列表是大多數(shù)用戶熟悉的選擇機(jī)制，因為下拉列表在Web和本機(jī)應(yīng)用程序中得到廣泛使用。
缺點是需要點擊項目列表中的選項，包括：
列表包含過多的內(nèi)容，可能會很麻煩地滾動。
當(dāng)用戶習(xí)慣于捕獲眾所周知的值時，它們會使用戶放慢速度。例如，當(dāng)輸入生日或信用卡到期日期時，與下拉列表進(jìn)行交互相比，在直接鍵入內(nèi)容通常更快，更容易。
忽視：由于表單內(nèi)容非常緊湊，因此用戶可能會意外忽視表單，網(wǎng)頁和應(yīng)用程序中的下拉列表。
容易消除：不小心將光標(biāo)從框中移開會關(guān)閉下拉菜單，不得不重新開始選擇過程。
當(dāng)長型下拉菜單的設(shè)計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。
可編輯的下拉菜單在菜單上方顯示當(dāng)前選擇的菜單項，用戶可以輸入菜單中未列出的值。您可以將用戶可以輸入的值的類型限制為某些類型。例如，設(shè)計軟件中輸入字體大小時，系統(tǒng)會默認(rèn)一些數(shù)值，同時支持你編輯修改。
為了更方便用戶的填入，支持字詞搜尋，填寫一半時，就會出現(xiàn)帶有關(guān)鍵詞名稱選單。在選項很多的情況下，這個功能變得格外實用。
下拉菜單多選是復(fù)選框的延伸：用戶可以在同一個輸入?yún)^(qū)域選擇多個。這件控件用的比較少。
這種控件我一般在多個對象進(jìn)行對比時才使用，如選擇多個公司比較他們的能耗水平與用電規(guī)模，由于公司字段比較長，在查看選中狀態(tài)時需注意容器能否充分顯示選擇的字段，在導(dǎo)航菜單中會明顯擁擠，在表單中使用相對自由。如果可以的話，篩選中盡量避開這種類型。
將站點，應(yīng)用程序或系統(tǒng)的所有不同部分合并為一個長列表，該列表進(jìn)一步細(xì)分為子類別，并可以從導(dǎo)航欄中訪問，例如下面華為云的下拉列表，大型下拉菜單用于顯示大量的選項，分類，數(shù)據(jù)集或其他類型的相關(guān)內(nèi)容組。
任何偏離你所設(shè)計的平臺標(biāo)準(zhǔn)的行為都會給用戶帶來額外的認(rèn)知負(fù)擔(dān)。
選擇控件在操作過程中必須更改其狀態(tài)/外觀，以便用戶知道是否能選中，是否被選中。添加這些小的視覺反饋，以使用戶正向的理解，但是差異化設(shè)計又不能喧賓奪主。
默認(rèn)就是選擇器的開始狀態(tài)。向用戶表明，可對該選擇控件進(jìn)行操作。
選擇按鈕置灰顯示，用戶將無法與選項進(jìn)行交互。除非產(chǎn)品規(guī)則指定，否則很少會遇到這種狀態(tài)。
像按鈕一樣，選擇控件應(yīng)向用戶指示它們是可交互的。通常，通過突出顯示鼠標(biāo)懸停項目區(qū)域的背景來突出顯示，吸引用戶的注意。觸摸設(shè)備沒有懸停狀態(tài)。
當(dāng)用戶按住鼠標(biāo)/手指點擊，選擇控件處于被點擊的狀態(tài)。
列表多選支持批量選擇和清除
使用列表多選，一次全選或取消已選擇的多個選擇項毫不費(fèi)力。
下拉列表狀態(tài)
下拉列表在按下狀態(tài)時會打開選項列表，還有種常見做法是懸停狀態(tài)時直接打開選項列表。我更喜歡第一種，第二種在我沒有明確操作的情況下，下拉列表就自動打開的這點讓我比較困惑。
列表選擇狀態(tài)
列表選擇控件在管理文件時，只有通過按下選中選項才能進(jìn)行編輯性操作。
點擊按鈕進(jìn)入批量編輯狀態(tài)，狀態(tài)未選擇時，操作按鈕置灰。按下/勾選列表選項后，操作按鈕點亮，展示已選項的數(shù)量，即對當(dāng)前勾選操作的反饋。點擊操作按鈕，進(jìn)入對應(yīng)操作編輯流程。
一般都是用戶沒有進(jìn)行選擇，單擊“提交”按鈕后收到失敗反饋。
在實際的使用過程中，選擇控件有默認(rèn)、禁用、懸停、按下等不同狀態(tài)，雖然這些狀態(tài)看起來很多，但是這些狀態(tài)涉及到實際交互的需求和不同場景，并且是實現(xiàn)可靠交互的基礎(chǔ)。
這個針對于單選框控件
如果用戶不想做出選擇，那么應(yīng)該提供一個中立選項。為用戶提供一個明確的方向，中立選項比錯誤選擇要好。
在單選框的選擇時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。例如，要考慮到用戶不進(jìn)行選擇的情況，這時需要提供一個“無”的選項；給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都不會選，就需要提供一個“其它”選項。
單選框所有選項應(yīng)該滿足“互斥”的原則，因此選項之間要避免存在交集，選項覆蓋要全面，不能出現(xiàn)遺漏。例如，在一個年齡的選擇設(shè)置上，如果提供的選項為“20-30歲”和“30-40歲”，那么如果用戶剛好30歲該如何選擇？
這個針對于單選框，Tab切換，下拉列表
單選框最好有一個默認(rèn)選項，當(dāng)單選框把選項默設(shè)置為為選中時，一旦選擇了一個單選按鈕，用戶就不可撤銷，無法返回默認(rèn)狀態(tài)；而默認(rèn)選中一個則可以防止這類問題，一開始就向用戶傳遞信息必須要在這組單選項之中選擇一個。
下拉菜單中默認(rèn)選項優(yōu)與請選擇，如果根據(jù)權(quán)限或使用頻率能定位到適用于大多數(shù)用戶的選擇項時，就不要默認(rèn)為“請選擇”，而是使用默認(rèn)選項，這樣做可以降低交互成本和節(jié)省用戶的時間和點擊數(shù)。
如“國家”和“語言”字段。在這種情況下，根據(jù)權(quán)限IP，默認(rèn)選項是合理的，絕大多數(shù)用戶也不會更改選項，因此繼續(xù)選擇就會很煩人，耽誤時間。
帶有默認(rèn)選項的單選按鈕組合是給用戶的強(qiáng)有力建議——甚至是推薦。默認(rèn)選項可能會引導(dǎo)用戶做出最好的決定，并在接下來增加他們的信心。尤其是默認(rèn)選項可以輔助用戶，并讓用戶向著產(chǎn)品所希望的方向傾斜。
在用戶需做出復(fù)雜決定或處在不熟悉領(lǐng)域時特別有幫助。當(dāng)標(biāo)題和描述都很陌生的時候，默認(rèn)選項可以引導(dǎo)用戶在各個可能未能理解的選項里做出最好的決定。
在產(chǎn)品上總想說服用戶做出對產(chǎn)品有利的動作。默認(rèn)選項就會引誘用戶去走特定的道路。常見的例子就是活動頁面，對于忍痛離開按鈕低調(diào)置灰顯示，對于留在頁面按鈕高亮顯示。
當(dāng)然也有許多時候是不帶默認(rèn)選項的：
不知道用戶行為或想要什么
選擇是否會冒昧，如性別，稱呼等
防錯，保證用戶能夠看到選項并動手做出選擇，比起用戶會出錯并事后給出警示強(qiáng)
如果希望用戶只選擇一定數(shù)量的項目。要強(qiáng)制執(zhí)行此操作，如果用戶單擊的次數(shù)多于所選數(shù)量，則他們最早的選擇將會被最近的選擇替換。同時注意需要加上輔助說明。
選項排序會影響用戶操作，因此需要遵守一定排列原則。
你應(yīng)該將所有選項按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復(fù)雜，按風(fēng)險由小到大，將最安全的操作放在前邊，列表選擇一般按照信息時間排序，由新到舊。
選項的順序可以說服用戶進(jìn)行選擇，就像前面說的默認(rèn)選擇項一樣，他們可能只是因為第一個選項在列表中的位置而選擇了第一個選項。可以輔助用戶，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。
一般情況下，左側(cè)對齊排列發(fā)揮最佳效果，標(biāo)簽選擇除外。豎直排列相對于水平排列而言，容易讀取和定位，每行一個選項足以，可以提高用戶的瀏覽效率并減少錯誤。
但是豎直排列會占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時候，要注意每個選項之間的間距盡量大一點，以清晰的傳達(dá)選項對應(yīng)哪個標(biāo)簽。
移動端更多的情況是左側(cè)標(biāo)簽對齊，右側(cè)按鈕對齊，二者與頁面留出相同的邊距。垂直屏幕占比小，常用于呼出選擇、開關(guān)等有選擇操作的表單標(biāo)簽。
交互區(qū)域要適當(dāng)大。單選框的面積較小，用戶在點擊的時候會比較困難，尤其是在移動設(shè)備上，易誤操作，可以通過擴(kuò)大點擊區(qū)的交互區(qū)域來提高易用性。復(fù)選框和單選按鈕一般都很小，點擊或點選會很麻煩，可點擊區(qū)域中應(yīng)同時包含按鈕和標(biāo)簽，增加操作區(qū)域的面積，方便用戶操作。
列表選擇中可以點擊容器框所在行區(qū)域來切換行對象的選中和未選中。
每個選項都要配合相應(yīng)的文字標(biāo)簽來指示該選項含義。
最好在每個區(qū)域上提供同類型的標(biāo)簽，這樣可以給用戶一種視覺穩(wěn)定性的感覺。同時盡量保證每個文字標(biāo)簽用語的表達(dá)的一致性，避免否定詞，不要出現(xiàn)有的用名詞，有的用動詞的情況。
不要在同一組標(biāo)簽中混用文字和圖標(biāo)
一個分段就像是一個按鈕，按鈕內(nèi)當(dāng)然可以使用文字或者圖標(biāo)代表其含義，但是請不要在同一個Segment Controls中混用文字和圖標(biāo)，避免讓用戶覺得混亂和不一致。
文字標(biāo)簽需要簡潔明了，一般使用短語而不是句子，因此不需要以句號來結(jié)尾。如果需要解釋說明，可以在選項下方使用單獨(dú)一行文字說明。僅體現(xiàn)每個個體之間的差異，不用重復(fù)選項之間相同的部分，將重復(fù)部分提出來放在整個選項的上方。
輔助提示很好地補(bǔ)充在消除歧義上的不足，但我們也需要合理使用，進(jìn)行克制，否則就會造成不必要的視覺噪聲。
暗示指的是用戶在操作選擇前，給予用戶的提示，用戶根據(jù)這些提示可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。
比如在界面風(fēng)格模式，主題色，導(dǎo)航模式切換中，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是是什么模式，以及選中其它選項后會產(chǎn)生什么結(jié)果，如下圖（來源螞蟻設(shè)計語言）在選擇圖標(biāo)中就給予相對應(yīng)模式的提示。
下圖，白天模式與夜間模式，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是否已經(jīng)開啟了相關(guān)模式，從而判斷撥動開關(guān)后是什么結(jié)果。
環(huán)境暗示的優(yōu)勢是我們不需要其它設(shè)計和反饋告知用戶當(dāng)前狀態(tài)，可以通過選擇對象和當(dāng)前界面環(huán)境給予直觀暗示。
由于按下開關(guān)控件后立即執(zhí)行操作，如果操作比較危險，請在危險操作后加入二次彈窗確認(rèn)，告知用戶當(dāng)前狀態(tài)以及潛在風(fēng)險，避免造成嚴(yán)重?fù)p失。
當(dāng)用戶操作后，提示框氣泡反饋告知用戶，讓用戶知道自己是觸發(fā)了開啟還是關(guān)閉。彈窗提示強(qiáng)度大，使用在一些危險、重要的反饋中，提示框則使用在一些輕量的提示中。
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當(dāng)說明。下圖是手機(jī)信號設(shè)置和省電設(shè)置相關(guān)的選擇，開關(guān)的主體是名稱，但是下面的一行輔助文案很清晰地傳達(dá)了開關(guān)開啟后的后的狀態(tài)。
并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當(dāng)前狀態(tài)。界面設(shè)計與交互中，我們也仍然可以使用聽覺和觸覺來消除開關(guān)的歧義。
在安卓微信聊天列表中，選擇一行聊天對象長按，手機(jī)會輕微振動一下，表示已點擊，給予觸覺反饋，同時展開的多個選項可進(jìn)行選擇操作；手機(jī)在關(guān)閉電源時，手機(jī)會卡擦一下，給予聽覺反饋，表示已關(guān)閉屏幕，而不需要眼睛盯著屏幕關(guān)閉。
我們很容易陷入到特定控件的中，所以我最好是從整體上開始思考。然后做出最佳決定，決定使用哪種選擇設(shè)計最有利于一致性、差異性和層次感，控件的高度，寬度，樣式設(shè)計和選項數(shù)量都是至關(guān)重要的因素。我們可以從被選擇對象是單選還是多選出發(fā)，來確定使用哪種選擇控件，可以根據(jù)下圖情況選擇，當(dāng)然由于使用場景和內(nèi)容的不同，請選擇性參考。
單選按鈕認(rèn)知成本低，它能可見所有選項并讓用戶容易做出選擇。
單選框，用戶能夠很快看到有幾個選項以及每個選項是什么，而不用點擊或其他操作再去發(fā)現(xiàn)這些信息。讓所有選項都可見，使用戶可以方便地進(jìn)行比較，這樣可以減少認(rèn)知負(fù)荷，幫助表單更加透明。
涉及到選擇項與內(nèi)容組之間以及在相同層次結(jié)構(gòu)中進(jìn)行導(dǎo)航時，使用Tab標(biāo)簽。不要將標(biāo)簽用于無關(guān)的目的地，也不要加載選項卡的整個頁面，只有選項卡及其內(nèi)容區(qū)域進(jìn)行更改。
如果選項的數(shù)量超過6個時，應(yīng)考慮使用下拉列表中或列表單選，因為單選按鈕太多，也會令人不知所措并引起混亂，用戶無論如何都無法記住所有的選項。
下拉列表簡潔。更多適用于可預(yù)測的、類似的或增量的選項(年份選擇 )。數(shù)量較多且相類似的選項選擇用下拉菜單整合。
如果屏幕空間有限，請使用下拉菜單。如果不是，請使用列表框。使用下拉菜單，可以使用默認(rèn)選項，并淡化其它選擇。
選擇項標(biāo)簽短小且一致時，使用復(fù)選框，可以方便地進(jìn)行比較，這樣可以減少認(rèn)知負(fù)荷，幫助表單也更加透明。
列表多選一般應(yīng)用于6個以上選擇項進(jìn)行多選的情況，數(shù)量更多出現(xiàn)將翻頁或滾動情況，需要告知用戶已選多少條數(shù)據(jù)，并在選中選項時出現(xiàn)相關(guān)操作。
選擇項數(shù)量在3-10之間，標(biāo)簽不能過長，考慮使用多選標(biāo)簽。多選標(biāo)簽它們給人的印象是輕量的，有趣的。
切換開關(guān)是一種數(shù)字開關(guān)。任何由切換開關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣，最好用單個復(fù)選框替換切換開關(guān)。
多選標(biāo)簽不能很好的處理長詞。不建議對文本進(jìn)行折行或者調(diào)整大小，因為會不便于用戶閱讀，使用兩行以上的標(biāo)簽會使得每個標(biāo)簽非常難以快速掃描。
你應(yīng)該防止出現(xiàn)很難看清選擇哪個控件的情況（確保按鈕和文本標(biāo)簽的間距），可以考慮使用選擇標(biāo)簽或拉大間距以此來在視覺上清晰地分隔選項。
本文介紹了多種選擇類控件，從用戶使用選擇類控件的角度闡釋了模式定義，涵蓋了大多數(shù)錄入場景。選擇類控件本身也需要不斷進(jìn)行迭代、優(yōu)化和拓展，以適應(yīng)更多的應(yīng)用場景。后續(xù)我將持續(xù)關(guān)注，希望本文的能幫助你。
歡迎留言糾正，感謝閱讀。
文章來源：tob.design 作者：小龍
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn