如何設(shè)計占位符文本?

這篇譯文來自Andrew Coyle

占位符文本幾乎可以為所有的HTML輸入?yún)^(qū)域提供指示,但有時也會誤導(dǎo)設(shè)計師和開發(fā)者姻采。為復(fù)雜的表單提供文字提示,同時又可以省略標(biāo)簽來提高美觀度爵憎,這些聽起來很誘人慨亲。但是,使用占位符文本做這些事情會導(dǎo)致許多可用性問題纲堵。

本文將介紹占位符使用中的常見不妥做法巡雨,并給出替代方案。

錯誤示例

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


在輸入框上方放置標(biā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)簽作為標(biāo)簽顯示歪泳,而不是以占位符方式出現(xiàn)萝勤。

使用占位符作為二級標(biāo)簽看起來很具吸引力,如上如所示呐伞。但是如果使用常規(guī)的標(biāo)簽敌卓,表單的可用性會增加。


如果按照前面的說明更換占位符荸哟,將會減少表單的可用性問題假哎。但是如果說因為一些原因,你不得不使用占位符的話鞍历,注意以下幾點(diǎn):

合理的占位符使用方式

占位符需要比輸入文字更淺


讓占位符文本以淺色文字顯示舵抹,以此來區(qū)分它與輸入文字

用戶是在填寫一個空的條目。一個空白的輸入框是輸入文字的前提條件劣砍。占位符文可能會影響用戶的輸入操作惧蛹,這一影響特別是在占位符的顏色很明顯時,因為用戶可能會將其誤認(rèn)為是自己之前輸入的條目刑枝。

占位符文本需要在不同的屏幕上有良好的可視性


如果占位符文字的顏色過淺香嗓,可能在某些屏幕上會看不清楚

如果占位符文字的顏色過淺,可能在某些屏幕上會看不清楚装畅,導(dǎo)致用戶需要努力瞇眼去看

占位符文本應(yīng)該在用戶開始輸入后才消失


保持顯示占位符直到用戶開始輸入

如果僅在用戶鼠標(biāo)聚焦到輸入框時靠娱,占位符就消失,會給用戶帶來記憶負(fù)擔(dān)掠兄。

通常來說像云,不使用占位符可以提升表單可用性。

想要了解與占位符文本更多的信息蚂夕,請閱讀Katie Sherwin的報告迅诬。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市婿牍,隨后出現(xiàn)的幾起案子侈贷,更是在濱河造成了極大的恐慌,老刑警劉巖等脂,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俏蛮,死亡現(xiàn)場離奇詭異撑蚌,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嫁蛇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門锨并,熙熙樓的掌柜王于貴愁眉苦臉地迎上來露该,“玉大人睬棚,你說我怎么就攤上這事〗庥祝” “怎么了抑党?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長撵摆。 經(jīng)常有香客問我底靠,道長,這世上最難降的妖魔是什么特铝? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任暑中,我火速辦了婚禮,結(jié)果婚禮上鲫剿,老公的妹妹穿的比我還像新娘鳄逾。我一直安慰自己,他們只是感情好灵莲,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布雕凹。 她就那樣靜靜地躺著,像睡著了一般政冻。 火紅的嫁衣襯著肌膚如雪枚抵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天明场,我揣著相機(jī)與錄音汽摹,去河邊找鬼。 笑死苦锨,一個胖子當(dāng)著我的面吹牛逼泣,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播逆屡,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼圾旨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了魏蔗?” 一聲冷哼從身側(cè)響起砍的,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎莺治,沒想到半個月后廓鞠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帚稠,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年床佳,在試婚紗的時候發(fā)現(xiàn)自己被綠了滋早。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡砌们,死狀恐怖杆麸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情浪感,我是刑警寧澤昔头,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站影兽,受9級特大地震影響揭斧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜峻堰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一讹开、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捐名,春花似錦旦万、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至梅忌,卻和暖如春狰腌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背牧氮。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工琼腔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人踱葛。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓丹莲,卻偏偏與公主長得像,于是被迫代替她去往敵國和親尸诽。 傳聞我的和親對象是個殘疾皇子甥材,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容