編輯導(dǎo)語(yǔ)：用戶要完成表單總要采取輸入、選擇、提交等等動(dòng)作，這就涉及到了用戶與表單的交互。這篇文章從用戶填寫表單的幾個(gè)主要場(chǎng)景出發(fā)對(duì)表單交互設(shè)計(jì)進(jìn)行了分析，總結(jié)了每個(gè)場(chǎng)景下有效的交互設(shè)計(jì)經(jīng)驗(yàn)。

一、單表單輸入

單表單輸入是指只考慮某一個(gè)表單的輸入情況，此種情況主要是指的單個(gè)文本框的輸入。

1. 輸入前：給出建議

有些情況下用戶并不知道自己應(yīng)該怎么決定答案，這個(gè)時(shí)候我們可以提前給出一些建議來(lái)幫助用戶做出決定。

看一下這個(gè)例子：用戶需要給自己的賬戶設(shè)置一個(gè)昵稱，但是想不到合適的內(nèi)容，這個(gè)時(shí)候我們可以自動(dòng)給出一個(gè)昵稱，用戶如果不喜歡可以點(diǎn)擊切換，或者在給出的昵稱基礎(chǔ)上進(jìn)行編輯。

通過(guò)給出建議，大大減輕了用戶思考的負(fù)擔(dān)，幫助用戶快速做出決定，既貼心又增加了表單的完成效率。

2. 輸入時(shí)：及時(shí)驗(yàn)證

文本框由于本身不限制輸入的數(shù)據(jù)類型，當(dāng)業(yè)務(wù)上要求輸入特定格式的數(shù)據(jù)時(shí)，就會(huì)出現(xiàn)用戶輸入的數(shù)據(jù)格式不符合要求的情況。

針對(duì)這種情況，首先我們應(yīng)該在提交時(shí)做數(shù)據(jù)驗(yàn)證，如果輸入的數(shù)據(jù)格式不符合要求就不允許提交。

但是這樣的方式會(huì)導(dǎo)致用戶只有在提交的時(shí)候才能發(fā)現(xiàn)自己的錯(cuò)誤，效率比較低。

我們可以在用戶輸入時(shí)就進(jìn)行驗(yàn)證，比如：

注冊(cè)時(shí)用戶需要輸入一個(gè)用戶名，但是不能使用已被他人使用的用戶名。

這個(gè)場(chǎng)景下用戶是不知道哪些用戶名已經(jīng)被他人使用的，只能一次次的試探才能最終確定用戶名，所以我們可以在用戶輸入完用戶名的當(dāng)時(shí)就對(duì)用戶名稱是否可用進(jìn)行校驗(yàn)并提示，而不是在用戶提交表單時(shí)進(jìn)行提示；這樣用戶就可以及時(shí)發(fā)現(xiàn)錯(cuò)誤及時(shí)修改，極大的提升了輸入效率。

注：實(shí)時(shí)驗(yàn)證一般只在用戶輸入完成后自動(dòng)觸發(fā)驗(yàn)證，不在輸入過(guò)程中進(jìn)行驗(yàn)證，一是避免帶給用戶困惑，同時(shí)也能降低服務(wù)器壓力。

但是有一種情況可以在輸入時(shí)即進(jìn)行驗(yàn)證：對(duì)用戶的輸入內(nèi)容給出的意見參考而不是對(duì)錯(cuò)的提示。

常見的例子有用戶設(shè)置密碼時(shí)，會(huì)自動(dòng)顯示當(dāng)前輸入密碼的密碼強(qiáng)度。

3. 輸入后：自動(dòng)糾錯(cuò)

文本框支持輸入的數(shù)據(jù)格式是多種多樣的，有時(shí)候同一個(gè)內(nèi)容有多種表達(dá)形式，當(dāng)用戶輸入的表達(dá)形式不符合業(yè)務(wù)的要求時(shí)，比及時(shí)提示用戶正確的格式要求然后讓用戶去修改更好的做法是：自動(dòng)將用戶的輸入內(nèi)容轉(zhuǎn)換為符合要求的格式。

