占位符文本的選擇

2016-11-29    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

來源:UI中國


通過解決占位符的誤用,提高表單的可用性


占位符文本可用作幾乎所有的HTML輸入類型的屬性,被誤導(dǎo)的設(shè)計(jì)師和開發(fā)人員不要猶豫。為復(fù)雜的表單提供文字幫助或者刪除輸入標(biāo)簽來提高美觀度都頗具吸引力,然而,這樣使用占位符文本會導(dǎo)致許多可用性問題。


本文將例舉常見的不良做法,并提供替代方案。


將占位符作為標(biāo)簽

Image title

將標(biāo)簽放在輸入框的上方,而不是將占位符用作標(biāo)簽。


設(shè)計(jì)師為了縮短表單長度或者減少視覺干擾,會將占位符文本作為輸入框的標(biāo)簽。這種做法給短期記憶帶來負(fù)擔(dān)。用戶在單擊或鍵入時,標(biāo)簽就會消失,那么如果要再次顯示標(biāo)簽,就必須刪除該條目才行。


最好在輸入?yún)^(qū)域的上方放置一個輸入標(biāo)簽。空白的輸入?yún)^(qū)域就是輸入數(shù)據(jù)的提示——用戶會尋找未填寫的區(qū)域來確定他們需要采取行動。


用占位符作例子

Image title

將示例文字放在輸入框的外部,而不是用占位符做例子


提供所需示例有助于用戶理解請求。然而用占位符文本充當(dāng)示例會引起一些問題:失焦,對已錄入的內(nèi)容感到迷惑,以及減少輸入框的自解釋性。作為替代,示例文字可以放在輸入框的下方區(qū)域。


用占位符充當(dāng)幫助文本

Image title

占位符不應(yīng)該被用作幫助文本


占位符文本常被用來提供有關(guān)完成字段所需的更多信息。上面提過這種做法是不好的,它甚至因?yàn)槲淖值臄?shù)量更加靠不住。受誤導(dǎo)的設(shè)計(jì)師和開發(fā)人員經(jīng)常犯這樣的錯——用占位符來傳達(dá)冗長的信息。這個錯誤有許多替代方案,比如上圖右邊的三條示例。


將占位符用作輔助標(biāo)簽Image title

將輔助標(biāo)簽作為標(biāo)簽,不要用占位符


像左圖一樣將占位符作為輔助標(biāo)簽是很有誘惑力的,但是使用常規(guī)的輸入標(biāo)簽將提升表單的可用性。


盡早用提到過的一些方法刪除/替代占位符,表單就幾乎不會有可用性問題。


但是如果你必須要用占位符……


恰當(dāng)?shù)恼嘉环褂梅椒ǎ?/strong>


占位符的顏色應(yīng)該比鍵入文本更淺

Image title淺色的鍵入文本可以傳達(dá)其短暫性,并與錄入文本區(qū)別開來

用戶填寫空白。一個空白輸入框就意味著可以鍵入內(nèi)容,占位符文本會減弱輸入框的可操作性。尤其是當(dāng)占位符顏色很明顯時,用戶會以為這是預(yù)置文本。


占位符應(yīng)該在所有屏幕上都可見Image title

當(dāng)占位符文本顏色過淺時,可能在有些屏幕上就無法顯示


占位符文本如果顏色太淺同樣會導(dǎo)致問題,因?yàn)樵谀承┢聊簧峡赡軣o法清晰展現(xiàn),導(dǎo)致用戶閱讀困難。


用戶單擊輸入框后,占位符不應(yīng)該消失Image title

讓占位符文本保持到用戶開始錄入


消失的占位符文本給用戶的短期記憶增加了負(fù)擔(dān),因?yàn)樗÷粤岁P(guān)鍵的幫助。


通常,在占位符文本被省略時,表單的可用性會增加。


歡迎關(guān)注公眾號 1660,不僅有譯文哦:

Image title

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個人資料

存檔