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