Checkbox和Toggle在設(shè)計中的應(yīng)用

1、Checkbox和Toggle在設(shè)計中的應(yīng)用創(chuàng)建表格的時候，交互設(shè)計師常常面臨著要去選擇一種UI元素，作為表格中“選項”的交互方式。當(dāng)然，我們也需要去遵守設(shè)計準(zhǔn)則。盡管如此，這里也有一些結(jié)論值得你記在心里：你想選擇哪種元素作為你的選項操作方式。 選項操作方式的選擇可以通過使用Checkboxes、Toggles、Radio buttons、Drop-downs這些來進(jìn)行選擇。只要你能正確使用它們，它們就是非常棒的。在本文中我們會講訴Chexkboxes和Toggles這兩種選項操作方式在設(shè)計中的應(yīng)用。Checkboxes 當(dāng)列表里面有一系列信息需要用戶去選擇的時候，這里就需要使用Checkbo

2、xes。換句話來說就是每一個選項都是獨立存在的，你選擇了其中一個就不需要去選擇其他的。 Checkboxes的標(biāo)簽Toggles Toggles就像現(xiàn)實生活中的開關(guān)，它允許用戶去打開或者關(guān)閉。 它提供了兩種截然相反的選擇Toggle一般表示一個動作（比如：開始或者停止一件事情）。比如燈的開關(guān)。 Toggles 常常被應(yīng)用于燈的開關(guān)Checkboxes和toggles的最佳應(yīng)用 用標(biāo)準(zhǔn)的可視化表示Checkboxes是一個小的正方形，且允許被標(biāo)記。（選擇的狀態(tài)） Checkbox被選中和未被選中的狀態(tài)。 圖片來源于：MaterialDesignToggle看起來像一個開/關(guān)的開關(guān)。（操作的動作）

3、 Toggle被選中和未被選中的狀態(tài)。圖片來源于：Material Design用戶在使用選項操作的時候，應(yīng)該為他們提供清晰的視覺反饋信息。即使微妙的動畫也會讓用戶感覺到它的獨特即使對于在手機(jī)上的移動APP，這些UI控件也是實實在在存在的。 Ios7/8的Toggle按鈕。來源于：Dribbble垂直設(shè)計你的列表 盡量使用垂直的列表，保證每一行只有一個選擇。這個準(zhǔn)則適用于Toggles和Checkboxes.如果你必須在一行里面使用很多種選擇，那你要確保讓用戶清楚按鈕和文字標(biāo)簽的關(guān)系。下面的例子就是元素之間相隔太近了： 很難選擇到對應(yīng)的單選按鈕 Toggle的當(dāng)前狀態(tài)應(yīng)該能馬上看見 在你設(shè)計T

4、oggles的時候，你要避免它的操作和當(dāng)前狀態(tài)讓用戶不明白。我們使用IOS 6的開關(guān)設(shè)計作為一個例子，在下圖當(dāng)中，藍(lán)色狀態(tài)意味著開著的狀態(tài)。 上圖這種方式不是很清楚這個標(biāo)簽的狀態(tài)，“on”是當(dāng)前狀態(tài)還是需要你去操作 你能說出開關(guān)“ON”是當(dāng)前的狀態(tài)嗎？如果你把這個按鈕移動/點擊/滑動到另一邊了？”O(jiān)N”是告訴你現(xiàn)在的狀態(tài)，還是告訴你需要移動/點擊/滑動這個操作的一個指示？我們大家都不是很清楚。 操作和狀態(tài)應(yīng)該有很明顯的區(qū)別，而你不應(yīng)該讓用戶對此感到迷惑。實際上，可以通過強調(diào)當(dāng)前狀態(tài)來提高用戶體驗： 文字的顏色表明當(dāng)前的狀態(tài)（顏色變亮就是ON）使用肯定的語言作為checkbox的標(biāo)簽 使用肯定的

5、語言作為checkbox的標(biāo)簽，以便用戶打開checkbox的時候清楚發(fā)生了什么事情。避免使用否定式語言的標(biāo)簽，比如“不要給我發(fā)送郵件”這意味著用戶不得不去點擊checkbox以防這件事發(fā)生。 Checkboxes應(yīng)該使用肯定的語言，而不是否定的語言 讓Checkbox的點擊目標(biāo)范圍擴(kuò)大 所有的checkboxes都有標(biāo)簽，但并不是所有的都能點擊標(biāo)簽。Checkboxes能點擊的區(qū)域是非常小的，根據(jù)菲茨定律，這樣小的區(qū)域是很難被用戶點中的。為了讓用戶方便去點擊，可以把這個點擊區(qū)域擴(kuò)大，比如說點擊這個選項的標(biāo)簽或者相應(yīng)的文字一樣能夠選中某個區(qū)域。 讓你的用戶通過點擊它的標(biāo)簽或者checkbox也

6、能被選中使用checkboxes作為設(shè)置選項，而不是作為操作按鈕 checkbox和toggle開關(guān)的主要區(qū)別就是：checkboxes是一種狀態(tài)，而toggle開關(guān)是一種操作（動作）。假如需要使用執(zhí)行某種操作的開關(guān)，那么Toggle開關(guān)是最好的選擇。 在下圖的例子中，當(dāng)把WIFI的開關(guān)設(shè)置成“打開”狀態(tài)的時候，使用Toggle是最清楚的了。但是如果使用Checkbox開關(guān)的話，用戶需要思考當(dāng)前狀態(tài)WIFI是打開的，還是需要去點擊才能讓W(xué)IFI打開了。 使用Toggle開關(guān)能讓用戶明白當(dāng)前狀態(tài)是開還是關(guān)，比如WIFICheckbox和Toggle的交互 Checkbox和Toggle在交互上有些不同就是, 使用checkbox可以延遲它的時間（比如說，在表格里，即使勾選了Checkbox,也需要你點擊提交按鈕，才會有反饋），而使用toggle會立馬有反饋。 使用Toggle這種的用戶體驗會非常好，它不需要你按下一個操作后，還要去做“保存”的操作或者說返回到前一級菜單去操作，所操作即所得。就像我們在現(xiàn)實生活中使用家里的開關(guān)一樣，你把燈的開關(guān)打開了，燈就亮了。 ios上的WIFI被打開了而在使用checkbox的時候，用戶需要操作其他操作才會有效。 用戶必須點擊“提交”或者“下一步”按鈕，他