編輯導語：表單是B端產(chǎn)品中最廣泛的設計形式之一，充滿了各種不確定性。本篇文章中作者從「認知」和「交互」兩個維度，總結(jié)了表單設計中的認知與交互。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。

在《Web Form Design》一書中，作者認為「表單決定了最關鍵的界面中交互的成敗」。作為B端產(chǎn)品中最廣泛的設計形式之一，表單有各種設計方法和技巧，也充滿了各種不確定性。

今天我就從「認知」和「交互」兩個維度，總結(jié)下表單中的設計細節(jié)，希望對大家有所幫助。

一、認知策略

1. 表單排列

表單承載的主要功能是向用戶清楚地傳達信息，單列表單形式更利于用戶瀏覽動線，幫助用戶識別和填寫內(nèi)容。而多列表單形式用戶的視覺橫向移動范圍更大，瀏覽和填寫效率更低。

例如QQ郵箱設置頁面中，選項都是采用了縱向布局的方式。當然這種布局方式是比較理想化的，是與場景相匹配的。

首先作為設置界面，并非高頻操作業(yè)務，用戶只會調(diào)整部分內(nèi)容，而不是全業(yè)務的操作。所以更強調(diào)信息的查看，縱向布局更有利于瀏覽。

其次，表單項內(nèi)容應并不復雜，即使采用縱向布局，對整體的表單長度影響也比較有限。另外配合底部常駐按鈕，對用戶的操作效率影響不大。

而在B端輸入型表單中，本身內(nèi)容填寫的任務就比較重，所以需要適當控制表單的整體長度，因此一味地追求瀏覽動線也是不可取的。

2. 輸入框長度

1）輸入框排版

如下圖所示，右圖采用的是錯落有致的排版，左圖更加整齊劃一。但是相比較而言，似乎右圖的詩句舒適度更高。

因為在視覺上我們更容易將右圖的空間和內(nèi)容視為一個和諧的整體，但左圖過度的對齊導致暗示隱性的截斷，我們會感覺表單列右側(cè)空間缺了一大塊。

所以表單中要注意整體的協(xié)調(diào)性，不要為了對齊而對齊。

2）輸入框長度的暗示

輸入框的長度具有一定的暗示作用，因為用戶會認為它是與輸入的內(nèi)容是相對應的。尤其是郵政編碼、電話號碼和銀行卡號等長度固定的字段。

在設計這類輸入框的時候，可以采用與內(nèi)容相互匹配的長度，避免過長引起用戶對輸入內(nèi)容正確性的疑慮。

下圖即一典型案例。在上圖中，不需要花多少錢的金額輸入框進行等寬處理，容易誤導用戶對所需輸入金額的判斷，造成用戶的不安全感。

3. 必填與選填

必填和選填是表單的基本信息，用來引導用戶識別關鍵信息，做出行為決策。

通常必填字段較少時，優(yōu)先采用星號（*）標注顯示，更好地提高信息識別效率。當必填字段較多時，則可以標注選填項的方式，避免出現(xiàn)滿屏星號，增加額外信息量。

但是同一個系統(tǒng)中建議還是采用統(tǒng)一的標記方式。我個人更傾向于星號（*）方式，用戶成本低，對內(nèi)容干擾性更小。

4. 識別好過記憶

這是尼爾森十大可用性原則之一，要求能夠通過各種方式給予用戶足夠的信息，減少用戶的記憶成本。在表單設計中，主要是各種提示信息輔助用戶完成表單填寫。

1）主動性提示

對于開放性、復雜的、超出用戶認知的輸入信息，需要做出主動性提示。

例如在阿里云、騰訊云中，很多名稱字段都是需要以字母開頭的。而普通用戶為了便于信息的識別和記憶，更習慣于中文命名。

這種情況下，表單中就需要默認給出填寫說明，減少用戶的記憶和出錯概率。

另外一些具有限制性的規(guī)則，對用戶的操作會產(chǎn)生直接影響的，也需要顯性地告知用戶，盡量避免出現(xiàn)理解偏差，帶來用戶投訴。

主動性提示可以通過輸入框中的「占位標簽」告知用戶；不過過長的提示信息通常放置在輸入框下方，便于用戶查看。

2）交互性提示

還有一種提示增加了信息交互。例如密碼設置時，光標停留會觸發(fā)密碼規(guī)則提示。

既保證了默認界面信息的精簡，又可以保證提示的有效性。用戶輸入時，還會進行內(nèi)容校驗反饋，交互性更強。

3）被動性提示

對用戶而言，解釋說明、幫助信息更偏向于業(yè)務屬性。隨著用戶深入使用產(chǎn)品，這些信息會變得不再重要，用戶查看的頻率也會越來越低。

所以這類信息通常被默認收起，減少界面的信息量，用戶在需要時主動觸發(fā)查看。

5. 主任務與分支任務的協(xié)同

有些展示型表單，主要是為用戶提供信息服務的。但是為了保證操作鏈路的流暢，會加入一些分支任務。

例如任務預覽時，會增加「發(fā)布」或者「編輯」功能，便于用戶直接完成二次操作；或者智能報告表單中會增加人工「修正建議」，對內(nèi)容進行糾偏。

