2016-11-29 用心設計
來源：UI中國
通過解決占位符的誤用，提高表單的可用性
占位符文本可用作幾乎所有的HTML輸入類型的屬性，被誤導的設計師和開發人員不要猶豫。為復雜的表單提供文字幫助或者刪除輸入標簽來提高美觀度都頗具吸引力，然而，這樣使用占位符文本會導致許多可用性問題。
本文將例舉常見的不良做法，并提供替代方案。
將占位符作為標簽
將標簽放在輸入框的上方，而不是將占位符用作標簽。
設計師為了縮短表單長度或者減少視覺干擾，會將占位符文本作為輸入框的標簽。這種做法給短期記憶帶來負擔。用戶在單擊或鍵入時，標簽就會消失，那么如果要再次顯示標簽，就必須刪除該條目才行。
最好在輸入區域的上方放置一個輸入標簽。空白的輸入區域就是輸入數據的提示——用戶會尋找未填寫的區域來確定他們需要采取行動。
用占位符作例子
將示例文字放在輸入框的外部，而不是用占位符做例子
提供所需示例有助于用戶理解請求。然而用占位符文本充當示例會引起一些問題：失焦，對已錄入的內容感到迷惑，以及減少輸入框的自解釋性。作為替代，示例文字可以放在輸入框的下方區域。
用占位符充當幫助文本
占位符不應該被用作幫助文本
占位符文本常被用來提供有關完成字段所需的更多信息。上面提過這種做法是不好的，它甚至因為文字的數量更加靠不住。受誤導的設計師和開發人員經常犯這樣的錯——用占位符來傳達冗長的信息。這個錯誤有許多替代方案，比如上圖右邊的三條示例。
將占位符用作輔助標簽
將輔助標簽作為標簽，不要用占位符
像左圖一樣將占位符作為輔助標簽是很有誘惑力的，但是使用常規的輸入標簽將提升表單的可用性。
盡早用提到過的一些方法刪除／替代占位符，表單就幾乎不會有可用性問題。
但是如果你必須要用占位符……
恰當的占位符使用方法：
占位符的顏色應該比鍵入文本更淺
淺色的鍵入文本可以傳達其短暫性，并與錄入文本區別開來
用戶填寫空白。一個空白輸入框就意味著可以鍵入內容，占位符文本會減弱輸入框的可操作性。尤其是當占位符顏色很明顯時，用戶會以為這是預置文本。
占位符應該在所有屏幕上都可見
當占位符文本顏色過淺時，可能在有些屏幕上就無法顯示
占位符文本如果顏色太淺同樣會導致問題，因為在某些屏幕上可能無法清晰展現，導致用戶閱讀困難。
用戶單擊輸入框后，占位符不應該消失
讓占位符文本保持到用戶開始錄入
消失的占位符文本給用戶的短期記憶增加了負擔，因為它省略了關鍵的幫助。
通常，在占位符文本被省略時，表單的可用性會增加。
歡迎關注公眾號 1660，不僅有譯文哦：
藍藍設計( m.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務