2023-8-16 ui設計分享達人
我們很多時候會在選擇設計方案上搖擺不定。自己覺得好的方案，看到別人是另外一種形式，又會覺得自己的是不是不太好。其實沒必要，每一種方案都有好與壞，很難做到100%完美，只能說在當前這個階段里接近完美。
就像小孩有了蟲牙，去醫院治療，醫生也會說有很多種方案。具體用哪一種會根據年齡、性別、牙齒生長情況來決定。比如：一個6歲的女孩，在不嚴重的情況下，醫生可能就建議清理后補一下；如果是一個5歲的男孩，當前牙齒還不錯，距離換牙還有比較長的一段時間，可能會給你放個普通點的牙套保護起來。
即使在這種情況下，也會有家長事后說放牙套感覺像是過渡治療。那如果不放，后面嚴重了，需要根管治療的時候，家長又會說為什么當初不放牙套。
其實，表單幫助系統也是如此
雖然表單標簽和輸入框的表現（展現）方式，為填寫提供了有用線索。但有時只有這些元素還不夠。常見的方法是在標簽或者輸入框旁增加幫助文字“告訴”人們應該如何回答問題。
例如：下圖中標簽與輸入框旁，都有幫助圖標引導用戶進行填寫。
它和校驗提示類似，都是幫助人們順利完成填寫任務。
因此，有很多實踐方法可以通用，如下：
1、提供幫助的場景
幫助文字只是告知人們應該如何填寫，但并不是完成Web表單的關鍵。
由于人們往往不會去閱讀屏幕上的提示，這也會導致幫助文字產生問題。
眼動跟蹤研究表明，很多人看到表單時會直接跳到第一個輸入框。這是一種自然傾向，人們就想填完表單，能繼續到下一步!
但在以下場景中需要幫助文字：
1、人們不熟悉表單要求填入的內容。例如：什么是數據分析?
2、人們質疑為何要填入特定數據。例如：為什么要知道我的出生日期?
3、人們可能會關心數據安全或者隱私。例如：填寫信用卡號碼安全嗎?
4、系統推薦的數據填寫方式。例如：在填寫標簽時請用“逗號”隔開。
2、自動即時幫助
自動即時幫助系統：指在幫助信息最合適的時間和位置顯示。
例如：下圖中點擊或者用 Tab鍵激活輸入框，相關幫助文字就出現在輸入框的右邊。 為了能讓幫助文字出現在人們預期的位置，自動即時幫助需要網頁上有一塊專門的區域來顯示動態幫助文字。
另外一種方法不需要屏幕上有專門的區域來顯示幫助文字，而是把幫助文字直接顯示在相關輸入框的下方。
例如：下圖校驗提示框（注：因沒找到對應的幫助提示效果，所以就拿校驗提示舉例，要表達的效果是一樣）
其優點是幫助文字與問題相鄰，很容易產生聯系，而缺點是幫助文字會遮住其他輸入框。
如果幫助文字更適用于一組相關輸入框、而不是單個輸入框，自動即時幫助同樣有用。 例如：觸發“數量”“型號”這一行，會自動高亮顯示每組信息的相關幫助信息。
以上這幾種自動幫助系統也有一個潛在缺點，即只有開始填表時，人們才知道是否有幫助文字。
有種辦法或許能彌補這個缺點，即在輸入框中顯示幫助文字。
這種方法和自動即時幫助文字相反，幫助文字出現在訪問輸入框之前，輸入內容后就不再出現。由于能立刻看到幫助文字，所以人們一看到表單就可以得到幫助提示。
但這種方式適用于概括回答。例如：下圖中App Store URL輸入框中解釋了為什么需要填。
總結： 由于自動即時幫助系統不會預先顯示幫助文字，因此最適合用于人們能回答但不清楚如何回答的問題。
3、用戶激活的即時幫助
用戶激活的即時幫助：是指在人們需要時提供幫助。這種方式通常采用一致的圖標、按鈕或文本鏈接，便于人們知道有幫助可供使用。
需要時，人們可以通過點擊或觸發的方式，來顯示相關幫助文字。
例如：下圖中觸發“問號”小圖標會顯示對應的說明。
但這種方式也有一個缺點，即幫助符號靠近輸入框，而不是靠近標簽。之前表單相關文章中有說過，必填輸入框標志、符號和標簽聯系在一起有助于人們更容易地瀏覽到所需信息。
例如：在阿里云、騰訊云中很多提示都在標簽旁邊，但我不確定是不是所有頁面都是采用這種形式。通過頁面發現他們標簽都是采用的左對齊，如果是右對齊是不是也是在標簽后面？或者是根據相關度來規定，如果和標簽相關放在標簽旁，和輸入相關放輸入框旁。大家有興趣可以留意觀察一下。
雖然“問號”是最常用于顯示幫助內容的符號，但也有其他符號能達到同樣目的(例如騰訊云中的“i”符合)。無論使用圖標、按鈕、文字，都是為了通過某種視覺線索來表明幫助的存在。
總結： 如果表單所含問題復雜，或者表單會被相同的人重復使用，這類表單適合采用用戶激活的即時幫助。因為新用戶使用時可以訪問所有需要的幫助，而高級用戶只觸發一些幫助來喚醒記憶或者快速回答問題。
4、用戶激活的區域幫助
用戶激活的幫助文字還可以顯示在頁面固定（統一）位置，而不顯示在相關輸入框的毗鄰區域。顯示幫助文字的位置固定可以利用更大顯示面積，提供廣泛的幫助文字和內容。
例如：幫助中需要展示圖形和圖表，同時人們可在固定位置顯示找到幫助文字。下圖是阿里云的幫助文檔浮層窗口。
有些產品也會采用瀏覽器新窗口打開的方式，來顯示大量的幫助信息。
另一種替代方法是利用毗鄰表單的統一區域來顯示相關幫助內容。
例如：下圖表單右側有一欄專門顯示相關幫助文字，觸發與點擊表單會顯示對應的幫助信息。
另外一種方式是通過點擊幫助，右側彈出提示信息，與上面不同之處是可以關閉，這樣更適合新用戶與老用的兼容。
總結： 與即時幫助類似，用戶激活的區域幫助，更適合用于需要多次提供幫助的表單，尤其是復雜問題的表單。
5、最佳實踐
1、不要依賴幫助文字來彌補表單缺點。盡量減少表單中的幫助文字，以促成更好的設計方案；
2、幫助文字最適合解釋人們不熟悉的數據，例如，為什么要問這些問題、安全和隱私、建議回答問題的方式及說明可填項；
3、簡潔的幫助文字靠近問題區域是最清晰的展示方式；
4、輸入框內的幫助文字只能用于提供回答問題的方式；
5、如果人們知道表單問題答案，但不確定如何回答或者為什么回答，可以考慮使用自動即時幫助系統；
6、如果表單問題人們不熟悉或者復雜，而且可能同樣的人會多次使用，可以考慮采用用戶激活的幫助系統；
7、如果幫助內容很多，可以使用區域幫助，不要使用即時幫助；
8、圖標、鏈接或按鈕用于用戶激活的幫助文字觸發器應放在標簽旁，盡量不要放在輸入框旁；
9、如果要求用戶填入敏感資料，考慮使用有操作含義的幫助文字，允許人們確認資料安全。
作者：夜鶯YEAH
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。