當新用戶開始使用一款APP或者入駐某個網(wǎng)站的時候，至少最基本的信息都需要通過文本輸入來完成。產(chǎn)品經(jīng)理、設計師和開發(fā)者也都明白，這才是最佳的解決方案。

今天的文章，我們專注于文本的字段輸入應當注意的一些核心因素。這些大都是最常見的規(guī)則，同時每一個規(guī)則都有一些值得注意的例外情況。

文本輸入框

文本輸入框是UI設計中最常見的控件，在絕大多數(shù)的場合用來給用戶輸入少量的文字。無論你使用的是哪個APP，大都需要你借助文本輸入框來獲取少量的個人信息（用戶名等）。當你想要搜索某些信息的時候，打開谷歌，至少也要通過搜索框輸入來完成最起碼的搜索請求。

清晰

清晰的文本標簽

用戶想要知道他們輸入的字段到底是什么樣的數(shù)據(jù)，自然是需要文本標簽清晰的告訴他們。當然，有時候用戶也是借助字段相關的圖標來了解輸入框?qū)侄魏x的（比如用戶通常看到放大鏡的圖標會意識到這是一個搜索框）。但是在絕大多數(shù)的情況下，文本的標簽是必須有的。

Apple iOS 中的搜索框同時放置了標簽和放大鏡圖標

清晰的標簽讓用戶更加自信，正確理解，并且正確地操作。

短文本標簽

標簽并非幫助性的說明，所以你應該使用的是簡短（幾個字）的描述性的短語作為標簽，以便用戶能夠快速掃視。如果有額外的信息，通過上下文或者額外的幫助性的說明來讓用戶有所了解，而不是超長的標簽。

之前Amazon 的注冊頁面就因為超長的標簽文本導致注冊過程緩慢。目前的版本強多了。

合理的輸入框尺寸

如果你的輸入框尺寸是按照輸入內(nèi)容的長短、尺寸來設計的話，會更加適宜用戶閱讀和輸入。

輸入框焦點

對于輸入框，當用戶選中準備輸入的時候，應當提供清晰的視覺提示，比如外發(fā)光的輸入框，或者閃動的光標，都行。

輸入提示

數(shù)據(jù)的呈現(xiàn)方式多種多樣。所以，當你在設計輸入框的時候，應當與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對應并不容易。

舉個例子：電話號碼的輸入就存在多種不同的方式，比如我們常見的“+86”，而更多的情況下大家可能會直接輸入一串11位的手機號，座機號碼的情況則更加復雜，有的人習慣加上區(qū)號，而又的人則不會。面對這種復雜的情況，你可以通過設計輸入框，加入輸入提示來“格式化”輸入內(nèi)容。還是以電話號碼的輸入為例：

這個輸入框的電話號碼格式已經(jīng)固化了，讓用戶可以清楚的知道應該輸入哪種類型，多少位。

這個輸入框中加入了說明性質(zhì)的文本占位符，清晰的說明了應當輸入怎樣的號碼。它的缺陷在于用戶輸入的時候，占位符會消失。

幫助信息

幫助信息（或相關文字）應當出現(xiàn)在需要的地方，比如表單中用文字說明為何需要填寫信用卡號，以及生日日期填寫之后的福利，又或者“服務條款”鏈接的存在。它們適時地出現(xiàn)，幫助用戶解釋了一些令人困惑的問題。一般說來，這類幫助信息最好不要超過100字。

僅限移動端：鍵盤類型與文本輸入的匹配

在APP上用戶常常要輸入不同類型的文本，當輸入框需要輸入數(shù)字的時候，結(jié)果彈出的是全鍵盤自然不方便，而需要輸入文本的時候則出現(xiàn)數(shù)字鍵盤就更加不合適了。

可訪問性

目標：確保不同狀況的用戶都能無障礙地、輕松瀏覽和填寫輸入框

避免使用大寫文本標簽

永遠不要使用全部是大寫字母的文本標簽，這樣的標簽通常都很難快速瀏覽，因為字母的大小高度都是一致的，對于非英語言國家的用戶尤其麻煩。

字體尺寸

在設置字體尺寸的時候，應該確保字體足夠大，盡量讓它們清晰可辨。網(wǎng)頁上設置正文字體的時候，最安全的選擇是16px，當然，大小的選取主要還是取決于實際的頁面設計，如果識別性問題，應當適當調(diào)大一些。

標簽顏色

標簽的色彩應當依從于你的APP或者網(wǎng)頁的整體配色方案，并且確保對比度（不能太暗，也別太耀眼）。W3C 在正文文本對比度上有如下的要求：

• 較小的文本應當確保至少和背景之間有4.5:1的對比度比率
• 較大的文本（14pt粗體，18pt常規(guī)）應當確保和背景之間的對比度超過3:1

提供舒適的點擊區(qū)域

無論你所設計的是網(wǎng)頁還是APP，都應當考慮用戶在手機上點擊屏幕時的體驗。你需要確保用戶點擊輸入框的時候的觸發(fā)區(qū)域足夠?qū)捤墒孢m，而不是很難點擊。一般說來，拇指的觸發(fā)區(qū)域應當控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應該設計在32~40px之間，這樣看起來足夠友好，又不會太大。

僅限桌面端：對鍵盤輸入友好的輸入框

這是一個歷史悠久的可用性設計：用戶應當能夠僅使用鍵盤就完成全部的內(nèi)容輸入的工作。許多深度用戶有這樣的需求，他們習慣于使用Tab 按鍵來切換不同的輸入框和控件，無需離開鍵盤就可以填完表單。你可以在W3C的文檔中找到相應的說明。

用戶花費

目標：盡量減少用戶輸入

智能預設

填寫表單本身就是一件苦差事，絕大多數(shù)時候它都不會變得令人愉悅。因此，許多需要填寫、選取的表單最好有預設的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來更加方便——許多內(nèi)容和參數(shù)其實你可以通過其他的方式計算并獲得（比如你可以根據(jù)用戶的地理位置來幫他們填寫郵政編碼），也可以通過之前在其他地方輸入的數(shù)據(jù)來填補內(nèi)容。

比如用戶的IP地址在很多時候就可以預先填寫。Whatsapp 則調(diào)用系統(tǒng)服務，幫你將地區(qū)編碼預先填寫在手機號碼之前，讓你的填寫體驗更加舒適。

自動完成和自動建議

自動完成是以下拉框的形式根據(jù)你輸入的內(nèi)容進行實時補完的功能。這樣可以幫助用戶更準確、高效地填寫信息。對于輸入困難、拼寫困難的用戶尤其有幫助，尤其是當這種語言并非他們母語的時候。

自動建議則會以列表的形式呈現(xiàn)相關的關鍵字或者短語，在匹配度上可能不會太多理想。自動完成更多的是在于補完你填寫的內(nèi)容，而自動建議則是為你推薦可能相關的短語、關鍵詞。

兩種結(jié)合起來可以讓用戶輸入的體驗更加優(yōu)秀，Google搜索就是這么做的。

原文地址：https://uxplanet.org/designing-perfect-text-field-clarity-accessibility-and-user-effort-d03c1e26004b#.eykydu8q6

原文作者：Nick Babich

譯文：@陳子木

譯文地址：http://www.uisdc.com/designing-perfect-text-field