一. 表單設計的影響與原則
1.1 表單的產生
- 由內而外，網站根據自身信息存儲格式要求，從數據庫映射成表單。
- 由外而內，從用戶能做什么推出表單。
- 表單設計目標：讓用戶迅速且輕松的完成表單填寫。
1.2 表單的重要性
- 購買者和購買產品的結算中介。
- 電子商務（攜程訂票、淘寶購物、產品信息發布）
- 社交活動（社區、論壇）
- 職業生涯（前程無憂、智聯招聘）
1.3 表單設計的影響
- 因為迷茫而放棄表單注冊
- 因為填寫信息繁瑣而放棄創建簡歷
- 因為提交訂單過程麻煩而放棄購物
- 因為填寫表單困難而放棄發布產品信息
1.4 案例
某大型電子商務網站的注冊登錄界面如下：
當用戶把想要購買的商品放入購物車，點擊結算按鈕時，登錄表單會出現。用戶實際想進行的操作是結算而不是登錄。這樣的設計會給用戶帶來困擾。
網站設計團隊認為，這樣設計可以加快老客戶購買結算的速度，新客戶不介意注冊。而實際使用情況是新客戶很介意注冊，不希望網站收集信息推送廣告，對注冊頁面天然排斥。而且用戶有時并不是很清楚自己是否注冊過，多次盲目嘗試郵箱和密碼組合的失敗會讓用戶沮喪甚至放棄購物。
表單設計的初衷是方便用戶購物，結果卻阻礙了商品銷售。通過以下的改動可以解決這個問題。將注冊按鈕改為繼續按鈕，同時加上一段簡短說明。這樣不強制用戶注冊，同時也能增加購買行為。
目前很多電商網站采用的是第一種設計，都需要用戶注冊成為會員才能購買商品，可能在結算、加入購物車或者瀏覽商品時要求用戶進行注冊登錄服務。但美團和攜程采用的是第二種設計，在購買商品和使用服務時并不強制用戶登錄注冊，而是改為采用手機校驗或動態口令。
1.5 表單設計的原則
- 內容簡潔，盡量減少用戶填寫表單的痛苦。
- 說明填寫完成路徑。
- 表單的設計要考慮情景（獲取必要信息即可）。
- 確保溝通一致（市場、設計、商業部門的內部訴求協調）。
二. 表單問題的設計與內容組織
2.1 表單問題的選取
- 保留，和用戶達成一致，只留最必要的內容，用戶渴望給出答案。
- 刪減，問題對用戶沒有意義、對表單自身沒有意義。
- 延遲，有些問題不需要馬上獲得答案（例如：等到用戶進行結算時再填寫收貨地址）。
- 解釋，涉及到用戶隱私問題的選項，給予解釋。
2.2 表單內容組織
將表單內容劃分成有意義的組
分組前的表單，所有的內容雜糅在一起，需要花費很多時間尋找并填寫信息。分組后的表單，對表單問題重新放置，使得層次分明。用戶清楚地明白在各個區域填寫哪些對應的信息。
2.3 向導型表單
較長和復雜的表單需要將內容分布到多個頁面，這種表單通常需要設置順序向導流程提示用戶一步步完成表單填寫步驟。
這張表單缺乏向導設置，每次填寫完一個頁面的內容，需要點擊下一步按鈕進入新的頁面，用戶對于后續的表單內容一無所知，對于需要花費多少時間填寫剩余部分的內容也沒有把握，這樣的設計容易讓用戶失去繼續填寫的耐心。
改進的向導型表單讓用戶和能夠很容易地知道總共的填寫步驟。
向導型表單能夠將注冊登錄的每一個步驟都展示給用戶，由用戶決定是繼續填寫還是退出，提升用戶體驗。
三. 表單的標簽和輸入框
3.1 表單標簽對齊方式
頂對齊方式
標簽在輸入框的上方。
優點
減少表單填寫時間，將用戶注意力集中于完成表單。
標簽和輸入框位置非常靠近，填寫表單很快很容易，用戶眼球只需要向下移動，為用戶填寫完表單提供了清晰的完成路徑。
提供了大量橫向空間，對標簽設置大小字號不會影響頁面布局，對長標簽很有用。
缺點
大量占用垂直空間，垂直空間十分有限的情況下慎重使用。
注意
根據實驗測試，用戶的眼球從標簽移動到輸入框的時間在頂對齊方式下是50ms，左對齊是500ms，右對齊是240ms。要想讓用戶快速完成表單，最好采用頂對齊方式。
標簽和輸入框之間的間距最好使用輸入框高度50%~75%的高度作為與標簽的間距。
國外網站大多采用頂對齊方式，國內網站大多采用右對齊方式。
右對齊方式
標簽在右側呈現為對齊方式。
優點
輸入框與標簽相鄰很近，用戶同樣可以快速填寫表單。
減少表單占用垂直屏幕空間，適用垂直空間有限的情況。
缺點
在左側形成難看的鋸齒狀邊緣，降低快速瀏覽完表單的效率。
靈活性不夠，標簽文字過長或者需要兩行文字，都會破壞頁面布局。
左對齊方式
標簽在左側呈現為對齊方式。
優點
有利于用戶考慮表單問題后再回答問題，用戶瀏覽表單問題更容易。不會被右側輸入框打斷。
缺點
增加標簽到輸入框的距離，增加用戶填寫表單的時間。
輸入框內對齊方式
把標簽和輸入框組合為同一個元素。
優點
適用于屏幕空間寶貴的情況，能節省一半的屏幕空間。
缺點
用戶填寫內容時標簽會消失，對于不明顯的問題，需要參考標簽的情況下，用戶容易迷茫。
混合對齊方式
標簽采用分散對齊的方式。
注意
慎用，會破壞明確的完成路徑和布局一致性。同時，如果每個標簽之間的長度差距過大，會在字之間形成很多空隙。整體界面效果會很難看。沒有明確理由，不建議使用。
對齊方式總結
如果要減少填寫時間，標簽長度需要靈活可變，用頂對齊。
如果要減少填寫時間，但垂直屏幕空間有限，用右對齊。
如果要求用戶瀏覽表單標簽，知道必填問題或者回到多個問題中的某個問題，用左對齊。
如果表單很短，屏幕空間極度有限，采用輸入框內對齊。
除非有合適理由，一般不采用混合對齊方式。
3.2 輸入框與必填項的使用
基本設計
輸入框的類型包括文本框、單選按鈕、復選框和下拉菜單。
設計輸入框時注意輸入框的長度，輸入框的表現形式需要提供給用戶填寫表單的有用線索。例如名稱、地址、證件號的輸入框一般要很長。驗證碼的輸入框可以短一些，因為驗證碼一般是四位數字。如果輸入框的長度模糊不定，會給用戶造成對填寫結果正確性的困擾。
星號在實際情況中可以代表必填項也可以代表選填項。如果表單上多數問題都是必填項，而少數問題是可選項，就可以用星號來標注可選項，再配上說明。如果表單上多數問題都是可選項，而少數問題是必填項，就用星號來標注必填項。如果差不多，標注必填項即可。
設計表單時。通過對文字設置不同字號，強調的文字設置大一些，輔助的文字設置小一些。醒目的文字設置顏色。通過差異化設置，層次就會分明，讓用戶很容易地抓住重點。
注冊表單的思考
- 問題是如何選取的？
- 輸入框的長度是如何設置的？
- 輸入框里添加的提示小圖標。
- 字體大小，字體顏色的設置。
四. 表單的輸入
4.1 去除無用的輸入
設置問題盡量少，讓用戶盡快完成表單。
設置表單問題時，如果表單問題并非絕對必要，或者可以在其他必要的時機再提出，則視為無用輸入，可以去除。
例如圖中的性別和學歷在注冊時就是無用的輸入信息，需要去掉。
4.2 設置默認輸入
為方便用戶輸入，加快表單填寫過程，在有些問題上可以為用戶提供默認輸入，讓用戶減少思考。但注意默認輸入要符合用戶利益，如果默認輸入時用戶并不喜歡的選項，會使用戶對服務產生懷疑，可能導致潛在用戶流失。
例如上圖的預訂機票表單，訂票日期采用默認輸入為加減0天，因為大部分人都是按預訂日期進行篩選；默認訂票數為大人票1張，兒童票0張；默認支付幣種為美元，根據公司網站所在地的通用貨幣設計。
4.3 基于選擇的輸入
根據用戶的回答出現一系列后續回答的問題。如：手機注冊和郵箱注冊。
4.4 水平或垂直選項的輸入
五. 表單的即時校驗與幫助
在表單中設置直接反饋有助于確保用戶的回答是有效的，這種實時溝通的方式稱為即時校驗。
即時校驗提供多種反饋，確認回答是否合適。建議有效回答，通過實時更新設計，幫助人們把提交數據控制在必要的限制范圍內。
即時校驗一般發生在人們在輸入框中開始輸入或者停止輸入的時候。
5.1 即時校驗-確認
如果用戶不能正確回答問題，確認他們的回答就非常重要。例如：輸入用戶名時存在用戶占用問題。如果是重復的用戶名，網站則會認為該答案是無效的。但用戶又不知道哪些用戶名可用，表單的即時校驗在這個問題上需要提供確認幫助。密碼則可能在長度、組成、強度上有更多的限制，即時校驗能夠確認用戶所提供的密碼是否合適。也會表明密碼的安全程度，現在通常采用的做法是設置密碼尺。
是否需要對表單的所有選項都設置即時校驗是一個需要權衡的問題。盡可能多地為問題設置即時校驗可以確保一次性快速填寫完表單。但同時驗證所有輸入框會分散用戶的注意力，也可能會引起用戶的反感。如果我們需要為許多問題提供即時校驗，要把握好時機。例如，在明確填寫結束后（輸入框失去焦點），再進行即時校驗比在填寫過程中進行即時校驗要好。
5.2 即時校驗-建議
建議提供有效答案的示例或提示。建議能保證用戶輸入有效，但并不考慮用戶體驗。例如我們會建議用戶按照設定的電話號碼格式（區號-電話號碼）來輸入，而用戶喜歡簡單地輸入電話號碼，我們需要考慮在用戶輸入完不同格式的電話號碼后轉化為我們想要的格式。
5.3 即時校驗-限制
很多表單有字數限制。我們需要設計即時校驗提示用戶字數限制上限以及當前的輸入字數，讓用戶對后續的輸入有預期。
5.4 用戶幫助
在標簽和輸入框旁邊增加幫助文字，告訴用戶應該如何回答問題。
提供幫助的情景
- 用戶不熟悉表單要求的數據（例如問題中出現專業名詞）
- 用戶質疑為何要填入敏感數據（例如信用卡號碼、生日）
- 解釋系統推薦的輸入方式（分隔符）
- 輸入框的必填和選填項
幫助形式
- 自動即時幫助：當鼠標聚焦在輸入框里時，幫助文字出現在輸入框的旁邊或下方，告訴用戶如何填寫答案。但缺點是只有用戶開始填表時才知道是否有幫助文字。改進做法是在輸入框中顯示幫助文字。
- 用戶激活的即時幫助：通常采用圖標、按鈕、圖片、文本鏈接提示人們有幫助可提供，例如問號圖標。如果表單問題比較復雜或者會被不同的人重復使用，建議采用這種幫助。
- 用戶激活的區域幫助：用戶激活的幫助文字可以顯示在某個特定區域而不是輸入框附近。用于表單非常復雜并且顯示幫助文字非常多的情況。
注意
- 用戶提示的消息類型最好不要超過四種，否則會造成用戶迷茫。
- 用戶提示消息必須明確簡潔地告訴用戶發生的問題和修復解決辦法。
- 用戶填寫正確時要設置成功消息。利用消息顏色和頁面顏色的雙重視覺差異強調正確/錯誤信息。
六. 表單動作的設計
標簽列出用戶需要回答的問題，輸入框讓用戶填寫答案。我們還需要通過動作設計來對表單進行操作。典型的Web表單可能包括提交、保存、繼續等多種操作按鈕來完成表單。這些操作按鈕根據重要程度及使用的頻率被分為主動作和次動作。
6.1 主動作與次動作
主動作代表多數人填寫表單的主要目標或首選處理方式。對于表單來說，保存、提交常常代表主動作，取消、返回、刪除一般是次動作。
主動作和次動作在設計時通常需要被賦予不同的視覺重要性。費茨法則給出了點擊目標所花費的時間與鼠標到達目標的距離和目標尺寸之間的函數關系。
Fitts’ Law: Time = a + b log2 ( D / S + 1 )
Time：從鼠標到達目標的時間；D：鼠標到達目標的距離；S：目標的寬度（尺寸）
根據費茨法則，我們需要設計次動作的按鈕減少用戶的注意力。另外，根據實驗測試，按鈕放置的位置也對用戶的操作正確性有較大的影響。例如主動作和輸入框左對齊可以減少填完表單的時間。左對齊使所有元素依靠左側形成自上而下的視覺移動路徑，用戶填寫完表單后視線會規則性的向下移動找到提交按鈕。主動作和次動作過于分散容易造成用戶點擊出錯。
一些常用的設計包括：主動作采用按鈕，次動作采用文字鏈接，使主動作按鈕更為突出也易于點擊；主動作和次動作都采用按鈕，但主動作按鈕尺寸更大，并添加醒目顏色，次動作按鈕一般為白色或灰色，利用視覺差異來強調首選操作，避免用戶犯錯。
6.2 按鈕響應
點擊提交按鈕后一般需要等待一段時間以便服務器處理數據并返回結果。在等待的時間里為了避免用戶重復點擊提交按鈕，可以修改按鈕的文字和狀態來響應用戶的請求。例如，我們在提交按鈕上設計當點擊提交后按鈕變為灰色不可用狀態并且顯示“正在提交…”響應用戶的提交請求，這樣重復點擊就不會起作用了。也有很多網站采用動畫方式響應請求，顯示一個進度條或者一個等待加載的圖片來提示目前的提交狀態。
6.3 主動作與服務條款
有的表單要求提交之前需要同意相關的服務條款。目前通常有兩種設計，一種是將服務條款選項與提交按鈕分離，單獨設置服務條款。另一種是去掉復選框并將按鈕改為“同意并注冊”。后者的主動作能同時包含確認服務條款和完成表單，避免了復雜化的操作，同時方便用戶填寫完表單。
七. 京東商城注冊表單設計與交互效果
實際案例是京東商城的個人用戶注冊表單。上圖是改版前京東商城的注冊表單，問題的選取采用用戶名、密碼、手機/郵箱這三部分，為了獲得有效手機號，還需要對手機號進行驗證。驗證碼能對網站安全進行保護，防止機械注冊。
對齊方式采用右對齊，方便用戶填寫，但不利于快速瀏覽表單。輸入框設計方面，用戶名、密碼、手機的輸入框較長，并配有提示圖片，提醒用戶輸入哪些信息。驗證碼的輸入框很短，提示用戶只需輸入幾個數字即可。
然而，在表單設計上也存在一些問題。例如，每個填寫項前面都有紅星，說明都是必填項，這樣增加了很多冗余信息量，這些紅星完全可以去掉。下圖是改版后的京東商城注冊表單，將右對齊方式改成了混合對齊方式，同時去掉了冒號和紅星，使得整個表單更加緊湊。
京東商城采用的注冊表單交互效果包括：
每一個標簽獲得焦點時，輸入框的邊框變為綠色，輸入框的右側顯示每一個填寫項的輸入要求（即時校驗-建議）。
在每一個填寫項輸入完成后，輸入框的右側顯示當前輸入是否合法、格式是否正確的消息提示（即時校驗-確認）。非法輸入，輸入框的邊框會變為紅色，同時顯示紅色的錯誤消息提醒（雙重視覺差異）；輸入正確后，輸入框的邊框恢復默認灰色狀態，同時輸入框圖標變為填寫成功的圖標（成功消息）。
對輸入的用戶名檢測有效性，并在用戶名被占用情況下提供可選用戶名的列表（自動即時幫助）。
設置密碼尺對于密碼的長度、組成和強度進行檢測，并用可視化方式給用戶提供反饋（即時校驗-確認）。
對填寫手機號碼這一選項給出解釋文字，打消用戶疑慮。
當用戶不同意服務條款時，右側顯示“請接受服務條款”的提示消息。
點擊“立即注冊”按鈕時，需要校驗每一個填寫項的字段是否為空，若為空，顯示提示用戶輸入的消息。成功提交后，跳轉到登錄頁面。
涉及的Axure知識：組件使用、動態面板、變量設置和條件控制、交互效果設置。
