阿肆Stella ：最近在做認證的優化，期間涉及到一系列的表單設計。在制作過程中，發現我對于提示語、按鈕的位置、是否放步驟條等等都無法做出快速的判斷，這說明我對這部分的概念是比較模糊的，所以就想針對表單的體驗設計做一個學習和總結，加深自己對表單設計的理解。

一、什么是表單

表單在網頁或 app 中主要負責數據采集的功能。也就是說，大部分起到了數據采集功能的模塊，我們都可以稱其為表單。表單本身只是一個數據采集的工具，本身不具有屬性，它可以被靈活運用于多種功能模塊中，例如用于登錄注冊模塊的信息采集，評論的編輯頁，朋友圈的發布頁等。

△ 淘寶

從視覺表現上分類，一個表單有3個基本組成部分：

• 標簽：告訴用戶相應的輸入元素是什么。
• 輸入域 ：一般包含文本框、單選框、復選框、下拉選擇、文件上傳、開關、步進器、步驟條等。
• 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕。

此外還可以有：

• 填寫幫助，如「請輸入11位數的手機號碼」。
• 反饋：「提交成功」「網絡錯誤」等。

注：表單可以包含以上組成部分，但不是一定要有，比如提交按鈕，在自動保存或觸發的表單頁面就可以沒有提交按鈕。

如圖 Twitter 填寫驗證碼表單中沒有提交按鈕，驗證碼輸入6位后自動進行校驗。

1. 列表VS導航VS表單

因為有些情況下，列表、導航與表單的表現形式可能非常相似，所以我們可能會弄混他們。

列表：是一種數據項構成的有限序列，即按照一定的線性順序，排列而成的數據項的集合，在這種數據結構上進行的基本操作包括對元素的的查找，插入，和刪除。

導航：本意是檢測和控制對象從一個點到另一個點的過程。在網站或 App 中用于定位用戶當前所在頁面位置，以及引導用戶從當前位置移動到其他位置。

表單：在網站或 App 中作為數據采集工具。

從定義可以看出，列表是一個數據項的集合，是排列方式，導航和表單是有特定作用的工具。導航和菜單可以用列表的方式體現，但列表不一定是導航和表單。此外，導航和菜單可能表現形式相似，但并不是同一種東西。

總之，判斷一個頁面是否是表單頁，關鍵看是否發生了數據的采集，從表現形式上可以看是否有表單域常用的控件，如文本框、單選多選、下拉菜單、開關等，以及是否有提交/清空等按鈕。

二、如何提升表單體驗

從本質上說，好用的表單應該是易于理解且讓人感到舒適的。易于理解的表單能夠幫助用戶更好的對它們進行填寫，這能讓用戶覺得是在跟表單進行交流，而不是單向的詢問，讓用戶感覺到自己得到了關注。

1. 盡可能減少不必要的表單項目

判斷某個字段信息對于用戶來說是否有必要在表單中進行填寫，每多一個項目需要填寫，就有可能流失一部分用戶或失去一部分好感度。雖然我知道有時候要去掉表單中的某些項目是不可能的（出于一些原因，如安全性等），但是我們應該盡量做到這一點。例如注冊表單，如讓用戶使用郵箱注冊，那么對于用戶的姓名字段是否是注冊的必選項？如果不是必選項是否可以在之后的信息完善中進行填寫。

例如 Airbnb 的注冊表單，Airbnb 允許用戶通過郵箱進行注冊，但是需要一并填寫姓名和生日，姓名和生日并不會影響用戶對網站進行瀏覽， 并且涉及到個人隱私，用戶可能并不愿意在不熟悉產品的時候就填寫，所以沒有必要在注冊的過程中進行填寫。注冊時只需要郵箱和密碼，而姓名和生日在需要時再進行完善體驗會更好。

2. 盡可能減少表單中的多余字段

表單提供的字段過多，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，以致于用戶在填寫過程中無法保持好心情。如果是登錄注冊的表單，就有可能因此流失掉一部分用戶。所以我們應該修改預填充內容，盡可能刪減掉額外的無用字段。

亞馬遜注冊頁面的改版充分體現了這一點，舊版中，標簽內容用了描述性的語句，但是其實短短幾個字已經足夠表明意思。

用「姓名」一個輸入框替換掉「姓」與「名」這兩個輸入框；用示例或者提示簡化單純重復的預填充內容。

3. 選擇最簡單的輸入方式

用戶沒有我們想象的那么勤奮，我們需要做到的是讓用戶最方便最快速的完成內容的輸入。通俗的來說，能不填寫就不填寫，能選擇就不要輸入，能選擇一下來實現的就不要選兩下。

△ 美團外賣/支付寶/Twitter

例如，美團外賣在選擇收貨地址時，自動勾選性別，因為這個選項至少可以方便一半的用戶少進行一項選擇，即便是性別選擇錯誤也不會對收貨產生什么影響；支付寶的充值中心自動選擇本機號碼，并且將重置的金額用卡片的形式變現出來，不用讓用戶輸入號碼或者輸入充值金額，用戶只需要通過幾次簡單的點擊即可完成選擇，非常方便；Twitter 輸入驗證碼后自動進行檢測，而無需用戶點擊「提交」按鈕。

4. ?一頁只做一件事，不要一次性展示全部內容

有的時候表單的內容可能非常長，需要用戶進行大量的填寫，這個時候我們要注意，不要一次性把所有需要填寫的內容都展示給用戶，這樣會嚇到他們，讓他們覺得需要在這個表單上花費大量的時間，有可能就放棄填寫了。

