中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

創(chuàng)建表格的時(shí)候，交互設(shè)計(jì)師常常面臨著要去選擇一種UI元素，作為表格中“選項(xiàng)”的交互方式。當(dāng)然，我們也需要去遵守設(shè)計(jì)準(zhǔn)則。盡管如此，這里也有一些結(jié)論值得你記在心里：你想選擇哪種元素作為你的選項(xiàng)操作方式。

選項(xiàng)操作方式的選擇可以通過(guò)使用Checkboxes、Toggles、Radio buttons、Drop-downs這些來(lái)進(jìn)行選擇。只要你能正確使用它們，它們就是非常棒的。在本文中我們會(huì)講訴Chexkboxes和Toggles這兩種選項(xiàng)操作方式在設(shè)計(jì)中的應(yīng)用。

Checkboxes

當(dāng)列表里面有一系列信息需要用戶去選擇的時(shí)候，這里就需要使用Checkboxes。換句話來(lái)說(shuō)就是每一個(gè)選項(xiàng)都是獨(dú)立存在的，你選擇了其中一個(gè)就不需要去選擇其他的。

Checkboxes的標(biāo)簽

Toggles

Toggles就像現(xiàn)實(shí)生活中的開(kāi)關(guān)，它允許用戶去打開(kāi)或者關(guān)閉。

它提供了兩種截然相反的選擇Toggle一般表示一個(gè)動(dòng)作（比如：開(kāi)始或者停止一件事情）。比如燈的開(kāi)關(guān)。

Toggles 常常被應(yīng)用于燈的開(kāi)關(guān)

Checkboxes和toggles的最佳應(yīng)用

用標(biāo)準(zhǔn)的可視化表示Checkboxes是一個(gè)小的正方形，且允許被標(biāo)記。（選擇的狀態(tài)）

Checkbox被選中和未被選中的狀態(tài)。 圖片來(lái)源于：MaterialDesignToggle看起來(lái)像一個(gè)開(kāi)/關(guān)的開(kāi)關(guān)。（操作的動(dòng)作）

Toggle被選中和未被選中的狀態(tài)。圖片來(lái)源于：Material Design用戶在使用選項(xiàng)操作的時(shí)候，應(yīng)該為他們提供清晰的視覺(jué)反饋信息。即使微妙的動(dòng)畫(huà)也會(huì)讓用戶感覺(jué)到它的獨(dú)特——即使對(duì)于在手機(jī)上的移動(dòng)APP，這些UI控件也是實(shí)實(shí)在在存在的。

Ios7/8的Toggle按鈕。來(lái)源于：Dribbble

垂直設(shè)計(jì)你的列表

盡量使用垂直的列表，保證每一行只有一個(gè)選擇。這個(gè)準(zhǔn)則適用于Toggles和Checkboxes.如果你必須在一行里面使用很多種選擇，那你要確保讓用戶清楚按鈕和文字標(biāo)簽的關(guān)系。下面的例子就是元素之間相隔太近了：

很難選擇到對(duì)應(yīng)的單選按鈕

Toggle的當(dāng)前狀態(tài)應(yīng)該能馬上看見(jiàn)

在你設(shè)計(jì)Toggles的時(shí)候，你要避免它的操作和當(dāng)前狀態(tài)讓用戶不明白。我們使用IOS 6的開(kāi)關(guān)設(shè)計(jì)作為一個(gè)例子，在下圖當(dāng)中，藍(lán)色狀態(tài)意味著開(kāi)著的狀態(tài)。

上圖這種方式不是很清楚這個(gè)標(biāo)簽的狀態(tài)，“on”是當(dāng)前狀態(tài)還是需要你去操作

你能說(shuō)出開(kāi)關(guān)“ON”是當(dāng)前的狀態(tài)嗎？如果你把這個(gè)按鈕移動(dòng)/點(diǎn)擊/滑動(dòng)到另一邊了？”O(jiān)N”是告訴你現(xiàn)在的狀態(tài)，還是告訴你需要移動(dòng)/點(diǎn)擊/滑動(dòng)這個(gè)操作的一個(gè)指示？我們大家都不是很清楚。

操作和狀態(tài)應(yīng)該有很明顯的區(qū)別，而你不應(yīng)該讓用戶對(duì)此感到迷惑。實(shí)際上，可以通過(guò)強(qiáng)調(diào)當(dāng)前狀態(tài)來(lái)提高用戶體驗(yàn)：

文字的顏色表明當(dāng)前的狀態(tài)（顏色變亮就是ON）

使用肯定的語(yǔ)言作為checkbox的標(biāo)簽

使用肯定的語(yǔ)言作為checkbox的標(biāo)簽，以便用戶打開(kāi)checkbox的時(shí)候清楚發(fā)生了什么事情。避免使用否定式語(yǔ)言的標(biāo)簽，比如“不要給我發(fā)送郵件”這意味著用戶不得不去點(diǎn)擊checkbox以防這件事發(fā)生。

Checkboxes應(yīng)該使用肯定的語(yǔ)言，而不是否定的語(yǔ)言

讓Checkbox的點(diǎn)擊目標(biāo)范圍擴(kuò)大

所有的checkboxes都有標(biāo)簽，但并不是所有的都能點(diǎn)擊標(biāo)簽。Checkboxes能點(diǎn)擊的區(qū)域是非常小的，根據(jù)菲茨定律，這樣小的區(qū)域是很難被用戶點(diǎn)中的。為了讓用戶方便去點(diǎn)擊，可以把這個(gè)點(diǎn)擊區(qū)域擴(kuò)大，比如說(shuō)點(diǎn)擊這個(gè)選項(xiàng)的標(biāo)簽或者相應(yīng)的文字一樣能夠選中某個(gè)區(qū)域。

讓你的用戶通過(guò)點(diǎn)擊它的標(biāo)簽或者checkbox也能被選中

使用checkboxes作為設(shè)置選項(xiàng)，而不是作為操作按鈕

checkbox和toggle開(kāi)關(guān)的主要區(qū)別就是：checkboxes是一種狀態(tài)，而toggle開(kāi)關(guān)是一種操作（動(dòng)作）。假如需要使用執(zhí)行某種操作的開(kāi)關(guān)，那么Toggle開(kāi)關(guān)是最好的選擇。

在下圖的例子中，當(dāng)把WIFI的開(kāi)關(guān)設(shè)置成“打開(kāi)”狀態(tài)的時(shí)候，使用Toggle是最清楚的了。但是如果使用Checkbox開(kāi)關(guān)的話，用戶需要思考當(dāng)前狀態(tài)WIFI是打開(kāi)的，還是需要去點(diǎn)擊才能讓W(xué)IFI打開(kāi)了。

使用Toggle開(kāi)關(guān)能讓用戶明白當(dāng)前狀態(tài)是開(kāi)還是關(guān)，比如WIFI

Checkbox和Toggle的交互

Checkbox和Toggle在交互上有些不同就是, 使用checkbox可以延遲它的時(shí)間（比如說(shuō)，在表格里，即使勾選了Checkbox,也需要你點(diǎn)擊提交按鈕，才會(huì)有反饋），而使用toggle會(huì)立馬有反饋。

使用Toggle這種的用戶體驗(yàn)會(huì)非常好，它不需要你按下一個(gè)操作后，還要去做“保存”的操作或者說(shuō)返回到前一級(jí)菜單去操作，所操作即所得。就像我們?cè)诂F(xiàn)實(shí)生活中使用家里的開(kāi)關(guān)一樣，你把燈的開(kāi)關(guān)打開(kāi)了，燈就亮了。

ios上的WIFI被打開(kāi)了而在使用checkbox的時(shí)候，用戶需要操作其他操作才會(huì)有效。

用戶必須點(diǎn)擊“提交”或者“下一步”按鈕，他之前做出的操作才會(huì)生效

總結(jié)

在你做設(shè)計(jì)的時(shí)候，讓你的元素保持一致性。按照設(shè)計(jì)標(biāo)準(zhǔn)，提高用戶體驗(yàn)，從而來(lái)預(yù)測(cè)你的用戶需要使用哪種方式來(lái)操作，并且用戶是如何操作的。相反，如果你違背設(shè)計(jì)標(biāo)準(zhǔn)，就會(huì)讓用戶感到頭疼。

作者：Nick Babich

原文鏈接：https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41#.vsh34uw4v

譯者：設(shè)計(jì)師Minz（公眾號(hào)：Designer_Minz），每周公眾號(hào)首發(fā)翻譯國(guó)外設(shè)計(jì)干貨

本文由 @設(shè)計(jì)師Minz 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。