本期翻譯的文章來自 Saadia Minhas,她總結(jié)了在的選擇表單組件時(shí)夫偶,復(fù)選框和開關(guān)的不同用法界睁。
表單提供了多種控件來方便用戶填寫,在設(shè)計(jì)表單的時(shí)候兵拢,在合適的地方使用正確的控件對設(shè)計(jì)師來說是一個挑戰(zhàn)翻斟。
復(fù)選框有三種狀態(tài):未選中,選中和不確定狀態(tài)说铃。最后一種狀態(tài)通常出現(xiàn)在一個父級選項(xiàng)底下有一組子選項(xiàng)访惜,這些子選項(xiàng)選中或者未選中都有的情況。
開關(guān)控件模擬了一個實(shí)物的開關(guān)腻扇,允許用戶打開或者關(guān)閉债热,就像燈的開關(guān)一樣。
按下開關(guān)控件其實(shí)是一個分為兩步的操作:選擇和執(zhí)行幼苛。而復(fù)選框僅僅只有一個選擇的操作窒篱,它的執(zhí)行需要另外的控件來輔助。
當(dāng)要決定到底使用開關(guān)還是復(fù)選框控件舶沿,最好是結(jié)合他們的使用情景墙杯,而不是僅僅看功能。
以下是一些在設(shè)計(jì)表單體驗(yàn)時(shí)如何選擇這兩個控件的案例和指導(dǎo)原則括荡。
案例1:即時(shí)響應(yīng)
在以下情況使用開關(guān)控件:
無需明確操作即可立即響應(yīng)應(yīng)用的設(shè)置
需要開/關(guān)或者顯示/隱藏功能區(qū)顯示結(jié)果的設(shè)置
用戶需要執(zhí)行而不需要審核或確認(rèn)的即時(shí)操作
案例2:確認(rèn)設(shè)置
在以下情況使用復(fù)選框:
應(yīng)用設(shè)置需要在提交之前由用戶確認(rèn)和審核
定義的設(shè)置需要在顯示結(jié)果之前執(zhí)行提交高镐,確定,下一步等操作
用戶必須執(zhí)行其他步驟才能使更改生效
案例3:多選
在以下情況使用復(fù)選框:
有多個選項(xiàng)可供選擇避消,用戶必須從中選擇一個或多個選項(xiàng)
單擊多個切換按鈕逐個切換低滩,每次單擊后查看結(jié)果都需要額外的時(shí)間
案例4:不確定的狀態(tài)
以下情況使用復(fù)選框:
當(dāng)一個父選項(xiàng)底下有多個子選項(xiàng)時(shí),會出現(xiàn)不確定的選擇狀態(tài)岩喷,這種狀態(tài)下恕沫,子選項(xiàng)只有個別被選中,并不是全選中
案例5:清晰的視覺狀態(tài)
以下情況選擇復(fù)選框:
在使用開關(guān)控件時(shí)會出現(xiàn)這樣一個令人疑惑的情況纱意,有時(shí)它很難讓人分清楚開關(guān)是在表示目前的狀態(tài)還是動作
需要提供明確的選定或未選擇狀態(tài)時(shí)
案例6:相關(guān)的條目
以下情況使用復(fù)選框:
用戶必須從相關(guān)的列表中選擇時(shí)
以下情況使用開關(guān)控件:
用戶在切換獨(dú)立的功能和行為時(shí)
案例7:獨(dú)立的選項(xiàng)
以下情況使用復(fù)選框:
提供一個單獨(dú)的是/否選擇時(shí)
只有一個行為可以選擇或者取消,并且含義明確
以下情況使用開關(guān)控件:
需要進(jìn)行單一選擇偷霉,并且你希望為開/關(guān)類型提供兩個選項(xiàng)
結(jié)論
在表單中合適的地方提供適當(dāng)?shù)慕M件對于友好的用戶體驗(yàn)來說非常重要迄委。因?yàn)楸韱慰赡芊浅iL而且有大量的選項(xiàng),所以對于用戶來說讓他做一些額外的操作來填寫表單是很乏味的类少。本文提供的案例和指南將幫助你叙身,在向表單添加控件時(shí)決定該選擇復(fù)選框還是開關(guān)控件。