用戶要輸入一個(gè)英語(yǔ)單詞，業(yè)務(wù)上要求首字母必須大寫，當(dāng)用戶習(xí)慣性的用小寫輸入完成時(shí)我們可以自動(dòng)將單詞的首字母轉(zhuǎn)換為大寫后重新顯示給用戶。

用戶在輸入一個(gè)日期，業(yè)務(wù)上要求的格式是XXXX/XX/XX，但是用戶輸入的格式是XXXX-XX-XX，在用戶輸入完成后我們可以自動(dòng)將日期格式轉(zhuǎn)換為XXXX/XX/XX。

注：轉(zhuǎn)換需要在用戶輸入完成后轉(zhuǎn)換，不可在用戶輸入過(guò)程中轉(zhuǎn)換以免打斷用戶的輸入。

二、關(guān)聯(lián)輸入

關(guān)聯(lián)輸入是指多個(gè)表單之間存在聯(lián)動(dòng)關(guān)系的輸入，比如選了A之后就不用再填寫B(tài)。

1. 數(shù)據(jù)關(guān)聯(lián)：做到數(shù)據(jù)聯(lián)動(dòng)

當(dāng)兩個(gè)表單之間的數(shù)據(jù)有關(guān)聯(lián)關(guān)系時(shí)，需要隱藏聯(lián)動(dòng)條件下不允許選擇的數(shù)據(jù)而不是用戶選擇后進(jìn)行提示所選的數(shù)據(jù)不符合要求。

比如有年齡和書單兩個(gè)表單，當(dāng)填寫的年齡小于18周歲時(shí)就不可再選擇某些類型的書單；用戶選擇書單時(shí)即應(yīng)該即時(shí)校驗(yàn)用戶輸入的年齡，若小于18周歲則不對(duì)用戶展示禁用書單。

2. 表單關(guān)聯(lián)

表單關(guān)聯(lián)是指多個(gè)表單是否需要填寫相互之間有制約關(guān)系，最常見的是調(diào)查問(wèn)卷的場(chǎng)景，某個(gè)題目選擇了A答案會(huì)跳到第X題，選擇了B答案則會(huì)跳到Y(jié)題目。

此時(shí)涉及到的情況會(huì)比較復(fù)雜，我們可以試著用多個(gè)方式逐一對(duì)比，并根據(jù)具體情況選擇合適的處理方式。

1）分頁(yè)處理

分頁(yè)處理適用于關(guān)聯(lián)關(guān)系存在于多組表單之間而不是多個(gè)表單之間，此時(shí)可以將多組表單分別放在不同的頁(yè)面，采用分步填寫的方式逐頁(yè)完成表單。

優(yōu)點(diǎn)：

• 流程清晰，用戶對(duì)表單的完成路徑理解成本低。
• 能保證每一步表單填寫時(shí)都是已滿足上一步條件（否則不會(huì)進(jìn)行到下一步），不易出錯(cuò)。

缺點(diǎn)：僅適用于流程類表單無(wú)法處理平行表單，對(duì)于三個(gè)表單任選一個(gè)的情況無(wú)法處理。

2）分組處理

分組處理即將所有有關(guān)聯(lián)關(guān)系的表單進(jìn)行分組，比如選擇A之后只能選擇123，選擇B之后只能選擇456，選擇C之后只能選擇789；同時(shí)ABC之間為互斥關(guān)系，選擇某一個(gè)之后即不能選擇另外兩個(gè)；此時(shí)我們可以將A+123、B+456、C+789在頁(yè)面上分為三組，選擇一組之后禁用其他兩組。

優(yōu)點(diǎn)：掌控全局，用戶對(duì)所有內(nèi)容一目了然，能根據(jù)需要迅速做出選擇。

