起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識表單的幫助信息如何設計
編輯導讀：我們在填寫表單的時候，在輸入框的旁邊或者下面，會用一句話或者例子來解釋需要輸入什么數據，這就是表單的幫助信息。表單的幫助信息應該如何設置并且顯示呢？本文作者將對此展開分析，希望對你有幫助。
“一切都是為了幫助用戶完成表單輸入?！?/p>
01 表單的幫助信息是什么?
在輸入框旁邊或者下面，用一句話或者例子來解釋需要輸入什么數據。
02 為什么要有幫助信息?
標簽信息與輸入框的形式雖然對表單填寫提供了線索，
但這些還不夠。
為了讓用戶更好的完成輸入，設計師會在標簽或輸入框旁邊放置幫助信息，告訴用戶如何回答問題。
03 什么時候設置?
人們往往不會去閱讀屏幕上的提示。
但有些情況下，用戶期待能提供一些信息，幫助自己正確的回答問題。
對要求填入數據不熟悉的表單：
△提示用戶卡安全碼是背面的3位數字，它這里是以圖片方式呈現的，比較有趣；但建議配上文字更清楚
質疑為何要填入該數據？
△Amazon地址新增頁面，告訴用戶，收集手機號碼只是為了方便配送
擔心數據安全或隱私：
△Dribbble個人信息頁面，打消用戶顧慮，告訴用戶社交賬號信息不會在個人資料中展示
系統(tǒng)推薦的填寫方式：
△Dribbble修改密碼頁面，提示用戶密碼至少需要6位
可填或必填，與表單大部分要求相反時：
△Youtube上傳視頻頁面，標題為必填
總的來說就是：
如果大部分是必填項，你就只標明選填項，反之亦然。
04 怎么顯示?
始終顯示：
△Jira，輸入框下方始終顯示幫助信息
?Tips：
- 字體比標簽字體小兩號大小比較合適。
- 保持信息簡短扼要，如果信息超過你的輸入框長度，大多用戶會忽略。
輸入焦點時顯示：
點擊輸入框時，幫助信息出現在輸入框附近；缺點是，需要人觸發(fā)才能知道是否有幫助信息；
因此，會讓需要幫助的人望而卻步不愿嘗試去點擊。
所以可以在輸入框中顯示幫助信息。
但這里要注意只有一種情況可以使用該模式，那就是舉例說明時。
△Canva注冊表單，輸入框內信息為舉例說明
解釋問題是什么，為什么問這些問題，是否必須回答的幫助信息不應該在輸入框里出現。
用戶激活時顯示：
通過一致的圖標、按鈕、圖片或者文本鏈接，讓用戶知道這里提供的幫助。
圖標：
△Jira創(chuàng)建故事頁面的幫助圖標
?這里Jira設計得不是很合理（不要學它），?幫助符號應當靠近標簽。
這樣有助于人們?yōu)g覽信息。
文本鏈接：
△Amazon登錄頁的文本鏈接
優(yōu)點避免頁面跳動
懸浮觸發(fā)顯示幫助文字
△Youtube，鼠標停留該區(qū)域出現提示信息，解釋說明該字段
這種方法的缺點是，只有當指針固定在觸發(fā)熱點時，幫助文字才會顯示。
推薦擴大懸浮激活區(qū)域，人們會比較容易觸發(fā)幫助文字顯示。
?Tips：
如果人們經過懸浮區(qū)域，就會出現額外信息，可能需要延長約500毫秒來看看人們是否真的需要幫助，而不是因為鼠標偶然通過觸發(fā)區(qū)。
05 CONCLUSION!
- 不要依賴幫助信息彌補表單缺點
- 幫助信息最適合解釋人們不熟悉的數據
- 簡潔的文字毗鄰問題是最清晰的方式
- 如果人們知道表單問題答案，但不確定如何回答或者為什么回答，可以考慮使用輸入焦點時顯示
- 如果表單問題人們不熟悉或者復雜，而且可能同樣的人會多次使用，可以考慮采用用戶激活時顯示
- 圖標里問號表示幫助認可度最高
- 圖標、鏈接或者按鈕應放在標簽旁
作者：Neko，支付產品經理/UI/UX；公眾號：吱了一聲
本文由 @Neko 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自pexels，基于CC0協議
- 目前還沒評論，等你發(fā)揮！
