2016-11-29 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
來(lái)源：UI中國(guó)
通過(guò)解決占位符的誤用，提高表單的可用性
占位符文本可用作幾乎所有的HTML輸入類型的屬性，被誤導(dǎo)的設(shè)計(jì)師和開發(fā)人員不要猶豫。為復(fù)雜的表單提供文字幫助或者刪除輸入標(biāo)簽來(lái)提高美觀度都頗具吸引力，然而，這樣使用占位符文本會(huì)導(dǎo)致許多可用性問(wèn)題。
本文將例舉常見(jiàn)的不良做法，并提供替代方案。
將占位符作為標(biāo)簽
將標(biāo)簽放在輸入框的上方，而不是將占位符用作標(biāo)簽。
設(shè)計(jì)師為了縮短表單長(zhǎng)度或者減少視覺(jué)干擾，會(huì)將占位符文本作為輸入框的標(biāo)簽。這種做法給短期記憶帶來(lái)負(fù)擔(dān)。用戶在單擊或鍵入時(shí)，標(biāo)簽就會(huì)消失，那么如果要再次顯示標(biāo)簽，就必須刪除該條目才行。
最好在輸入?yún)^(qū)域的上方放置一個(gè)輸入標(biāo)簽。空白的輸入?yún)^(qū)域就是輸入數(shù)據(jù)的提示——用戶會(huì)尋找未填寫的區(qū)域來(lái)確定他們需要采取行動(dòng)。
用占位符作例子
將示例文字放在輸入框的外部，而不是用占位符做例子
提供所需示例有助于用戶理解請(qǐng)求。然而用占位符文本充當(dāng)示例會(huì)引起一些問(wèn)題：失焦，對(duì)已錄入的內(nèi)容感到迷惑，以及減少輸入框的自解釋性。作為替代，示例文字可以放在輸入框的下方區(qū)域。
用占位符充當(dāng)幫助文本
占位符不應(yīng)該被用作幫助文本
占位符文本常被用來(lái)提供有關(guān)完成字段所需的更多信息。上面提過(guò)這種做法是不好的，它甚至因?yàn)槲淖值臄?shù)量更加靠不住。受誤導(dǎo)的設(shè)計(jì)師和開發(fā)人員經(jīng)常犯這樣的錯(cuò)——用占位符來(lái)傳達(dá)冗長(zhǎng)的信息。這個(gè)錯(cuò)誤有許多替代方案，比如上圖右邊的三條示例。
將占位符用作輔助標(biāo)簽
將輔助標(biāo)簽作為標(biāo)簽，不要用占位符
像左圖一樣將占位符作為輔助標(biāo)簽是很有誘惑力的，但是使用常規(guī)的輸入標(biāo)簽將提升表單的可用性。
盡早用提到過(guò)的一些方法刪除／替代占位符，表單就幾乎不會(huì)有可用性問(wèn)題。
但是如果你必須要用占位符……
恰當(dāng)?shù)恼嘉环褂梅椒ǎ?/strong>
占位符的顏色應(yīng)該比鍵入文本更淺
淺色的鍵入文本可以傳達(dá)其短暫性，并與錄入文本區(qū)別開來(lái)
用戶填寫空白。一個(gè)空白輸入框就意味著可以鍵入內(nèi)容，占位符文本會(huì)減弱輸入框的可操作性。尤其是當(dāng)占位符顏色很明顯時(shí)，用戶會(huì)以為這是預(yù)置文本。
占位符應(yīng)該在所有屏幕上都可見(jiàn)
當(dāng)占位符文本顏色過(guò)淺時(shí)，可能在有些屏幕上就無(wú)法顯示
占位符文本如果顏色太淺同樣會(huì)導(dǎo)致問(wèn)題，因?yàn)樵谀承┢聊簧峡赡軣o(wú)法清晰展現(xiàn)，導(dǎo)致用戶閱讀困難。
用戶單擊輸入框后，占位符不應(yīng)該消失
讓占位符文本保持到用戶開始錄入
消失的占位符文本給用戶的短期記憶增加了負(fù)擔(dān)，因?yàn)樗÷粤岁P(guān)鍵的幫助。
通常，在占位符文本被省略時(shí)，表單的可用性會(huì)增加。
歡迎關(guān)注公眾號(hào) 1660，不僅有譯文哦：
藍(lán)藍(lán)設(shè)計(jì)( www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn