表單的交互設(shè)計(jì):基于單選場景下的表單設(shè)計(jì)

3 評(píng)論 16366 瀏覽 65 收藏 7 分鐘

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

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

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

一、單選框

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

1、點(diǎn)擊范圍

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

2、排列形式

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

二、開關(guān)

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

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

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

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

三、下拉選擇框

  • 形式:采用下拉框的形式,點(diǎn)擊下拉后,顯示選項(xiàng),可以將點(diǎn)擊率高的選項(xiàng)放在前面,方便選擇。
  • 優(yōu)勢:占用空間小,在展開所有選項(xiàng)后,可以按重要程度排列。
  • 劣勢:不點(diǎn)擊下拉,用戶不知道選項(xiàng)都有什么,不方便比較。
  • 使用場景:選項(xiàng)多余5個(gè),在20個(gè)以下,選項(xiàng)之間比較程度低,用戶很清楚自己需要選擇什么。
  • 注意事項(xiàng):

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

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

四、彈出框

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

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

 

本文由 @設(shè)計(jì)Zan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 如果下拉選項(xiàng)有百八十個(gè)特別多的時(shí)候,除了給下拉框加篩選,還有其他更好的方法么?

    來自四川 回復(fù)
    1. 分類,樹

      來自河南 回復(fù)
    2. 可以在下拉框中增加搜索

      來自浙江 回復(fù)