UI組件系列:選擇控件

6 評論 20762 瀏覽 156 收藏 11 分鐘

編輯導(dǎo)讀:開關(guān)不僅是生活中必不可少的組件,在產(chǎn)品設(shè)計(jì)中的地位也是非常重要。本文作者基于自身工作經(jīng)驗(yàn),圍繞選擇控件展開分析,希望對你有幫助。

“toggle”這個(gè)詞是指一個(gè)帶有短柄的開關(guān),每次啟動(dòng)時(shí),它都會(huì)在兩種狀態(tài)之間切換,每次 “開關(guān) “車燈的時(shí)候都會(huì)使用上它。

至于“Radio Buttons”這個(gè)詞來自于汽車收音機(jī),通常的做法是在儀表盤下有一組按鈕,可以機(jī)械地存儲(chǔ)電臺(tái)預(yù)設(shè),以便用戶更快地在電臺(tái)之間切換。按下其中一個(gè)按鈕會(huì)使其保持向下,直到按下另一個(gè)按鈕,才會(huì)彈出。

一、選擇類控件的類型

復(fù)選框(Checkboxes)—— 當(dāng)有一個(gè)或多個(gè)獨(dú)立選項(xiàng)時(shí),用戶可以選擇任意數(shù)量的選項(xiàng),包括零個(gè)、一個(gè)或多個(gè)選項(xiàng)。

單選按鈕(Radio Buttons)—— 當(dāng)有兩個(gè)或更多互斥的選項(xiàng)時(shí),用戶只能選擇其中一個(gè)時(shí)。

切換開關(guān)(Toggle Switches)—— 當(dāng)有兩個(gè)互斥選項(xiàng)并且總是有一個(gè)默認(rèn)值時(shí)使用。撥動(dòng)開關(guān)即立即生效。

選擇標(biāo)簽(Choice Chips)—— 是單選按鈕的一個(gè)替代方案。包含至少兩個(gè)選項(xiàng),選擇標(biāo)簽代表用戶可以做出的單一選擇。

多選標(biāo)簽(Multi-select chips)—— 是復(fù)選框的一個(gè)替代方案。允許用戶選擇多個(gè)選項(xiàng),主要用于移動(dòng)端上進(jìn)行篩選。

選擇類型的控件在用戶界面中已經(jīng)使用了很長一段時(shí)間,所以我們對它們的行為有了強(qiáng)烈的期望。下面是一個(gè)簡單的備忘單,你可以根據(jù)它為正確的情況選擇正確的類型。

怎么樣知道什么時(shí)候該使用什么類型的控件?

上圖的靈感來源于Nilsen Norman Group的文章“復(fù)選框 vs. 單選按鈕”(注:上圖看不懂的同學(xué)可以看下圖)。

二、選擇類控件的狀態(tài)

復(fù)選框和單選按鈕可以選擇或取消選擇,切換開關(guān)可以關(guān)閉或開啟。所有這些都有啟用、禁用、懸停、聚焦和按下狀態(tài)。我知道這看起來很多,但是為了可靠的交互,創(chuàng)建所有這些狀態(tài)是好的。

選擇類控件的狀態(tài)

三、不要忘記為“不確定(indeterminate)”設(shè)計(jì)不同狀態(tài)

“indeterminate”表現(xiàn)為既不勾選也不取消勾選的復(fù)選框的狀態(tài)。該狀態(tài)并非完全肯定,因此命名為“indeterminate”??梢岳斫鉃楫?dāng)一個(gè)父復(fù)選框有多個(gè)子復(fù)選框時(shí),有些子復(fù)選框被選中,有些則未被選中。

“indeterminate”的不同狀態(tài)

四、禁止濫用切換開關(guān)

不要為切換開關(guān)創(chuàng)建層次結(jié)構(gòu)。這在視覺上更容易分散注意力,而且會(huì)造成一種錯(cuò)誤的印象,即所有的子選項(xiàng)都是開著/關(guān)著的。

實(shí)用技巧:禁止濫用開關(guān)按鈕。

五、當(dāng)選擇即生效時(shí),請使用開關(guān)

切換開關(guān)是一種數(shù)字開關(guān)。任何由切換開關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣,最好用單個(gè)復(fù)選框替換切換開關(guān)。

實(shí)用技巧:當(dāng)選擇即將生效時(shí),請使用切換開關(guān)。

六、不符合當(dāng)下設(shè)計(jì)標(biāo)準(zhǔn)的樣式會(huì)使用戶困惑

任何偏離你所設(shè)計(jì)的平臺(tái)標(biāo)準(zhǔn)的行為都會(huì)給用戶帶來額外的認(rèn)知負(fù)擔(dān),我經(jīng)??吹綀A形復(fù)選框很容易與單選按鈕混淆。

