這篇譯文來自Andrew Coyle
占位符文本幾乎可以為所有的HTML輸入?yún)^(qū)域提供指示,但有時也會誤導(dǎo)設(shè)計師和開發(fā)者姻采。為復(fù)雜的表單提供文字提示,同時又可以省略標(biāo)簽來提高美觀度爵憎,這些聽起來很誘人慨亲。但是,使用占位符文本做這些事情會導(dǎo)致許多可用性問題纲堵。
本文將介紹占位符使用中的常見不妥做法巡雨,并給出替代方案。
錯誤示例
占位符作為標(biāo)簽文本
為了縮短表單的長度或者減少視覺噪音铐望,設(shè)計師有時會使用占位符文本作為輸入標(biāo)簽。這種辦法會給用戶帶來記憶負(fù)擔(dān)茂附,因為用戶單擊或鍵入時正蛙,標(biāo)簽就會消失。必須要清楚輸入才能再次顯示標(biāo)簽营曼。
最好在輸入框的上方放置標(biāo)簽乒验。空白的輸入字段用于輸入數(shù)據(jù)的提示蒂阱。用戶通過查看輸入框中的提示來決定需要采取的行動锻全。
占位符作為示例文字
提供輸入框的示例文字有助于用戶理解需要輸入的內(nèi)容。但是如果使用占位符文本來來作為示例內(nèi)容會導(dǎo)致問題鳄厌,比如說荞胡,點(diǎn)擊瞬間示例文字會消失,已有占位符文字與輸入內(nèi)容相混淆等了嚎±崞可以將示例文字放在輸入框下方作為替代。
占位符作為二級標(biāo)簽
使用占位符作為二級標(biāo)簽看起來很具吸引力,如上如所示呐伞。但是如果使用常規(guī)的標(biāo)簽敌卓,表單的可用性會增加。
如果按照前面的說明更換占位符荸哟,將會減少表單的可用性問題假哎。但是如果說因為一些原因,你不得不使用占位符的話鞍历,注意以下幾點(diǎn):
合理的占位符使用方式
占位符需要比輸入文字更淺
用戶是在填寫一個空的條目。一個空白的輸入框是輸入文字的前提條件劣砍。占位符文可能會影響用戶的輸入操作惧蛹,這一影響特別是在占位符的顏色很明顯時,因為用戶可能會將其誤認(rèn)為是自己之前輸入的條目刑枝。
占位符文本需要在不同的屏幕上有良好的可視性
如果占位符文字的顏色過淺,可能在某些屏幕上會看不清楚装畅,導(dǎo)致用戶需要努力瞇眼去看
占位符文本應(yīng)該在用戶開始輸入后才消失
如果僅在用戶鼠標(biāo)聚焦到輸入框時靠娱,占位符就消失,會給用戶帶來記憶負(fù)擔(dān)掠兄。
通常來說像云,不使用占位符可以提升表單可用性。
想要了解與占位符文本更多的信息蚂夕,請閱讀Katie Sherwin的報告迅诬。