2021-8-22 資深UI設計者
導讀：系統(tǒng)設計當中除了按鈕之外，文本輸入框（Text Fields）應該是最常見的交互元素了。當你在淘寶買個東西，當你注冊個新賬號，當你買單輸入個金額時，各種使用場景簡直無處不在?？梢哉f把握好輸入框設計，我們的表單設計就成功了一大半。
今天直接單刀直入不講別的，直接把google的Material Design對于文本輸入框結構分解圖放上來，
這里需要指出Material Design對于文本輸入框結構是經過多年設計發(fā)展洗禮，然后基于它規(guī)范之下而生成的標準構造體。我們拋開一些非必要元素之后會得到一個基礎版本文本輸入框的構造。
一個表單項從結構上來看可以分為標簽、表單域、提示三個主要的元素。
1、標簽文本（Label Text）
“標簽文本”該表單項唯一的名稱，告訴用戶填入什么信息。
2、幫助文本（Helper text）
“幫助文本”在該處位置可將提示用戶的相關信息放置于此。
3、容器（Container）
“容器”用戶輸入文本信息區(qū)域，可以是單行文本，也可以是多行文本。
文本輸入框常規(guī)情況下具有4種交互狀態(tài)：「默認狀態(tài)」、「聚集狀態(tài)」、「錯誤狀態(tài)」、「禁用狀態(tài)」
1、特別提下文本輸入框通常情況下不具有「Hover狀態(tài)」。
2、在設計聚焦狀態(tài)的時候，需要注意用戶光標的位置。比如：text fields的信息來源不僅僅于來自用戶鍵入場景，同時還有可能用戶從別處復制一段文字的場景。
標簽「Label text」的對齊問題是讓設計師這么多年來一直頭疼的問題，也是讓設計師不斷創(chuàng)新交互形式的源動力。它直接影響到用戶對于表單的理解成本以及表單填寫的完成率，下面我們就來聊聊一些比較常見的標簽設計形式。
標簽文本采用左對齊，文本的長短問題又會導致部分較短標簽文本與容器間距增大，讓用戶從左至右瀏覽的效率降低，并且看起來不夠協(xié)調。同時如果該產品存在國內與海外兩種版本的話，將中國翻譯成外文以后長度將會變的十分不可控。
如果標簽文本采用右對齊，標簽文本的長短問題容易導致左側的視覺隱形邊界錯亂，用戶的規(guī)律眼動容易被打亂，同時如果該產品存在國內與海外兩種版本的話，標簽長度問一樣依然存在。
介于標簽左對齊與右對齊各自存在不同的優(yōu)缺點，不能完美統(tǒng)一，從而催生出標簽與容器頂端對齊的交互方式。頂端對齊的方式使得用戶視覺動線變得十分規(guī)律，豎直向下瀏覽可以便捷地理解標簽文本閱讀效率提高明顯，同時標簽文字長度不再成為干擾設計師進行排版的一個糾結點，很好的解決了有些同時具有國內以及海外版本產品的問題。
但是標簽與容器頂端對齊的方式也不是十全十美，在移動產品場景下或者對縱向空間使用率要求比較高的場景，標簽與容器頂端對齊的設計方式就比較尷尬。由于表單高度比其他幾個設計方式要高，造成用戶一邊填寫表單一邊不斷往下滑動。
前導圖標代替「Label text」這種設計方式在輕量級表單中較為常見，條件也比較苛刻：
同時因為每個人生活習慣、文化差異非常之大，造成對于前導圖標的認知都有很大的不同，由于這種設計方式對于用戶理解成本很高，信息密度較大的表單類型也不適用，所以沒有很強的普適性。
占位符代替「Label text」或者將標簽與占位符合二為一的這種設計方式可以很好的節(jié)省大量縱向設計空間。但是也是存在比較大的設計弊端，假如用戶填寫的表單十分復雜且場景不熟悉需要邊填寫邊理解，那么這種設計方式就不夠優(yōu)雅了，會讓用戶完全忘記自己在填寫什么類型的表單。
基于上述一些存在的問題，Material Design的使用了一種比較討巧的設計策略。即采用占位符承載標簽文本，并且在用戶填寫信息時，標簽文本始終可見，由占位符轉移到文本框頂部。
這種設計方式對視覺動線、標簽整齊度、排版空間等一系列問題都有改善，但是在填寫信息密度大、理解難度高的表單上表現(xiàn)就不盡如人意。讀者現(xiàn)在可以腦補下，在一個需要填寫大量表單的場景下，這種帶有動效的方式會造成視覺混亂，不能讓用戶沉浸式的填寫信息，容易讓用戶出戲。
不過在某些商業(yè)場景下，這種設計方式對數(shù)據轉化會有比較不錯的表現(xiàn)。譬如在電商的搜索框當中，把一些需要重點的商品信息放在占位符上，一方面對該商品的曝光量必然有所提升，另一方面在用戶直接點擊搜索時，將會以當前占位符內容進行搜索，達到為所推薦商品引流的效果。
前文也提到過text fields的信息來源不僅僅于來自用戶鍵入場景，同時還有可能用戶從別處復制一段文字的場景。那么在用戶復制信息過來的時候，就需要特別注意focus狀態(tài)下的光標位置，必須在文字的末尾，而不是在其他什么亂七八糟奇特的地方。
合理的反饋信息對用戶降低理解成本、提高表單填寫率也是至關重要的一部分。這里我總結一些比較常見的錯誤類型供大家參考，沒有想到有缺失的類型也希望大家?guī)臀已a全。
「內容是否為空」比如必填項；
「二次確認是否相同」比如密碼校驗；
「輸入信息是否合規(guī)」比如密碼格式；
「輸入信息長度合法性」比如手機號碼長度；
「輸入信息的唯一性」比如收到的驗證碼。
從用戶體驗流派角度去分析，好的設計不僅在錯誤情況下給出明顯易懂的提示信息，也要在正確場景下給到正向反饋與鼓勵，讓用戶增強信心。
對于某些具有特殊格式的輸入信息（比如手機號碼、出生年月、信用卡到期日等等），我們在設計占位符的時候就可以預先把格式寫入其中，告訴用戶信息輸入的必要格式，起到提前防錯效果。
清除功能在pc端的表單中存不存在區(qū)別并不是很大，但是在移動端表單中小編強烈建議把它放上去，因為可以幫助用戶大大降低交互成本。
在使用多行文本輸入信息的時候，我們經常會碰到輸入文字超出文本域字數(shù)規(guī)定的情況。那么一個優(yōu)雅的字數(shù)限制方式就顯得尤為重要。一般采取兩種設計方式：
顯而易見第二種方式更為優(yōu)雅，也更能夠獲得用戶的尊重，畢竟最高層次的用戶體驗就是讓用戶自由的輸入。
根據相關研究機構調查報告得出每10個人當中就是1個具有某些方面的先天不足，所以恢復到初心「設計以人為本」，針對特殊人群在設計的時候我們必須要考慮周全，比如紅綠色盲。這里小編就不展開闡述了，有機會的話可以另外開一篇文章專門講講這方面設計需要注意的點。
Text Fields是我們平常表單設計工作中無法避免的一環(huán)，幾乎20%的Text Fields承擔著表單當中80%的重要功能。與表單填寫率與完成率有著密不可分的關系。如何合理的設計表單當中的Text Fields成為了工作當中的重中之重。
相關知識推薦：你到底會不會「下拉菜單」??？
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：人人都是產品經理 作者：月亮與六便士
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務