文本框的出現(xiàn)幾乎可以追溯到可視化交互誕生的源頭，是一個再經(jīng)典不過的「鼻祖」控件了。我們每天都在和文本框打交道，不論你是產(chǎn)品設(shè)計者還是用戶。
越是顯而易見的東西越容易被我們忽略掉細(xì)節(jié)。今天就和大家一起來梳理一下文本框。
文本框（Text Fields）根據(jù) Material Design 指導(dǎo)規(guī)范，被拆解為七個部分。分別是：
- 容器（Container）
- 前導(dǎo)圖標(biāo)（Leading icon）
- 標(biāo)簽文本（Label text）
- 輸入文本（Input text）
- 尾隨圖標(biāo)（Trailing icon）
- 激活指示器（Activation indicator）
- 幫助文本（Helper text）
當(dāng)然，MD為我們展示的是已經(jīng)經(jīng)過其團(tuán)隊長期摸索之后，基于其平臺規(guī)范下的標(biāo)準(zhǔn)樣式。想要探索文本框的交互演變，我們還是要回溯到文本框最初的模樣。
這就是一個文本框最基礎(chǔ)的樣式了， 一個標(biāo)簽文本+容器，已經(jīng)基本可以確保向用戶傳遞文本框最直觀的信息。
但如今的文本框已經(jīng)演變出了形形色色的樣式和交互形式，究竟MD的文本框是如何演變到今天這番樣子？下面我根據(jù)個人的拙見，一步一步從場景進(jìn)行分析。
我自認(rèn)為，激勵設(shè)計師不停探索文本框新的交互形式的根本原因之一，一定包含總讓人頭疼的排版問題。在解決了基本視覺問題之后，才是思考如何設(shè)計文本框來 提升用戶的填寫和使用效率。
例如前面我們所看到的最基礎(chǔ)的文本框樣式，如果簡單地進(jìn)行單列布局，自然而然會出現(xiàn)讓眾多設(shè)計師糾結(jié)的一個問題： 標(biāo)簽文本究竟應(yīng)該如何對齊？
如果標(biāo)簽文本采用 右對齊，標(biāo)簽文本的長短問題容易導(dǎo)致左側(cè)的視覺隱形邊界錯亂，用戶的規(guī)律眼動容易被打亂；
如果標(biāo)簽文本采用左對齊，文本的長短問題又會導(dǎo)致部分較短標(biāo)簽文本與容器間距增大，讓用戶從左至右瀏覽的效率降低，并且看起來不夠協(xié)調(diào)。
于是乎文本框的布局方式有了進(jìn)一步的演變：標(biāo)簽文本與容器頂端對齊。
頂端對齊的方式使得用戶眼動變得十分規(guī)律，豎直向下瀏覽可以便捷地理解標(biāo)簽文本并進(jìn)行填寫，文本的長短問題不再成為干擾設(shè)計師進(jìn)行排版的一個糾結(jié)點(diǎn)。
但縱向布局的的方式只是把問題遷移到了另一個維度，那就是在表單數(shù)據(jù)量過多時，縱向布局會使得縱向空間耗損增加，用戶需要不停地滑動頁面才能實現(xiàn)表單的完整填寫。
這么看來， 文本框的布局需要多方位評估標(biāo)簽文本長度、表單數(shù)據(jù)量等問題，才能對具體場景進(jìn)行有效設(shè)計。
當(dāng)文本框橫向布局或是縱向布局都很難解決具體場景問題的時候，更新穎的文本框交互形式就出現(xiàn)了。
最初的演變形式是眾多的應(yīng)用開始采用前導(dǎo)圖標(biāo)來替代標(biāo)簽文本，使用圖標(biāo)可以有效地解決標(biāo)簽文本導(dǎo)致的排版錯落問題。
這種方案在輕量表單中較為常見，一般都是在表單內(nèi)容少、用戶對于場景的熟悉度較高的情景當(dāng)中（例如登錄場景）。
因為每個用戶對于圖標(biāo)的認(rèn)知性存在差異，在生疏場景或表單內(nèi)容過多的情況下，圖標(biāo)容易導(dǎo)致用戶對文本框信息產(chǎn)生更多的認(rèn)知成本。所以用圖標(biāo)來代替標(biāo)簽文本的普適性其實并不高。
于是后來 iOS人機(jī)交互規(guī)范 和 MD規(guī)范 都給設(shè)計師提出了一條指導(dǎo)建議： 當(dāng)占位符字段中不包含必要內(nèi)容時，可以合理地使用占位符來承載標(biāo)簽文本。
例如 iOS 通訊錄新增聯(lián)系人，就采用了占位符承載標(biāo)簽文本的方式。
但這種形式同樣也存在一個弊端：用戶一旦輸入內(nèi)容之后，占位符就被內(nèi)容文本填充覆蓋了，有時用戶會忘記所填寫的信息是關(guān)于什么內(nèi)容，必須要清空文本進(jìn)行重新確認(rèn)。對于表單內(nèi)容繁多或重要內(nèi)容需要謹(jǐn)慎填寫的場景，這樣的交互其實還是有一些不妥。
于是乎，類似MD的指導(dǎo)規(guī)范下這樣普適性較高的文本框形式就誕生了。 采用占位符承載標(biāo)簽文本，并且在用戶填寫信息時，標(biāo)簽文本始終可見，由占位符轉(zhuǎn)移到文本框頂部。
這一文本框交互形式的誕生，不論是對于排版空間的節(jié)省、遵循用戶眼動習(xí)慣、微動效提升文本框趣味性等方面，都得到了一定提升。并且許多應(yīng)用開始進(jìn)行借鑒效仿。
其實像以上這種巧用占位符的場景已經(jīng)越來越常見了，占位符已經(jīng)不再僅僅用來承載無用信息或提示性信息，也可以用于承載 默認(rèn)值，幫助用戶自動填充， 提高用戶填寫信息的效率（例如手游當(dāng)中，創(chuàng)建賬號時系統(tǒng)幫玩家默認(rèn)填充一個可用昵稱）。
但填充默認(rèn)值的手法也不僅僅局限于提升用戶體驗和填寫效率，甚至也被運(yùn)用到了一些商業(yè)場景中。
例如淘寶、京東等電商平臺，將商品名稱作為占位符填充在搜索欄中，一方面給所推薦商品增加了曝光；另一方面，在用戶直接點(diǎn)擊搜索時，將會以當(dāng)前占位符內(nèi)容進(jìn)行搜索，達(dá)到為所推薦商品引流的效果。
合理的反饋機(jī)制對于提升用戶填寫文本框效率也起著重要的作用，MD規(guī)范中的幫助文本不僅僅是告訴設(shè)計者可以用于指導(dǎo)用戶該如何正確填寫文本框信息，也為反饋提示提供了展示空間。
MD的反饋狀態(tài)可以歸納為以下幾種：
在這里我大概總結(jié)了一下文本框的負(fù)反饋提示信息，希望在你設(shè)計表單的時候，能夠幫助到你對負(fù)反饋提示狀態(tài)進(jìn)行走查（可能不全，歡迎補(bǔ)充）：
- 內(nèi)容是否為空（例：必填項不能為空）
- 二次確認(rèn)內(nèi)容是否一致（例：確認(rèn)密碼與首次輸入不一致）
- 內(nèi)容是否合規(guī) （例：昵稱中包含不文明詞語）
- 內(nèi)容格式是否合規(guī)（例：昵稱中不能包含特殊字符）
- 內(nèi)容長度是否合規(guī)（例：手機(jī)號輸入不足11位）
- 內(nèi)容的是否符合唯一性（例：驗證碼輸入錯誤）
及時給予用戶負(fù)反饋，可以讓用戶清晰地排查所發(fā)生的錯誤。但交互設(shè)計講究「以人為本」，在某些場景中，當(dāng)用戶所填寫的信息是合理的，及時地展示 正向反饋也是有必要的。
例如，部分應(yīng)用在用戶創(chuàng)建賬號的場景中，當(dāng)用戶輸入賬號信息后，系統(tǒng)將立刻檢索用戶的賬號是否已存在在當(dāng)前數(shù)據(jù)庫中，避免用戶忘記已創(chuàng)建過該賬號而進(jìn)行重復(fù)創(chuàng)建的徒勞步驟。
所以不要狹隘地認(rèn)為MD所給到的幫助文本只能用于「批評」用戶（負(fù)反饋）， 當(dāng)用戶做了正確的事時，也應(yīng)該適當(dāng)?shù)丶钣脩，這也正符合了尼爾森可見性原則。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。