缺點(diǎn)：視覺干擾過(guò)于嚴(yán)重，特別是分組較多時(shí)大量堆積的內(nèi)容會(huì)給用戶帶來(lái)壓力。

3）選項(xiàng)卡

選項(xiàng)卡也是一種分組處理，不同的是選項(xiàng)卡將不同組的內(nèi)容分別隱藏在了不同的選項(xiàng)卡內(nèi)，每次只展示當(dāng)前選擇的選項(xiàng)卡的內(nèi)容。

優(yōu)點(diǎn)：分類明確，遇到分組較多時(shí)，仍能在不對(duì)用戶產(chǎn)生嚴(yán)重視覺干擾的情況下讓用戶對(duì)所有內(nèi)容一目了然。

缺點(diǎn)：不利于表達(dá)表單的完成路徑，即：用戶無(wú)法清晰的理解多個(gè)選項(xiàng)卡是需要全部填寫完才能提交表單，還是只填寫其中一個(gè)才能提交表單；也無(wú)法理解多個(gè)選項(xiàng)卡分別填寫后是需要分別提交還是一起提交。

三、增加輸入

增加輸入是當(dāng)前的表單數(shù)量不是固定的，需要用戶根據(jù)需要自由增加。

比如要求用戶填寫家庭成員時(shí)我們沒(méi)有辦法預(yù)測(cè)用戶有多少家庭成員，常見的做法時(shí)初始提供兩個(gè)成員的錄入表單，用戶可根據(jù)需要點(diǎn)擊“添加成員”向頁(yè)面添加更多的成員錄入表單。

此種情況有兩種常用的方式：彈窗添加和顯示隱藏。

彈窗添加即用戶點(diǎn)擊添加時(shí)出現(xiàn)一個(gè)彈窗，在彈窗中輸入相關(guān)內(nèi)容，確認(rèn)添加后在頁(yè)面上顯示添加內(nèi)容；此種方式適用于需要添加的表單內(nèi)容過(guò)多時(shí)，比如對(duì)播放器的復(fù)雜設(shè)置，在彈窗中展示完整的設(shè)置項(xiàng)，設(shè)置完成后在頁(yè)面上只顯示設(shè)置的結(jié)果。

顯示隱藏即點(diǎn)擊添加時(shí)在頁(yè)面上即時(shí)增加顯示更多的表單，這種方式優(yōu)點(diǎn)不打斷用戶的輸入，操作比較流暢，但是表單數(shù)量較多時(shí)會(huì)導(dǎo)致頁(yè)面比較混亂。

四、提交表單

提交表單是完成表單的最后一步，此處最需要關(guān)注的是基于各種驗(yàn)證的提示，這些可以在上一篇文章中詳細(xì)了解。

這次主要說(shuō)明一個(gè)常見的操作處理：很多情況下我們都會(huì)要求用戶提交表單時(shí)勾選一些必須同意的服務(wù)條款，否則就不允許提交。

比較常見的做法有：

• 在提交時(shí)檢測(cè)是否已經(jīng)勾選，未勾選時(shí)進(jìn)行提示，這種是體驗(yàn)最差的做法，因?yàn)檫@種做法只有在用戶提交時(shí)才會(huì)告訴用戶必須勾選服務(wù)條款。
• 在未勾選服務(wù)條款時(shí)將提交按鈕灰色顯示，這種是標(biāo)準(zhǔn)的做法，能通過(guò)灰色顯示提交按鈕給用戶一定的預(yù)期，也達(dá)到了要求用戶必須勾選服務(wù)條款的目的。
• 還有一種操作效率更好但是不太普遍適用的辦法：將同意服務(wù)條款與提交按鈕合并處理。這種做法將前兩種做法中勾選服務(wù)條款、點(diǎn)擊提交兩步操作合并成了一步，提高了輸入效率；但是此種做法容易導(dǎo)致用戶忽視閱讀條款內(nèi)容，對(duì)于服務(wù)條款比較重要，希望用戶必須閱讀的場(chǎng)景不建議使用此種做法。

