創(chuàng)立表單時,交互規(guī)劃師總是會面對一個挑選,選用哪種UI元從來表明可選項的操作。當然,咱們每個人都有自個的規(guī)律??墒?,在選用可選項控件時,依然要多加考慮。
可選項能夠用勾選框、開關(guān)、單選框和下拉菜單表明。挑選妥當?shù)脑?,任何一種都十分超卓。本文中,海淘科技表示要重視勾選框和開關(guān)。
勾選框用在一系列選項中,用戶能夠挑選恣意數(shù)量,包括0個、1個,或許許多個。換言之,每個勾選框在列表中都是彼此獨立的,勾上一個框并不會撤銷其他選項。
帶有標簽的勾選框
開關(guān)組件是在仿照物理開關(guān),讓用戶打開或封閉某個項目。
開關(guān)供給了兩種簡略直接的對立選項
開關(guān)組件一般用于體現(xiàn)一個動作(例如開始或停止某個操作)。它類似于電燈開關(guān):
開關(guān)一般用在電燈開關(guān)上
勾選框和開關(guān)的最好實習(xí)
勾選框應(yīng)當是一個小方框,選中時有一個勾,或許一個叉。
選中和未選中的勾選框組件。
開關(guān)應(yīng)當看起來有開和關(guān)的狀況
選中和未選中狀況的開關(guān)組件。
用戶在操作各種控件時,應(yīng)當供給明晰的視覺反應(yīng)。纖細的動畫能讓體會更細致——在移動運用中特別如此,
iOS7/8的開關(guān)按鈕。
縱向擺放列表
縱向展示列表,每行一個選項。這關(guān)于開關(guān)和勾選框都有用。假如一定要橫向擺放,一行有多個選項,就要調(diào)整好按鈕和標簽的間隔,哪個選項對應(yīng)哪個標簽明晰明晰。下面的比如中,元素之間的間隔都太近了。
很難斷定選項4對應(yīng)的到底是哪個選框
開關(guān)的當時狀況應(yīng)該在控件外面
規(guī)劃開關(guān)時,你應(yīng)該防止狀況和操作的歧義。咱們以iOS6的開關(guān)規(guī)劃為例,注意看寫著ON的藍色狀況按鈕。
并不能斷定標簽(比如中是“ON”)是指當時狀況,仍是按下的操作
你能判斷按鈕當時是開著的嗎,或許拖動滑塊、點擊、點按時會敞開?“ON”在這里是個狀況(名詞)仍是動作(動詞)?并不明白。
不應(yīng)該讓用戶感到迷惑,差異出操作和狀況十分重要。實際上,高亮顯現(xiàn)當時狀況,能夠讓它更加友愛。
文字色彩表明晰如今的狀況(亮起的是ON)
運用必定、有用的案牘作為勾選框的標簽,用戶就很明白假如勾上選框會發(fā)作什么。防止“不要給我發(fā)郵件”這么的否定案牘,這就意味著用戶要勾上選框來阻撓某些事發(fā)作。
勾選框永久都應(yīng)該運用必定的指令,不能用否定案牘,例如“請勿……”
勾選框運用Label標簽,增大操作區(qū)域
一切的勾選框都有標簽,但并非都運用label標簽。勾選框本質(zhì)上很小,可是依據(jù)費茨規(guī)律,它們就很難點擊或許點按。要增大操作區(qū)域,讓用戶在點擊或點按標簽與有關(guān)文字時就能選中選項,而不僅僅是那個小方框。
讓用戶通過點擊方框或它的標簽來選中選項
勾選框只用來改動設(shè)置,不能作為操作按鈕
作為一個二元挑選,勾選框和開關(guān)的首要差異,是勾選框是狀況,而開關(guān)是操作。假如一個操作適合用物理開關(guān)表明,那么開關(guān)也許即是最適合的控件。
下面的比如很明顯,在開關(guān)中,無線網(wǎng)絡(luò)是開著的。但在勾選框里,用戶還需要考慮無線網(wǎng)絡(luò)是不是敞開,是不是需要勾選這個框來敞開無線網(wǎng)絡(luò)。
用開關(guān)來敞開或封閉效勞或硬件構(gòu)成,例如WIFI
勾選框和開關(guān)的提交操作
勾選框的操作能夠延后(例如作為表單的一部分),但開關(guān)的操作應(yīng)當當即觸發(fā)。
杰出的用戶體會,是當即改動開關(guān)對應(yīng)的設(shè)置項,而不是點按了“保留”或回來上個界面以后才保留。咱們在現(xiàn)實生活中對開關(guān)的期望即是如此(例如咱們知道,按下開關(guān)燈馬上就亮了)。
當用戶有必要履行額外過程才干讓改動收效時,運用勾選框。
當用戶有必要點擊“提交”或“下一步”按鈕,修正才干收效時,選用勾選框
規(guī)劃界面設(shè)計時,交互元素的挑選要保持一致、可預(yù)期。遵循規(guī)劃規(guī)范,能讓用戶非常好猜測控件的功用、怎么操作。相反,違背規(guī)范會讓界面感覺很軟弱——好像會毫無征兆發(fā)作任何事情。