最近在做認(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ā)布頁等。

淘寶

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

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

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

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

此外還可以有

④填寫幫助，如“請輸入11位數(shù)的手機(jī)號碼”；

⑤反饋：”提交成功“”網(wǎng)絡(luò)錯(cuò)誤“等

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

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

列表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)前位置移動(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è)頁面是否是表單頁，關(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)行填寫。

例如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)容，盡可能刪減掉額外的無用字段。

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

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

3.選擇最簡單的輸入方式

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

美團(tuán)外賣/支付寶/Twitter

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

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

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

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

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

Airbnb

近期我們發(fā)現(xiàn)，很多產(chǎn)品的手機(jī)號注冊頁，手機(jī)號輸入與驗(yàn)證碼輸入/密碼輸入也進(jìn)行了分頁，當(dāng)這三個(gè)項(xiàng)目在一頁時(shí)，用戶需要在輸入手機(jī)號碼后進(jìn)行等待，然后才能繼續(xù)輸入，讓用戶產(chǎn)生這個(gè)表單進(jìn)展緩慢的感覺，分開后，用戶在一頁只需要填寫一個(gè)或2個(gè)內(nèi)容，跳轉(zhuǎn)的時(shí)間又掩蓋了一部分等待驗(yàn)證碼的時(shí)間，會覺得進(jìn)展更快更流暢。

KEEP

5. 選擇合理的標(biāo)簽對齊方式

頂對齊 vs. 左對齊 vs. 右對齊

跟一般想法相反，在輸入框上面放置標(biāo)簽并不是可用性最好的位置。你有時(shí)候希望用戶盡可能快地填寫表格，但有些時(shí)候你需要故意讓用戶慢下來，以便他們用心地留意并閱讀標(biāo)簽。此外，把長表單設(shè)成一個(gè)長列，讓用戶向下滾動(dòng)頁面。這比把表單分成列，每樣都雷同要好。每一種對齊方式都有它的優(yōu)點(diǎn)和缺點(diǎn)。

Matteo Penzo根據(jù)表單標(biāo)簽對齊方式研究出的時(shí)間表。

總結(jié)：

希望用戶快速掃描表單，把標(biāo)簽放在輸入框上面，這種布局更便于眼睛向下掃描。

希望用戶仔細(xì)得閱讀，把標(biāo)簽放在輸入框的左側(cè)，這個(gè)布局掃描較慢，向下向右(Z的形狀)的眼動(dòng)。

6. 選擇合適的按鈕位置

表單里可能有很多種類的按鈕，我們在這里只說最重要的”下一步“、”完成/提交/保存“等提交表單類型的按鈕。

最常用的位置是右上角和下方。在右上角通常是文字按鈕，而在下方一般有：固定在屏幕底部、跟隨鍵盤移動(dòng)、隨表單移動(dòng)。

1. 右上角文字按鈕，最常見的一種按鈕形式

美團(tuán)外賣/微信/Facebook

優(yōu)勢：①不影響用戶對表單內(nèi)容的注意力；②用戶在完成表單時(shí)，視線會從下向上轉(zhuǎn)移，有助于用戶作進(jìn)一步檢查；

適用于：

①表單項(xiàng)目少，在一屏內(nèi)完全展示

②內(nèi)容復(fù)雜且重要，需要用戶專注于表單本身，認(rèn)證填寫。

2. 固定在屏幕底部

閑魚

優(yōu)勢：

①用戶在任何時(shí)間都可以點(diǎn)擊；

②強(qiáng)烈吸引用戶的注意力，引導(dǎo)用戶點(diǎn)擊

適用于：

①表單內(nèi)容重要性不高，不需要全部完成，也不需要過于仔細(xì)，需要促進(jìn)用戶快速完成提交。

缺點(diǎn)：可能會被鍵盤阻擋。

3. 隨鍵盤移動(dòng)

Twitter

優(yōu)勢：

①距離鍵盤位置最近，方便輸入完立即提交；

②不會被鍵盤阻擋

適用于：

表單內(nèi)容以輸入為主，簡單不易出錯(cuò)，輸入后需要快速提交。

4. 至于表單底部

Twitter/美團(tuán)外賣

優(yōu)勢：

①符合用戶從上至下的閱讀方向；

②可以促進(jìn)用戶完成整個(gè)表單

適用于：

表單內(nèi)容少于一頁，按鈕最靠近表單；

表單內(nèi)容很長，需要引導(dǎo)用戶全部填寫。

四種常見方式各有優(yōu)勢，需要根據(jù)實(shí)際情況選擇最適合的方式。

7. 給表單的設(shè)計(jì)加入微交互

其實(shí)市面上已經(jīng)有許多新的表單設(shè)計(jì)形式慢慢普及開來了，但是要在使用之前思考你正在為誰而設(shè)計(jì)，它們是否適合你的項(xiàng)目，你的表單是否確實(shí)需要使用微交互。

Health App Login

by Jakub Antalík in Health app on Mar 10, 2016

下面這個(gè)鏈接中就可以看到不少有趣的關(guān)于輸入框的動(dòng)效形式。

https://tympanus.net/Development/TextInputEffects/

這些例子中的微交互非常有趣，它們可以提起用戶的興趣，提升用戶注冊的轉(zhuǎn)化率。

總結(jié)

一個(gè)表單是否“好用”，視覺體驗(yàn)只占了整體體驗(yàn)一部分，初級設(shè)計(jì)師能很輕易的復(fù)制一個(gè)高級設(shè)計(jì)師設(shè)計(jì)出的表單的樣式，但是其中的思考卻無法直接拿來。作為UI設(shè)計(jì)師，我們需要謹(jǐn)記的是，通過優(yōu)化視覺表現(xiàn)提升表單體驗(yàn)只是表象，更多是要考慮到表單最終要幫用戶解決什么問題，表單對于你的產(chǎn)品或項(xiàng)目起到了什么作用。換言之，先想好為什么，再想怎么做。

原作者：阿肆Stella