五、其他技巧

在前兩篇文章中我們說(shuō)過(guò)表單設(shè)計(jì)的一個(gè)重要原則就是提高用戶操作效率，填寫表單不是用戶的需求，用戶在填寫表單時(shí)是痛苦的，我們必須想辦法讓用戶盡快完成表單結(jié)束這種痛苦。

所以萬(wàn)變不離其宗，只要是有助于實(shí)現(xiàn)這一目標(biāo)的策略都是可取的，除了上邊以及前兩篇文章講到的內(nèi)容，還有很多可以參考借鑒的小技巧。

1. 預(yù)測(cè)輸入

預(yù)測(cè)輸入即根據(jù)用戶已經(jīng)輸入的內(nèi)容做推測(cè)，自動(dòng)給出當(dāng)前輸入的可能答案，最常見的就是根據(jù)當(dāng)前的熱門電影自動(dòng)給出建議搜索內(nèi)容；比如當(dāng)前爆火的電影《八佰》，當(dāng)用戶輸入“八”或者“8”時(shí)都會(huì)以下列列表的形式給出預(yù)測(cè)電影名“八佰”。

2. 自動(dòng)對(duì)焦

自動(dòng)對(duì)焦是自動(dòng)幫用戶激活下一個(gè)輸入表單，經(jīng)常使用于初始打開表單填寫頁(yè)面時(shí)，或者隱藏搜索框的搜索功能；當(dāng)用戶點(diǎn)擊搜索圖標(biāo)時(shí)會(huì)顯示搜索框，此時(shí)可以自動(dòng)將光標(biāo)定位在搜索框中而不需要用戶再點(diǎn)一次文本框來(lái)激活文本框。

3. 個(gè)性化定制

大數(shù)據(jù)技術(shù)的發(fā)展讓計(jì)算機(jī)了解每個(gè)人的習(xí)慣成為可能，那么我們就可以根據(jù)每個(gè)人不同的操作習(xí)慣給出不同的表單交互形式；比如：有些人習(xí)慣發(fā)表電影評(píng)論時(shí)長(zhǎng)篇大論，我們就可以對(duì)這個(gè)人顯示一個(gè)較大的文本框；有些人只喜歡只言片語(yǔ)，我們就可以顯示一個(gè)較小的文本框，將多余的位置展示更多的常用詞組。

4. 引入新技術(shù)

隨著科技的發(fā)展，人機(jī)交互的方式不再局限于用雙手操作鍵盤，語(yǔ)音轉(zhuǎn)文本的技術(shù)已經(jīng)十分成熟；圖像識(shí)別技術(shù)讓人們可以利用手機(jī)的攝像機(jī)掃描圖片或者卡片直接獲取信息；也可以借助外部硬件來(lái)輔助輸入；比如使用身份證讀卡器直接讀取證件信息來(lái)代替手工錄入、使用指紋識(shí)別來(lái)代替密碼認(rèn)證。

科技發(fā)展日新月異，在提高效率方面機(jī)器總是不會(huì)讓我們失望；因此我們也需要多多關(guān)注科技在表單輸入方面帶給我們的各種便利，及時(shí)引進(jìn)成熟的技術(shù)方案提升表單輸入體驗(yàn)！

六、結(jié)語(yǔ)

《360°全方位表單設(shè)計(jì)指南》系列最后一篇到此就結(jié)束了，三篇文章分別從表單的選取與組織、表單的元素設(shè)計(jì)、如何與表單交互三個(gè)方面完整講述了如何設(shè)計(jì)一個(gè)優(yōu)秀的表單體系。

本系列文章覆蓋了表單從“出生”到“死亡”的全過(guò)程，希望對(duì)大家有所幫助！

360°全方位表單設(shè)計(jì)指南（一）

360°全方位表單設(shè)計(jì)指南（二）

作者：時(shí)光時(shí)光慢些吧，公眾號(hào)：pmreport

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

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