我們UI設(shè)計(jì)師在界面設(shè)計(jì)的時(shí)候經(jīng)常會(huì)使用到單選按鈕、復(fù)選框、開(kāi)關(guān)這些選擇控件，它們是設(shè)計(jì)中經(jīng)常會(huì)使用到的讓用戶進(jìn)行選擇的控件。盡管它們?cè)谟脩艚缑嬷惺浅Ｓ玫慕M件，但設(shè)計(jì)師、產(chǎn)品經(jīng)理在為他們的任務(wù)選擇合適的組件時(shí)，仍然會(huì)有很多現(xiàn)實(shí)的麻煩，而我們則需要更認(rèn)真地探究其中的細(xì)節(jié)。
良好的掌握每個(gè)組件的使用場(chǎng)景，可以更加積極的幫助用戶體驗(yàn)產(chǎn)品。本文通過(guò)結(jié)合實(shí)際案例與思考，與各位分享這類選擇控件在web端的使用邏輯與細(xì)節(jié)差異，希望能對(duì)設(shè)計(jì)工作帶來(lái)一定的指導(dǎo)意義。
當(dāng)我們需要用戶在兩個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)時(shí)，在這種情況下可以使用三種控件：?jiǎn)蝹€(gè)復(fù)選框、兩個(gè)單選按鈕或者開(kāi)關(guān)，那么我們應(yīng)該如何做出抉擇呢？
感覺(jué)似乎使用Radio單選按鈕、Checkbox復(fù)選框和Switch切換開(kāi)關(guān)這三個(gè)組件好像都是可以的。下面文中會(huì)對(duì)于這三個(gè)組件的基本特點(diǎn)、使用準(zhǔn)則，以及常見(jiàn)場(chǎng)景等的探討來(lái)告知設(shè)計(jì)師們?cè)撊绾稳プ龀稣_的選擇。
要搞清楚這些組件的使用問(wèn)題，我們需要來(lái)了解一下這些組件的由來(lái)與用法場(chǎng)景。
選擇控件（Selection Control）：是一種供用戶選擇不同選項(xiàng)的，常用于表單、設(shè)置頁(yè)等。它一般分為三類：?jiǎn)芜x按鈕（Radio）、復(fù)選框（Checkbox） 和開(kāi)關(guān)（Switch）。
不論是單選按鈕、復(fù)選框還是開(kāi)關(guān)，他們都能在現(xiàn)實(shí)世界中找到事例。這些組件是將現(xiàn)實(shí)生活中的事物映射反應(yīng)到界面設(shè)計(jì)中，使得用戶可以更加簡(jiǎn)單高效地理解他們本身所代表的交互含義，通過(guò)官方定義的“建議”用來(lái)指導(dǎo)標(biāo)準(zhǔn)化使用。
單選按鈕、復(fù)選框、開(kāi)關(guān)組件它們都具有不同的時(shí)效性。
單選按鈕/復(fù)選框本質(zhì)上只是變輸入為選擇的快捷方式，當(dāng)需要用戶輸入的內(nèi)容只有幾種固定的格式時(shí)，可以通過(guò)變輸入為選擇，這樣不僅節(jié)約時(shí)間，也能避免輸入出錯(cuò)，但這需要提托頁(yè)面中的其他觸發(fā)組件來(lái)保存和執(zhí)行這樣的操作。開(kāi)關(guān)這類組件被點(diǎn)擊后會(huì)立刻執(zhí)行，并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。
如何才能正確的選擇合適的控件，這就需要從了解每一個(gè)組件開(kāi)始。
單選按鈕（Radio）最早的設(shè)計(jì)模型來(lái)源于老式收音機(jī)上用于頻率和預(yù)設(shè)電臺(tái)之間切換的物理按鍵。當(dāng)其中一個(gè)按鍵被按下時(shí)，所有其他的按鍵都會(huì)被彈出，被按下的那個(gè)按鍵就成為了唯一一個(gè)處于“按下”狀態(tài)的選中按鈕。
單選按鈕將這一物理特征進(jìn)行了隱喻設(shè)計(jì)，是一種涇渭分明的表現(xiàn)。
但是感覺(jué)這樣的說(shuō)法可能有些不嚴(yán)謹(jǐn)。從物理世界演化到UI后，這個(gè)組件有了交互上的變化，UI設(shè)計(jì)中的單選按鈕功能只是錄入內(nèi)容，并不立即執(zhí)行，而收音機(jī)的物理按鍵卻能立即觸發(fā)（換臺(tái)）操作，所以單選按鈕的使用是在不斷的演變中發(fā)展變化著，未來(lái)也許還有新的改變。
UI概念是由Xerox PARC的研究首次引入的，它是一家研發(fā)公司，應(yīng)用業(yè)務(wù)涉及到常用的計(jì)算機(jī)技術(shù)，包括：以太網(wǎng)、圖形用戶界面、編程、鼠標(biāo)等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。
單選按鈕是將所有信息條件暴露給用戶，它不像開(kāi)關(guān)在使用上帶有猜測(cè)、探索的必要。
1）
標(biāo)識(shí)性：?jiǎn)芜x按鈕通常以圓形圖標(biāo)的形式呈現(xiàn)，旁邊附有文字說(shuō)明，用于表示選項(xiàng)的內(nèi)容。這種設(shè)計(jì)使得單選按鈕易于用戶識(shí)別和操作。
2）
互斥性：僅允許用戶在一組選項(xiàng)中選擇其中一項(xiàng)。
3）
直觀性：每個(gè)單項(xiàng)選擇都非常直觀，它會(huì)公開(kāi)所有可用選項(xiàng)，用戶能夠一眼看到所有可用的選項(xiàng)并做出選擇。如果希望用戶明確閱讀完所有選項(xiàng)，則最好使用單選按鈕。
4）
拓展性：?jiǎn)芜x按鈕的拓展性更強(qiáng)，相對(duì)于復(fù)選框、開(kāi)關(guān)的布爾值，單選按鈕能承載兩個(gè)或兩個(gè)以上的選項(xiàng)。
5）
默認(rèn)值：?jiǎn)芜x會(huì)提供默認(rèn)值選項(xiàng)，且默認(rèn)值可以承載具體內(nèi)容。
單選按鈕是主要用于兩個(gè)或更多選項(xiàng)列表的選擇器，列表中的所有選項(xiàng)是相互排斥的，用戶必須清楚準(zhǔn)確地選擇一個(gè)選項(xiàng)。
1）當(dāng)用戶點(diǎn)擊一個(gè)未選擇的單選選項(xiàng)時(shí)，它將取消選擇先前選擇的任何其他選項(xiàng)。
2）要為用戶提供默認(rèn)選項(xiàng)，確保它對(duì)于用戶來(lái)講是最安全或者最可能的選項(xiàng)。
3）選擇較少的情況下使用單選按鈕組件更好，但選項(xiàng)一旦較多，例如七八個(gè)的時(shí)候就不太適合一一展開(kāi)，這會(huì)占用很多空間，因此將選項(xiàng)收起來(lái)放在下拉選單里會(huì)比較合適。
4）清楚表明單選按鈕各個(gè)狀態(tài)，才能使用戶更明確使用，達(dá)到設(shè)計(jì)目的。
1）讓用戶明確知道單選、復(fù)選的區(qū)別，強(qiáng)調(diào)各個(gè)選項(xiàng)的不同
不同的選項(xiàng)內(nèi)容，如果采用復(fù)選框，用戶需要在兩個(gè)差距較大的選項(xiàng)中去思考，延長(zhǎng)考慮時(shí)間，使得用戶更為焦躁。
2）開(kāi)啟/關(guān)閉的單選狀態(tài)，建議使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，復(fù)選框?qū)τ谠诳臻g、視覺(jué)焦點(diǎn)上使用更為集中，如果只針對(duì)開(kāi)啟/關(guān)閉的單選狀態(tài)，則不建議選擇單選按鈕，推薦使用復(fù)選框。
3）每個(gè)選項(xiàng)都關(guān)聯(lián)內(nèi)容時(shí)，使用單選按鈕
如果默認(rèn)選項(xiàng)內(nèi)容設(shè)計(jì)的好，會(huì)讓更多人保持選擇默認(rèn)選項(xiàng)。
在表單設(shè)計(jì)中一個(gè)不錯(cuò)的默認(rèn)選項(xiàng)，會(huì)讓很多人保持選擇默認(rèn)選項(xiàng)，提升表單操作效率。下圖案例如果采用復(fù)選框或者開(kāi)關(guān)控件，用戶就不得不去思考開(kāi)啟后是什么，還要擔(dān)心理解開(kāi)啟/關(guān)閉后帶來(lái)的影響，但對(duì)于絕大多數(shù)用戶來(lái)說(shuō)，系統(tǒng)默認(rèn)內(nèi)容無(wú)需改動(dòng)，給用戶提供的默認(rèn)選擇，一般是安全、方便的選項(xiàng)。
4）較長(zhǎng)需隱藏拆分的內(nèi)容情況，使用單選按鈕
在界面設(shè)計(jì)中，如果遇到的內(nèi)容需要重新組織或者拆分時(shí)，選擇使用單選按鈕組件。不僅能夠做到信息簡(jiǎn)潔，也能夠提高用戶的瀏覽效率。
如果選項(xiàng)文字名稱較長(zhǎng)，需要添加說(shuō)明，這時(shí)單選組件承載的信息較多，同時(shí)使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向，眼球動(dòng)線移動(dòng)幅度較小，信息獲取體驗(yàn)更佳。如果選項(xiàng)文字較少，也可橫排不占用太多的垂直空間。
6）提供默認(rèn)選項(xiàng)，保持視覺(jué)分量相同
單選按鈕總是默認(rèn)選中一個(gè)選項(xiàng)，不應(yīng)該展示沒(méi)有默認(rèn)選擇的單選組件。這個(gè)規(guī)則的唯一例外情況是在使用單選按鈕進(jìn)行用戶問(wèn)卷選擇時(shí)，使用單選按鈕在所有選項(xiàng)列表中要有相同的視覺(jué)分量，使用戶從列表中選擇任何選項(xiàng)的可能性是相等的。默認(rèn)被選中的單選框設(shè)計(jì)可以為用戶提供明確的建議。默認(rèn)的選項(xiàng)可以引導(dǎo)用戶做出最佳選擇，并增強(qiáng)他們繼續(xù)完成任務(wù)的信心。
單選按鈕、復(fù)選框是UI設(shè)計(jì)中最小的交互式元素之一，因此它們需要有一個(gè)易于訪問(wèn)的點(diǎn)擊區(qū)域。單選組件交互操作時(shí)需要讓用戶不僅通過(guò)單擊或點(diǎn)擊該小控件，還可以單擊標(biāo)簽相關(guān)聯(lián)的文本來(lái)選擇一個(gè)選項(xiàng)，確保用戶可以單擊單選控件或標(biāo)簽文本上的任意一個(gè)選項(xiàng)時(shí)都易于操作。
單選按鈕不應(yīng)該有什么子選項(xiàng)，單選按鈕的設(shè)計(jì)初衷是讓用戶在多個(gè)選項(xiàng)中選擇一個(gè)，而不是在一個(gè)選項(xiàng)內(nèi)部進(jìn)行進(jìn)一步的選擇。單選按鈕通常與RadioGroup一起使用，用于將多個(gè)單選按鈕組合為一組，確保同一組內(nèi)的單選按鈕只能有一個(gè)被選中。錯(cuò)誤的排列會(huì)讓用戶感到困擾，所有的選項(xiàng)要對(duì)齊放置在同一層級(jí)。
9）選項(xiàng)小于等于5個(gè)，可使用單選按鈕
當(dāng)選項(xiàng)小于5個(gè)，應(yīng)考慮使用單選按鈕，
用戶可以不需要任何點(diǎn)擊或輸入操作即可馬上瀏覽所有選項(xiàng)并直接點(diǎn)擊選擇出來(lái)。
10）選項(xiàng)只有且必須一個(gè)時(shí)，使用單選按鈕
當(dāng)選項(xiàng)只能選擇一個(gè)，且必須選擇1個(gè)時(shí)，應(yīng)使用單選按鈕。
11）單選項(xiàng)確保選項(xiàng)既全面又互斥
如果無(wú)法保證全面，需提供“其他”選項(xiàng)，比如在婚姻狀態(tài)里，除已婚、未婚外，如果你不知道還有別的什么狀態(tài)，最好提供“其他”選項(xiàng)作為補(bǔ)充，否則諸如離異、喪偶等情況會(huì)無(wú)法使用該系統(tǒng)。
復(fù)選框的物理原型來(lái)自于紙張上的多選題，例如餐廳的菜單，選多選少互不影響，并且用戶傾向于用?這個(gè)符號(hào)來(lái)勾選，這個(gè)符號(hào)從古代商號(hào)記流水賬核查到現(xiàn)在教師批閱作業(yè)的“對(duì)勾”，無(wú)一不表示著“正確、認(rèn)可”。它代表的是一種選擇，而現(xiàn)實(shí)中的多選題，往往是非時(shí)效性的，勾選之后不會(huì)立即生效。
復(fù)選框既可以是單個(gè)選項(xiàng)，也可以是可供選擇的一組選項(xiàng)。當(dāng)用戶可以選擇任意數(shù)量的選項(xiàng)，包括零個(gè)、一個(gè)或幾個(gè)時(shí)可使用復(fù)選框組件。集合中的每個(gè)復(fù)選框都獨(dú)立于其他所有復(fù)選框，因此選中一個(gè)復(fù)選框不會(huì)對(duì)其他復(fù)選框產(chǎn)生任何影響。而復(fù)選框讓用戶在兩個(gè)選項(xiàng)之間進(jìn)行選擇，勾選后和未勾選表示則可表示“是/否、要/不要、開(kāi)啟/關(guān)閉…” 等結(jié)果，準(zhǔn)確的使用復(fù)選框也需要認(rèn)清復(fù)選框的各種狀態(tài)，才能更好的表示選項(xiàng)意義。
1）直觀性：每個(gè)復(fù)選框通常由一個(gè)方框和一個(gè)標(biāo)簽組成，標(biāo)簽用于描述選項(xiàng)內(nèi)容，用戶可以通過(guò)點(diǎn)擊方框來(lái)切換其選中狀態(tài)。
2）非互斥性：復(fù)選框通常用戶表示一組非互斥的選項(xiàng)，即選擇一個(gè)不會(huì)影響其他選項(xiàng)狀態(tài)。
3）多選性：復(fù)選框允許用戶從一組選項(xiàng)中選擇一個(gè)或多個(gè)，與單選按鈕不同，復(fù)選框的選中狀態(tài)是獨(dú)立的，選項(xiàng)之間相互獨(dú)立且相關(guān)，用戶可以同時(shí)選中多個(gè)復(fù)選框。
4）公開(kāi)性：復(fù)選框可公開(kāi)所有可用選項(xiàng)，用戶一眼能夠看到所有可用的選項(xiàng)并做出選擇。
5）靈活性：復(fù)選框可以用于多種場(chǎng)景，如在線調(diào)研、注冊(cè)表單等，能夠提高用戶體驗(yàn)和效率。
1）為了方便用戶快速理解，復(fù)選框的選項(xiàng)內(nèi)容一般是一句話，不用逗號(hào)隔開(kāi)。
2）父級(jí)復(fù)選框允許快速便捷選擇或取消選擇所有項(xiàng)目。
3）復(fù)選框表示狀態(tài)，用戶可以延遲提交的交互操作。
4）復(fù)選框作為單選狀態(tài)時(shí)，操作對(duì)象和選項(xiàng)主體內(nèi)容視覺(jué)焦點(diǎn)是不分開(kāi)的，選擇后就知道被選中了（比如登錄頁(yè)面中的用戶需知）。
5）復(fù)選框也可直接表示選項(xiàng)內(nèi)容的開(kāi)啟、關(guān)閉。
1) 使用復(fù)選框代表用戶清楚會(huì)發(fā)生什么
如果使用單選或開(kāi)關(guān)，會(huì)發(fā)現(xiàn)視覺(jué)干擾特別嚴(yán)重，一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個(gè)選項(xiàng)的開(kāi)啟關(guān)閉狀態(tài)。如果排版受限制，可以將復(fù)選框放到標(biāo)簽的右側(cè)對(duì)齊。
2）復(fù)選框的標(biāo)簽文本要措辭主動(dòng)
使用復(fù)選框，要保證選項(xiàng)后標(biāo)簽文本的措辭積極主動(dòng)，而不是否定的。這將幫助用戶理解如果打開(kāi)復(fù)選框會(huì)發(fā)生什么。
3) 提前告知用戶，提示消息可減少?gòu)?fù)選框錯(cuò)誤選擇概率
如果用戶必須從列表中選擇一些選項(xiàng)，您應(yīng)該在用戶開(kāi)始執(zhí)行之前告知用戶，通過(guò)顯示提示類似“您應(yīng)該至少選擇X個(gè)選項(xiàng)”的消息，來(lái)減少用戶復(fù)選框錯(cuò)誤選擇的機(jī)率。
一般情況下，復(fù)選框不會(huì)像開(kāi)關(guān)一樣點(diǎn)擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確，更有助于信息防錯(cuò)。如果在設(shè)置頁(yè)面，復(fù)選框也可單獨(dú)作為設(shè)置且立即生效。
復(fù)選組件的選項(xiàng)信息和復(fù)選框在一起，特別是對(duì)于批量填寫或設(shè)置多個(gè)字段，使用復(fù)選框效率更高。
5）用復(fù)選框控制表單局部細(xì)節(jié)
如果控制對(duì)象的功能是表單頁(yè)面的一個(gè)局部或信息內(nèi)容不多，用戶也清楚了解選擇后是什么，這種時(shí)候復(fù)選框更適合。我們不需要過(guò)重的給用戶強(qiáng)調(diào)是什么，用復(fù)選框比使用開(kāi)關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。
在表單中，同個(gè)問(wèn)題中提供多個(gè)選項(xiàng)時(shí)，使用復(fù)選框。勾選能直接表明“要”或“不要”。
7）有且只有一個(gè)明顯選項(xiàng)時(shí)，用復(fù)選框
只有“選擇”或”取消選擇”一個(gè)顯而易見(jiàn)的選項(xiàng)時(shí)，更適合使用復(fù)選框。
8）存在父子嵌套關(guān)系的分組，多選項(xiàng)能清晰表達(dá)中間選擇狀態(tài)。
未全選中中間狀態(tài)表示在列表中選擇了多個(gè)子選項(xiàng)（但不是全部），這時(shí)，開(kāi)關(guān)按鈕不能表示部分選項(xiàng)被選中的狀態(tài)，單選按鈕亦不能表示嵌套關(guān)系。
開(kāi)關(guān)組件是現(xiàn)實(shí)生活中仿照物理開(kāi)關(guān)按鈕在界面設(shè)計(jì)中的映射，提供了兩種最簡(jiǎn)單、直接的對(duì)立選項(xiàng)，比如開(kāi)/關(guān)、啟動(dòng)/禁用等。它就像生活中控制燈泡的開(kāi)關(guān)，當(dāng)我們?nèi)ゲ僮鏖_(kāi)關(guān)時(shí)，燈泡會(huì)點(diǎn)亮或者熄滅，會(huì)對(duì)事物立即產(chǎn)生影響。它的意符必須明確，不然用戶不知道即將要啟動(dòng)或者關(guān)閉什么
。
在界面設(shè)計(jì)中，開(kāi)關(guān)也同樣具備即時(shí)觸發(fā)的特性，如打開(kāi)Wi-Fi、開(kāi)啟暗黑模式等，
由于開(kāi)關(guān)具備很明顯的在用戶心中扎根的隱喻心智，相較于復(fù)選組件而言，操作前后的狀態(tài)更明顯，感知更強(qiáng)烈。
開(kāi)關(guān)組件提示用戶在兩個(gè)互斥選項(xiàng)中進(jìn)行選擇，并且總是有一個(gè)默認(rèn)值。當(dāng)用戶必須回答是或否問(wèn)題和二進(jìn)制操作，如啟用或禁用特定設(shè)置時(shí)，它是最合適的組件。開(kāi)關(guān)組件也屬于雙態(tài)按鈕，是指有開(kāi)和關(guān)兩個(gè)兩種狀態(tài)，是在兩個(gè)狀態(tài)之間切換。
在使用開(kāi)關(guān)組件時(shí)要注意需要提供足夠的視覺(jué)反饋，告知用戶什么狀態(tài)下是開(kāi)著的。
1）直觀性：開(kāi)關(guān)切換組件的設(shè)計(jì)通常很直觀，開(kāi)關(guān)主體選項(xiàng)信息和開(kāi)關(guān)組件是分離的，兩個(gè)視覺(jué)焦點(diǎn)，用戶可以通過(guò)滑動(dòng)滑塊來(lái)改變狀態(tài)，而不需要閱讀額外的說(shuō)明和標(biāo)簽。
2）二元性：開(kāi)關(guān)切換組件表示兩種相反且互斥的狀態(tài)，通常多用在表示“開(kāi)啟/關(guān)閉”，主要在選項(xiàng)中來(lái)回切換，這種二元性使得它非常適合于需要明確狀態(tài)切換的場(chǎng)景。
3）及時(shí)性：當(dāng)用戶操作開(kāi)關(guān)時(shí)，相關(guān)的功能和設(shè)置會(huì)立即給予用戶反饋，無(wú)需額外的確認(rèn)步驟。
4）易用性：開(kāi)關(guān)組件簡(jiǎn)單易懂，即使技術(shù)不太熟悉的用戶也能快速學(xué)會(huì)如何使用。
5）可訪問(wèn)性：現(xiàn)在的開(kāi)關(guān)設(shè)計(jì)考慮到可訪問(wèn)性，確保所有用戶，包括有視覺(jué)或運(yùn)動(dòng)障礙的人，都能方便地使用。
1）當(dāng)用戶點(diǎn)擊一個(gè)開(kāi)關(guān)時(shí)，其對(duì)應(yīng)的動(dòng)作立即生效。
2）由于開(kāi)關(guān)顯示實(shí)際狀態(tài)，所以有時(shí)狀態(tài)變化會(huì)有延遲。在這種情況下，可使用"處理中"的狀態(tài)動(dòng)畫(huà)，減少用戶焦慮。
3）開(kāi)關(guān)組件沒(méi)有hover效果，有動(dòng)作效果，用手指的切換更容易，這個(gè)組件非常適合應(yīng)用于移動(dòng)設(shè)備。
4)避免使用開(kāi)關(guān)控制局部細(xì)節(jié)或者次要的設(shè)置，開(kāi)關(guān)的視覺(jué)權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開(kāi)關(guān)打開(kāi)或關(guān)閉一組設(shè)置。
5) 通常不要用開(kāi)關(guān)替代復(fù)選框，如果在規(guī)范中定義了復(fù)選框，則盡可能保持一致的使用規(guī)范。
6）對(duì)象名稱要傳達(dá)清晰，讓用戶能夠明確感知操作后的動(dòng)作開(kāi)啟或關(guān)閉什么。
7）撥動(dòng)開(kāi)關(guān)的滑塊后如果狀態(tài)切換失敗，要馬上彈回來(lái)。
8）開(kāi)關(guān)的規(guī)范做法是滑塊在左為“關(guān)”狀態(tài)，在右邊為“開(kāi)”。
9）由于開(kāi)關(guān)會(huì)立即執(zhí)行，所以若是危險(xiǎn)的操作需要用戶再次確認(rèn)。
1）開(kāi)關(guān)的文本內(nèi)容意思需傳達(dá)清晰開(kāi)關(guān)主體的信息和按鈕是分離的，和單選、復(fù)選框不一樣。
用戶在點(diǎn)擊開(kāi)關(guān)按鈕前，必須清晰告知用戶點(diǎn)擊后會(huì)發(fā)生什么，有時(shí)需要通過(guò)增加副標(biāo)題文字內(nèi)容來(lái)加以說(shuō)明。
2）立即生效的場(chǎng)景一般使用開(kāi)關(guān)組件
在表單填寫時(shí)，往往最終會(huì)有「提交」按鈕作為結(jié)束態(tài)，開(kāi)關(guān)作為表單字段的填寫，用戶點(diǎn)擊后并不能夠立即生效，而是需要再次點(diǎn)擊「提交」按鈕，這樣處理會(huì)讓開(kāi)關(guān)的特點(diǎn)所滯后。所以開(kāi)關(guān)組件應(yīng)該提供即時(shí)生效的結(jié)果，它們不應(yīng)該要求用戶單擊保存或者提交按鈕來(lái)應(yīng)用新?tīng)顟B(tài)。
開(kāi)關(guān)的視覺(jué)權(quán)重較高，在復(fù)雜的表單信息中，它能夠快速吸引用戶注意力，給用戶以視覺(jué)提醒。
4）避免大面積使用開(kāi)關(guān)，可使用它控制局部細(xì)節(jié)或者次要設(shè)置
開(kāi)關(guān)在視覺(jué)感知上和按鈕有些接近，所以盡可能避免在表單中大量使用開(kāi)關(guān)來(lái)控制局部層級(jí)內(nèi)容，推薦使用復(fù)選框來(lái)替代開(kāi)關(guān)作為局部?jī)?nèi)容控制。
5）作為高層級(jí)內(nèi)容控制或信息設(shè)置
開(kāi)關(guān)作為總控制來(lái)顯示更高層級(jí)內(nèi)容，避免web表單中過(guò)多使用開(kāi)關(guān)按鈕，會(huì)和其他的基本組件造成視覺(jué)干擾。少量使用既凸顯其重要性，又能提升用戶瀏覽表單的效率。
6）避免寫“開(kāi)啟/關(guān)閉”帶動(dòng)詞含義的字在組件上
如果要將說(shuō)明文本放在按鈕里面，它們會(huì)讓人搞不懂是表示當(dāng)前狀態(tài)還是表示切換后的狀態(tài)，此時(shí)如果圖形本身狀態(tài)辨認(rèn)度較低，就會(huì)使這個(gè)問(wèn)題尤為嚴(yán)重。所以，在設(shè)計(jì)開(kāi)關(guān)時(shí)，一定要分別用艷麗和暗淡的顏色來(lái)表示開(kāi)和關(guān)狀態(tài)。
用戶有可能不知道當(dāng)前點(diǎn)擊狀態(tài)到底是開(kāi)啟還是關(guān)閉。我們可以使用文案輔助來(lái)清晰地傳達(dá)意圖和反饋。如以下場(chǎng)景，在文案中添加【開(kāi)啟】二字結(jié)合開(kāi)關(guān)按鈕使用，能有效減少用戶對(duì)于按鈕與文案之間關(guān)系的思考。請(qǐng)勿使用文案是“關(guān)閉”作為開(kāi)啟的語(yǔ)序，增加理解成本。
1）選擇控件的已選狀態(tài)應(yīng)該要比未選狀態(tài)更加醒目。
2）我們把選擇控件所代表的內(nèi)容稱為標(biāo)簽，標(biāo)簽文本都應(yīng)該簡(jiǎn)潔易懂，
避免使用否定詞匯，否則用戶還需要繞彎理解。開(kāi)關(guān)標(biāo)簽被誤解尤為常見(jiàn)，如“請(qǐng)勿打開(kāi)”、“補(bǔ)光燈關(guān)閉“、“延時(shí)關(guān)閉”這些都是不好的，它們都有否定詞。
3）把控件圖標(biāo)+文字一起作為可點(diǎn)擊區(qū)域，會(huì)使用戶操作更方便。
1）單選組件承載的信息量較多，如果希望用戶對(duì)比感知到兩者信息的明顯不同，那么推薦使用單選組件。
2） 復(fù)選框組件適用和拓展性極強(qiáng)，即可以單獨(dú)作為設(shè)置使用，也不用配合其他提交按鈕作為表單填寫的一部分。
3）開(kāi)關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時(shí)，需要頁(yè)面清晰、避免過(guò)多的視覺(jué)突出，所以盡量避免讓無(wú)數(shù)個(gè)開(kāi)關(guān)組件在表單中使用。
理論只是指導(dǎo)實(shí)踐的一部分，上述內(nèi)容方法可能只在用戶認(rèn)知和易用性之間，找到一個(gè)相對(duì)平衡點(diǎn)，在未來(lái)的設(shè)計(jì)中具體的使用場(chǎng)景情況，還是要具體問(wèn)題具體分析。
文中主要概括總結(jié)了單選按鈕、復(fù)選框、開(kāi)關(guān)的使用規(guī)范及案例。設(shè)計(jì)規(guī)范只是基于產(chǎn)品本身建立的一個(gè)標(biāo)準(zhǔn)，為了保持后續(xù)視覺(jué)統(tǒng)一而提供規(guī)范化的參考。
在實(shí)際的工作設(shè)計(jì)中，設(shè)計(jì)規(guī)范主要起到指導(dǎo)作用，每個(gè)產(chǎn)品需要根據(jù)各自的屬性特點(diǎn)和使用場(chǎng)景進(jìn)行靈活調(diào)整，讓組件規(guī)范個(gè)性化匹配自身產(chǎn)品的特點(diǎn)。
設(shè)計(jì)規(guī)范只是設(shè)計(jì)執(zhí)行中一個(gè)基本準(zhǔn)則和使用標(biāo)準(zhǔn)，遵循的同時(shí)既要根據(jù)各產(chǎn)品中不同的設(shè)計(jì)細(xì)節(jié)，查缺補(bǔ)漏、迭代優(yōu)化，將產(chǎn)品亮點(diǎn)與規(guī)范達(dá)到一種平衡，在標(biāo)準(zhǔn)的基礎(chǔ)上突出自身產(chǎn)品特點(diǎn)，讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處，望大家交流指正，一起探討學(xué)習(xí)。
作者：七色熒火
鏈接：https://www.zcool.com.cn/article/ZMTYzNTM4NA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
