編輯導語：表單是我們常用的一個信息錄入工具，在不同的場景下，表單設計也有所不同，但都是為了讓用戶能更好地使用；在用戶場景中，我們需要注意到用戶體驗的一些細節，把握好能更方便快捷的點，提升用戶體驗；本文作者覅想了關于表單設計的思路，我們一起來了解一下。

業務場景拓展，字段增加又增加，原本眉清目秀的表單變得面目全非。

想要將這些復雜信息、組件組裝成用戶易填的表單，常常會讓設計師陷入無限的糾結。筆者聊聊用戶體驗視角設計表單的思路，希望對大家有幫助，歡迎一起討論交流。

一、表單是什么

表單是數據錄入、數據展示的重要工具。

生活中隨處可見，比如面試要填表單、辦銀行卡要填表單、入庫要填表單……

互聯網產品設計中也離不開表單，如注冊、登錄、商品錄入、功能設置……

二、表單的內容

表單主要由這四類元素組成：標簽、輸入域、操作按鈕、提示信息。

1. 標簽

標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡潔明了，快速讓用戶理解。

標簽對齊方式有左對齊、右對齊、頂對齊、內對齊，都有各自優缺點，不同場景酌情使用。

2. 輸入域

輸入域是表單的核心，是錄入信息的核心交互部分，為了不同信息更易錄入會采用不同交互組件；比如：單行文本框、多行文本框、單選框、多選框、數字輸入框、金額輸入框、日期、日期區間、人員選擇、部門選擇、圖片、文件等。

3. 操作按鈕

操作按鈕是表單信息錄入完成后，繼續或取消任務的觸發器。

為了讓用戶視覺聚焦和更快完成任務，操作按鈕分為主次按鈕，通常主任務操作為主要按鈕，次任務操作為次要按鈕，并且一個場景中通常只有一個主按鈕；比如，提交和取消，保存和取消等。

4. 提示信息

錄入提示：幫助用戶更具象的理解錄什么怎么錄。

幫助提示：表單中如果標簽信息無法讓用戶理解，可以提供幫助信息讓用戶更準確的理解，通常在標簽的前/后有一個幫助按鈕，點擊/鼠標懸浮按鈕出現有幫助信息的彈窗；其他還有頁面幫助信息，新手引導幫助信息等。

錯誤提示：幫助用戶理解哪里錯了和怎么做正確。

三、設計思路

表單設計目標：讓用戶更輕松獲取表單信息，更容易懂，更快速完成表單信息錄入任務，如果還能讓用戶過程很愉悅就更秒了。（用戶體驗視角）

設計方法：通過降低用戶行為負荷，提高表單設計的用戶體驗。

行為發生的常規路徑：通過視覺輸入信息到大腦 （視覺）— 大腦消化信息（認知） — 采取動作（動作）。

• 視覺負荷：用戶在屏幕上識別和尋找信息，都屬于視覺負荷，信息獲取越輕松視覺負荷越低。
• 認知負荷：大腦處理信息時理解、思考、記憶都屬于認知負荷，復雜陌生信息的認知負荷需要消耗大量腦力；所以減少認知負荷的核心是減少用戶思考，甚至是不要讓用戶思考，成為大腦潛意識認知的決策。
• 動作負荷：用戶在使用產品時如果操作太繁瑣步驟太多，有可能會中途放棄，這就是動作負荷帶來的影響；所以在不大量增加視覺負荷和認知負荷的前提下，減少交互步驟可以降低動作負荷。

通過降低視覺、認知、動作負荷的“三招”，提升行為產生節點間轉化率，讓任務行為發生更容易。

誤區：有些人陷入了設計極端，認為操作越少交互設計就越好，實際上用戶能更好閱讀并理解比少一步簡單操作更重要。

補充：心理負荷在特定場景也是影響用戶行為發生的重要因素，如隱私、健康、安全、財物等。

四、設計技巧

1. 降低視覺、認知負荷

表單的信息是視覺負荷和認知負荷的源頭，所以如何設計信息易讀易理解就尤為重要。

筆者的方法就是先盤信息，再梳理（該拆的拆，該合的合，該減的減），然后有節奏編排信息。

就像搬家后收拾房間，有一大堆東西需要整理，我們通常會先盤下有哪些東西，然后就是該丟的丟，該放在一起的放一起，最后分門別類放在房間的合適位置。

盤信息：

拿到表單信息后不著急動手，先了解此表單背后的業務場景，理解每一條信息字段背后的業務價值。這是有說服力設計的核心支撐。

梳理信息：

通過拆、合、減的方法，歸類組合信息。字段信息非必要就減掉，相關性高的信息放一起，梳理的目的讓信息歸類更符合用戶認知，讓信息更易被用戶理解。

技巧點：

• 文案盡量簡潔并貼合用戶認知，垂直業務的文案最好是業務語境的表述。
• 按業務場景合并包裝信息，比如把復雜表單字段包裝成A、B、C三個選項供用戶選擇，用戶更容易理解和易用。

有節奏展示

信息有節奏展示有利于用戶更高效獲取、理解信息；畢竟如果信息像機關槍子彈一樣連續涌入大腦，誰都沒耐心看，并且大腦消化也跟不上。

技巧點：

• 信息錄入先簡單后復雜，先熟悉后陌生
• 先放必填基礎信息，后放選填自定義信息
• 有前后邏輯關系試情況分步展示
• 信息能單列展示就不用多列（從上至下或從左往右，按一個規律的視覺流信息獲取更輕松）

2. 降低動作負荷

通過減少用戶行為成本，達到降低動作負荷的目的；畢竟錄入信息方式越容易，就更容易完成表單錄入。

技巧點：

• 能給默認值就不讓用戶選；
• 能讓用戶選就不讓用戶輸；
• 平鋪單選優于下拉單選（有限選項時）；
• 輸入時能智能聯想就聯想；
• 能即時校驗的早校驗糾錯。

以上是筆者表單設計的技巧，核心“三招”是通過降低視覺、認知、動作負荷，讓復雜表單更易懂易錄入，希望對大家有幫助，歡迎大家和筆者交流。

作者：灰機；公眾號：灰機的設計筆記

本文由 @灰機 原創發布于人人都是產品經理，未經許可，禁止轉載

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