你可以回想一下當你在銀行辦理業務時，柜員丟給你一張這樣的表單你內心的第一感覺一定不是預約的，如果不是有提供的示例，真的不知道該如何下手。

當你在 Airbnb 申請成為房東時，也需要填寫大量的出租信息。而 Airbnb 很巧妙地把左邊長長的表單拆分成了多個步驟，在單個步驟中的三個關聯的選項也是一條一條逐步出現的，給人非常連貫順暢的感覺。每個頁面只回答一個內容，也讓用戶得以放松心情，專注于當前選項。

△ Airbnb

近期我們發現，很多產品的手機號注冊頁，手機號輸入與驗證碼輸入/密碼輸入也進行了分頁，當這三個項目在一頁時，用戶需要在輸入手機號碼后進行等待，然后才能繼續輸入，讓用戶產生這個表單進展緩慢的感覺，分開后，用戶在一頁只需要填寫一個或兩個內容，跳轉的時間又掩蓋了一部分等待驗證碼的時間，會覺得進展更快更流暢。

△ KEEP

5. 選擇合理的標簽對齊方式

頂對齊 vs 左對齊 vs 右對齊

跟一般想法相反，在輸入框上面放置標簽并不是可用性最好的位置。你有時候希望用戶盡可能快地填寫表格，但有些時候你需要故意讓用戶慢下來，以便他們用心地留意并閱讀標簽。此外，把長表單設成一個長列，讓用戶向下滾動頁面。這比把表單分成列，每樣都雷同要好。每一種對齊方式都有它的優點和缺點。

△ Matteo Penzo根據表單標簽對齊方式研究出的時間表。

小結：

• 希望用戶快速掃描表單，把標簽放在輸入框上面，這種布局更便于眼睛向下掃描。
• 希望用戶仔細的閱讀，把標簽放在輸入框的左側，這個布局掃描較慢，向下向右（Z的形狀）的眼動。

6. 選擇合適的按鈕位置

表單里可能有很多種類的按鈕，我們在這里只說最重要的「下一步」、「完成/提交/保存」等提交表單類型的按鈕。

最常用的位置是右上角和下方。在右上角通常是文字按鈕，而在下方一般有：固定在屏幕底部、跟隨鍵盤移動、隨表單移動。

關于保存功能，阿里設計師總結了一份超全的干貨：《關于保存功能的設計，這篇可能是最全面的總結！》

右上角文字按鈕

右上角文字按鈕，最常見的一種按鈕形式。

△ 美團外賣/微信/Facebook

優勢：不影響用戶對表單內容的注意力；用戶在完成表單時，視線會從下向上轉移，有助于用戶作進一步檢查。

適用于：

• 表單項目少，在一屏內完全展示；
• 內容復雜且重要，需要用戶專注于表單本身，認證填寫。

固定在屏幕底部

△ 閑魚

優勢：

• 用戶在任何時間都可以點擊；
• 強烈吸引用戶的注意力，引導用戶點擊。

適用于：

• 表單內容重要性不高，不需要全部完成，也不需要過于仔細，需要促進用戶快速完成提交。

缺點：可能會被鍵盤阻擋。

隨鍵盤移動

△ Twitter

優勢：

• 距離鍵盤位置最近，方便輸入完立即提交；
• 不會被鍵盤阻擋。

適用于：

• 表單內容以輸入為主，簡單不易出錯，輸入后需要快速提交。

置于表單底部

△ Twitter/美團外賣

優勢：

• 符合用戶從上至下的閱讀方向；
• 可以促進用戶完成整個表單。

適用于：

• 表單內容少于一頁，按鈕最靠近表單；
• 表單內容很長，需要引導用戶全部填寫。

四種常見方式各有優勢，需要根據實際情況選擇最適合的方式。

7. 給表單的設計加入微交互

其實市面上已經有許多新的表單設計形式慢慢普及開來了，但是要在使用之前思考你正在為誰而設計，它們是否適合你的項目，你的表單是否確實需要使用微交互。

△ Health App Login by Jakub Antalík in Health app on Mar 10, 2016

下面這個鏈接中就可以看到不少有趣的關于輸入框的動效形式。https://tympanus.net/Development/TextInputEffects/

這些例子中的微交互非常有趣，它們可以提起用戶的興趣，提升用戶注冊的轉化率。

總結

一個表單是否「好用」，視覺體驗只占了整體體驗一部分，初級設計師能很輕易的復制一個高級設計師設計出的表單的樣式，但是其中的思考卻無法直接拿來。作為UI設計師，我們需要謹記的是，通過優化視覺表現提升表單體驗只是表象，更多是要考慮到表單最終要幫用戶解決什么問題，表單對于你的產品或項目起到了什么作用。換言之，先想好為什么，再想怎么做。

參考鏈接

• 《Three Best Form Design Practices for your design process》?Ken Lee-Sanekata
• 《常見的表單設計，如何最大化提升用戶體驗？》
• 《如何打造一個高可用性網頁表單設計？》

以上是我個人的一些看法和總結，如有不對的地方歡迎指正和討論。

歡迎關注作者的微信公眾號：「海鹽社」

「表單設計一網打盡」

• 《可能是最全面的表單設計完全手冊！》
• 《遵守這8個原則，幫你創建用戶友好型表單》
• 《設計的套路：10個小技巧讓長表單填寫更省事》