最近在做認(rèn)證的優(yōu)化，期間涉及到一系列的表單設(shè)計(jì)。在制作過(guò)程中，發(fā)現(xiàn)我對(duì)于提示語(yǔ)、按鈕的位置、是否放步驟條等等都無(wú)法做出快速的判斷，這說(shuō)明我對(duì)這部分的概念是比較模糊的，所以就想針對(duì)表單的體驗(yàn)設(shè)計(jì)做一個(gè)學(xué)習(xí)和總結(jié)，加深自己對(duì)表單設(shè)計(jì)的理解。

一、什么是表單

表單在網(wǎng)頁(yè)或 app 中主要負(fù)責(zé)數(shù)據(jù)采集的功能。也就是說(shuō)，大部分起到了數(shù)據(jù)采集功能的模塊，我們都可以稱(chēng)其為表單。表單本身只是一個(gè)數(shù)據(jù)采集的工具，本身不具有屬性，它可以被靈活運(yùn)用于多種功能模塊中，例如用于登錄注冊(cè)模塊的信息采集，評(píng)論的編輯頁(yè)，朋友圈的發(fā)布頁(yè)等。

△ 淘寶

從視覺(jué)表現(xiàn)上分類(lèi)，一個(gè)表單有3個(gè)基本組成部分：

標(biāo)簽：告訴用戶(hù)相應(yīng)的輸入元素是什么。

輸入域 ：一般包含文本框、單選框、復(fù)選框、下拉選擇、文件上傳、開(kāi)關(guān)、步進(jìn)器、步驟條等。

表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕。

此外還可以有：

填寫(xiě)幫助，如「請(qǐng)輸入11位數(shù)的手機(jī)號(hào)碼」。

反饋：「提交成功」「網(wǎng)絡(luò)錯(cuò)誤」等。

注：表單可以包含以上組成部分，但不是一定要有，比如提交按鈕，在自動(dòng)保存或觸發(fā)的表單頁(yè)面就可以沒(méi)有提交按鈕。

如圖 Twitter 填寫(xiě)驗(yàn)證碼表單中沒(méi)有提交按鈕，驗(yàn)證碼輸入6位后自動(dòng)進(jìn)行校驗(yàn)。

1. 列表VS導(dǎo)航VS表單

因?yàn)橛行┣闆r下，列表、導(dǎo)航與表單的表現(xiàn)形式可能非常相似，所以我們可能會(huì)弄混他們。

列表：是一種數(shù)據(jù)項(xiàng)構(gòu)成的有限序列，即按照一定的線(xiàn)性順序，排列而成的數(shù)據(jù)項(xiàng)的集合，在這種數(shù)據(jù)結(jié)構(gòu)上進(jìn)行的基本操作包括對(duì)元素的的查找，插入，和刪除。

導(dǎo)航：本意是檢測(cè)和控制對(duì)象從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的過(guò)程。在網(wǎng)站或 App 中用于定位用戶(hù)當(dāng)前所在頁(yè)面位置，以及引導(dǎo)用戶(hù)從當(dāng)前位置移動(dòng)到其他位置。

表單：在網(wǎng)站或 App 中作為數(shù)據(jù)采集工具。

從定義可以看出，列表是一個(gè)數(shù)據(jù)項(xiàng)的集合，是排列方式，導(dǎo)航和表單是有特定作用的工具。導(dǎo)航和菜單可以用列表的方式體現(xiàn)，但列表不一定是導(dǎo)航和表單。此外，導(dǎo)航和菜單可能表現(xiàn)形式相似，但并不是同一種東西。

總之，判斷一個(gè)頁(yè)面是否是表單頁(yè)，關(guān)鍵看是否發(fā)生了數(shù)據(jù)的采集，從表現(xiàn)形式上可以看是否有表單域常用的控件，如文本框、單選多選、下拉菜單、開(kāi)關(guān)等，以及是否有提交/清空等按鈕。

二、如何提升表單體驗(yàn)

從本質(zhì)上說(shuō)，好用的表單應(yīng)該是易于理解且讓人感到舒適的。易于理解的表單能夠幫助用戶(hù)更好的對(duì)它們進(jìn)行填寫(xiě)，這能讓用戶(hù)覺(jué)得是在跟表單進(jìn)行交流，而不是單向的詢(xún)問(wèn)，讓用戶(hù)感覺(jué)到自己得到了關(guān)注。

1. 盡可能減少不必要的表單項(xiàng)目

判斷某個(gè)字段信息對(duì)于用戶(hù)來(lái)說(shuō)是否有必要在表單中進(jìn)行填寫(xiě)，每多一個(gè)項(xiàng)目需要填寫(xiě)，就有可能流失一部分用戶(hù)或失去一部分好感度。雖然我知道有時(shí)候要去掉表單中的某些項(xiàng)目是不可能的(出于一些原因，如安全性等)，但是我們應(yīng)該盡量做到這一點(diǎn)。例如注冊(cè)表單，如讓用戶(hù)使用郵箱注冊(cè)，那么對(duì)于用戶(hù)的姓名字段是否是注冊(cè)的必選項(xiàng)?如果不是必選項(xiàng)是否可以在之后的信息完善中進(jìn)行填寫(xiě)。

