表單設計歸納
一、表單解析
表單的目的、內容、大小長度等雖然各不相同，但基本元素比較固定；合理組織這些元素有助於用戶輕鬆完成表單填寫。
這些是文本輸入框的關鍵元素：
文本容器——可交互的輸入區域
輸入文本——所輸入的文本內容
標籤文本——告訴用戶這個表單欄位中要輸入的內容屬性
佔位符文本——輸入信息的範例，用戶後續需要用自己的內容替代它
幫助和驗證（可選）——提供上下文信息和驗證信息
前導圖標（可選）——描述文本欄位所需的輸入類型和特徵
後綴圖標（可選）——對輸入內容進行控制，比如現實和隱藏
基本上，表單在用戶的交互過程中需要經歷三個階段。
默認狀態：用戶在未進行任何操作前表單的狀態。
聚焦狀態：這個狀態強調用戶正在填寫的區域，幫助用戶聚焦和減少反覆掃描屏幕的時間。
反饋狀態：反饋狀態是指用戶收到的反饋時的頁面狀態(大多數是指錯誤信息反饋)。有時候，有時候對於上一個輸入信息的反饋在用戶聚焦到下一個填寫區域時就會顯示。然而，如果數據不能得到立即驗證的話，就要等到用戶點擊提交按鈕後再給予反饋提示。
二、表單結構
欄位的順序、節奏、外觀和組織。
三、表單域形式
1. 輸入框的類型
輸入框是提供回答問題的方式，有輸入框和輸入框組之分。
輸入框主要有複選框、單選鈕、下拉菜單、文本框、列表框（極少使用）；輸入框組類型有複合輸入框、關聯輸入框、父子輸入框等。
2、文本框結構
依據標籤和輸入框的位置，可分為上下、左右、內部。
1）、內部
暗提示
可使用於，數據錄入不多，填寫一次數據不修改數據表單設計。
示例：
註：
採用更加適用的「2加減1」原則，當用戶需要輸入的欄位多餘三個的時候，就必須給表單留下標籤，用來提示用戶。
暗提示多數情況，在內部加入 icon，用作信息提醒，缺點是 icon 屬於圖畫，是一種很抽象的東西，相比文字，它的表達能力就太弱了，碰到同類信息時，識別度不是很高。
浮動式標籤
如果需要極簡的輸入框設計，可以採用 Material Design 中所推薦的浮動式標籤設計。
比較省空間，多使用於在彈窗中使用比較好、或並排欄位錄入表單設計。
示例：
2、上標題、下輸入框
多使用於數據量不大，彈窗、移動端空間較小的表單設計。
示例：
3、左邊標題、右輸入框
多使用於Web空間較大的表單設計。
示例：
組合標籤表單的排版：
將相近的欄位打組
分塊分步
輸入框長度應符合用戶預期
合理組織這些元素有助於用戶輕鬆完成表單填寫
四、輸入什麼
為了平衡用戶體驗和支持後續操作，表單的設計應該遵循「不影響後續操作的最小化」原則。
1、必填、選填、不填項
設計表單內容時，首先我會根據信息架構框定一個範圍，一般表單的內容應該是信息架構中相應對象元數據的子集。
然後我們可以對元數據進行分類，分為：
必填項（不填寫後續操作無法進行）
選填項（不填寫不會影響後續操作，或者填寫比較繁瑣可以放在編輯中補充的信息）
不填項（由系統生成的數據）
為了保證「不影響後續操作的最小化」原則，表單填寫的內容必須包括必填項，儘量包括少的選填項，不需要包括不填項。
2、文本限制
一是為了陳列這些數據時，可以根據長度來確定它的一種展現方式，二是為了減輕資料庫的壓力。
輸入限制有兩種：
第一種是對表單域輸入的信息進行字數限制，比如發表 QQ 個性籤名時的字數限制。
在用戶輸入的時候，右下角會告訴用戶已經輸入了多少字，如果超過 80 字後會變紅色，用來警示用戶，並且此時的表單域也無法輸入新的內容。
第二種是做屬性限制，比如在數字文本框時，輸入漢字，或者字母，這就極大地增加了用戶的錯誤率。如，根據不同的信息類型，要給相應的屬性限制，比如身份證的 18 位，手機號的 11 位等。
3、給予解釋
當前需要用戶填寫相對隱私的信息時，請給予解釋這麼做的原因及目的。
註：
表單恢復功能：再次進入要恢復之前的數據填寫
五、幫助提示
說明要求，解釋原因，甚至幫助回憶。
1、幫助提示的控制項
常見的幫助提示有彈窗、toast（常見於移動端）、snackbar、氣泡和行內提示 5 種樣式，每一種提示的使用場景不同，對用戶當前操作影響也不同。
彈窗提示是直接打斷當前的操作；行內提示可清晰定位提示位置；氣泡提示多用於指示性、信息提示等場景；snackbar 類似於 toast，都是在頂層出現短時間的操作提示，但 snackbar 可以附帶操作屬性，如帶有撤銷的按鈕。
2、自動即時幫助
即時幫助需要在合適的時間和位置。新浪網註冊頁面，當開始填寫手機號碼時，會提示國內和海外填寫區別，如果直接跳轉到第二個輸入框，會立刻給出錯誤提示，來引起你的注意。
六、信息校驗
盡可使設計更直白，儘量減少幫助提示。
七、提交按鈕
示例：
註：
所有必填完成後，激活；否則，處於非激活狀態的方式會更優。
八、結果反饋
提交成功提示屬於整個輸入信息的額外信息，是對用戶完成信息輸入的提示和感謝，所以如果要增加成功提示需要簡短打動人，能夠喚起用戶正向的情緒即可，否則寧可不要成功提示。
示例：
九、表單體驗
1、幫助用戶填寫表格
藉助自動填寫功能，幫助用戶填寫表單。用戶在填寫過程在自動查詢匹配，提供建議，用戶可以使用回車和方向鍵快速選擇。
使用自動建議功能，基於關鍵詞查詢相關短語，以下拉框形式呈現。
使用預填充欄位作為默認值，比如基於IP位址幫用戶填寫好國家和地區。這類解決方案很靈活多樣，根據填寫欄位屬性、功能，可以靈活處理。
提供上下文信息。比如用戶在轉帳的時候，提供餘額相關的信息。
2、其他
避免多列布局
使用合理的鍵盤類型
允許用戶顯示和隱藏所設置的密碼，而不是讓用戶輸入2次來進行驗證，這對於生成有效的密碼更重要
使用內聯驗證
- - - - - - END - - - - - -
喜歡請分享，滿意點個讚，最後「再看」