UI設(shè)計(jì)中文本框設(shè)計(jì)指南

　　文本框的出現(xiàn)幾乎可以追溯到可視化交互誕生的源頭，是一個(gè)再經(jīng)典不過(guò)的「鼻祖」控件了。我們每天都在和文本框打交道，不論你是產(chǎn)品設(shè)計(jì)者還是用戶(hù)。越是顯而易見(jiàn)的東西越容易被我們忽略掉細(xì)節(jié)。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中文本框設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說(shuō)明。
 

　　文本框解析
 

　　文本框(Text Fields)根據(jù) Material Design 指導(dǎo)規(guī)范，被拆解為七個(gè)部分。分別是：

 

　?、偃萜?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)過(guò)其團(tuán)隊(duì)長(zhǎng)期摸索之后，基于其平臺(tái)規(guī)范下的標(biāo)準(zhǔn)樣式。想要探索文本框的交互演變，我們還是要回溯到文本框最初的模樣。

 

　　這就是一個(gè)文本框最基礎(chǔ)的樣式了， 一個(gè)標(biāo)簽文本+容器，已經(jīng)基本可以確保向用戶(hù)傳遞文本框最直觀的信息。
 

　　但如今的文本框已經(jīng)演變出了形形色色的樣式和交互形式，究竟MD的文本框是如何演變到今天這番樣子?下面我根據(jù)個(gè)人的拙見(jiàn)，一步一步從場(chǎng)景進(jìn)行分析。
 

　　基礎(chǔ)的文本框布局方式
 

　　我自認(rèn)為，激勵(lì)設(shè)計(jì)師不停探索文本框新的交互形式的根本原因之一，一定包含總讓人頭疼的排版問(wèn)題。在解決了基本視覺(jué)問(wèn)題之后，才是思考如何設(shè)計(jì)文本框來(lái)提升用戶(hù)的填寫(xiě)和使用效率。
 

　　例如前面我們所看到的最基礎(chǔ)的文本框樣式，如果簡(jiǎn)單地進(jìn)行單列布局，自然而然會(huì)出現(xiàn)讓眾多設(shè)計(jì)師糾結(jié)的一個(gè)問(wèn)題：標(biāo)簽文本究竟應(yīng)該如何對(duì)齊?

 

　　如果標(biāo)簽文本采用 右對(duì)齊，標(biāo)簽文本的長(zhǎng)短問(wèn)題容易導(dǎo)致左側(cè)的視覺(jué)隱形邊界錯(cuò)亂，用戶(hù)的規(guī)律眼動(dòng)容易被打亂;
 

　　如果標(biāo)簽文本采用左對(duì)齊，文本的長(zhǎng)短問(wèn)題又會(huì)導(dǎo)致部分較短標(biāo)簽文本與容器間距增大，讓用戶(hù)從左至右瀏覽的效率降低，并且看起來(lái)不夠協(xié)調(diào)。
 

　　于是乎文本框的布局方式有了進(jìn)一步的演變：標(biāo)簽文本與容器頂端對(duì)齊。

 

　　頂端對(duì)齊的方式使得用戶(hù)眼動(dòng)變得十分規(guī)律，豎直向下瀏覽可以便捷地理解標(biāo)簽文本并進(jìn)行填寫(xiě)，文本的長(zhǎng)短問(wèn)題不再成為干擾設(shè)計(jì)師進(jìn)行排版的一個(gè)糾結(jié)點(diǎn)。
 

　　但縱向布局的的方式只是把問(wèn)題遷移到了另一個(gè)維度，那就是在表單數(shù)據(jù)量過(guò)多時(shí)，縱向布局會(huì)使得縱向空間耗損增加，用戶(hù)需要不停地滑動(dòng)頁(yè)面才能實(shí)現(xiàn)表單的完整填寫(xiě)。
 

　　這么看來(lái)， 文本框的布局需要多方位評(píng)估標(biāo)簽文本長(zhǎng)度、表單數(shù)據(jù)量等問(wèn)題，才能對(duì)具體場(chǎng)景進(jìn)行有效設(shè)計(jì)。
 

　　文本框的改良
 

　　當(dāng)文本框橫向布局或是縱向布局都很難解決具體場(chǎng)景問(wèn)題的時(shí)候，更新穎的文本框交互形式就出現(xiàn)了。
 

　　最初的演變形式是眾多的應(yīng)用開(kāi)始采用前導(dǎo)圖標(biāo)來(lái)替代標(biāo)簽文本，使用圖標(biāo)可以有效地解決標(biāo)簽文本導(dǎo)致的排版錯(cuò)落問(wèn)題。

 

　　這種方案在輕量表單中較為常見(jiàn)，一般都是在表單內(nèi)容少、用戶(hù)對(duì)于場(chǎng)景的熟悉度較高的情景當(dāng)中(例如登錄場(chǎng)景)。
 

　　因?yàn)槊總€(gè)用戶(hù)對(duì)于圖標(biāo)的認(rèn)知性存在差異，在生疏場(chǎng)景或表單內(nèi)容過(guò)多的情況下，圖標(biāo)容易導(dǎo)致用戶(hù)對(duì)文本框信息產(chǎn)生更多的認(rèn)知成本。所以用圖標(biāo)來(lái)代替標(biāo)簽文本的普適性其實(shí)并不高。
 

