起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識表單設計中，你需要注意這些事項
表單是什么？是用戶和網站之間的對話。設計表單如同設計一個產品，取決于你的理念是從產品目標還是用戶目標出發。作者通過對表單設計中基本規范和輸入方式的分析，提出了表單設計中需要注意的事項。
交互體驗對于而今的互聯網產品來講，無論怎樣重視都不為過。對于用戶接觸較多的表單設計，想必每位產品經理都有自己的心得體會，今天就和大家聊聊表單設計的基本規范和注意事項，疏漏之處，還請各位同行多多指教，共同探討。
在開啟正篇之前，先請大家看幾個有欠考慮的表單設計，我們一起看看問題到底出在哪里了？
案例①：某人事考試平臺網站
案例②：
案例③：
看完以上三例，不知大家作何感想，筆者在考試報名的時候，就碰到了案例①的表單。
那么，為什么他們敢用這樣的表單？
因為“剛需”、“壟斷”，就像偉大的1230X、擠成照片的地鐵，某三甲醫院的高傲態度等等。
但是，朋友們，不是我們所做的所有產品都能有這樣的場景吧，所以還是要老老實實的優化我們的用戶體驗，對嗎？
好，言歸正傳，首先要在此申明一下，表單設計的核心原則，也可以說是鐵律。
- 表單內容能減則減；
- 能給默認值的就不讓用戶選；
- 能讓用戶選的就不讓用戶輸；
- 必須輸入的能給提示，一定要給提示。
一、基本規范
下面，我們從如下幾點來聊聊表單設計的基本規范。
1.1 合理的結構
1、如果表單的字段過多，而又無法避免的時候，可按照業務邏輯進行分類，把冗長的表單劃分成幾部分進行排布。
2、如果表單內容存在前后步驟上的邏輯關系，可以將其按步驟劃分。
3、一些不影響主流程的信息，可以在需要啟動該流程的時候，再讓用戶填寫。
1.2 合適的位置
1、輸入框標簽的位置，通常有左對齊、右對齊、頂對齊、行內標簽幾種情況。根據眼動實驗數據表明，在理論效率上，頂對齊>右對齊>左對齊。
其中頂對齊的問題在于，在垂直方向上占用空間較大。
行內標簽由于位置所限。優點在于占用位置小，缺點在于填寫完畢，標簽的提示文字就消失了，復核信息較困難。因此，常在輸入較少量信息時可使用，例如，登錄。
2、輸入框提示信息的位置，一般推薦將提示信息放在操作的上下文中，最為明確。
3、提示信息在文本框的上下左右四個位置中，一般來講右側最受用戶歡迎。（相關調研的結果供參考）
1.3 恰當的語言
1、設計中，恰當的使用文案，會為產品增色不少。文案的核心原則是清晰、明確，語言風格要根據產品定位詳加斟酌。
2、有些必要的操作，可以通過提示信息給用戶解釋清楚，為什么需要用戶填寫此內容？填寫之后能為用戶帶來什么益處？這樣用戶在輸入的時候會感受到自己并非被迫的。
3、可以通過一些動效來增加情感聯系，例如我曾經看到過一個登錄頁面，在用戶填寫賬戶時，貓頭鷹會閉上眼睛。
1.4 合適的顏色
一般來說，錯誤為紅色，通知為藍色，警告為黃色，成功確認為綠色。
1.5 適宜的時間
推薦在用戶輸入完該項信息后，立即顯示驗證的成功/失敗信息。同時還可以考慮為用戶提供解決方法。
二、輸入方式
在表單設計中，存在多種輸入方式，那么在設計產品的過程中，我們該如何選擇，如何取舍呢？以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經驗。供大家參考。
2.1 文本框
注意事項：
1、合適的尺寸，根據輸入內容的長度確定文本框的尺寸。
2、自動匹配特定數字的輸入格式問題：
- 手機號碼?????? 示例：138 ?1174 ?6893
- 銀行賬號?????? 示例：6226 ?8005 ?2365 ?6879
- 身份證號?????? 示例：110 ?108 ?19861203 ?1020
在顯示銀行賬號、身份證號碼等敏感信息時，宜隱藏部分內容，避免信息泄露問題。針對卡號等復雜信息，現在很多銀行的app都支持直接掃描卡片獲取賬號。
3、提供幫助和解釋性文字，消除用戶疑慮和困惑。
4、文字輸入最好有自動補全、自動建議功能。
5、如有限制字符數，明確提示給用戶為宜。
6、表單輸入內容過多時，可增加一鍵清空、復制按鈕。
7、移動端特有問題：彈出鍵盤與需要輸入的文本類型相匹配。
8、在英文語境下，要避免英文全大寫的情況發生。
2.2 下拉列表
優點：占用空間小，不需要輸入驗證，技術難度低，用戶熟悉。
適用場景：適用于當下拉選項數量過多時。
注意事項：
1、允許用戶檢索下拉選項更為友好。
2、盡可能合理的排列選項，最容易選擇的放到上面（如果無法確定默認選項的話）。例如攜程的目的地的選擇。
3、下拉列表的提示信息也很重要，要讓用戶明確自己選擇的是什么。
2.3 單選框、復選框
注意事項：
1、按一定的邏輯進行選項排序，例如根據發生的可能性、難易程度、風險大小來排序。
2、選項應該易于理解，容易區分。
3、盡可能提供默認選項。
多選：
單選：
2.4 其他輸入方式
1、滑塊：
① 適用于精度要求不高的數據輸入，滑塊的精度可以根據產品定義，最小值可以自行設定。
② 滑塊亦可配合數字輸入，微調鈕等一并使用。
2、switch開關：
3、tab框：
注意事項：推薦在2>選項數量>6時，使用，且文案字數較少時。
2.5 日期選擇器
目前，在互聯網產品上，日期選擇器都得到了普遍的使用，很少有產品在要求用戶手動輸入日期了。
那么日期選擇器的使用應該注意哪些問題呢？
1、需要區分是選擇時間點還是選擇時間段。
2、是否允許手動輸入日期，允許手動輸入日期的同時，要能準確識別用戶輸入日期的格式。
3、是否需要給用戶提供默認值。
4、限制不可用日期。
5、時間選擇的顆粒度。
6、周末是否需要特殊標識。
最后一點要說的是，表單校驗的形式分為兩種，一種是提交后校驗，一種是在用戶填寫完該條信息之后立即校驗，一般推薦后者。
好啦，關于表單設計的幾點問題就聊到這里了，不周之處還請各位多多指教，互相學習。
本文由 @小建 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
總結的真棒！學習了謝謝
寫的真好
太棒了
你寫的真好。我學習。
學習了