在UI界面中的14個(gè)按鈕和框架選擇的設(shè)計(jì)經(jīng)驗(yàn)

在UI界面中，我們可以看到各種開關(guān)按鈕和一些組件/控件，下面跟隨我們一起梳理14個(gè)按鈕和框架選擇的設(shè)計(jì)經(jīng)驗(yàn)，很實(shí)用的哦。

在UI界面中，各種開關(guān)、按鈕和框架選擇控制都是非常常見的組件。它們看起來并不復(fù)雜，但在實(shí)際使用中要注意很多。它們不僅關(guān)系到體驗(yàn)，還涉及一些界面邏輯問題。

單選按鈕（Radiobuttons），起源自汽車收音機(jī)的按鈕。舊的汽車控制面板上有一排機(jī)械按鈕，可以存儲預(yù)設(shè)電臺。用戶可以快速按下按鈕，切換不同的電臺。按下其中一個(gè)按鈕，其他按鈕就會彈起。這里的按鈕相互排斥，多個(gè)按鈕不能同時(shí)激活。

復(fù)選框(Checkboxes)通常有一個(gè)或多個(gè)選項(xiàng)供用戶選擇。復(fù)選框中的選項(xiàng)通常不相互排斥，用戶可以選擇一個(gè)或多個(gè)。

撥號開關(guān)(Toggle-Switch)是最常見的按鈕樣式，點(diǎn)擊即可切換狀態(tài)。

選擇按鈕(ChoiceChips)是單選按鈕的簡化模式，通常至少包含兩個(gè)選項(xiàng)，用戶可以選擇其中一個(gè)，選擇按鈕大多出現(xiàn)在移動(dòng)終端界面上。

多選按鈕(Multi-selectchips)是復(fù)選框的通用替代品，用戶可以選擇多個(gè)選項(xiàng)，而且這個(gè)按鈕大多用于移動(dòng)設(shè)備。

各種選擇控件在用戶界面已經(jīng)存在了很長一段時(shí)間，因此用戶對其功能、認(rèn)知和期望都很清楚。以下是一個(gè)非常簡單的列表，列出了大多數(shù)常見的選擇控件的類型和使用場景：

1、熟悉按鈕的不同顯示狀態(tài)

復(fù)選框和單選按鈕有兩種狀態(tài)：選擇和未選擇，撥動(dòng)開關(guān)有兩種狀態(tài)：打開和關(guān)閉。在實(shí)際使用過程中，它們都有不同的狀態(tài)，如啟用、禁用、懸停、聚焦和按壓。雖然這些狀態(tài)看起來很多，但它們涉及實(shí)際交互的需求和不同的場景，是實(shí)現(xiàn)可靠交互的基礎(chǔ)。

2、不要忘記未定狀

對于復(fù)選框，通常只有兩種狀態(tài)：選擇和未選擇。如果涉及多層次、有父子結(jié)構(gòu)的復(fù)選框體系，可能會因?yàn)檫x擇了復(fù)選框的一部分，而不選擇一部分，使得父復(fù)選框的狀態(tài)介于全選和未選之間，容易被忽略。

3、不要錯(cuò)用撥動(dòng)開關(guān)

當(dāng)涉及到層次結(jié)構(gòu)選項(xiàng)時(shí)，不要使用撥動(dòng)開關(guān)。它不僅在視覺上容易分散注意力，而且在使用時(shí)也容易導(dǎo)致誤判。

4、當(dāng)功能觸發(fā)立即生效時(shí)，使用撥動(dòng)開關(guān)。

撥動(dòng)開關(guān)是標(biāo)準(zhǔn)的數(shù)字開關(guān)功能。當(dāng)您使用撥動(dòng)開關(guān)時(shí)，確保其觸發(fā)的功能立即打開/關(guān)閉。如果沒有，最好使用單個(gè)復(fù)選框代替撥動(dòng)開關(guān)。

5、避免非常規(guī)的控件樣式。

按鈕風(fēng)格與整個(gè)平臺的傳統(tǒng)風(fēng)格相差太大，很容易帶來額外的認(rèn)知負(fù)擔(dān)。例如，圓形復(fù)選框很容易與傳統(tǒng)的單選按鈕混淆。

6、在列表中使用方便用戶掃讀的排版。

左對齊復(fù)選框+標(biāo)簽樣式效果最好。這保證了用戶能夠盡快理解和完成操作，減少了錯(cuò)誤的發(fā)生。事實(shí)上，右對齊復(fù)選框是可以的。在移動(dòng)終端上顯示也有優(yōu)勢——單手操作更容易選擇，點(diǎn)擊勾選時(shí)手指不會覆蓋標(biāo)簽內(nèi)容，但標(biāo)簽文本和復(fù)選框不能相距太遠(yuǎn)。

7、如果垂直空間不夠，請用按鈕代替選框。

使用選框控?fù)窨刂频膯栴}是它與相應(yīng)的標(biāo)簽分離。在垂直控制有限的情況下，水平排版將非常此時(shí)，用按鈕代替框架選擇要好得多。

8、盡量使用單選按鈕而不是下拉菜單。

使用單選按鈕可以使選項(xiàng)始終可見，方便用戶直觀比較和查看，從而減輕認(rèn)知負(fù)荷，使表單內(nèi)容更加清晰透明。

9、使用下拉菜單攜帶大量類似的選項(xiàng)。

如果選項(xiàng)超過6個(gè)，最好考慮放在下拉菜單中，因?yàn)橛脩魺o論如何都無法快速記住和比較所有選項(xiàng)，這也適用于大量類似或可預(yù)測的選項(xiàng)，如10%、20%、30%等。

10、單選按鈕最好提供默認(rèn)選項(xiàng)。

通常，一旦選擇了單選按鈕，用戶就不能取消選擇并恢復(fù)原狀態(tài)。因此，有些用戶可能不愿意做出選擇，此時(shí)應(yīng)該提供一個(gè)無選項(xiàng)。最好提供默認(rèn)選項(xiàng)并按邏輯順序排序。

11、使用清晰的文本標(biāo)簽內(nèi)容。

在文本標(biāo)簽內(nèi)容中，盡量不要使用否定的表達(dá)方式，這樣可以避免誤解，方便用戶正確理解內(nèi)容。

12、突出被選選項(xiàng)吸引用戶注意力。

在視覺上區(qū)分被選擇的選項(xiàng)尤為重要。

13、支持批量選擇和清除。

對于用戶來說，一次選擇和清除多個(gè)選項(xiàng)應(yīng)該是一件簡單而容易的事情，因此需要支持批量選擇和清除功能。

14、確保點(diǎn)擊熱區(qū)足夠大。

觸發(fā)熱區(qū)是確保用戶在移動(dòng)終端上交互的基礎(chǔ)，讓觸發(fā)熱區(qū)域包含重要信息，如按鈕、文本...，提升易用性，根據(jù)費(fèi)茨定律，點(diǎn)擊區(qū)域的大小對交互起到非常直接的影響。因?yàn)橐恍┛丶纾簭?fù)選框、單選的按鈕非常小，不太容易點(diǎn)擊準(zhǔn)確。