完美的文本框需要清晰的表達、無障礙的閱讀和良好的用戶反饋

對于任何app或web應用來說，如果用戶沒有使用文本框輸入內容，應用將不會有任何狀態(tài)的改變。因此，產品設計人員，開發(fā)人員和產品經理必須了解允許用戶這樣做的最佳方法。

在本文中，我們將通過關注文本字段來檢查改善數據輸入的關鍵因素。請記住，這些是只是普遍的設計準則，并且每條設計準則都有例外。

文本框

減少用戶輸入是一個文本框的基本要求。無論你是用什么app，你都會遇到一點需要輸入個人信息的需求，即使你僅僅是需要谷歌搜索一個簡單的問題，也需要考慮文本框的設計要點。

清晰的文本提示語

文字提示語是最基本明確告知用戶輸入內容的方式。當然，用戶在通常情況下頁可以通過圖標判斷文本的含義。（例如：即使沒有文本提示語，用戶也可以知道放大鏡意味著搜索功能）但是在絕大多數的設計中，你都必須為輸入框提供文本提示語。清晰的文本提示語可以讓用戶對自己的理解更有自信，并且采取正確的行動。

Apple iOS中的搜索欄同時具有放大鏡圖標和搜索標簽

簡短的標簽文字

標簽和幫助文本的作用是不同的。通常我們使用簡潔，精煉的一個詞來充當標簽，使用戶快速掃描，反映出當前的內容。

但如果需要額外的信息加以解釋說明，就需要使用幫助文本來提示用戶，這時候就不可以使用冗長的標簽文本。

· 亞馬遜早期版本的注冊界面包含許多額外的單詞，導致注冊效率低· 現在的版本更好，標簽更短。

大小適當的文本輸入區(qū)域

如果文本輸入區(qū)域的尺寸符合用戶預期，這樣用戶在使用app時就可以更加容易理解。

設計師在設計時應該給予足夠的輸入區(qū)域，以便用戶可以看到更多有價值的信息。

專注于輸入框的設計

當用戶用鼠標點擊輸入框時，你需要有提供一個明確的視覺引導——改變輸入框的顏色，輸入框顏色淡出或光標閃爍，等等

輸入提示

數據有多種格式。當然，您應該以一種用戶習慣的輸入信息的方式設計輸入框。但是你設計的輸入框并不總能滿足這一點。

亞馬遜的注冊表給用戶提供了良好的視覺提示。如您現在可以看到“電子郵件（移動帳戶的電話）”。圖片來源：亞馬遜

例如，簡單的電話號碼可以用“+”，來表示國家代碼，區(qū)號或任何關于數字的代號。設計師頁可以通過展示說明、或者用示例或提示來幫助用戶確定他們應該使用哪種格式的輸入方法去在文本框中輸入。例如：電話號碼格式的問題可以通過以下方式解決：

電話號碼字段可以自動格式化。這就可以更好的幫助用戶解決客可能產生的的任何格式歧義。

盡管輸入字段占位符文本具有隨用戶類型消失的固有缺點，但可以用于簡短描述或者格式化示例

幫助信息

幫助信息(或隨附文字)，應該用在需要它們的地方，例如為什么要填寫信用卡數據或者出生日期的作用，以及鏈接到“條框和條件”，這在用戶使用輸入框時，是消除用戶疑惑和一些可能性問題的很棒的方法，根據經驗，解釋信息不要超過100個字

“電話”和“簽入”/“簽出”字段的簡潔說明信息可幫助用戶繼續(xù)前進。圖片來源：thinkwithgoogle

僅限手機端-將鍵盤與所需的文本輸入匹配

用戶會非常欣賞那些為輸入框提供適當行鍵盤的應用，在下面的示例中，您可以看到，當為需要輸入數字的字段提供文本鍵盤時，用戶需要點擊鍵盤中的數字鍵以啟用數字輸入。

確保在整個應用程序中始終如一地實施適當的文本字段鍵盤，這樣的設計不僅僅適用于當前這一種情況，也適用于其他情況。圖片來源：thinkwithgoogle

