被誤導(dǎo)的設(shè)計(jì)師們與開發(fā)們毫不猶豫的將占位文本作為一種屬性運(yùn)用到幾乎所有的HTML輸入類型中，而它原本是為復(fù)雜的表單，或者為了美觀而省去標(biāo)簽的輸入控件提供服務(wù)的。然而，被這樣使用的占位文本卻造成了許多可用性問題。

 

本文將列舉哪些不好的運(yùn)用實(shí)例并提出對(duì)應(yīng)的解決方案。

 

將提示文本作為標(biāo)簽

 

將標(biāo)簽放置在輸入框上方而不是將占位文本作為輸入框的標(biāo)簽

 

設(shè)計(jì)師可能為了縮短表單的長(zhǎng)度或者讓界面看起來(lái)更簡(jiǎn)潔而試圖將占位文本作為輸入控件的標(biāo)簽，這種方式實(shí)際上增加了用戶短期記憶的負(fù)擔(dān)，因?yàn)楫?dāng)用戶一旦點(diǎn)擊該控件或者進(jìn)行輸入，占位文本就消失了，而想要再次看到標(biāo)簽則需要把輸入的內(nèi)容刪掉。

 

更好的做法是將標(biāo)簽直接放置在輸入控件的上方，空白的輸入控件則作為功能區(qū)域進(jìn)行數(shù)據(jù)輸入，用戶根據(jù)輸入控件自己去判斷該如何操作。

 

將占位文本作為舉例

 

將舉例樣式放置在輸入控件外而不是作為占位文本處理

 

給用戶提供的輸入舉例是為了幫助用戶更好的理解輸入需求， 但將舉例與占位文本合并使用會(huì)引起一些問題如：當(dāng)輸入控件獲得焦點(diǎn)時(shí)占位文本消失，用戶可能會(huì)對(duì)已經(jīng)輸入的內(nèi)容感到困惑，通過刪除已經(jīng)輸入的內(nèi)容來(lái)重新獲得輸入提示。推薦的設(shè)計(jì)是將舉例放置在輸入控件的下方來(lái)達(dá)到幫助用戶的目的。

 

將占位文本作為幫助文本

 

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

 

占位文本經(jīng)常被用作額外的提示以提醒用戶如何完成輸入。但當(dāng)這些提示被提前告知用戶或者過長(zhǎng)的文本會(huì)讓用戶更加困惑。這也是被誤導(dǎo)的設(shè)計(jì)師以及開發(fā)經(jīng)常犯得錯(cuò)誤，即運(yùn)用過長(zhǎng)的文本以提示用戶?？梢越鉀Q此問題的方案有很多，上圖中的三個(gè)解決方案都很好解決了這個(gè)問題。

 

將占位位版本作為子標(biāo)簽

 

用子標(biāo)簽作為輸入控件的標(biāo)簽，不要把他們作為占位文本

 

如上圖所示，將子標(biāo)簽作為占位文本讓界面更為簡(jiǎn)潔確實(shí)很吸引人，然而運(yùn)用常用的標(biāo)簽卻能夠增加表單的可用性。

 

如果能夠運(yùn)用上文中提到的幾種優(yōu)化的可替代的占位文本的處理方法，則表單的可用性問題也將會(huì)變少。

 

但你必須注意…

 

推薦的占位文本使用方法：

 

占位文本應(yīng)當(dāng)比輸入值顏色淺一些

 

淺色的占位文本看起來(lái)與輸入的文本不同

 

用戶可以輸入內(nèi)容至空白的輸入控件?？瞻椎妮斎肟丶哂休斎雰?nèi)容的作用， 占位文本的存在可減少用戶理解該控件是可被輸入所用的時(shí)間， 但當(dāng)占位文本的顏色過深，便會(huì)讓用戶誤以為這是預(yù)先設(shè)置的內(nèi)容。

 

占位文本應(yīng)當(dāng)在所有屏幕上可見

 

如果占位文本文字的顏色過淺，可能在有些屏幕中看不到

 

如果占位文本文字的顏色過淺也會(huì)存在問題，因?yàn)樵谟行┓直媛实钠聊缓茈y被清晰的看到，用戶想要看到占位文本可能需要以不同的角度觀察屏幕。

 

當(dāng)輸入控件獲得獲得焦點(diǎn)時(shí)，占位文本不應(yīng)當(dāng)消失

將占位文本保留在輸入控件中，當(dāng)用戶開始輸入時(shí)再消失

 

占位文本的消失會(huì)增加用戶短期記憶的負(fù)擔(dān)， 因?yàn)樗r(shí)戶焦點(diǎn)正在該區(qū)域。

 

但通常來(lái)說，表單在沒有占位文本時(shí)更易用。

 

原文鏈接：https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f#.u2qqb1z5r