實(shí)用技巧:不符合當(dāng)下標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)混淆用戶的感觀。

七、在垂直列表中顯示選項(xiàng)將幫助用戶輕松地掃描它們

左側(cè)對齊的控件和標(biāo)簽將發(fā)揮最佳效果,因?yàn)樗鼈兿嗷ブg的位置緊密,這將最快的支持完成時(shí)間并減少較少的錯(cuò)誤。

但是右對齊的控件在移動(dòng)端有一些好處,因?yàn)闃?biāo)簽和按鈕之間不能相隔太遠(yuǎn),讓按鈕靠近右側(cè)邊緣,使得單手握住設(shè)備時(shí)更容易觸及。同時(shí),我們在選擇時(shí)也不會(huì)用手指遮擋標(biāo)簽。

實(shí)用技巧:左對齊的控件和標(biāo)簽效果最好。

八、如果垂直空間出問題,考慮標(biāo)簽

你應(yīng)該防止出現(xiàn)很難看清選擇哪個(gè)控件的情況(確保按鈕和文本標(biāo)簽的間距),可以考慮使用選擇標(biāo)簽以此來在視覺上清晰地分隔選項(xiàng)。

實(shí)用技巧:當(dāng)垂直空間出現(xiàn)問題,可以考慮使用選擇標(biāo)簽。

九、如果可以的話,使用單選按鈕而不是下拉菜單

讓所有選項(xiàng)都可見,使用戶可以方便地進(jìn)行比較,這樣可以減少認(rèn)知負(fù)荷,幫助表單也更加透明。

實(shí)用技巧:如果只有幾個(gè)選項(xiàng),請使用單選按鈕。

十、對數(shù)量多或類似的選項(xiàng)使用下拉菜單

如果選項(xiàng)的數(shù)量超過6-7個(gè),你應(yīng)該考慮把它們放在下拉列表中,因?yàn)橛脩魺o論如何都無法記住所有的選項(xiàng)。這同樣適用于可預(yù)測的、類似的或增量的選項(xiàng),如(縮放- 10%、20%、30% )。

實(shí)用技巧:為數(shù)量較多且相類似的選項(xiàng)選擇用下拉菜單整合。

十一、在默認(rèn)情況下最好有一個(gè)選中的單選按鈕

一旦選擇了一個(gè)單選按鈕,用戶可能就不能取消選擇,也不能將其設(shè)置回原來的狀態(tài)。如果用戶不想做選擇,你應(yīng)該提供一個(gè)標(biāo)有 “無 “的單選按鈕。按邏輯順序設(shè)計(jì)選項(xiàng)列表,并利用“默認(rèn)”的能力。

實(shí)用技巧:在大多數(shù)情況下,默認(rèn)選擇一個(gè)單選按鈕。

十二、寫清楚文本標(biāo)簽,避免否定詞

避免用戶為了避免某些事情發(fā)生而需要打勾的情況。

實(shí)用技巧:寫清文本標(biāo)簽,避免否定詞語。

十三、高亮顯示選中的選項(xiàng)以吸引用戶的注意

在視覺上區(qū)分所選選項(xiàng)與其他選項(xiàng),這對于數(shù)據(jù)表中的行選擇尤其重要。

實(shí)用技巧:高亮顯示所選選項(xiàng)以此吸引用戶的注意。

十四、支持批量選擇和清除

一次選擇或清除多個(gè)項(xiàng)目對用戶來說應(yīng)該是毫不費(fèi)力的。

實(shí)用技巧:設(shè)計(jì)成支持批量選擇和清除多個(gè)選項(xiàng)的列表。

十五、使可點(diǎn)擊區(qū)域足夠大,以實(shí)現(xiàn)可靠的交互

熱區(qū)中可點(diǎn)擊/可點(diǎn)擊區(qū)域中應(yīng)同時(shí)包含按鈕和標(biāo)簽。根據(jù)菲茨定律,目標(biāo)的大小起著重要作用。復(fù)選框和單選按鈕一般都很小,點(diǎn)擊或點(diǎn)選會(huì)很麻煩,尤其是在移動(dòng)設(shè)備上。

實(shí)用技巧:使控件的可點(diǎn)擊區(qū)域足夠大,以便進(jìn)行可靠的交互

 

作者:LDesign1,公眾號(hào)ID:LDesign1

本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 優(yōu)秀

    來自陜西 回復(fù)
  2. 看到一篇抄你的文章,就在本站。

    來自安徽 回復(fù)
  3. 好實(shí)用哦,感謝作者!

    來自江蘇 回復(fù)
  4. 回復(fù)
  5. 非常的實(shí)用?。?!

    來自重慶 回復(fù)
  6. 這個(gè)還蠻實(shí)用貼心的,踩過不少坑~

    來自上海 回復(fù)