「用戶體驗(yàn)設(shè)計(jì)」表單中的勾選框和開關(guān)

創(chuàng)立表單時(shí)，交互規(guī)劃師總是會(huì)面對(duì)一個(gè)挑選，選用哪種UI元從來表明可選項(xiàng)的操作。當(dāng)然，咱們每個(gè)人都有自個(gè)的規(guī)律?？墒?，在選用可選項(xiàng)控件時(shí)，依然要多加考慮。

可選項(xiàng)能夠用勾選框、開關(guān)、單選框和下拉菜單表明。挑選妥當(dāng)?shù)脑?，任何一種都十分超卓。本文中，創(chuàng)新互聯(lián)表示要重視勾選框和開關(guān)。

勾選框

勾選框用在一系列選項(xiàng)中，用戶能夠挑選恣意數(shù)量，包括0個(gè)、1個(gè)，或許許多個(gè)。換言之，每個(gè)勾選框在列表中都是彼此獨(dú)立的，勾上一個(gè)框并不會(huì)撤銷其他選項(xiàng)。

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

開關(guān)

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

開關(guān)供給了兩種簡(jiǎn)略直接的對(duì)立選項(xiàng)

開關(guān)組件一般用于體現(xiàn)一個(gè)動(dòng)作(例如開始或停止某個(gè)操作)。它類似于電燈開關(guān)：

開關(guān)一般用在電燈開關(guān)上

勾選框和開關(guān)的最好實(shí)習(xí)

運(yùn)用規(guī)范的視覺體現(xiàn)

勾選框應(yīng)當(dāng)是一個(gè)小方框，選中時(shí)有一個(gè)勾，或許一個(gè)叉。

選中和未選中的勾選框組件。

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

選中和未選中狀況的開關(guān)組件。

用戶在操作各種控件時(shí)，應(yīng)當(dāng)供給明晰的視覺反應(yīng)。纖細(xì)的動(dòng)畫能讓體會(huì)更細(xì)致——在移動(dòng)運(yùn)用中特別如此，

iOS7/8的開關(guān)按鈕。

縱向擺放列表

縱向展示列表，每行一個(gè)選項(xiàng)。這關(guān)于開關(guān)和勾選框都有用。假如一定要橫向擺放，一行有多個(gè)選項(xiàng)，就要調(diào)整好按鈕和標(biāo)簽的間隔，哪個(gè)選項(xiàng)對(duì)應(yīng)哪個(gè)標(biāo)簽明晰明晰。下面的比如中，元素之間的間隔都太近了。

很難斷定選項(xiàng)4對(duì)應(yīng)的到底是哪個(gè)選框

開關(guān)的當(dāng)時(shí)狀況應(yīng)該在控件外面

規(guī)劃開關(guān)時(shí)，你應(yīng)該防止?fàn)顩r和操作的歧義。咱們以iOS6的開關(guān)規(guī)劃為例，注意看寫著ON的藍(lán)色狀況按鈕。

并不能斷定標(biāo)簽(比如中是“ON”)是指當(dāng)時(shí)狀況，仍是按下的操作

你能判斷按鈕當(dāng)時(shí)是開著的嗎，或許拖動(dòng)滑塊、點(diǎn)擊、點(diǎn)按時(shí)會(huì)敞開?“ON”在這里是個(gè)狀況(名詞)仍是動(dòng)作(動(dòng)詞)?并不明白。

不應(yīng)該讓用戶感到迷惑，差異出操作和狀況十分重要。實(shí)際上，高亮顯現(xiàn)當(dāng)時(shí)狀況，能夠讓它更加友愛。

文字色彩表明晰如今的狀況(亮起的是ON)

勾選框運(yùn)用必定的案牘

運(yùn)用必定、有用的案牘作為勾選框的標(biāo)簽，用戶就很明白假如勾上選框會(huì)發(fā)作什么。防止“不要給我發(fā)郵件”這么的否定案牘，這就意味著用戶要勾上選框來阻撓某些事發(fā)作。

勾選框永久都應(yīng)該運(yùn)用必定的指令，不能用否定案牘，例如“請(qǐng)勿……”

勾選框運(yùn)用Label標(biāo)簽，增大操作區(qū)域

一切的勾選框都有標(biāo)簽，但并非都運(yùn)用label標(biāo)簽。勾選框本質(zhì)上很小，可是依據(jù)費(fèi)茨規(guī)律，它們就很難點(diǎn)擊或許點(diǎn)按。要增大操作區(qū)域，讓用戶在點(diǎn)擊或點(diǎn)按標(biāo)簽與有關(guān)文字時(shí)就能選中選項(xiàng)，而不僅僅是那個(gè)小方框。

讓用戶通過點(diǎn)擊方框或它的標(biāo)簽來選中選項(xiàng)

勾選框只用來改動(dòng)設(shè)置，不能作為操作按鈕

作為一個(gè)二元挑選，勾選框和開關(guān)的首要差異，是勾選框是狀況，而開關(guān)是操作。假如一個(gè)操作適合用物理開關(guān)表明，那么開關(guān)也許即是最適合的控件。

下面的比如很明顯，在開關(guān)中，無線網(wǎng)絡(luò)是開著的。但在勾選框里，用戶還需要考慮無線網(wǎng)絡(luò)是不是敞開，是不是需要勾選這個(gè)框來敞開無線網(wǎng)絡(luò)。

用開關(guān)來敞開或封閉效勞或硬件構(gòu)成，例如WIFI

勾選框和開關(guān)的提交操作

勾選框的操作能夠延后(例如作為表單的一部分)，但開關(guān)的操作應(yīng)當(dāng)當(dāng)即觸發(fā)。

杰出的用戶體會(huì)，是當(dāng)即改動(dòng)開關(guān)對(duì)應(yīng)的設(shè)置項(xiàng)，而不是點(diǎn)按了“保留”或回來上個(gè)界面以后才保留。咱們?cè)诂F(xiàn)實(shí)生活中對(duì)開關(guān)的期望即是如此(例如咱們知道，按下開關(guān)燈馬上就亮了)。

iOS中的敞開WIFI

當(dāng)用戶有必要履行額外過程才干讓改動(dòng)收效時(shí)，運(yùn)用勾選框。

當(dāng)用戶有必要點(diǎn)擊“提交”或“下一步”按鈕，修正才干收效時(shí)，選用勾選框

定論

規(guī)劃界面設(shè)計(jì)時(shí)，交互元素的挑選要保持一致、可預(yù)期。遵循規(guī)劃規(guī)范，能讓用戶非常好猜測(cè)控件的功用、怎么操作。相反，違背規(guī)范會(huì)讓界面感覺很軟弱——好像會(huì)毫無征兆發(fā)作任何事情。

網(wǎng)站欄目：「用戶體驗(yàn)設(shè)計(jì)」表單中的勾選框和開關(guān)
當(dāng)前地址：http://www.bm7419.com/news/168395.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)