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

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

可選項可以用勾選框、開關(guān)、單選框和下拉菜單表示。選擇得當(dāng)?shù)脑?，任何一種都非常出色。本文中，我們重點關(guān)注勾選框和開關(guān)。

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

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

帶有標(biāo)簽的勾選框

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

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

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

開關(guān)組件通常用于表現(xiàn)一個動作（例如開始或停止某個操作）。它類似于電燈開關(guān)：

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

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

勾選框和開關(guān)的最佳實踐
使用標(biāo)準(zhǔn)的視覺表現(xiàn)
勾選框應(yīng)當(dāng)是一個小方框，選中時有一個勾，或者一個叉。

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

選中和未選中的勾選框組件。圖片來源：Material Design

開關(guān)應(yīng)當(dāng)看起來有開和關(guān)的狀態(tài)

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

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

用戶在操作各種控件時，應(yīng)當(dāng)提供清晰的視覺反饋。細(xì)微的動畫能讓體驗更細(xì)致——在移動應(yīng)用中尤其如此，

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

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

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

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

很難確定選項4對應(yīng)的到底是哪個選框

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

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

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

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

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

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

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

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

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

勾選框永遠(yuǎn)都應(yīng)該使用肯定的指令，不能用否定文案，例如“請勿……”

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

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

讓用戶通過點擊方框或它的標(biāo)簽來選中選項

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

下面的例子很明顯，在開關(guān)中，無線網(wǎng)絡(luò)是開著的。但在勾選框里，用戶還需要思考無線網(wǎng)絡(luò)是否開啟，是否需要勾選這個框來開啟無線網(wǎng)絡(luò)。

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

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

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

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

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

iOS中的開啟WIFI

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