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