本次產(chǎn)品改版涉及到了表單優(yōu)化，好的表單設(shè)計(jì)可以提升用戶在錄入信息過(guò)程中的體驗(yàn)。那么如何才能設(shè)計(jì)出更好更實(shí)用的表單呢？

表單結(jié)構(gòu)：

表單定義

表單在產(chǎn)品中主要負(fù)責(zé)數(shù)據(jù)采集功能，表單是連接系統(tǒng)和用戶的一個(gè)重要的橋梁。

表單的構(gòu)成

常見(jiàn)表單是由多個(gè)列表項(xiàng)構(gòu)成的。而每一個(gè)列表項(xiàng)都有最基本的標(biāo)題、標(biāo)簽、占位符、錯(cuò)誤信息提示、動(dòng)作按鈕組成。

（1）標(biāo)題

這個(gè)元素幫助用戶引導(dǎo)完成表單填寫的整個(gè)過(guò)程，尤其當(dāng)你收集的數(shù)據(jù)不止有一個(gè)標(biāo)題的時(shí)候，它特別有用。例如：姓名、職業(yè)、聯(lián)系方式。

（2）標(biāo)簽

標(biāo)簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。

（3）輸入框

用來(lái)收集用戶操作的信息，每個(gè)輸入域字段包含一類型信息。

（4）反饋信息提示

反饋信息提示給予用戶及時(shí)的錯(cuò)誤反饋，提醒用戶。

（5）操作按鈕

是指填寫完表單各項(xiàng)內(nèi)容后，所要進(jìn)行的操作動(dòng)作來(lái)結(jié)束當(dāng)前操作流程或在流程之中或之后開(kāi)啟新的功能操作。

（6）步驟條

對(duì)于內(nèi)容過(guò)多的表單輸入組件，又有著明確的操作先后關(guān)系，可以選用分步驟，每屏僅展示該步驟下的表單輸入組件，同時(shí)校驗(yàn)反饋也可分步進(jìn)行。

體驗(yàn)

1. 減少操作成本

金融產(chǎn)品中用戶會(huì)有需要添加銀行卡場(chǎng)景，銀行卡考號(hào)位數(shù)一般都在16~19位，用戶又不會(huì)去記銀行卡卡號(hào)，由于卡號(hào)過(guò)長(zhǎng)，用戶會(huì)比較容易輸錯(cuò)。通過(guò)銀行卡掃卡功能，自動(dòng)添加銀行卡，減少了用戶的操作成本。

2. 減少思考成本

用戶申購(gòu)中，在收銀臺(tái)頁(yè)面當(dāng)用戶輸入的金額大于剩余可投金額時(shí)，投資金額自動(dòng)匹配到剩余最大可投金額并toast提示用戶“已超出剩余可投金額”。

3. 減少操作誤差

實(shí)名驗(yàn)證場(chǎng)景中用戶需要輸入身份證號(hào)碼，由于身份證號(hào)碼比較長(zhǎng)，通過(guò)輸入框格式化在適當(dāng)?shù)奈粩?shù)后面加入空格，方便用戶快速校驗(yàn)。

交互

1. 清晰的瀏覽線

改版前用戶其實(shí)需要瀏覽的更多的內(nèi)容。標(biāo)簽和需要輸入的空白字段是完全分開(kāi)。當(dāng)用戶的視覺(jué)在處理這些信息的時(shí)候，會(huì)自然地覺(jué)得信息量比較密集，密集的信息會(huì)使用戶感到焦慮。

改版后合理地組織標(biāo)簽、操作按鈕和提示文字的排版，引導(dǎo)用戶的視線在同一方向流動(dòng)，降低用戶的視覺(jué)負(fù)擔(dān)。

Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After

改版前單頁(yè)面的內(nèi)容可能非常多，需要用戶進(jìn)行大量的填寫，一次性把所有需要填寫的內(nèi)容展示增加用戶認(rèn)知負(fù)荷，用戶會(huì)覺(jué)得他們需要在這個(gè)表單上花費(fèi)大量的時(shí)間，有可能就放棄填寫了。