例如 Airbnb 的注冊(cè)表單，Airbnb 允許用戶(hù)通過(guò)郵箱進(jìn)行注冊(cè)，但是需要一并填寫(xiě)姓名和生日，姓名和生日并不會(huì)影響用戶(hù)對(duì)網(wǎng)站進(jìn)行瀏覽， 并且涉及到個(gè)人隱私，用戶(hù)可能并不愿意在不熟悉產(chǎn)品的時(shí)候就填寫(xiě)，所以沒(méi)有必要在注冊(cè)的過(guò)程中進(jìn)行填寫(xiě)。注冊(cè)時(shí)只需要郵箱和密碼，而姓名和生日在需要時(shí)再進(jìn)行完善體驗(yàn)會(huì)更好。

2. 盡可能減少表單中的多余字段

表單提供的字段過(guò)多，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，以致于用戶(hù)在填寫(xiě)過(guò)程中無(wú)法保持好心情。如果是登錄注冊(cè)的表單，就有可能因此流失掉一部分用戶(hù)。所以我們應(yīng)該修改預(yù)填充內(nèi)容，盡可能刪減掉額外的無(wú)用字段。

亞馬遜注冊(cè)頁(yè)面的改版充分體現(xiàn)了這一點(diǎn)，舊版中，標(biāo)簽內(nèi)容用了描述性的語(yǔ)句，但是其實(shí)短短幾個(gè)字已經(jīng)足夠表明意思。

用「姓名」一個(gè)輸入框替換掉「姓」與「名」這兩個(gè)輸入框;用示例或者提示簡(jiǎn)化單純重復(fù)的預(yù)填充內(nèi)容。

3. 選擇最簡(jiǎn)單的輸入方式

用戶(hù)沒(méi)有我們想象的那么勤奮，我們需要做到的是讓用戶(hù)最方便最快速的完成內(nèi)容的輸入。通俗的來(lái)說(shuō)，能不填寫(xiě)就不填寫(xiě)，能選擇就不要輸入，能選擇一下來(lái)實(shí)現(xiàn)的就不要選兩下。

△ 美團(tuán)外賣(mài)/支付寶/Twitter

例如，美團(tuán)外賣(mài)在選擇收貨地址時(shí)，自動(dòng)勾選性別，因?yàn)檫@個(gè)選項(xiàng)至少可以方便一半的用戶(hù)少進(jìn)行一項(xiàng)選擇，即便是性別選擇錯(cuò)誤也不會(huì)對(duì)收貨產(chǎn)生什么影響;支付寶的充值中心自動(dòng)選擇本機(jī)號(hào)碼，并且將重置的金額用卡片的形式變現(xiàn)出來(lái)，不用讓用戶(hù)輸入號(hào)碼或者輸入充值金額，用戶(hù)只需要通過(guò)幾次簡(jiǎn)單的點(diǎn)擊即可完成選擇，非常方便;Twitter 輸入驗(yàn)證碼后自動(dòng)進(jìn)行檢測(cè)，而無(wú)需用戶(hù)點(diǎn)擊「提交」按鈕。

4. 一頁(yè)只做一件事，不要一次性展示全部?jī)?nèi)容

有的時(shí)候表單的內(nèi)容可能非常長(zhǎng)，需要用戶(hù)進(jìn)行大量的填寫(xiě)，這個(gè)時(shí)候我們要注意，不要一次性把所有需要填寫(xiě)的內(nèi)容都展示給用戶(hù)，這樣會(huì)嚇到他們，讓他們覺(jué)得需要在這個(gè)表單上花費(fèi)大量的時(shí)間，有可能就放棄填寫(xiě)了。

你可以回想一下當(dāng)你在銀行辦理業(yè)務(wù)時(shí)，柜員丟給你一張這樣的表單你內(nèi)心的第一感覺(jué)一定不是預(yù)約的，如果不是有提供的示例，真的不知道該如何下手。

當(dāng)你在 Airbnb 申請(qǐng)成為房東時(shí)，也需要填寫(xiě)大量的出租信息。而 Airbnb 很巧妙地把左邊長(zhǎng)長(zhǎng)的表單拆分成了多個(gè)步驟，在單個(gè)步驟中的三個(gè)關(guān)聯(lián)的選項(xiàng)也是一條一條逐步出現(xiàn)的，給人非常連貫順暢的感覺(jué)。每個(gè)頁(yè)面只回答一個(gè)內(nèi)容，也讓用戶(hù)得以放松心情，專(zhuān)注于當(dāng)前選項(xiàng)。

△ Airbnb