當(dāng)設(shè)計(jì)表單時(shí)框往，交互設(shè)計(jì)師常常不得不面對一個(gè)問題捉捅，就是要選擇出一個(gè)合適的界面元素好標(biāo)示出從多個(gè)選項(xiàng)中做出特定選擇這種交互。當(dāng)然习劫，我們都有可能遵循某種既定的規(guī)則咆瘟。無論如何，在做出這個(gè)選擇時(shí)我們都應(yīng)該牢記一些注意事項(xiàng)诽里。

要實(shí)現(xiàn)選擇特定的選項(xiàng)袒餐，我們可以選用復(fù)選框、開關(guān)按鈕谤狡、單選按鈕或者下拉框等控件灸眼。從中選擇出最合適的則往往能發(fā)揮巨大作用，在本文中墓懂，我們將關(guān)注復(fù)選框和開關(guān)按鈕焰宣。

一、復(fù)選框

復(fù)選框一般用在有多個(gè)選項(xiàng)時(shí)捕仔，用戶可以做出零個(gè)匕积、一個(gè)或者任意多個(gè)選擇。換句話說榜跌，復(fù)選框控件中的每個(gè)選項(xiàng)都是彼此獨(dú)立的闪唆，選擇一項(xiàng)后并不會(huì)排斥其他項(xiàng)。

復(fù)選框及其標(biāo)簽

二钓葫、開關(guān)按鈕

開關(guān)按鈕代表在物理上的ON/OFF狀態(tài)間進(jìn)行切換悄蕾。

開關(guān)支持兩個(gè)簡單的、完全對立的選擇

開關(guān)按鈕一般用來來標(biāo)示一個(gè)動(dòng)作（比如開始或停止一件事）础浮，其作用類似于實(shí)際生活中的燈控按鈕笼吟。

開關(guān)被普遍用在對點(diǎn)燈的控制上

三库物、復(fù)選框和開關(guān)按鈕的最佳實(shí)例

1、使用標(biāo)準(zhǔn)的可視化模型

一個(gè)復(fù)選框應(yīng)該是一個(gè)在選中狀態(tài)下有標(biāo)記符的小正方形贷帮。

選中和未選中狀態(tài)下的復(fù)選框

一個(gè)開關(guān)按鈕應(yīng)該看起來確實(shí)如一個(gè)ON/OFF類的開關(guān)戚揭。

選中和未選中狀態(tài)下的開關(guān)按鈕

你應(yīng)該給和用戶產(chǎn)生交互的控件一個(gè)清晰的視覺反饋效果。精妙的動(dòng)畫能夠讓用戶感覺到你在設(shè)計(jì)上的投入（愉悅用戶）撵枢，這對那些在現(xiàn)實(shí)中有映射的實(shí)體的控件尤為重要民晒，即使這些控件好像跟用戶間還隔著一層玻璃屏。

2锄禽、最好垂直布局你的各個(gè)選項(xiàng)

要試著讓你的多個(gè)選項(xiàng)間垂直排列潜必，每行顯示一個(gè)。這條規(guī)則對復(fù)選框和開關(guān)按鈕都適用沃但。如果你必須（非得）使用水平方向排列多個(gè)選項(xiàng)磁滚，請務(wù)必確保使按鈕跟標(biāo)簽間的距離合適，好讓用戶能區(qū)分出哪個(gè)按鈕對應(yīng)哪個(gè)標(biāo)簽宵晚。以下的例子中垂攘，元素間距太近：

很難看明白哪個(gè)按鈕和哪個(gè)標(biāo)簽是一組

3、開關(guān)按鈕的當(dāng)前狀態(tài)應(yīng)該標(biāo)示在其本身外面

設(shè)計(jì)開關(guān)按鈕時(shí)淤刃，重要的一點(diǎn)就是要必然按鈕狀態(tài)表達(dá)含糊不清晒他。我們拿iOS6中的開關(guān)設(shè)計(jì)來舉例：

不能清楚的表達(dá)“ON”是當(dāng)前狀態(tài)還是觸發(fā)的動(dòng)作

你能明白其中的“ON”表示的是當(dāng)前狀態(tài)還是移動(dòng)、點(diǎn)按之后才是“ON”狀態(tài)逸贾？這里的“ON”究竟指的是狀態(tài)（形容詞）還是你需要觸發(fā)的動(dòng)作（動(dòng)詞）陨仅？