無障礙

目標：對于不同的用戶來說，輸入框都需要容易掃描 / 填寫。

避免標簽使用全部的大寫字母

應該盡量避免使用全部的大寫字母作為文本框的提示標簽，因為大寫字母的字符高度沒有差異，等高的字母使用戶在閱讀和快速瀏覽的時候產生障礙。

全部大寫字母的文本方式特別難易閱讀，因為所有文本都是矩形的，用戶根本不習慣。

字體大小

文本想要清晰必須字體足夠大，一個相對安全的字號大小標準是16像素。但是，具體情況還是得衡量你的界面里的內容有多少。

毫無疑問的是，盡量在保證美觀可讀性的基礎上，讓文本足夠大。

標簽顏色

?標簽的顏色應該符合你app的主題色，同時在適當的調節(jié)對比度。（太亮或者太暗都不好）W3C組織建議正文文本使用以下對比度：

·小文本與背景的對比度至少是4.5:1

·大文本（通常字重在14/18）與背景的對比度是3:1

提供容易點擊的區(qū)域

現在，大多數人都在移動的可觸摸的設備上使用文本框。所以，在設計移動設備的界面時，我們應該使我們的目標區(qū)域足夠大，并且輕松點擊。對于一個可觸摸的目標來說，經驗規(guī)則告訴我們，它的大小應該在45-57px之間。但是，這個區(qū)間對于移動設備來說，會顯得異常大，而且影響美觀。所以文本框的高度應該調整為32-40px之間，這樣做才會使界面重的文本框顯得友好而美觀，同時，而不會產生大而笨重的感覺。

Bootstrap 3 中規(guī)定了一個很好的文本框基本規(guī)范，就是默認輸入字段高度為34px，

輸入文本框不應小于易于點擊的字段大小。

僅限桌面端-友好的使用鍵盤輸入

用戶應該只能使用鍵盤觸發(fā)和編輯每個字段。傾向于大量使用鍵盤的高級用戶，應該能夠輕松地瀏覽字段并進行必要的編輯，而無需將手指從鍵盤上抬起。您可以在W3C的設計模式創(chuàng)作實踐中找到鍵盤交互模式的詳細要求。

即使是簡單的日期選擇器也應該與W3C指南相關。圖片來源：Salesforce

用戶工作量

目標：最大限度的減少用戶的輸入

智能默認值

將數據輸入字段是一件苦差事，而不是有趣的活動。因此，您應該通過提供具有預先填充的智能默認值的字段來預測頻繁選擇的項目并使用戶更容易數據輸入 - 您可以根據其他信息（例如基于郵政編碼的狀態(tài)）計算它們 - 或者根據先前輸入的提示數據。

例如，根據用戶的IP地址預先選擇用戶的國家/地區(qū)。WhatsApp是一個可以輕松輸入電話號碼的應用程序。如果您從美國訪問該應用程序，則默認情況下會根據位置服務預填充國家/地區(qū)代碼。

自動填充和自動提示

自動填充功能會在下拉列表中顯示實時的建議或者完成情況，所以用戶才可以更有效準確的輸入信息。它對于在書寫或拼寫方面有障礙極為有效，特別是針對不是母語的使用用戶來說，更加便利。

自動提示的目的在于以列表的方式顯示關鍵詞和習慣用語，這些關鍵字和習慣用語可能與精確查詢的文字所匹配，也可能不匹配。

自動填充雖然可以幫助用戶完善最初的搜索詞語，但是自動提示則會給出與搜索詞語最具有關聯的詞語。

適當的自動填充和自動提示功能都可以加快用戶的操作速度。

Google就是使用自動填充和自動提示功能為用戶提供極為高效的搜索體驗。

總結

結論：您應該盡可能簡單地輸入數據。即使是微小的變化，例如有用的文本或指示每個字段中的信息，也可以顯著增加輸入字段的可用性以及整體用戶體驗。