導讀：系統設計當中除了按鈕之外，文本輸入框（Text Fields）應該是最常見的交互元素了。當你在淘寶買個東西，當你注冊個新賬號，當你買單輸入個金額時，各種使用場景簡直無處不在?？梢哉f把握好輸入框設計，我們的表單設計就成功了一大半。

一、「Text Fields」的基本結構

今天直接單刀直入不講別的，直接把google的Material Design對于文本輸入框結構分解圖放上來，

1. 容器（Container）
2. 前導圖標（Leading icon）
3. 標簽文本（Label text）
4. 輸入文本（Input text）
5. 尾隨圖標（Trailing icon）
6. 激活指示器（Activation indicator）
7. 幫助文本（Helper text）

這里需要指出Material Design對于文本輸入框結構是經過多年設計發展洗禮，然后基于它規范之下而生成的標準構造體。我們拋開一些非必要元素之后會得到一個基礎版本文本輸入框的構造。

一個表單項從結構上來看可以分為標簽、表單域、提示三個主要的元素。

1、標簽文本（Label Text）

“標簽文本”該表單項唯一的名稱，告訴用戶填入什么信息。

2、幫助文本（Helper text）

“幫助文本”在該處位置可將提示用戶的相關信息放置于此。

3、容器（Container）

“容器”用戶輸入文本信息區域，可以是單行文本，也可以是多行文本。

二、「Text Fields」的交互狀態

文本輸入框常規情況下具有4種交互狀態：「默認狀態」、「聚集狀態」、「錯誤狀態」、「禁用狀態」

1、特別提下文本輸入框通常情況下不具有「Hover狀態」。

2、在設計聚焦狀態的時候，需要注意用戶光標的位置。比如：text fields的信息來源不僅僅于來自用戶鍵入場景，同時還有可能用戶從別處復制一段文字的場景。

三、「Text Fields」的外在樣式

標簽「Label text」的對齊問題是讓設計師這么多年來一直頭疼的問題，也是讓設計師不斷創新交互形式的源動力。它直接影響到用戶對于表單的理解成本以及表單填寫的完成率，下面我們就來聊聊一些比較常見的標簽設計形式。

1. 「Label text」左對齊

標簽文本采用左對齊，文本的長短問題又會導致部分較短標簽文本與容器間距增大，讓用戶從左至右瀏覽的效率降低，并且看起來不夠協調。同時如果該產品存在國內與海外兩種版本的話，將中國翻譯成外文以后長度將會變的十分不可控。

2. 「Label text」右對齊

如果標簽文本采用右對齊，標簽文本的長短問題容易導致左側的視覺隱形邊界錯亂，用戶的規律眼動容易被打亂，同時如果該產品存在國內與海外兩種版本的話，標簽長度問一樣依然存在。

3. 「Label text」與容器頂端對齊

介于標簽左對齊與右對齊各自存在不同的優缺點，不能完美統一，從而催生出標簽與容器頂端對齊的交互方式。頂端對齊的方式使得用戶視覺動線變得十分規律，豎直向下瀏覽可以便捷地理解標簽文本閱讀效率提高明顯，同時標簽文字長度不再成為干擾設計師進行排版的一個糾結點，很好的解決了有些同時具有國內以及海外版本產品的問題。

但是標簽與容器頂端對齊的方式也不是十全十美，在移動產品場景下或者對縱向空間使用率要求比較高的場景，標簽與容器頂端對齊的設計方式就比較尷尬。由于表單高度比其他幾個設計方式要高，造成用戶一邊填寫表單一邊不斷往下滑動。

4. 前導圖標代替「Label text」

前導圖標代替「Label text」這種設計方式在輕量級表單中較為常見，條件也比較苛刻：

• 基本用在那些表單理解成本相對較低，用戶對此類表單熟悉程度較高的場景。
• 視覺設計師對圖標繪制表意能力比較強。

同時因為每個人生活習慣、文化差異非常之大，造成對于前導圖標的認知都有很大的不同，由于這種設計方式對于用戶理解成本很高，信息密度較大的表單類型也不適用，所以沒有很強的普適性。

5. 占位符代替「Label text」

