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

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

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

一、認知策略

1. 表單排列

表單承載的主要功能是向用戶清楚地傳達信息，單列表單形式更利于用戶浏覽動線，幫助用戶識别和填寫内容。而多列表單形式用戶的視覺橫向移動範圍更大，浏覽和填寫效率更低。

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

首先作為設置界面，并非高頻操作業務，用戶隻會調整部分内容，而不是全業務的操作。所以更強調信息的查看，縱向布局更有利于浏覽。

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

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

2. 輸入框長度

1）輸入框排版

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

因為在視覺上我們更容易将右圖的空間和内容視為一個和諧的整體，但左圖過度的對齊導緻暗示隐性的截斷，我們會感覺表單列右側空間缺了一大塊。

所以表單中要注意整體的協調性，不要為了對齊而對齊。

2）輸入框長度的暗示

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

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

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

3. 必填與選填

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

通常必填字段較少時，優先采用星号（*）标注顯示，更好地提高信息識别效率。當必填字段較多時，則可以标注選填項的方式，避免出現滿屏星号，增加額外信息量。

但是同一個系統中建議還是采用統一的标記方式。我個人更傾向于星号（*）方式，用戶成本低，對内容幹擾性更小。

4. 識别好過記憶

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

1）主動性提示

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

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

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

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

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

2）交互性提示

還有一種提示增加了信息交互。例如密碼設置時，光标停留會觸發密碼規則提示。

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

3）被動性提示

對用戶而言，解釋說明、幫助信息更偏向于業務屬性。随着用戶深入使用産品，這些信息會變得不再重要，用戶查看的頻率也會越來越低。

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

5. 主任務與分支任務的協同

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

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

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

如果按照順序将信息羅列展示，這些内容會被放在頁面底部。長表單場景下，這些信息會無法直觀展示，用戶難以感知。所以需要為這些支線任務增加額外曝光。

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

具體的設計方案有很多種方式，需要根據場景和用戶确定。但是設計師需要能夠将主任務和分支任務進行有機的協同，保證用戶對頁面内容的全感知和操作效率。

6. 數量級的影響

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

信息量比較大時，首先要進行内容拆解，按照用戶的認知習慣完成信息分層，讓用戶不要直接面對大量數據。

例如通過樹表結合，或者雙層關聯下拉選擇，逐步縮小用戶的目标範圍。

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

二、交互策略

表單設計除了靜态展示效果外，還有大量的交互操作。主要的設計目标就是「效率」和「防錯」。

1. 操作效率

1）減少用戶輸入

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

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

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

2）合理預設

表單信息可以通過信息的抓取、内容關聯度分析，預設合理内容值，減少用戶的操作。例如QQ郵箱設置時，系統提供了默認話術，用戶隻要快速啟用即可。

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

2. 業務流程順暢

當我們在填寫A任務時，需要關聯選擇B任務。而B任務并沒有創建，該怎麼辦呢？

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

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

此時需要在任務開始前，給用戶足夠的信息提示。避免用戶已經填寫了部分内容後，發現缺少相關的内容，導緻任務無法完成。這會帶給用戶非常糟糕的體驗，尤其是會消耗用戶較大精力的工作。

3. 保存機制

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

4. 即時反饋

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

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

前端校驗無需服務器傳輸數據，前端頁面會根據校驗規則，對輸入完成的内容進行驗證。例如郵箱格式、手機号長度、密碼是否符合規則等。

後端校驗需要将表單内容傳入後台數據庫進行匹配，不匹配則會将信息反饋至前端頁面。通常用在點擊提交按鈕後，例如賬号不存在、密碼錯誤等。

前端檢驗可以幫助用戶及時發現問題并修改，糾錯的效率更高。後端校驗相對滞後，出錯後用戶需要自行定位錯誤項。

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

三、寫在最後

表單設計是設計師繞不開的内容，無論用什麼方法論也無法窮盡其中的可能性，也沒有一套覆蓋所有場景的設計模闆。

設計師需要根據實際的業務場景，去完成合适的設計方案，并在不斷的實踐中積累經驗，總結得失。

#專欄作家#

子牧先生。公衆号：子牧UXD（HelloDesign），人人都是産品經理專欄作家。産品體驗設計師。8年互聯網行業經驗，擅長體驗設計思維、設計方法論、交互設計研究。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部