改版后將身份信息驗(yàn)證頁(yè)面中的身份驗(yàn)證和手機(jī)號(hào)驗(yàn)證分開(kāi)來(lái)。這可以減少用戶的認(rèn)知負(fù)荷，如果屏幕上元素減少，只有唯一的選擇，用戶信息阻礙就降到最低。因此，用戶會(huì)專注于完成當(dāng)前任務(wù)。

在處理錯(cuò)誤的時(shí)候也就更容易，能降低用戶放棄的可能性。

Before：

After：

2. 即時(shí)校驗(yàn)

改版前收銀臺(tái)場(chǎng)景下用戶輸入投資金額后，需要用戶自行提交才能校驗(yàn)當(dāng)前信息。反饋錯(cuò)誤以彈窗的形式提現(xiàn)用戶。這樣的缺點(diǎn)校驗(yàn)信息反饋不夠及時(shí)，提示方式也過(guò)于粗暴。

改版后當(dāng)用戶輸入信息時(shí)給予實(shí)時(shí)校驗(yàn)，減少了用戶的操作成本。用戶可以通過(guò)及時(shí)信息反饋去調(diào)整，讓輸入過(guò)程更佳高效。

Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After

3. 提供幫助

在標(biāo)簽和輸入框旁邊增加幫助文字，告訴用戶應(yīng)該如何回答問(wèn)題。

（1）自動(dòng)即時(shí)幫助

顯示在對(duì)應(yīng)輸入框附近，表示對(duì)應(yīng)輸入框的提示。適用于幫助文字較少的局部說(shuō)明。

（2）用戶激活的即時(shí)幫助

通常采用圖標(biāo)、按鈕、圖片、文本鏈接提示人們有幫助可提供，例如問(wèn)號(hào)圖標(biāo)。適用于幫助文字較少的全局說(shuō)明。

（3）用戶激活的區(qū)域幫助

始終顯示在某個(gè)特定區(qū)域而不是輸入框附近。適用于幫助文字非常多的全局說(shuō)明。

3. 對(duì)齊方式

左對(duì)齊、右對(duì)齊、頂部對(duì)齊、行內(nèi)對(duì)齊。

Matteo Penzo 于2006年發(fā)布的關(guān)于標(biāo)簽放置的文章表明，如果標(biāo)簽位于字段之上，表格的完成速度會(huì)更快。 如果您希望用戶盡快掃描表單，則頂部對(duì)齊的標(biāo)簽是很好的。

左對(duì)齊，右對(duì)齊和頂部對(duì)齊的標(biāo)簽（Image: UX Matters）

（1）左對(duì)齊標(biāo)簽

采用左對(duì)齊標(biāo)簽方式的表單是三者（左對(duì)齊、右對(duì)齊、頂對(duì)齊）之中所需瀏覽時(shí)間最長(zhǎng)的。

• 優(yōu)點(diǎn)：文字開(kāi)頭按閱讀視線對(duì)齊，方便閱讀，節(jié)約垂直空間。
• 缺點(diǎn)：填寫速度慢，標(biāo)簽長(zhǎng)度和輸入框彈性小。

（2）右對(duì)齊標(biāo)簽

當(dāng)既要減少垂直空間，又要加快填寫速度的場(chǎng)景，使用右對(duì)齊。采用右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間，比頂部對(duì)齊標(biāo)簽的表單的時(shí)間長(zhǎng)，但比左對(duì)齊方式所需的瀏覽時(shí)間短。頁(yè)面高度有限的話有限公司推薦這種對(duì)齊方式。

• 優(yōu)點(diǎn)：節(jié)約垂直空間。
• 缺點(diǎn)：降低可讀性，標(biāo)簽長(zhǎng)度和輸入框彈性小。

