超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

占位符文本的選擇

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

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

來源:UI中國


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


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


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


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

Image title

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


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


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


用占位符作例子

Image title

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


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


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

Image title

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


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


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

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


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


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


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


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


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

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

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


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

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


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


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

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


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


通常,在占位符文本被省略時(shí),表單的可用性會(huì)增加。


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

Image title

藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