網(wǎng)站建設中表單中的勾選框和開(kāi)關(guān)發(fā)布者：本站     時(shí)間：2022-05-08 10:05:19

創(chuàng )建表單時(shí)，交互設計師總是會(huì )面臨一個(gè)選擇，選用哪種UI元素來(lái)表示可選項的操作。當然，我們每個(gè)人都有自己的法則。但是，在選用可選項控件時(shí)，仍然要多加考慮。

可選項可以用勾選框、開(kāi)關(guān)、單選框和下拉菜單表示。選擇得當的話(huà)，任何一種都非常出色。本文中，我們重點(diǎn)關(guān)注勾選框和開(kāi)關(guān)。

勾選框
勾選框用在一系列選項中，用戶(hù)可以選擇任意數量，包括0個(gè)、1個(gè)，或者許多個(gè)。換言之，每個(gè)勾選框在列表中都是相互獨立的，勾上一個(gè)框并不會(huì )取消其他選項。

表單中的勾選框和開(kāi)關(guān)

帶有標簽的勾選框

開(kāi)關(guān)
開(kāi)關(guān)組件是在仿照物理開(kāi)關(guān)，讓用戶(hù)打開(kāi)或關(guān)閉某個(gè)項目。

表單中的勾選框和開(kāi)關(guān)

開(kāi)關(guān)提供了兩種簡(jiǎn)單直接的對立選項

開(kāi)關(guān)組件通常用于表現一個(gè)動(dòng)作（例如開(kāi)始或停止某個(gè)操作）。它類(lèi)似于電燈開(kāi)關(guān)：

表單中的勾選框和開(kāi)關(guān)

開(kāi)關(guān)通常用在電燈開(kāi)關(guān)上

勾選框和開(kāi)關(guān)的最佳實(shí)踐
使用標準的視覺(jué)表現
勾選框應當是一個(gè)小方框，選中時(shí)有一個(gè)勾，或者一個(gè)叉。

表單中的勾選框和開(kāi)關(guān)

選中和未選中的勾選框組件。圖片來(lái)源：Material Design

開(kāi)關(guān)應當看起來(lái)有開(kāi)和關(guān)的狀態(tài)

表單中的勾選框和開(kāi)關(guān)

選中和未選中狀態(tài)的開(kāi)關(guān)組件。圖片來(lái)源：Material Design

用戶(hù)在操作各種控件時(shí)，應當提供清晰的視覺(jué)反饋。細微的動(dòng)畫(huà)能讓體驗更細致——在移動(dòng)應用中尤其如此，

表單中的勾選框和開(kāi)關(guān)

iOS7/8的開(kāi)關(guān)按鈕。來(lái)源：Dribbble

縱向排列列表
縱向展示列表，每行一個(gè)選項。這對于開(kāi)關(guān)和勾選框都有效。如果一定要橫向排列，一行有多個(gè)選項，就要調整好按鈕和標簽的距離，哪個(gè)選項對應哪個(gè)標簽清晰明了。下面的例子中，元素之間的距離都太近了。

表單中的勾選框和開(kāi)關(guān)

很難確定選項4對應的到底是哪個(gè)選框

開(kāi)關(guān)的當前狀態(tài)應該在控件外面
設計開(kāi)關(guān)時(shí)，你應該避免狀態(tài)和操作的歧義。我們以iOS6的開(kāi)關(guān)設計為例，注意看寫(xiě)著(zhù)ON的藍色狀態(tài)按鈕。

表單中的勾選框和開(kāi)關(guān)

并不能確定標簽（例子中是“ON”）是指當前狀態(tài)，還是按下的操作

你能判斷按鈕當前是開(kāi)著(zhù)的嗎，或者拖動(dòng)滑塊、點(diǎn)擊、點(diǎn)按時(shí)會(huì )開(kāi)啟？“ON”在這里是個(gè)狀態(tài)（名詞）還是動(dòng)作（動(dòng)詞）？并不清楚。

不應該讓用戶(hù)感到困惑，區分出操作和狀態(tài)非常重要。實(shí)際上，高亮顯示當前狀態(tài)，能夠讓它更加友好。

表單中的勾選框和開(kāi)關(guān)

文字顏色表明了現在的狀態(tài)（亮起的是ON）

勾選框使用肯定的文案
使用肯定、有效的文案作為勾選框的標簽，用戶(hù)就很清楚如果勾上選框會(huì )發(fā)生什么。避免“不要給我發(fā)郵件”這樣的否定文案，這就意味著(zhù)用戶(hù)要勾上選框來(lái)阻止某些事發(fā)生。

表單中的勾選框和開(kāi)關(guān)

勾選框永遠都應該使用肯定的指令，不能用否定文案，例如“請勿……”

勾選框使用Label標簽，增大操作區域
所有的勾選框都有標簽，但并非都使用label標簽。勾選框本質(zhì)上很小，但是根據費茨定律，它們就很難點(diǎn)擊或者點(diǎn)按。要增大操作區域，讓用戶(hù)在點(diǎn)擊或點(diǎn)按標簽與相關(guān)文字時(shí)就能選中選項，而不僅僅是那個(gè)小方框。

表單中的勾選框和開(kāi)關(guān)

讓用戶(hù)通過(guò)點(diǎn)擊方框或它的標簽來(lái)選中選項

勾選框只用來(lái)改變設置，不能作為操作按鈕
作為一個(gè)二元選擇，勾選框和開(kāi)關(guān)的主要區別，是勾選框是狀態(tài)，而開(kāi)關(guān)是操作。如果一個(gè)操作適合用物理開(kāi)關(guān)表示，那么開(kāi)關(guān)可能就是最適合的控件。

下面的例子很明顯，在開(kāi)關(guān)中，無(wú)線(xiàn)網(wǎng)絡(luò )是開(kāi)著(zhù)的。但在勾選框里，用戶(hù)還需要思考無(wú)線(xiàn)網(wǎng)絡(luò )是否開(kāi)啟，是否需要勾選這個(gè)框來(lái)開(kāi)啟無(wú)線(xiàn)網(wǎng)絡(luò )。

表單中的勾選框和開(kāi)關(guān)

用開(kāi)關(guān)來(lái)開(kāi)啟或關(guān)閉服務(wù)或硬件組成，例如WIFI

勾選框和開(kāi)關(guān)的提交操作
勾選框的操作可以延后（例如作為表單的一部分），但開(kāi)關(guān)的操作應當立即觸發(fā)。

良好的用戶(hù)體驗，是立即改變開(kāi)關(guān)對應的設置項，而不是點(diǎn)按了“保存”或返回上個(gè)界面之后才保存。我們在現實(shí)生活中對開(kāi)關(guān)的期望就是如此（例如我們知道，按下開(kāi)關(guān)燈立刻就亮了）。

表單中的勾選框和開(kāi)關(guān)

iOS中的開(kāi)啟WIFI

當用戶(hù)必須執行額外步驟才能讓改變生效時(shí)，使用勾選框。