你不應(yīng)該使用戶產(chǎn)生疑惑，而需要將狀態(tài)和動(dòng)作區(qū)分開來铝侵。事實(shí)上灼伤，這個(gè)設(shè)計(jì)能通過高亮顯示當(dāng)前狀態(tài)向用戶傳達(dá)出更強(qiáng)的友好性。

文本的顏色突出了當(dāng)前狀態(tài)

4咪鲜、請使用正向措辭表述復(fù)選框的標(biāo)簽

請使用正向措辭表述復(fù)選框的標(biāo)簽饺蔑，這樣用戶就能夠清楚的認(rèn)識到選中該選項(xiàng)后會(huì)發(fā)生什么。避免使用如“不要再發(fā)送郵件給我”這樣的否定語嗜诀，這意味著用戶不得不去修改選中狀態(tài)來判定前后的變化。

復(fù)選框標(biāo)簽應(yīng)該使用正向措辭孔祸，不要用像“不要...”這樣的語句

5隆敢、應(yīng)該使標(biāo)簽部分也可點(diǎn)擊

所有的復(fù)選框都標(biāo)簽，但并非所有的標(biāo)簽部分都作為選中熱區(qū)崔慧。復(fù)選框本身很小拂蝎，按照費(fèi)茨定律，它們很難被點(diǎn)按到惶室，因此温自，為了擴(kuò)大可點(diǎn)區(qū)域玄货，應(yīng)該將標(biāo)簽部分也歸入可點(diǎn)的熱區(qū)部分。

讓用戶能夠通過點(diǎn)擊復(fù)選框本身或標(biāo)簽達(dá)到選中效果

6悼泌、復(fù)選框僅用來修改設(shè)置項(xiàng)松捉，不作為操作按鈕

對一個(gè)二元選項(xiàng)來說，一個(gè)復(fù)選框和一個(gè)開關(guān)按鈕最大的不同在于前者用于標(biāo)示狀態(tài)馆里，后者用來指明動(dòng)作隘世。如果一個(gè)物理上的實(shí)體開關(guān)能執(zhí)行這個(gè)動(dòng)作，那開關(guān)按鈕便可能是最好的控件選擇鸠踪。

在下面的例子中丙者，開關(guān)按鈕很清晰的表明WiFi處于打開狀態(tài)，而使用復(fù)選框則導(dǎo)致用戶不得不去思考究竟當(dāng)前的WiFi已經(jīng)打開還是要取消選中后才對营密。

使用開關(guān)按鈕來切換服務(wù)或者硬件組成

7械媒、伴隨復(fù)選框和開關(guān)按鈕的交互

要表明復(fù)選框選中前后帶來的影響（比如復(fù)選框作為表單的一部分，你在點(diǎn)擊“提交”表單后才可能看到選中與否的不同）评汰，你可以延遲一定的步驟纷捞。 然而對于一個(gè)開關(guān)按鈕，則應(yīng)該在用戶切換后立刻顯示出不同键俱，而不是非得要等到用戶點(diǎn)擊“保存”兰绣、或回到前一個(gè)頁面才看到所有變化。這正如我們在現(xiàn)實(shí)生活中也有對于這類開關(guān)的期望一樣（例如我們都知道在將開關(guān)打開后電燈立刻就亮了）编振。

在iOS中打開WiFi

當(dāng)用戶需要執(zhí)行幾個(gè)動(dòng)作后才能看到因選項(xiàng)改變導(dǎo)致的不同時(shí)缀辩，可以考慮使用復(fù)選框。

用戶必須在點(diǎn)擊“submit”后才能看到選項(xiàng)的選中與否造成的影響

四踪央、結(jié)論

設(shè)計(jì)用戶界面時(shí)臀玄，盡量保證你所選擇的界面元素具有良好的一致性和可預(yù)見性。如果選擇遵循設(shè)計(jì)標(biāo)準(zhǔn)畅蹂，你的設(shè)計(jì)自然能夠增強(qiáng)用戶對控件功能和操作方法的可預(yù)見性健无。相反地，違反標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)導(dǎo)致這個(gè)界面破裂不堪——就好比如果不向用戶發(fā)出預(yù)警液斜，任何事情都可能發(fā)生一樣累贤。

譯自：https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41#.jqbjnhofd