本篇文章將圍繞單選、復(fù)選、撥動(dòng)開關(guān)三種選項(xiàng)元素的設(shè)計(jì)細(xì)節(jié)及使用場(chǎng)景展開分析，希望能幫助新手設(shè)計(jì)師避開選項(xiàng)設(shè)計(jì)的誤區(qū)，為用戶打造出更好的操作體驗(yàn)。
一、單選：獨(dú)一無二
1.什么是單選？
單選按鈕最早來源于老式的汽車收音機(jī)上的電臺(tái)頻道的切換按鍵，按下其中的一個(gè)按鍵就成為了被選中狀態(tài)，其他就會(huì)被彈出，用戶可通過這種方式快速切換不同的電臺(tái)。
在UI設(shè)計(jì)中，單選是指當(dāng)界面中存在兩個(gè)或以上的選項(xiàng)時(shí)，且各項(xiàng)之間相互排斥，用戶僅能在選項(xiàng)列表中選擇其中的一個(gè)來使用，即便反復(fù)選擇，最終的結(jié)果始終獨(dú)一無二。單選框有選中、未選中兩種狀態(tài)（極少數(shù)不可選），主要通過填充和描邊互換的樣式將當(dāng)前狀態(tài)反饋給用戶。
單選是一種較為精簡(jiǎn)的模式，它至少包含兩個(gè)選項(xiàng)，為了提升操作效率，需要盡可能的將所有選項(xiàng)展示給用戶，無需多余的操作和思考，即能快速完成任務(wù)。如果是必填選項(xiàng)，最好提供一個(gè)與當(dāng)前用戶較匹配或選中率最大的一個(gè)選項(xiàng)作為默認(rèn)值，即便默認(rèn)值有誤，對(duì)用戶也不會(huì)有什么影響，因?yàn)橛脩舯緛砭托枰ゲ僮?，可一旦匹配到?duì)應(yīng)的用戶，就能免去這一步的作，且默認(rèn)值是經(jīng)過多方面分析、反復(fù)推敲后才進(jìn)行預(yù)設(shè)，只會(huì)是有益無害。
2.單選組件樣式
1）按鈕式
按鈕樣式適合用在選項(xiàng)不多、文案不長(zhǎng)的場(chǎng)景，可平鋪在界面中或以彈窗的方式呈現(xiàn)。例如，購(gòu)買衣服時(shí)，品牌、尺碼、顏色都可以設(shè)計(jì)成按鈕樣式。
2）圓形組合
未選中都是淺灰色描邊的圓形，選中后，Android常見的是描邊變主色+內(nèi)圓點(diǎn)填充，而iOS更多則是描邊變填充+對(duì)勾圖標(biāo)組合。其實(shí)這些不重要，真的沒必要糾結(jié)是用圓點(diǎn)組合還是對(duì)勾組合樣式，只要在同一個(gè)產(chǎn)品中統(tǒng)一樣式即可，用戶不會(huì)因?yàn)檫@兩種表現(xiàn)方式的不同而影響后續(xù)的操作。
3）對(duì)鉤
對(duì)勾樣式經(jīng)常出現(xiàn)在彈窗列表選項(xiàng)中，只有選中后才會(huì)有“?”標(biāo)記，相比圓形組合，給用戶的引導(dǎo)性更強(qiáng)。
在單個(gè)任務(wù)中，首次進(jìn)入選擇頁(yè)面時(shí)，列表中沒有任何標(biāo)記（有默認(rèn)選項(xiàng)除外），選中條件后，標(biāo)記對(duì)勾的同時(shí)，無需其他操作即自動(dòng)進(jìn)入下一步任務(wù)流程，再次回到選項(xiàng)列表時(shí)，系統(tǒng)會(huì)標(biāo)記上次的選擇作為參考。另外，這種樣式不會(huì)太過于局限選項(xiàng)的數(shù)量和字?jǐn)?shù)。
4）選擇器
通常作為表單項(xiàng)以彈窗的形式出現(xiàn)，適合二級(jí)、三級(jí)聯(lián)動(dòng)選項(xiàng)。例如：選擇地址（省/市/區(qū)）、日期（年/月/日）、時(shí)間（時(shí)/分/秒）等選項(xiàng)較多且具有關(guān)聯(lián)性的選項(xiàng)組。
3.單選的使用準(zhǔn)則
首先要確保單選組件的可用性，所有單選項(xiàng)需要清晰的呈現(xiàn)給用戶，避免嵌套或隱藏二級(jí)單選，否則會(huì)影響結(jié)構(gòu)的識(shí)別性。
其次為確?？勺x性，單選組件的布局要符合用戶認(rèn)知。選項(xiàng)較少且標(biāo)簽較短時(shí)，使用多行多列的按鈕式布局比較常見，例如電商APP的商品屬性選擇等；標(biāo)簽較長(zhǎng)則使用圓形圖標(biāo)、對(duì)鉤樣式單列多行顯示，例如選擇退款原因；聯(lián)動(dòng)選項(xiàng)需根據(jù)關(guān)聯(lián)的等級(jí)數(shù)量，在選擇器中多列顯示，例如三級(jí)聯(lián)動(dòng)地址，省、市、區(qū)三列并行。如果將選項(xiàng)毫無章法的平鋪、標(biāo)簽/圖標(biāo)上下排布，會(huì)造成視覺動(dòng)線混亂、內(nèi)容緊湊及一些不可預(yù)知的問題出現(xiàn)。
4.提供默認(rèn)選項(xiàng)
如果可以的話，盡量給用戶提供一個(gè)默認(rèn)選項(xiàng)，這并非隨意設(shè)定，需要經(jīng)過多方面分析綜合決定。舉個(gè)例子，你的產(chǎn)品屬社交類型，大多數(shù)為男性用戶，那么將男性設(shè)定為默認(rèn)的性別選擇，這類用戶就可以直接跳過這一步，節(jié)約了大量用戶的操作成本，即便面對(duì)的是女性用戶，這也不影響原本就需要手動(dòng)選擇的步驟。默認(rèn)選項(xiàng)需合理設(shè)定，切不可亂用，否則一些“偷懶”的用戶并不會(huì)更換默認(rèn)選項(xiàng)，導(dǎo)致后續(xù)數(shù)據(jù)分析的精準(zhǔn)度。
二、復(fù)選：循環(huán)往復(fù)
1.什么是復(fù)選？
復(fù)選操作不會(huì)像單選那樣出現(xiàn)信息阻隔，也沒有撥動(dòng)開關(guān)那么強(qiáng)的視覺干擾，通常包含一個(gè)或多個(gè)選項(xiàng)供用戶選擇，其選項(xiàng)條件不是互斥的，用戶可從中選擇一項(xiàng)或者多項(xiàng)，具體情況則根據(jù)選項(xiàng)條件的限制而定。
1）選擇一項(xiàng)
一些設(shè)計(jì)師將復(fù)選理解為多選，且先不論對(duì)錯(cuò)，筆者想說明的是，多選只不過是復(fù)選的一種選擇方式。在真實(shí)的設(shè)計(jì)中，有很多場(chǎng)景是不設(shè)限的，我們可以將選中/未選中理解為“是/否、同意/不同意、開啟/關(guān)閉……”等意思。例如，注冊(cè)頁(yè)面中必定存在的「用戶服務(wù)協(xié)議」，單個(gè)選項(xiàng)可反復(fù)操作；管理系統(tǒng)或B端的批量操作、權(quán)限設(shè)置等，選擇其中的一項(xiàng)也可進(jìn)入下一步操作流程。
2）選擇多項(xiàng)
強(qiáng)制多選一般會(huì)設(shè)定需選擇數(shù)量的下限和上限。例如：首次進(jìn)入某些APP時(shí)，需選擇個(gè)性化定制標(biāo)簽，通常最少不低于3項(xiàng)，最多不超過6項(xiàng)；還有，在填寫調(diào)查問卷的多項(xiàng)選擇時(shí)，最少選中兩項(xiàng)、不設(shè)上限等，這些就是復(fù)選中真正意義上的多選。
2.復(fù)選的使用準(zhǔn)則
相比單選，復(fù)選需要配備提交按鈕，提交后才會(huì)記錄被選中的信息。對(duì)于批量性的選項(xiàng)操作，復(fù)選框的操作效率比撥動(dòng)開關(guān)要高出許多，例如，在某些頁(yè)面開啟/關(guān)閉幾個(gè)權(quán)限，每個(gè)權(quán)限用單獨(dú)的撥動(dòng)開關(guān)進(jìn)行控制，完全沒問題，但涉及到幾十個(gè)權(quán)限的控制，這種批量操作使用復(fù)選框一定是最佳的選擇，只要用戶能清楚操作之后會(huì)發(fā)生什么即可。
3.常見的使用場(chǎng)景
1）標(biāo)簽選擇
個(gè)性化標(biāo)簽選擇中最為常見，在標(biāo)簽文字、選項(xiàng)數(shù)量較少的情況下，使用外觀大小完全相同的標(biāo)簽按鈕多列顯示，有助于用戶瀏覽，還能節(jié)約頁(yè)面縱向空間，用淺色描邊/主色填充或明暗等級(jí)來區(qū)分選中/未選中狀態(tài)，部分產(chǎn)品還會(huì)在選中的狀態(tài)上增加一個(gè)小圖標(biāo)（?、+/-），區(qū)分會(huì)更加明顯。這種方式切記標(biāo)簽不能過長(zhǎng)，否則可能會(huì)導(dǎo)致文字折行或容器內(nèi)很擁擠，不利于用戶閱讀。
2）列表選擇
當(dāng)選項(xiàng)過多、標(biāo)簽長(zhǎng)短不一時(shí)，適合使用列表式選擇。WEB端常見的是圓角矩形勾選填充，例如管理系統(tǒng)的商品列表；移動(dòng)端更多則是原型勾選填充，例如購(gòu)物車，當(dāng)然并沒有明顯的界定，所有頁(yè)面統(tǒng)一樣式即可。
4.未定狀態(tài)
與單選視覺樣式唯一不同的是多了一個(gè)未定狀態(tài)。常見于管理系統(tǒng)或B端，當(dāng)選項(xiàng)存在多個(gè)子級(jí)時(shí)，只是某些子級(jí)被選中，但并未全部選中，這時(shí)父級(jí)狀態(tài)尚不確定，即為未定狀態(tài)。
三、撥動(dòng)開關(guān)：白天與黑夜
1.什么是撥動(dòng)開關(guān)？
撥動(dòng)開關(guān)就像生活中控制燈泡的開關(guān)，它是在兩個(gè)互斥的選項(xiàng)中始終存在默認(rèn)值、且操作會(huì)立即生效的按鈕，操作后必定是對(duì)立的選項(xiàng)，例如開啟/關(guān)閉、是/否、同意/不同意等。
2.撥動(dòng)開關(guān)的使用準(zhǔn)則
撥動(dòng)開關(guān)必須表意明確，用戶在操作之前就能清楚操作后會(huì)發(fā)生什么，使用時(shí)，需遵循以下原則：
- 用于操作后立即生效的場(chǎng)景；
- 標(biāo)簽和按鈕是兩個(gè)分離的視覺焦點(diǎn)，當(dāng)用戶有可能產(chǎn)生疑惑、或標(biāo)簽不足以言明時(shí)，需增加輔助文字予以說明；
- 主要用于控制全局，權(quán)重較高，針對(duì)單個(gè)任務(wù)流程的控制，請(qǐng)使用單選/復(fù)選；
- 默認(rèn)就是開啟/關(guān)閉狀態(tài)，若存在子級(jí)，父級(jí)關(guān)閉的同時(shí)將子級(jí)隱藏（避免置灰）；
- 當(dāng)操作有風(fēng)險(xiǎn)時(shí)，必須給予明確的提示；
- 避免大面積使用，如果存在太多需要開啟/關(guān)閉的條件，建議使用復(fù)選；
3.背景與文案
撥動(dòng)開關(guān)的背景通常只介于兩種狀態(tài)，關(guān)閉狀態(tài)下為置灰（全服通用），開啟后為綠色，也有很多產(chǎn)品將其設(shè)定為品牌色，統(tǒng)一顏色樣式即可。
輔助文案常見有兩種類型，第一種為當(dāng)前狀態(tài)反饋，例如：獲取設(shè)備通知權(quán)限“消息推送已開啟/關(guān)閉”，這種反饋在應(yīng)用中可靈活運(yùn)用，尤其是在關(guān)閉狀態(tài)下，可起到一定的引導(dǎo)作用。第二種為標(biāo)簽輔助提示，例如：操作后的好處或風(fēng)險(xiǎn)，告知用戶會(huì)發(fā)生什么，提前讓用戶有一定的心理預(yù)期。
四、單選控件的糾葛
1.單選框vs復(fù)選框
是用單選框還是用復(fù)選框，似乎是最好界定的，筆者查閱了很多資料，得到的信息是“需選擇一個(gè)選項(xiàng)用單選、多個(gè)選項(xiàng)用復(fù)選”，答案出奇的一致，這好像什么都說了（確實(shí)如此）、又好像什么都沒說（是個(gè)設(shè)計(jì)師都懂），當(dāng)我們仔細(xì)分析之會(huì)發(fā)現(xiàn)，并非僅僅如此。
在PC端遇到兩個(gè)對(duì)立的選項(xiàng)（如：是/否、同意/不同意、通過/不通過）時(shí)，除了用兩個(gè)單選項(xiàng)之外，也可以使用復(fù)選框，尤其是在權(quán)限控制中，必定是復(fù)選。另外，移動(dòng)端注冊(cè)登錄流程中，用戶服務(wù)協(xié)議也是最具代表性的復(fù)選框（同意/不同意二選一）使用案例。除去這些特殊的使用場(chǎng)景，其他大部分就直接單選。
2.單選框vs撥動(dòng)開關(guān)
僅存在兩個(gè)選項(xiàng)時(shí)，單選與撥動(dòng)開關(guān)的使用，有一些設(shè)計(jì)師就將其混淆了。筆者曾遇到過這樣的設(shè)計(jì)案例，有產(chǎn)品將性別（男/女）、O2O取貨方式（送貨上門/到店自取）只有兩個(gè)選項(xiàng)的任務(wù)用撥動(dòng)開關(guān)來呈現(xiàn)，操作后，通過開關(guān)上的滑塊左右移動(dòng)+文案輔助來確定當(dāng)前選中的條件。筆者認(rèn)為，這種方式不可取，最大的弊端就是在當(dāng)前狀態(tài)下，用戶并不知道另一個(gè)選項(xiàng)是什么，需要通過猜測(cè)或試錯(cuò)來確定，無疑讓增加了任務(wù)的完成難度，也打破了用戶對(duì)常用操作的固有認(rèn)知。
至于什么時(shí)候需要用撥動(dòng)開關(guān)，上述3-2《撥動(dòng)開關(guān)的使用準(zhǔn)則》中有詳細(xì)說明，除此之外使用單選框，能解決設(shè)計(jì)中80%的單選與撥動(dòng)開關(guān)的選擇性問題。
3.單選框vs下拉列表
選項(xiàng)較少可直接在當(dāng)前頁(yè)面用單選框（選擇性別）、按鈕（標(biāo)簽）呈現(xiàn)，當(dāng)用戶需要在大量的選項(xiàng)中進(jìn)行選擇時(shí)，PC端可使用下拉列表，移動(dòng)端更多使用的是操作欄彈窗或跳轉(zhuǎn)到新頁(yè)面讓用戶操作。其實(shí)這方面沒有明確的界限，需根據(jù)使用場(chǎng)景以及選項(xiàng)的屬性根據(jù)實(shí)際情況靈活變動(dòng)。
五、必備常識(shí)和使用技巧
1.選項(xiàng)的幾種狀態(tài)
單選、復(fù)選、撥動(dòng)開關(guān)各自都有不同的狀態(tài)，在設(shè)計(jì)之前，設(shè)計(jì)師需要清楚地知道這些狀態(tài)所代表的含義以及不同的使用場(chǎng)景，避免后續(xù)在使用中給用戶造成困擾。
2.符合用戶認(rèn)知的控件樣式
首先，選項(xiàng)框樣式應(yīng)符合用戶認(rèn)知，不能為了所謂的差異化、個(gè)性化打破用戶固有認(rèn)知，而帶來額外的認(rèn)知負(fù)擔(dān)。例如單選/復(fù)選常見的是圓形填充+對(duì)鉤（PC端）、圓角矩形填充+對(duì)鉤（移動(dòng)端）兩種方式，雖然這并不是唯一，但至少不會(huì)出錯(cuò)。雖然鼓勵(lì)跳出常規(guī)的設(shè)計(jì)思維做出改變，但一切都以不增加用戶使用難度、提供更好的用戶體驗(yàn)為出發(fā)點(diǎn)，不然還不如不變。
3.注意對(duì)齊方式
按鈕式不用多說，文字跟容器上下左右居中。列表中的對(duì)齊方式無非兩種，選項(xiàng)框在前，文字和選項(xiàng)框都是左對(duì)齊，單選/復(fù)選均可采用這種方式；選項(xiàng)框在后，則文字左對(duì)齊、選項(xiàng)框右對(duì)齊，采用這種方式的單選居多；撥動(dòng)開關(guān)則是全網(wǎng)統(tǒng)一，標(biāo)簽左對(duì)齊，開/關(guān)右對(duì)齊。
4.清晰簡(jiǎn)短的標(biāo)簽
選項(xiàng)標(biāo)簽需清晰簡(jiǎn)短、直接表達(dá)核心含義，盡量避免否定的表達(dá)方式，以免用戶產(chǎn)生誤解。像撥動(dòng)開關(guān)這種兩極分化的選項(xiàng)，當(dāng)用戶不清楚對(duì)立的選項(xiàng)內(nèi)容時(shí)，可以使用副標(biāo)題進(jìn)行描述，讓用戶在操作之前有一定的心理預(yù)期。
5.批量選擇、節(jié)約操作成本
雖然都是將選擇權(quán)交給用戶，但面對(duì)不同的場(chǎng)景，需提供一個(gè)「全選」操作，幫助用戶一次完成多個(gè)重復(fù)的操作，降低操作成本。
例如：B端的內(nèi)容管理，批量操作能節(jié)省很多時(shí)間，還能降低因多次重復(fù)操作產(chǎn)生的失誤概率；C端最具代表性的有購(gòu)物車、以及初次進(jìn)入部分應(yīng)用時(shí)的個(gè)性化標(biāo)簽選擇。
6.觸控?zé)釁^(qū)的設(shè)定
針對(duì)移動(dòng)端，點(diǎn)擊區(qū)域切勿直接使用選項(xiàng)框的范圍大小，需單獨(dú)設(shè)定熱區(qū)范圍。大家都知道，大拇指在移動(dòng)端應(yīng)用中使用頻率是最高的，相對(duì)來說，要有足夠大（非絕對(duì)）的操作區(qū)域以供手指進(jìn)行精準(zhǔn)交互，以免無效操作或操作失誤。需要將文本標(biāo)簽、選項(xiàng)框以及各選項(xiàng)區(qū)域均分后四周的留白都作為觸動(dòng)熱區(qū)，操作起來就會(huì)輕松很多。
六、結(jié)語(yǔ)
本文筆者主要總結(jié)了單選、復(fù)選、撥動(dòng)開關(guān)的使用規(guī)范及常見問題，不過設(shè)計(jì)規(guī)范只是基于產(chǎn)品本身構(gòu)建的一個(gè)標(biāo)準(zhǔn)，為了約束后續(xù)的視覺統(tǒng)一而存在的規(guī)范參考。在真實(shí)的設(shè)計(jì)中，這些設(shè)計(jì)規(guī)范并不是唯一，需要根據(jù)產(chǎn)品的特點(diǎn)和使用場(chǎng)景進(jìn)行靈活變動(dòng)，設(shè)計(jì)出最適合自身產(chǎn)品的控件才是最重要的。
遵循設(shè)計(jì)規(guī)范只是最基礎(chǔ)的標(biāo)準(zhǔn)，遵循的同時(shí)跳出規(guī)范的束縛才會(huì)有創(chuàng)意，這就離不開我們平時(shí)的積累，鉆研各產(chǎn)品中優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，通過查漏補(bǔ)缺、揚(yáng)長(zhǎng)避短，在其他產(chǎn)品的亮點(diǎn)中找到與自身產(chǎn)品的平衡點(diǎn)并將其融合，這才是我們學(xué)習(xí)和總結(jié)的最終目的。
原文地址：能量眼球
作者：大漠飛鷹CYSJ
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》選項(xiàng)篇 | 單選/復(fù)選/撥動(dòng)開關(guān)的使用小技巧！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司