Checkbox和Toggle在設計中的應用

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

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

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

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

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

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