（3）頂級(jí)標(biāo)簽

能讓用戶快速填寫表單，完成任務(wù)的場(chǎng)景使用頂部對(duì)齊。

• 優(yōu)點(diǎn)：有最快的瀏覽和處理速度；標(biāo)簽長(zhǎng)度彈性大。
• 缺點(diǎn)：非常占垂直空間。

（4）懸浮標(biāo)簽

浮動(dòng)標(biāo)簽節(jié)省了界面空間，使之看起來(lái)清晰簡(jiǎn)潔，當(dāng)用戶點(diǎn)擊輸入框并輸入內(nèi)容之后，標(biāo)簽位移到輸入框上方并通過(guò)色彩變化提示當(dāng)前輸入狀態(tài)，這種表單交互做的更細(xì)膩，提升用戶體驗(yàn)。

（5）方便用戶回顯檢查

表單填寫完成之后，用戶通常是會(huì)快速地檢查一遍其中內(nèi)容的正確性，再提交的。用戶必須上下掃視輸入內(nèi)容和對(duì)應(yīng)標(biāo)簽來(lái)匹配，確保填寫的字段是正確的。這個(gè)時(shí)候，輸入框的邊界會(huì)阻擋視線，即使借助相關(guān)元素靠近原則來(lái)設(shè)計(jì)的空間關(guān)系，在這個(gè)過(guò)程中也不會(huì)顯得那么清晰而明顯，這一切都會(huì)讓最后的檢查工作變得不那么快速。

Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After

UI部分

1. 營(yíng)造氛圍

在表單中植入品牌元素，如品牌顏色，會(huì)使整體界面設(shè)計(jì)風(fēng)格協(xié)調(diào)，使得品牌基因深入人心。

2. 緩解頁(yè)面壓力

對(duì)于較為復(fù)雜的表單，合理有層次的組織信息，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊的劃分，利用線條、空間間隔、顏色進(jìn)行視覺(jué)表現(xiàn)，給用戶喘息的機(jī)會(huì)。

3. 視覺(jué)層級(jí)

（1）必填項(xiàng)和選填項(xiàng)

必填項(xiàng)為空，則表單無(wú)法進(jìn)行，因此必填項(xiàng)要比選填項(xiàng)的視覺(jué)效果強(qiáng)。

（2）主按鈕和次按鈕

主動(dòng)作的視覺(jué)效果要比次動(dòng)作的視覺(jué)效果明顯。

（3）錯(cuò)誤信息和成功信息

錯(cuò)誤信息的強(qiáng)調(diào)效果要比成功信息強(qiáng)，從而吸引用戶注意快速解決問(wèn)題。

4. 輸入框長(zhǎng)度

輸入框的長(zhǎng)度可以暗示用戶正確填寫結(jié)果的長(zhǎng)度。比如證件號(hào)的內(nèi)容較多，所以輸入框要很長(zhǎng)。驗(yàn)證碼一般是四位數(shù)字，所以輸入框要短。

5. 字體

通過(guò)字號(hào)來(lái)區(qū)分層次重點(diǎn)，強(qiáng)調(diào)文字的字號(hào)要比輔助的文字要大一點(diǎn)，通過(guò)文字大小讓用戶分清重點(diǎn)。

總結(jié)

表單其實(shí)是連接系統(tǒng)和用戶的一個(gè)重要的橋梁。用戶在填寫表單的時(shí)候，總會(huì)因?yàn)楦鞣N原因而產(chǎn)生遲疑。

所以，作為我們要盡量簡(jiǎn)化這個(gè)過(guò)程，關(guān)注每一點(diǎn)細(xì)微的變化，無(wú)論是標(biāo)簽的顯示形式還是色彩，盡力增強(qiáng)它的可用性。表單體驗(yàn)提升后會(huì)讓你的產(chǎn)品更加優(yōu)秀。

本文由 @阿方 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議