中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

基于單選場景下的表單交互設計

2022-05-25    分類: 網(wǎng)站建設

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

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

單項選擇這個場景目前有幾種交互形式可以滿足:單選框、開關、下拉選擇框、彈出框。

一、單選框


形式:將所有選項都列出來,每個選項前面添加單選框,選項之間互斥。

優(yōu)勢:選項全部都列出來,方便用戶查看對比。

劣勢:占用空間大。

使用場景:通常選項少于7個,每個選項的重要性一樣,用戶需要進行對比才能選擇。

注意事項:

1、點擊范圍


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


2、排列形式


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

二、開關


形式:只有兩個選擇,通常就是開與關。

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

劣勢:只有兩個選項,并且是對立的,使用情況受限。

使用場景:通常表示一個功能的開啟或者關閉。

注意事項:

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


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


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

三、下拉選擇框


形式:采用下拉框的形式,點擊下拉后,顯示選項,可以將點擊率高的選項放在前面,方便選擇。

優(yōu)勢:占用空間小,在展開所有選項后,可以按重要程度排列。

劣勢:不點擊下拉,用戶不知道選項都有什么,不方便比較。

使用場景:選項多余5個,在20個以下,選項之間比較程度低,用戶很清楚自己需要選擇什么。

注意事項:

1、選項長度差別大

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


四、彈出框


形式:以彈出框的形式展示,在彈出框里面,除了選項以外,還有其它輔助控件。

優(yōu)勢:可以有篩選控件,幫助選擇。選項內容可以非常多。

劣勢:彈出頁面,增加了等待時間,增加用戶的操作步驟。

使用場景:選項非常多,一般多余20個,需要篩選控件輔助。

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

標題名稱:基于單選場景下的表單交互設計
網(wǎng)站地址:http://m.rwnh.cn/news33/158733.html

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

廣告

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

h5響應式網(wǎng)站建設
阜阳市| 许昌市| 台山市| 荥经县| 中方县| 邯郸市| 三江| 肇庆市| 都昌县| 库伦旗| 重庆市| 会宁县| 东阿县| 繁峙县| 长白| 玉环县| 措勤县| 宁都县| 五华县| 蓬莱市| 霍林郭勒市| 临漳县| 拉萨市| 泽普县| 时尚| 富民县| 延津县| 浦东新区| 黄平县| 年辖:市辖区| 津市市| 读书| 乌兰浩特市| 金华市| 巴青县| 大埔区| 滨海县| 行唐县| 桐柏县| 富阳市| 赤水市|