文本輸入框幾乎是每個UI設計師都必須用到的設計控件，它們無處不在，對于用戶體驗的影響無疑是巨大的。雖然看起來很簡單，但是一個設計成熟的文本輸入框，其實是要滿足許多“潛規則”的，這些規則你是否都了解？
文本輸入框幾乎是每個UI設計師都必須用到的設計控件，它們無處不在，對于用戶體驗的影響無疑是巨大的。雖然看起來很簡單，但是一個設計成熟的文本輸入框，其實是要滿足許多“潛規則”的，這些規則你是否都了解？
當新用戶開始使用一款APP或者入駐某個網站的時候，至少最基本的信息都需要通過文本輸入來完成。產品經理、設計師和開發者也都明白，這才是最佳的解決方案。
今天的文章，我們專注于文本的字段輸入應當注意的一些核心因素。這些大都是最常見的規則，同時每一個規則都有一些值得注意的例外情況。
文本輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。無論你使用的是哪個APP，大都需要你借助文本輸入框來獲取少量的個人信息（用戶名等）。當你想要搜索某些信息的時候，打開谷歌，至少也要通過搜索框輸入來完成最起碼的搜索請求。
用戶想要知道他們輸入的字段到底是什么樣的數據，自然是需要文本標簽清晰的告訴他們。當然，有時候用戶也是借助字段相關的圖標來了解輸入框對應字段含義的（比如用戶通常看到放大鏡的圖標會意識到這是一個搜索框）。但是在絕大多數的情況下，文本的標簽是必須有的。
Apple iOS 中的搜索框同時放置了標簽和放大鏡圖標
清晰的標簽讓用戶更加自信，正確理解，并且正確地操作。
標簽并非幫助性的說明，所以你應該使用的是簡短（幾個字）的描述性的短語作為標簽，以便用戶能夠快速掃視。如果有額外的信息，通過上下文或者額外的幫助性的說明來讓用戶有所了解，而不是超長的標簽。
之前Amazon 的注冊頁面就因為超長的標簽文本導致注冊過程緩慢。目前的版本強多了。
如果你的輸入框尺寸是按照輸入內容的長短、尺寸來設計的話，會更加適宜用戶閱讀和輸入。
對于輸入框，當用戶選中準備輸入的時候，應當提供清晰的視覺提示，比如外發光的輸入框，或者閃動的光標，都行。
數據的呈現方式多種多樣。所以，當你在設計輸入框的時候，應當與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對應并不容易。
舉個例子，電話號碼的輸入就存在多種不同的方式，比如我們常見的“+86”，而更多的情況下大家可能會直接輸入一串11位的手機號，座機號碼的情況則更加復雜，有的人習慣加上區號，而又的人則不會。面對這種復雜的情況，你可以通過設計輸入框，加入輸入提示來“格式化”輸入內容。還是以電話號碼的輸入為例：
這個輸入框的電話號碼格式已經固化了，讓用戶可以清楚的知道應該輸入哪種類型，多少位。
這個輸入框中加入了說明性質的文本占位符，清晰的說明了應當輸入怎樣的號碼。它的缺陷在于用戶輸入的時候，占位符會消失。
幫助信息（或相關文字）應當出現在需要的地方，比如表單中用文字說明為何需要填寫信用卡號，以及生日日期填寫之后的福利，又或者“服務條款”鏈接的存在。它們適時地出現，幫助用戶解釋了一些令人困惑的問題。一般說來，這類幫助信息最好不要超過100字。
在APP上用戶常常要輸入不同類型的文本，當輸入框需要輸入數字的時候，結果彈出的是全鍵盤自然不方便，而需要輸入文本的時候則出現數字鍵盤就更加不合適了。
目標：確保不同狀況的用戶都能無障礙地、輕松瀏覽和填寫輸入框
永遠不要使用全部是大寫字母的文本標簽，這樣的標簽通常都很難快速瀏覽，因為字母的大小高度都是一致的，對于非英語言國家的用戶尤其麻煩。
在設置字體尺寸的時候，應該確保字體足夠大，盡量讓它們清晰可辨。網頁上設置正文字體的時候，最安全的選擇是16px，當然，大小的選取主要還是取決于實際的頁面設計，如果識別性問題，應當適當調大一些。
標簽的色彩應當依從于你的APP或者網頁的整體配色方案，并且確保對比度（不能太暗，也別太耀眼）。W3C 在正文文本對比度上有如下的要求：
·較小的文本應當確保至少和背景之間有4.5:1的對比度比率
·較大的文本（14pt粗體，18pt常規）應當確保和背景之間的對比度超過3:1
無論你所設計的是網頁還是APP，都應當考慮用戶在手機上點擊屏幕時的體驗。你需要確保用戶點擊輸入框的時候的觸發區域足夠寬松舒適，而不是很難點擊。一般說來，拇指的觸發區域應當控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應該設計在32~40px之間，這樣看起來足夠友好，又不會太大。
這是一個歷史悠久的可用性設計：用戶應當能夠僅使用鍵盤就完成全部的內容輸入的工作。許多深度用戶有這樣的需求，他們習慣于使用Tab 按鍵來切換不同的輸入框和控件，無需離開鍵盤就可以填完表單。你可以在W3C的文檔中找到相應的說明。
目標：盡量減少用戶輸入
填寫表單本身就是一件苦差事，絕大多數時候它都不會變得令人愉悅。因此，許多需要填寫、選取的表單最好有預設的初始值或者內容填充在其中，這樣可以讓用戶用起來更加方便——許多內容和參數其實你可以通過其他的方式計算并獲得（比如你可以根據用戶的地理位置來幫他們填寫郵政編碼），也可以通過之前在其他地方輸入的數據來填補內容。
比如用戶的IP地址在很多時候就可以預先填寫。Whatsapp 則調用系統服務，幫你將地區編碼預先填寫在手機號碼之前，讓你的填寫體驗更加舒適。
自動完成是以下拉框的形式根據你輸入的內容進行實時補完的功能。這樣可以幫助用戶更準確、高效地填寫信息。對于輸入困難、拼寫困難的用戶尤其有幫助，尤其是當這種語言并非他們母語的時候。
自動建議則會以列表的形式呈現相關的關鍵字或者短語，在匹配度上可能不會太多理想。自動完成更多的是在于補完你填寫的內容，而自動建議則是為你推薦可能相關的短語、關鍵詞。
兩種結合起來可以讓用戶輸入的體驗更加優秀，Google搜索就是這么做的。
0
喜歡他，就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設計網（CNDESIGN）會員所發布展示的 “原創作品/文章” 版權歸原作者所有，任何商業用途均需聯系作者。如未經授權用作他處，作者將保留追究侵權者法律責任的權利。
Copyright ©2006-2019 CND設計網