占位符代替「Label text」或者將標簽與占位符合二為一的這種設計方式可以很好的節省大量縱向設計空間。但是也是存在比較大的設計弊端，假如用戶填寫的表單十分復雜且場景不熟悉需要邊填寫邊理解，那么這種設計方式就不夠優雅了，會讓用戶完全忘記自己在填寫什么類型的表單。

基于上述一些存在的問題，Material Design的使用了一種比較討巧的設計策略。即采用占位符承載標簽文本，并且在用戶填寫信息時，標簽文本始終可見，由占位符轉移到文本框頂部。

這種設計方式對視覺動線、標簽整齊度、排版空間等一系列問題都有改善，但是在填寫信息密度大、理解難度高的表單上表現就不盡如人意。讀者現在可以腦補下，在一個需要填寫大量表單的場景下，這種帶有動效的方式會造成視覺混亂，不能讓用戶沉浸式的填寫信息，容易讓用戶出戲。

不過在某些商業場景下，這種設計方式對數據轉化會有比較不錯的表現。譬如在電商的搜索框當中，把一些需要重點的商品信息放在占位符上，一方面對該商品的曝光量必然有所提升，另一方面在用戶直接點擊搜索時，將會以當前占位符內容進行搜索，達到為所推薦商品引流的效果。

四、需要注意的點

1. 注意粘貼場景

前文也提到過text fields的信息來源不僅僅于來自用戶鍵入場景，同時還有可能用戶從別處復制一段文字的場景。那么在用戶復制信息過來的時候，就需要特別注意focus狀態下的光標位置，必須在文字的末尾，而不是在其他什么亂七八糟奇特的地方。

2. 合理的反饋

1）負反饋

合理的反饋信息對用戶降低理解成本、提高表單填寫率也是至關重要的一部分。這里我總結一些比較常見的錯誤類型供大家參考，沒有想到有缺失的類型也希望大家幫我補全。

「內容是否為空」比如必填項；

「二次確認是否相同」比如密碼校驗；

「輸入信息是否合規」比如密碼格式；

「輸入信息長度合法性」比如手機號碼長度；

「輸入信息的唯一性」比如收到的驗證碼。

2）正反饋

從用戶體驗流派角度去分析，好的設計不僅在錯誤情況下給出明顯易懂的提示信息，也要在正確場景下給到正向反饋與鼓勵，讓用戶增強信心。

3. 提供格式范例

對于某些具有特殊格式的輸入信息（比如手機號碼、出生年月、信用卡到期日等等），我們在設計占位符的時候就可以預先把格式寫入其中，告訴用戶信息輸入的必要格式，起到提前防錯效果。

4. 清除功能

清除功能在pc端的表單中存不存在區別并不是很大，但是在移動端表單中小編強烈建議把它放上去，因為可以幫助用戶大大降低交互成本。

5. 合理的字數提示

在使用多行文本輸入信息的時候，我們經常會碰到輸入文字超出文本域字數規定的情況。那么一個優雅的字數限制方式就顯得尤為重要。一般采取兩種設計方式：

• 當用戶輸入信息超過設計規定時，就不讓用戶繼續輸入，同時也不顯示超出信息。
• 在文本框內顯示所有用戶輸入的信息對于不做限制，在幫助文本（Helper text）處告訴用戶你已經超出了規定。

顯而易見第二種方式更為優雅，也更能夠獲得用戶的尊重，畢竟最高層次的用戶體驗就是讓用戶自由的輸入。

6. 為特殊人群而設計

根據相關研究機構調查報告得出每10個人當中就是1個具有某些方面的先天不足，所以恢復到初心「設計以人為本」，針對特殊人群在設計的時候我們必須要考慮周全，比如紅綠色盲。這里小編就不展開闡述了，有機會的話可以另外開一篇文章專門講講這方面設計需要注意的點。

五、文末總結

Text Fields是我們平常表單設計工作中無法避免的一環，幾乎20%的Text Fields承擔著表單當中80%的重要功能。與表單填寫率與完成率有著密不可分的關系。如何合理的設計表單當中的Text Fields成為了工作當中的重中之重。

相關知識推薦：你到底會不會「下拉菜單」??？

作者：月亮與六便士（vx：Callen_0304）；公眾號：月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。