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

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

單項(xiàng)選擇這個場景目前有幾種交互形式可以滿足：單選框、開關(guān)、下拉選擇框、彈出框。

一、單選框

形式：將所有選項(xiàng)都列出來，每個選項(xiàng)前面添加單選框，選項(xiàng)之間互斥。優(yōu)勢：選項(xiàng)全部都列出來，便利用戶查看對比。劣勢：占用空間大。使用場景：通常選項(xiàng)少于7個，每個選項(xiàng)的重要性一樣，用戶需要進(jìn)行對比才能選擇。注意事項(xiàng)：1、點(diǎn)擊范圍

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

2、擺列形式

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

二、開關(guān)

形式：只有兩個選擇，通常就是開與關(guān)。優(yōu)勢：操作時表現(xiàn)了狀態(tài)，然后可以很明顯的體現(xiàn)所處狀態(tài)。劣勢：只有兩個選項(xiàng)，而且是對立的，使用情況受限。使用場景：通常體現(xiàn)一個功能的開啟或者關(guān)閉。注意事項(xiàng)：

1、開關(guān)狀態(tài)必然要明確

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

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

三、下拉選擇框

形式：采用下拉框的形式，點(diǎn)擊下拉后，顯示選項(xiàng)，可以將點(diǎn)擊率高的選項(xiàng)放在前面，便利選擇。優(yōu)勢：占用空間小，在展開所有選項(xiàng)后，可以按重要程度擺列。劣勢：不點(diǎn)擊下拉，，用戶不知道選項(xiàng)都有什么，未便利比較。使用場景：選項(xiàng)多余5個，在20個以下，選項(xiàng)之間比較程度低，用戶很清楚本身需要選擇什么。注意事項(xiàng)：1、選項(xiàng)長度不同大

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

四、彈出框

形式：以彈出框的形式展示，在彈出框里面，除了選項(xiàng)以外，還有其它輔助控件。優(yōu)勢：可以有篩選控件，幫手選擇。選項(xiàng)內(nèi)容可以非常多。劣勢：彈出頁面，增加了等待時間，增加用戶的操作步驟。使用場景：選項(xiàng)非常多，一般多余20個，需要篩選控件輔助。

標(biāo)簽：東營 九江 鹽城 林芝 烏魯木齊