這些操作只是可選項，并不是用戶必需的操作行為。

如果按照順序?qū)⑿畔⒘_列展示，這些內(nèi)容會被放在頁面底部。長表單場景下，這些信息會無法直觀展示，用戶難以感知。所以需要為這些支線任務增加額外曝光。

例如頂部的引導文字按鈕，借助定位錨點，實現(xiàn)路徑直達，提高操作效率；或者采用底部浮層彈窗的形式，方便信息的填寫及表單內(nèi)容的查看。

具體的設計方案有很多種方式，需要根據(jù)場景和用戶確定。但是設計師需要能夠?qū)⒅魅蝿蘸头种蝿者M行有機的協(xié)同，保證用戶對頁面內(nèi)容的全感知和操作效率。

6. 數(shù)量級的影響

有些時候我們不得不面對很大的數(shù)據(jù)量，這對設計師和用戶都是一個挑戰(zhàn)。設計時，我們需要根據(jù)信息量做出合適的設計方案。

信息量比較大時，首先要進行內(nèi)容拆解，按照用戶的認知習慣完成信息分層，讓用戶不要直接面對大量數(shù)據(jù)。

例如通過樹表結(jié)合，或者雙層關聯(lián)下拉選擇，逐步縮小用戶的目標范圍。

某些場景下，還要增加輔助搜索功能，讓信息篩選更加簡單。

二、交互策略

表單設計除了靜態(tài)展示效果外，還有大量的交互操作。主要的設計目標就是「效率」和「防錯」。

1. 操作效率

1）減少用戶輸入

雖然PC端輸入比移動端更加便捷，但是輸入型操作對用戶而言成本仍然較高。一方面用戶需要思考應該填寫什么內(nèi)容，另一方面需要準確地完成內(nèi)容輸入。

而選擇的成本相對更低，因此在表單設計時，盡可能讓用戶以選擇的方式完成任務。

例如郵箱在上傳附件時，如果郵件沒有填寫過標題，會將附件名稱直接填入郵件標題中，減少用戶輸入。

2）合理預設

表單信息可以通過信息的抓取、內(nèi)容關聯(lián)度分析，預設合理內(nèi)容值，減少用戶的操作。例如QQ郵箱設置時，系統(tǒng)提供了默認話術，用戶只要快速啟用即可。

對于如證件類型、手機區(qū)號、國籍等較為通用的選項，為用戶提供默認選擇，同樣可以有效簡化操作步驟，減輕用戶輸入，幫助用戶更快地完成表單填寫。

2. 業(yè)務流程順暢

當我們在填寫A任務時，需要關聯(lián)選擇B任務。而B任務并沒有創(chuàng)建，該怎么辦呢？

通常情況下，需要在A任務中完成創(chuàng)建B任務。例如彈窗、抽屜、甚至是新開頁面的形式，保證主流程的暢通。否則對于高頻操作的任務，會嚴重影響用戶的操作效率。

如果由于各種因素，在流程中無法直接創(chuàng)建分支任務，或者由于各種限制條件阻斷用戶操作時，該怎么辦呢？

此時需要在任務開始前，給用戶足夠的信息提示。避免用戶已經(jīng)填寫了部分內(nèi)容后，發(fā)現(xiàn)缺少相關的內(nèi)容，導致任務無法完成。這會帶給用戶非常糟糕的體驗，尤其是會消耗用戶較大精力的工作。

3. 保存機制

表單填寫時，可能會遇到各種異常場景，需要有防錯機制和保存功能，避免用戶誤操作時造成信息丟失。

4. 即時反饋

表單填寫是為了向用戶收集正確有效的信息，所以需要在用戶填寫完成或者提交表單時增加校驗機制。

校驗機制分為前端校驗和后端校驗。

前端校驗無需服務器傳輸數(shù)據(jù)，前端頁面會根據(jù)校驗規(guī)則，對輸入完成的內(nèi)容進行驗證。例如郵箱格式、手機號長度、密碼是否符合規(guī)則等。

后端校驗需要將表單內(nèi)容傳入后臺數(shù)據(jù)庫進行匹配，不匹配則會將信息反饋至前端頁面。通常用在點擊提交按鈕后，例如賬號不存在、密碼錯誤等。

前端檢驗可以幫助用戶及時發(fā)現(xiàn)問題并修改，糾錯的效率更高。后端校驗相對滯后，出錯后用戶需要自行定位錯誤項。

無論采用哪種方式都要告知用戶錯誤原因，幫助用戶快速解決問題。

三、寫在最后

表單設計是設計師繞不開的內(nèi)容，無論用什么方法論也無法窮盡其中的可能性，也沒有一套覆蓋所有場景的設計模板。

設計師需要根據(jù)實際的業(yè)務場景，去完成合適的設計方案，并在不斷的實踐中積累經(jīng)驗，總結(jié)得失。

#專欄作家#

子牧先生。公眾號：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗設計師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗，擅長體驗設計思維、設計方法論、交互設計研究。

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

題圖來自 Unsplash，基于 CC0 協(xié)議。