在做表單設(shè)計(jì)時(shí)，究竟該選用哪種控件，只要是根據(jù)情況而定的，無(wú)論哪種選擇都有其優(yōu)缺點(diǎn)，這就要結(jié)合選項(xiàng)數(shù)目、空間大小等因素，選擇一種形式，可以大程度的方便用戶(hù)使用。

表單是頁(yè)面設(shè)計(jì)最重要的一部分內(nèi)容，好的表單可以幫助人們快速填寫(xiě)，反之，會(huì)讓用戶(hù)直接點(diǎn)擊關(guān)閉按鈕。表單通常包含了：文本框、密碼框、多行文本框、復(fù)選框、單選框、下拉選擇框和按鈕等。最近，天天和表單打交道，特別是單項(xiàng)選擇，所以就寫(xiě)下這篇文章來(lái)深入思考一下，單選選擇場(chǎng)景該怎么做交互設(shè)計(jì)。

單項(xiàng)選擇這個(gè)場(chǎng)景目前有幾種交互形式可以滿(mǎn)足：?jiǎn)芜x框、開(kāi)關(guān)、下拉選擇框、彈出框。

一、單選框

形式：將所有選項(xiàng)都列出來(lái)，每個(gè)選項(xiàng)前面添加單選框，選項(xiàng)之間互斥。

優(yōu)勢(shì)：選項(xiàng)全部都列出來(lái)，方便用戶(hù)查看對(duì)比。

劣勢(shì)：占用空間大。

使用場(chǎng)景：通常選項(xiàng)少于7個(gè)，每個(gè)選項(xiàng)的重要性一樣，用戶(hù)需要進(jìn)行對(duì)比才能選擇。

注意事項(xiàng)：

1、點(diǎn)擊范圍

作為單選選項(xiàng)，在用戶(hù)使用的時(shí)候，最重要的就是點(diǎn)選上。點(diǎn)選范圍決定著用戶(hù)是否可以輕松選擇上。有的時(shí)候，設(shè)計(jì)師通常會(huì)忽略這一點(diǎn)。像上圖所顯示的，第一種情況對(duì)用戶(hù)來(lái)講就很好點(diǎn)，第三種就相當(dāng)難選擇。所以，在設(shè)計(jì)單選的時(shí)候，需要把點(diǎn)選范圍盡量做大。但是，還需要注意一點(diǎn)，就是不能影響其它選項(xiàng)，如下圖所示的，用戶(hù)的點(diǎn)選不會(huì)非常精確，明明想選擇選項(xiàng)二的，結(jié)果選擇了一。

2、排列形式

通常選項(xiàng)是平鋪開(kāi)來(lái)的，但是必須要注意距離，就像上圖顯示的，讓用戶(hù)很難判斷出是選擇的一還是二，尤其選項(xiàng)多的時(shí)候，就更需要注意。

二、開(kāi)關(guān)

形式：只有兩個(gè)選擇，通常就是開(kāi)與關(guān)。

優(yōu)勢(shì)：操作時(shí)體現(xiàn)了狀態(tài)，然后可以很明顯的表示所處狀態(tài)。

劣勢(shì)：只有兩個(gè)選項(xiàng)，并且是對(duì)立的，使用情況受限。

使用場(chǎng)景：通常表示一個(gè)功能的開(kāi)啟或者關(guān)閉。

注意事項(xiàng)：

1、開(kāi)關(guān)狀態(tài)一定要明確

上圖的這兩種狀態(tài)都是存在的。第一種，漢字表示按鈕移過(guò)去會(huì)是什么狀態(tài)，給用戶(hù)心理預(yù)期;第二種，漢字表示的是當(dāng)前的狀態(tài)。如果去掉顏色，就是完全相反的兩種情況。當(dāng)用戶(hù)看見(jiàn)這兩種按鈕的時(shí)候，也需要仔細(xì)的分辨。

像蘋(píng)果手機(jī)做的就比較好，去掉了開(kāi)關(guān)的文字，完全通過(guò)視覺(jué)狀態(tài)告訴用戶(hù)目前的狀態(tài)。不會(huì)出現(xiàn)認(rèn)知偏差。

三、下拉選擇框

形式：采用下拉框的形式，點(diǎn)擊下拉后，顯示選項(xiàng)，可以將點(diǎn)擊率高的選項(xiàng)放在前面，方便選擇。

優(yōu)勢(shì)：占用空間小，在展開(kāi)所有選項(xiàng)后，可以按重要程度排列。

劣勢(shì)：不點(diǎn)擊下拉，用戶(hù)不知道選項(xiàng)都有什么，不方便比較。

使用場(chǎng)景：選項(xiàng)多余5個(gè)，在20個(gè)以下，選項(xiàng)之間比較程度低，用戶(hù)很清楚自己需要選擇什么。

注意事項(xiàng)：

1、選項(xiàng)長(zhǎng)度差別大

在下拉選項(xiàng)中，如果選項(xiàng)長(zhǎng)度都差不多，那就比較容易設(shè)計(jì)，但是如果選項(xiàng)長(zhǎng)度差別很大，就很煩人。選項(xiàng)雖然可以實(shí)現(xiàn)折行設(shè)計(jì)，但是通常下拉框里的選項(xiàng)沒(méi)有分隔線(xiàn)，只是靠距離來(lái)分隔，如果折行，就需要增加分隔線(xiàn)，否則就不能區(qū)分折行選項(xiàng)。所以在設(shè)計(jì)的時(shí)候，盡量還是讓選項(xiàng)一行顯示，以最長(zhǎng)的選項(xiàng)為基準(zhǔn)設(shè)計(jì)下拉框的寬度。如下圖所示。

四、彈出框

形式：以彈出框的形式展示，在彈出框里面，除了選項(xiàng)以外，還有其它輔助控件。

優(yōu)勢(shì)：可以有篩選控件，幫助選擇。選項(xiàng)內(nèi)容可以非常多。

劣勢(shì)：彈出頁(yè)面，增加了等待時(shí)間，增加用戶(hù)的操作步驟。

使用場(chǎng)景：選項(xiàng)非常多，一般多余20個(gè)，需要篩選控件輔助。

在做表單設(shè)計(jì)時(shí)，究竟該選用哪種控件，只要是根據(jù)情況而定的，無(wú)論哪種選擇都有其優(yōu)缺點(diǎn)，這就要結(jié)合選項(xiàng)數(shù)目、空間大小等因素，選擇一種形式，可以大程度的方便用戶(hù)使用。

標(biāo)題名稱(chēng)：基于單選場(chǎng)景下的表單交互設(shè)計(jì)
網(wǎng)站地址：http://jinyejixie.com/news33/158733.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、Google

廣告

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