提升表單體驗(yàn)的7招表單設(shè)計(jì)設(shè)計(jì)師方法教程發(fā)布者:本站 時(shí)間:2021-12-07 13:12:35
最近在做認(rèn)證的優(yōu)化,期間涉及到一系列的表單設(shè)計(jì)。在制作過程中,發(fā)現(xiàn)我對于提示語、按鈕的位置、是否放步驟條等等都無法做出快速的判斷,這說明我對這部分的概念是比較模糊的,所以就想針對表單的體驗(yàn)設(shè)計(jì)做一個(gè)學(xué)習(xí)和總結(jié),加深自己對表單設(shè)計(jì)的理解。
一、什么是表單
表單在網(wǎng)頁或 app 中主要負(fù)責(zé)數(shù)據(jù)采集的功能。也就是說,大部分起到了數(shù)據(jù)采集功能的模塊,我們都可以稱其為表單。表單本身只是一個(gè)數(shù)據(jù)采集的工具,本身不具有屬性,它可以被靈活運(yùn)用于多種功能模塊中,例如用于登錄注冊模塊的信息采集,評論的編輯頁,朋友圈的發(fā)布頁等。
7招表單設(shè)計(jì)設(shè)計(jì)師方法提升表單體驗(yàn)
△ 淘寶
從視覺表現(xiàn)上分類,一個(gè)表單有3個(gè)基本組成部分:
標(biāo)簽:告訴用戶相應(yīng)的輸入元素是什么。
輸入域 :一般包含文本框、單選框、復(fù)選框、下拉選擇、文件上傳、開關(guān)、步進(jìn)器、步驟條等。
表單按鈕:包括提交按鈕、復(fù)位按鈕和一般按鈕。
此外還可以有:
填寫幫助,如「請輸入11位數(shù)的手機(jī)號碼」。
反饋:「提交成功」「網(wǎng)絡(luò)錯(cuò)誤」等。
注:表單可以包含以上組成部分,但不是一定要有,比如提交按鈕,在自動保存或觸發(fā)的表單頁面就可以沒有提交按鈕。
7招表單設(shè)計(jì)設(shè)計(jì)師方法提升表單體驗(yàn)
如圖 Twitter 填寫驗(yàn)證碼表單中沒有提交按鈕,驗(yàn)證碼輸入6位后自動進(jìn)行校驗(yàn)。
1. 列表VS導(dǎo)航VS表單
因?yàn)橛行┣闆r下,列表、導(dǎo)航與表單的表現(xiàn)形式可能非常相似,所以我們可能會弄混他們。
列表:是一種數(shù)據(jù)項(xiàng)構(gòu)成的有限序列,即按照一定的線性順序,排列而成的數(shù)據(jù)項(xiàng)的集合,在這種數(shù)據(jù)結(jié)構(gòu)上進(jìn)行的基本操作包括對元素的的查找,插入,和刪除。
導(dǎo)航:本意是檢測和控制對象從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的過程。在網(wǎng)站或 App 中用于定位用戶當(dāng)前所在頁面位置,以及引導(dǎo)用戶從當(dāng)前位置移動到其他位置。
表單:在網(wǎng)站或 App 中作為數(shù)據(jù)采集工具。
從定義可以看出,列表是一個(gè)數(shù)據(jù)項(xiàng)的集合,是排列方式,導(dǎo)航和表單是有特定作用的工具。導(dǎo)航和菜單可以用列表的方式體現(xiàn),但列表不一定是導(dǎo)航和表單。此外,導(dǎo)航和菜單可能表現(xiàn)形式相似,但并不是同一種東西。
7招表單設(shè)計(jì)設(shè)計(jì)師方法提升表單體驗(yàn)
總之,判斷一個(gè)頁面是否是表單頁,關(guān)鍵看是否發(fā)生了數(shù)據(jù)的采集,從表現(xiàn)形式上可以看是否有表單域常用的控件,如文本框、單選多選、下拉菜單、開關(guān)等,以及是否有提交/清空等按鈕。
二、如何提升表單體驗(yàn)
從本質(zhì)上說,好用的表單應(yīng)該是易于理解且讓人感到舒適的。易于理解的表單能夠幫助用戶更好的對它們進(jìn)行填寫,這能讓用戶覺得是在跟表單進(jìn)行交流,而不是單向的詢問,讓用戶感覺到自己得到了關(guān)注。
1. 盡可能減少不必要的表單項(xiàng)目
判斷某個(gè)字段信息對于用戶來說是否有必要在表單中進(jìn)行填寫,每多一個(gè)項(xiàng)目需要填寫,就有可能流失一部分用戶或失去一部分好感度。雖然我知道有時(shí)候要去掉表單中的某些項(xiàng)目是不可能的(出于一些原因,如安全性等),但是我們應(yīng)該盡量做到這一點(diǎn)。例如注冊表單,如讓用戶使用郵箱注冊,那么對于用戶的姓名字段是否是注冊的必選項(xiàng)?如果不是必選項(xiàng)是否可以在之后的信息完善中進(jìn)行填寫。
7招表單設(shè)計(jì)設(shè)計(jì)師方法提升表單體驗(yàn)
例如 Airbnb 的注冊表單,Airbnb 允許用戶通過郵箱進(jìn)行注冊,但是需要一并填寫姓名和生日,姓名和生日并不會影響用戶對網(wǎng)站進(jìn)行瀏覽, 并且涉及到個(gè)人隱私,用戶可能并不愿意在不熟悉產(chǎn)品的時(shí)候就填寫,所以沒有必要在注冊的過程中進(jìn)行填寫。注冊時(shí)只需要郵箱和密碼,而姓名和生日在需要時(shí)再進(jìn)行完善體驗(yàn)會更好。
2. 盡可能減少表單中的多余字段
表單提供的字段過多,讓人第一眼就生出「好多信息需要填,好麻煩」的沉重感,以致于用戶在填寫過程中無法保持好心情。如果是登錄注冊的表單,就有可能因此流失掉一部分用戶。所以我們應(yīng)該修改預(yù)填充內(nèi)容,盡可能刪減掉額外的無用字段。
7招表單設(shè)計(jì)設(shè)計(jì)師方法提升表單體驗(yàn)
亞馬遜注冊頁面的改版充分體現(xiàn)了這一點(diǎn),舊版中,標(biāo)簽內(nèi)容用了描述性的語句,但是其實(shí)短短幾個(gè)字已經(jīng)足夠表明意思。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)