　　于是后來(lái) iOS人機(jī)交互規(guī)范 和 MD規(guī)范 都給設(shè)計(jì)師提出了一條指導(dǎo)建議： 當(dāng)占位符字段中不包含必要內(nèi)容時(shí)，可以合理地使用占位符來(lái)承載標(biāo)簽文本。
 

　　例如 iOS 通訊錄新增聯(lián)系人，就采用了占位符承載標(biāo)簽文本的方式。

 

　　但這種形式同樣也存在一個(gè)弊端：用戶(hù)一旦輸入內(nèi)容之后，占位符就被內(nèi)容文本填充覆蓋了，有時(shí)用戶(hù)會(huì)忘記所填寫(xiě)的信息是關(guān)于什么內(nèi)容，必須要清空文本進(jìn)行重新確認(rèn)。對(duì)于表單內(nèi)容繁多或重要內(nèi)容需要謹(jǐn)慎填寫(xiě)的場(chǎng)景，這樣的交互其實(shí)還是有一些不妥。
 

　　于是乎，類(lèi)似MD的指導(dǎo)規(guī)范下這樣普適性較高的文本框形式就誕生了。 采用占位符承載標(biāo)簽文本，并且在用戶(hù)填寫(xiě)信息時(shí)，標(biāo)簽文本始終可見(jiàn)，由占位符轉(zhuǎn)移到文本框頂部。

 

　　這一文本框交互形式的誕生，不論是對(duì)于排版空間的節(jié)省、遵循用戶(hù)眼動(dòng)習(xí)慣、微動(dòng)效提升文本框趣味性等方面，都得到了一定提升。并且許多應(yīng)用開(kāi)始進(jìn)行借鑒效仿。
 

　　其實(shí)像以上這種巧用占位符的場(chǎng)景已經(jīng)越來(lái)越常見(jiàn)了，占位符已經(jīng)不再僅僅用來(lái)承載無(wú)用信息或提示性信息，也可以用于承載默認(rèn)值，幫助用戶(hù)自動(dòng)填充， 提高用戶(hù)填寫(xiě)信息的效率(例如手游當(dāng)中，創(chuàng)建賬號(hào)時(shí)系統(tǒng)幫玩家默認(rèn)填充一個(gè)可用昵稱(chēng))。
 

　　但填充默認(rèn)值的手法也不僅僅局限于提升用戶(hù)體驗(yàn)和填寫(xiě)效率，甚至也被運(yùn)用到了一些商業(yè)場(chǎng)景中。
 

　　例如淘寶、京東等電商平臺(tái)，將商品名稱(chēng)作為占位符填充在搜索欄中，一方面給所推薦商品增加了曝光;另一方面，在用戶(hù)直接點(diǎn)擊搜索時(shí)，將會(huì)以當(dāng)前占位符內(nèi)容進(jìn)行搜索，達(dá)到為所推薦商品引流的效果。

 

　　合理的反饋
 

　　合理的反饋機(jī)制對(duì)于提升用戶(hù)填寫(xiě)文本框效率也起著重要的作用，MD規(guī)范中的幫助文本不僅僅是告訴設(shè)計(jì)者可以用于指導(dǎo)用戶(hù)該如何正確填寫(xiě)文本框信息，也為反饋提示提供了展示空間。
 

　　MD的反饋狀態(tài)可以歸納為以下幾種：

 

　　在這里我大概總結(jié)了一下文本框的負(fù)反饋提示信息，希望在你設(shè)計(jì)表單的時(shí)候，能夠幫助到你對(duì)負(fù)反饋提示狀態(tài)進(jìn)行走查(可能不全，歡迎補(bǔ)充)：
 

　　內(nèi)容是否為空(例：必填項(xiàng)不能為空)
 

　　二次確認(rèn)內(nèi)容是否一致(例：確認(rèn)密碼與首次輸入不一致)
 

　　內(nèi)容是否合規(guī) (例：昵稱(chēng)中包含不文明詞語(yǔ))
 

　　內(nèi)容格式是否合規(guī)(例：昵稱(chēng)中不能包含特殊字符)
 

　　內(nèi)容長(zhǎng)度是否合規(guī)(例：手機(jī)號(hào)輸入不足11位)
 

　　內(nèi)容是否符合唯一性(例：驗(yàn)證碼輸入錯(cuò)誤)
 

　　及時(shí)給予用戶(hù)負(fù)反饋，可以讓用戶(hù)清晰地排查所發(fā)生的錯(cuò)誤。但交互設(shè)計(jì)講究「以人為本」，在某些場(chǎng)景中，當(dāng)用戶(hù)所填寫(xiě)的信息是合理的，及時(shí)地展示正向反饋也是有必要的。
 

　　例如，部分應(yīng)用在用戶(hù)創(chuàng)建賬號(hào)的場(chǎng)景中，當(dāng)用戶(hù)輸入賬號(hào)信息后，系統(tǒng)將立刻檢索用戶(hù)的賬號(hào)是否已存在在當(dāng)前數(shù)據(jù)庫(kù)中，避免用戶(hù)忘記已創(chuàng)建過(guò)該賬號(hào)而進(jìn)行重復(fù)創(chuàng)建的徒勞步驟。

 

　　所以不要狹隘地認(rèn)為MD所給到的幫助文本只能用于「批評(píng)」用戶(hù)(負(fù)反饋)， 當(dāng)用戶(hù)做了正確的事時(shí)，也應(yīng)該適當(dāng)?shù)丶?lì)用戶(hù)，這也正符合了尼爾森可見(jiàn)性原則。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。