編輯導(dǎo)語(yǔ)：凡需要用戶輸入信息的地方，都要用到輸入框，輸入賬號(hào)密碼、篩選條件、輸對(duì)話等等；它看似簡(jiǎn)單，但使用場(chǎng)景多，交互頻次之高，值得我們花些時(shí)間好好研究一下。本文作者詳細(xì)解析了文本輸入框的設(shè)計(jì)。

一、信息輸入前

1. 舒適的大小

輸入框大小是否合適，以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容；表單輸入框的大小往往會(huì)影響用戶輸入的心情。

設(shè)計(jì)考慮到網(wǎng)頁(yè)無(wú)障礙閱讀，即輸入框文字的前景色跟后景色要有足夠的對(duì)比度，提高可識(shí)別性。

1）輸入框長(zhǎng)度應(yīng)符合用戶預(yù)期

搜索查詢輸入?yún)^(qū)域的寬度應(yīng)足夠?qū)?，以包含典型的字符?/p>

如果“輸入”字段太窄，則會(huì)降低可用性，輸入框中文本字段可能的輸入長(zhǎng)度應(yīng)該小于輸入框本身的長(zhǎng)度，這樣不僅在體驗(yàn)上一致，而且在視覺(jué)體驗(yàn)上更加愉悅。

2）填充外觀

灰色的填充使容器看起來(lái)像處于禁用狀態(tài)，它的使用會(huì)讓用戶懷疑能否與之進(jìn)行交互，發(fā)送這些混合信號(hào)會(huì)使他們?cè)陂_始輸入文本之前就感到困惑。

理想的體驗(yàn)是當(dāng)用戶識(shí)別你的文本字段就立即開始填寫，空白是空虛的明確提示，它提示用戶使用其輸入來(lái)填充空白。

要獲得可填充的外觀，要使容器內(nèi)部保持空白，并留有封閉的邊框，使邊框變暗，使用戶可以將輪廓比作一個(gè)空框；它們吸引了人們的注意力并且易于識(shí)別，這正是用戶所需要的。

要增強(qiáng)文本字段的可填充性，可以將其放在米色背景上，使空間更突出，并提供了一個(gè)文本字段最清晰的環(huán)境。

通過(guò)這種方法，用戶在檢查表單時(shí)可以更快地注意到填充和未填充的字段。

空白區(qū)域的亮度使輸入文本和占位符文本具有更高的對(duì)比度，提高了可讀性。

灰白色背景上放置的任何文本均可保持可讀性，并且不會(huì)在視覺(jué)上與輸入或占位符文本發(fā)生沖突。

2. 告知用戶輸入內(nèi)容

當(dāng)用戶選中準(zhǔn)備輸入的時(shí)候，應(yīng)當(dāng)提供清晰的視覺(jué)提示，這樣讓用戶明確知道自己的位置，這個(gè)就可以靠標(biāo)簽和占位符來(lái)實(shí)現(xiàn)；而不是迷失在茫茫表格中，這種細(xì)微的反饋會(huì)讓用戶更有掌控力。

1）填寫標(biāo)簽要簡(jiǎn)潔

文字標(biāo)簽宜簡(jiǎn)短，尤其在移動(dòng)端，盡量不超過(guò)六個(gè)漢字；英文標(biāo)簽不要所有字母大寫，首字母大寫即可。

過(guò)長(zhǎng)的標(biāo)簽有兩個(gè)問(wèn)題：使填寫的內(nèi)容壓縮、影響整頁(yè)對(duì)齊。

平行排布優(yōu)點(diǎn)是：符合視線規(guī)律、閱讀更快。如果要填寫的標(biāo)簽實(shí)在過(guò)長(zhǎng)，檢查一下是否說(shuō)不清楚的可以用占位符分擔(dān)描述下，或者采取垂直排布的方式。

平行排布優(yōu)點(diǎn)是：對(duì)標(biāo)簽字?jǐn)?shù)限制不嚴(yán)格。

2）占位符文本提示

• 占位符要簡(jiǎn)短，不要換行，若超出框，超出部分截?cái)啵?/li>
• 千萬(wàn)不要把占位符設(shè)計(jì)得像已經(jīng)輸入的文本，所以顏色要淺；
• 框多的時(shí)候盡量不要占位符，因?yàn)楹芏嘤脩糁皇谴笾聻g覽；
• 針對(duì)色弱人士不適合用占位符，因?yàn)轭伾^淺（這一點(diǎn)基本可以忽悠）。

電商、社區(qū)等內(nèi)容導(dǎo)向型平臺(tái)的輸入框會(huì)存在內(nèi)容推薦：

標(biāo)簽提示+占位符提示內(nèi)文字補(bǔ)充說(shuō)明告知效果更為強(qiáng)烈。（推薦使用）

3. 必要的說(shuō)明

1）必填內(nèi)容

?到標(biāo)簽前后打了“ * ”號(hào)，?家便知道意思是必填；除了?星號(hào)，必填還可?漢字“（必填）”放在標(biāo)簽后。

我們?cè)谠O(shè)計(jì)中，如果遇到??表單的?多數(shù)字段是必填，那么需要標(biāo)出的不是必填，?是選填內(nèi)容；也就是說(shuō)，標(biāo)出少的那?個(gè)，如果兩者各占?半，那就隨便選擇了。

注意：有的頁(yè)面不像表單頁(yè)那樣復(fù)雜，不必標(biāo)出必填或選填，但應(yīng)在所有必填項(xiàng)填好后，再點(diǎn)亮按鈕跳轉(zhuǎn)到下一頁(yè)，如登錄注冊(cè)頁(yè)。

2）格式提示

• 輸入框內(nèi)文字占位符提示；
• 格式拆分編輯。

舉個(gè)列子：要求填手機(jī)號(hào)碼時(shí)很多人往往會(huì)忽略區(qū)號(hào)的輸入，因此很多輸入框在設(shè)計(jì)時(shí)，會(huì)將區(qū)號(hào)單獨(dú)提出來(lái)，避免此類錯(cuò)誤的發(fā)生。

3）字?jǐn)?shù)限制提示

一般以文案形式提醒，比如：在輸入框后顯示不得超過(guò)X字。

4）規(guī)則補(bǔ)充說(shuō)明

一般在輸入框下方以文案形式提醒，重要的提示可以標(biāo)亮提醒。

有兩種輸入項(xiàng)目常常要加入說(shuō)明：

• 專業(yè)性強(qiáng)，大眾可能不清楚；
• 安全隱私或者金錢相關(guān)，有心理顧慮。

針對(duì)第一種，說(shuō)明能減少輸入錯(cuò)誤，例如：銀行轉(zhuǎn)賬不是及時(shí)就到，而是需要兩小時(shí)；金額不是任意的，每天有上限，并且和所剩的余額相關(guān)。如果這些是在用戶輸入完才告知，或者報(bào)錯(cuò)，那么這個(gè)鍋用戶當(dāng)然不愿意背。

針對(duì)第二種，有心理顧慮的，可以承諾不會(huì)對(duì)用戶造成損失，或者找背書；下圖最后一個(gè)解決方案已經(jīng)通過(guò)華為嚴(yán)選產(chǎn)品安全認(rèn)證，消除顧慮之后才能順利進(jìn)行下一步。

二、信息輸入時(shí)

總的來(lái)說(shuō)，優(yōu)化輸入框設(shè)計(jì)主要有三個(gè)方向：

1. 提高輸入速度
2. 為用戶輸入提供引導(dǎo)幫助
3. 直接有效的指出用戶輸入過(guò)程中的問(wèn)題

重視每一個(gè)細(xì)節(jié)點(diǎn)上的用戶的感受，優(yōu)先關(guān)注讓那些最常被用到的或者是對(duì)完成任務(wù)最為關(guān)鍵的輸入框，這樣產(chǎn)品才會(huì)被打磨的越來(lái)越精致。

1. 當(dāng)前位置的提示

用戶在選擇輸入框并輸入內(nèi)容時(shí)應(yīng)獲得視覺(jué)反饋，當(dāng)他們刪除輸入內(nèi)容并取消選擇輸入框時(shí)，他們還應(yīng)該獲得視覺(jué)反饋；當(dāng)輸入框正確執(zhí)行視覺(jué)反饋時(shí)，用戶將可以毫無(wú)困難地輸入內(nèi)容。

1）選擇輸入框并輸入

當(dāng)用戶第一次將注意力放在文本框標(biāo)簽上時(shí)，他的邊框應(yīng)該看起來(lái)是深灰色的，以便于輸入時(shí)將顯示的黑色不同。

用戶開始輸入時(shí)，標(biāo)簽應(yīng)該消失，但是用戶只用鼠標(biāo)點(diǎn)擊文本框時(shí)，標(biāo)簽不會(huì)消失；但文本框應(yīng)突出顯示且標(biāo)簽應(yīng)模糊顯示，以使用戶知道輸入時(shí)該標(biāo)簽即將消失。

在用戶輸入之前，標(biāo)簽不應(yīng)完全消失，因?yàn)槟承┯脩魧⑦x擇一個(gè)輸入框，而可能忘記了在該輸入框中輸入哪些信息。

2）刪除信息并取消選擇輸入框

當(dāng)用戶刪除輸入框輸入信息并取消選擇它時(shí)，輸入框應(yīng)回到其原始狀態(tài)，這意味著輸入框標(biāo)簽應(yīng)該再次顯示。

當(dāng)用戶刪除輸入內(nèi)容時(shí)，輸入框內(nèi)標(biāo)簽還不會(huì)完整顯示。

當(dāng)用戶刪除信息并取消選擇文本框時(shí)，標(biāo)簽應(yīng)重新出現(xiàn)，以便他們可以根據(jù)需要再次讀取標(biāo)簽。

3）光標(biāo)引導(dǎo)

選中輸入框位置時(shí)出現(xiàn)光標(biāo)引導(dǎo)輸入，取消選擇時(shí)輸入框又可以收回光標(biāo)；選中輸入框時(shí)外框標(biāo)亮提示，點(diǎn)擊空白區(qū)域又變回原有顏色；這是用戶的控制性和自由度的展現(xiàn)。

通過(guò)不同的外觀樣式來(lái)呈現(xiàn)當(dāng)前所處的狀態(tài)，是輸入框在用戶操作界面時(shí)必須做到的事情。

非激活狀態(tài)、光標(biāo)懸停狀態(tài)、禁用狀態(tài)、選定輸入狀態(tài)、驗(yàn)證識(shí)別狀態(tài)、出錯(cuò)狀態(tài)等等。

所有的輸入框設(shè)計(jì)當(dāng)中都應(yīng)該保持一致，盡量不要進(jìn)行反常規(guī)設(shè)計(jì)，避免和用戶思維模型發(fā)生沖突。

2. 限制條件的提示

當(dāng)你好不容易填寫完長(zhǎng)長(zhǎng)的信息，點(diǎn)擊提交，這時(shí)候界面提示：你有20項(xiàng)填錯(cuò)……這種處理方法顯然不是最好的。

沒(méi)有人會(huì)喜歡后知后覺(jué)的反饋，特別是錯(cuò)誤；告知用戶輸入內(nèi)容是否正確的最佳時(shí)機(jī)，是在用戶填完當(dāng)前輸入框或當(dāng)前字符內(nèi)容時(shí)立刻告知用戶；及時(shí)驗(yàn)證可以馬上告知用戶輸入的正確性；及時(shí)驗(yàn)證，幫助用戶及時(shí)改正，無(wú)需等到點(diǎn)擊提交按鈕。

1）字?jǐn)?shù)

字?jǐn)?shù)限制輸入：當(dāng)達(dá)到限制字?jǐn)?shù)時(shí)，不允許再輸入內(nèi)容，這樣可以提醒用戶檢查輸入的內(nèi)容是否不小心多輸了文字。

這里只輸入手機(jī)號(hào)時(shí)，手機(jī)號(hào)按照344的位數(shù)展示，根據(jù)米勒定律的分段記憶原則，便于記憶及且用戶不容易輸錯(cuò)。

手機(jī)號(hào)輸入位數(shù)超過(guò)11位則限制輸入，這里也是根據(jù)特定輸入框來(lái)定義的，例如：手機(jī)號(hào)、身份證號(hào)等這些特定位數(shù)的字符來(lái)特殊定義。

字?jǐn)?shù)實(shí)時(shí)提醒：實(shí)時(shí)提醒用戶當(dāng)前輸入內(nèi)容字?jǐn)?shù)；氣泡或彈窗提示“字?jǐn)?shù)超過(guò)上限”。

以顏色區(qū)分：當(dāng)沒(méi)有達(dá)到限制字?jǐn)?shù)之前，當(dāng)前輸入的字?jǐn)?shù)顏色為灰色；當(dāng)超過(guò)限制字?jǐn)?shù)時(shí)，顯示的是超過(guò)了多少字，顏色為橙色。

2）輸入框文案填寫類型提示

默認(rèn)情況下輸入框內(nèi)會(huì)有文案告知用戶填寫的信息類型，輸入框下方有溫馨提醒關(guān)于填寫內(nèi)容更詳細(xì)的一些要求或建議。

比如編輯狀態(tài)下的密碼輸入框下方有文案提示：

• 不能包括空格；
• 長(zhǎng)度為8-16個(gè)字符；
• 必須包含字母、數(shù)字、符號(hào)中至少2種。

3. 減少用戶輸入

說(shuō)了那么多，最讓用戶舒心的莫過(guò)于幫助他們填寫，因此，許多需要填寫、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來(lái)更加方便，這就是智能預(yù)設(shè)。

常見(jiàn)的使用場(chǎng)景有搜索聯(lián)想輸入、地址定位等。

1）識(shí)別設(shè)備信息

針對(duì)有個(gè)人識(shí)別信息的設(shè)備，如手機(jī)號(hào)碼登錄、網(wǎng)頁(yè)識(shí)別瀏覽器賬號(hào)等。

使用預(yù)填充字段作為默認(rèn)值，比如基于IP地址幫用戶填寫好國(guó)家和地區(qū)；這類解決方案很靈活多樣，根據(jù)填寫字段屬性、功能，可以靈活處理。

比如某些手機(jī)登錄，直接定位該設(shè)備手機(jī)號(hào)碼，“本機(jī)號(hào)碼一鍵登錄”，并顯示手機(jī)號(hào)，這少了輸入手機(jī)號(hào)和驗(yàn)證碼的過(guò)程，效率大幅提高。

如微信在新的小程序注冊(cè)賬號(hào)時(shí)，使用微信授權(quán)登錄，小程序自動(dòng)識(shí)別微信號(hào)、呢稱、微信綁定的手機(jī)號(hào)。

2）復(fù)制粘貼

對(duì)于已經(jīng)復(fù)制了文本內(nèi)容的對(duì)象，輸入文本檢測(cè)復(fù)制內(nèi)容，下方自動(dòng)彈出小氣泡顯示復(fù)制的文本內(nèi)容，只需輕輕一點(diǎn)，文本就復(fù)制到輸入框中。

如果復(fù)制內(nèi)容不對(duì)，點(diǎn)擊小氣泡以外區(qū)域則小氣泡消失。

3）歷史記錄

借助自動(dòng)填寫功能，幫助用戶填寫輸入框，用戶在填寫過(guò)程在自動(dòng)查詢匹配、提供建議，用戶可以使用回車和方向鍵快速選擇。

在瀏覽器使用場(chǎng)景中的記住密碼，在下次登錄中直接就已填寫文本，如果存在該網(wǎng)址多個(gè)賬號(hào)被記住的情況下，可以點(diǎn)擊輸入文本，彈出更多的記住的賬號(hào)進(jìn)行選擇。

在搜索框記錄用戶所有的搜索行為數(shù)據(jù)，在搜索框下面提供搜索記錄，用戶點(diǎn)擊一下即可輸入，大大減少了用戶的操作步驟。并提供清空歷史記錄功能。

提供上下文信息，比如用戶在轉(zhuǎn)賬的時(shí)候，提供余額相關(guān)的信息。

4）搜索實(shí)時(shí)檢索

搜索框會(huì)根據(jù)輸入框內(nèi)輸入的字符實(shí)時(shí)進(jìn)行檢索，基于關(guān)鍵詞查詢相關(guān)短語(yǔ)或目標(biāo)，將結(jié)果呈現(xiàn)在用戶面前（通常在用于好友、工具、應(yīng)用等準(zhǔn)確定位的情況下比較常見(jiàn)），幫助用戶在海量?jī)?nèi)容中快速定位到目標(biāo)內(nèi)容。

自動(dòng)檢索功能可以幫助用戶減少打字量，避免拼寫錯(cuò)誤并降低獲得結(jié)果所需的整體工作量，從而改善用戶的體驗(yàn)。

通過(guò)提供有用的建議，自動(dòng)完成功能可以幫助引導(dǎo)用戶到達(dá)目的地，這也是幫助進(jìn)一步優(yōu)化搜索查詢的有用方法。

5）使用合理的鍵盤類型

這個(gè)指針對(duì)手機(jī)端，輸入內(nèi)容會(huì)喚起鍵盤，而鍵盤分為很多種類型，比如中文鍵盤、數(shù)字鍵盤、英文鍵盤；如果在輸出設(shè)計(jì)稿的時(shí)候?qū)︽I盤類型沒(méi)有標(biāo)注，開發(fā)哥哥就會(huì)使用默認(rèn)鍵盤，這樣就有可能造成一些降低體驗(yàn)的問(wèn)題；例如：手機(jī)號(hào)、銀行卡號(hào)默認(rèn)需要輸入數(shù)字的輸入框，彈出的鍵盤默認(rèn)為數(shù)字鍵盤；若輸入的內(nèi)容包涵文字、字母等內(nèi)容，默認(rèn)彈出字母鍵盤。

iOS 和 Android 提供多種不同的鍵盤，這是為了應(yīng)對(duì)不同的輸入需求。

想要簡(jiǎn)化數(shù)據(jù)輸入，當(dāng)用戶輸入不同類型的字段的時(shí)候，調(diào)用對(duì)應(yīng)類型的鍵盤，同時(shí)需要注意鍵盤出現(xiàn)的位置，不要遮擋住關(guān)鍵信息。

別忘了輸入內(nèi)容時(shí)會(huì)喚起鍵盤：起初一看沒(méi)啥問(wèn)題啊，可是當(dāng)真正落地的時(shí)候，就會(huì)發(fā)現(xiàn)，問(wèn)題大大的。

當(dāng)你準(zhǔn)備輸入內(nèi)容的時(shí)候，鍵盤會(huì)被調(diào)起，這時(shí)候就尷尬了——原來(lái)是被鍵盤擋住了，現(xiàn)在即使你想把提交按鈕往上提，空間也不夠，因?yàn)樯厦鎯蓚€(gè)輸入框已經(jīng)把空間占滿了。

這就是設(shè)計(jì)師經(jīng)驗(yàn)不足，前期沒(méi)有考慮充分導(dǎo)致的結(jié)果。

這樣登錄布局本身是沒(méi)有問(wèn)題的，但是你需要多考慮一種鍵盤調(diào)起的狀態(tài)，因?yàn)殒I盤調(diào)起來(lái)的時(shí)候登錄按鈕會(huì)被擋住，這就是為什么大部分登錄頁(yè)會(huì)往上布局。

因?yàn)殒I盤有沒(méi)有被喚起，頁(yè)面的布局是不用變的。

當(dāng)然這里也不是說(shuō)哪種形式更好，而是提醒大家要考慮好細(xì)節(jié)。

6）特殊字符處理

在輸入框中特殊字符一般包括“@ ”和“. ”等，一般用戶輸入@可能是要輸入郵箱，輸入“.”有可能是網(wǎng)站后綴，所以最好提供快速輸入的方法，讓用戶減少輸入的字符。

雖然現(xiàn)在一部分輸入法中已經(jīng)增加了這些常用的固定的一段字符的按鍵，但是還是建議在輸入框中加入快速輸入的方法——與其依靠這種具有不確定性的情況，還不如一開始就設(shè)計(jì)好。

而且由于現(xiàn)在的交互體驗(yàn)系統(tǒng)越發(fā)的完整，這些特定字符的輸入框鍵盤會(huì)變?yōu)閿?shù)字鍵盤，你把“*”和“#”號(hào)輸入，也會(huì)在提交獲取驗(yàn)證碼的時(shí)候提示你的手機(jī)號(hào)不正確。

7）盡量減少填寫字段數(shù)量

太多的填寫內(nèi)容會(huì)增加認(rèn)知負(fù)荷，盡量讓表單顯得更加簡(jiǎn)單；不要將名字和日期分成多個(gè)字段；不要多次詢問(wèn)相同信息；重復(fù)輸入的內(nèi)容盡量減少。

8）隱藏不相關(guān)

不要一次性將所有的信息和步驟都呈現(xiàn)出來(lái)，而是要在用戶需要的時(shí)候再呈現(xiàn)，合理控制復(fù)雜性。

基于用戶的不同選擇，將表單字段中不相關(guān)的部分隱藏掉，或者新增；這種方式可以幫用戶規(guī)避掉很多不必要的填寫內(nèi)容，并且讓填寫過(guò)程更加個(gè)性化。

4. 文本字?jǐn)?shù)的自適應(yīng)

內(nèi)容較少時(shí)，輸入框能夠透露出用戶所填所有信息；內(nèi)容長(zhǎng)度超過(guò)輸入框長(zhǎng)度時(shí)，無(wú)法完整查看所有所填信息。

1）單行文本

當(dāng)輸入的文本長(zhǎng)度超過(guò)文本框的長(zhǎng)度時(shí),當(dāng)光標(biāo)到達(dá)文本框右邊緣時(shí),它會(huì)自動(dòng)向左滾動(dòng)。

2）多行文本

多行文本框通過(guò)擴(kuò)展文本框的底部，把文本換行到新的一行上，并把屏幕中位于文本框下方的元素向下移動(dòng)，多行文本框允許用戶一次性看到他們輸入的所有內(nèi)容。

3）文本區(qū)域

文本區(qū)域比文本框要高，并可將溢出的文本換行到新行上；當(dāng)光標(biāo)到達(dá)文本區(qū)域的底部時(shí)，它們會(huì)垂直滾動(dòng)。

存在三種情況：

• 文字框大小不變，文字內(nèi)容上移，光標(biāo)自動(dòng)定位到最新輸入位置處。
• 文本框隨著輸入文字的增多變大，到達(dá)接近鍵盤位置時(shí)，文字內(nèi)容上移，光標(biāo)自動(dòng)定位到最新輸入位置處。
• 全屏輸入。

QQ團(tuán)隊(duì)為了解決多文本下的輸入痛點(diǎn)，設(shè)計(jì)了長(zhǎng)按輸入框就會(huì)出現(xiàn)全屏輸入的提示。

點(diǎn)開后即會(huì)全屏顯示已輸入內(nèi)容并可做簡(jiǎn)單的換行操作，收起全屏則回到聊天窗口。

5. 異常提示

對(duì)于一些內(nèi)容，可以實(shí)時(shí)反饋狀態(tài)。

輸入的結(jié)果我們常常用顏色來(lái)反饋，比如藍(lán)色代表鏈接、灰色代表失效、綠色代表正確、黃色代表提示、紅色代表錯(cuò)誤。

異常信息盡量不用彈框展示，那樣有點(diǎn)小題大做，且彈框一關(guān)掉就無(wú)法看到，平添了操作步驟；異常信息盡量不換行，如果非要換行，注意和下一個(gè)文本框拉開距離。

錯(cuò)誤消息會(huì)帶給用戶很多壓力，讓用戶感覺(jué)他們搞砸了或者沒(méi)有完成任務(wù)。

核心輸入一般是必須要全部成功的，但是有些非核心輸入，輸入錯(cuò)誤不要緊，或者成功一部分即可。

這個(gè)時(shí)候要把這些非核心輸入和核心輸入之間進(jìn)行隔離，加強(qiáng)輸入效率。

1）輸入錯(cuò)誤

不要等用戶填完了頁(yè)面所字段、點(diǎn)擊提交時(shí)才出現(xiàn)，盡量在鼠標(biāo)點(diǎn)擊到文本框外，或按了回車鍵、空格鍵時(shí)就及時(shí)出現(xiàn)判斷，支持用戶實(shí)時(shí)修改。

如果發(fā)生錯(cuò)誤，則標(biāo)注錯(cuò)誤原因；提示文本內(nèi)容不符合規(guī)范時(shí)，最好提示原因，這樣有利于用戶快速修改。

大多數(shù)錯(cuò)誤消息要么告訴用戶他們將輸入框留空，要么輸入了無(wú)效信息，這些通用錯(cuò)誤消息是不夠的。

關(guān)于填寫錯(cuò)誤的描述應(yīng)該非常清晰，比如注冊(cè)時(shí)密碼填寫，不要說(shuō)密碼安全性過(guò)低，而要說(shuō)，密碼必須超過(guò)8位，或者密碼必須包含大小寫和數(shù)字。

總結(jié)為以下兩點(diǎn)：

• 發(fā)生了什么錯(cuò)誤，可能原因是什么。
• 用戶應(yīng)該做什么來(lái)改正錯(cuò)誤。

密碼默認(rèn)顯示：當(dāng)點(diǎn)擊登錄按鈕后，若密碼不正確，密碼可自動(dòng)顯示內(nèi)容，可以讓用戶檢查密碼是否正確以及哪里出錯(cuò)；允許用戶顯示和隱藏所設(shè)置的密碼，而不是讓用戶操作2次來(lái)進(jìn)行驗(yàn)證，這對(duì)于生成有效的密碼更重要。

始終顯示對(duì)于密碼的要求，并提供相應(yīng)的指引，并顯示強(qiáng)度指示。嘗試簡(jiǎn)化對(duì)用戶的要求。

2）不存在（無(wú)數(shù)據(jù)）/環(huán)境條件異常等

登錄時(shí)賬號(hào)不存在時(shí)，提示此賬號(hào)未注冊(cè)，其實(shí)還可以在提示文案中增加“注冊(cè)賬號(hào)”的鏈接，點(diǎn)擊即可跳轉(zhuǎn)到注冊(cè)頁(yè)面。

環(huán)境條件異常如斷網(wǎng)鏈接不上服務(wù)器等，環(huán)境條件異常則用氣泡提示。

當(dāng)錯(cuò)誤無(wú)法挽回，還可以通過(guò)視覺(jué)對(duì)錯(cuò)誤的場(chǎng)景進(jìn)行情感層的轉(zhuǎn)移。

三、信息輸入后

1. 敏感信息

如果是電話號(hào)碼或銀行等比較重要的敏感信息，就會(huì)使用“*”或圓點(diǎn)進(jìn)行隱藏。

2. 格式拆分顯示

如果是電話號(hào)碼或銀行的輸入，這種相對(duì)長(zhǎng)一些的數(shù)字輸入，盡量按照用戶習(xí)慣的規(guī)則劃分，如果將所有數(shù)字連著一起就會(huì)比較容易輸錯(cuò)。

• 電話號(hào)碼的劃分規(guī)則為344，所以用戶在設(shè)計(jì)的時(shí)候可以在將電話號(hào)碼間隔開，方便用戶識(shí)別；
• 銀行卡通常的的劃分是4444X，X就是最后一位數(shù)為少于4的位數(shù)。

但是這里需要注意的一點(diǎn)是：在輸入手機(jī)號(hào)碼時(shí)，在第3和第7位數(shù)的時(shí)候是有一個(gè)空格的；所以在用戶從后往前刪除的時(shí)候，也需要在刪除第4位和第8位數(shù)字時(shí)，多刪除一個(gè)空格。

3. 一鍵刪除功能

部分?jǐn)?shù)據(jù)后，通常輸入框右側(cè)會(huì)出現(xiàn)一個(gè)快速刪除全部的圖標(biāo)，方便用戶快速刪除所輸入的數(shù)據(jù)，而不是僅能依靠鍵盤上的刪除按鍵一個(gè)個(gè)數(shù)據(jù)刪除。

有內(nèi)容輸入后，會(huì)出現(xiàn)×控件，可以讓用戶一鍵刪除；內(nèi)容清除為空時(shí)，icon隱藏。

這時(shí)候可能有人就會(huì)說(shuō)，如果既要提供快速刪除，也要提示可輸入的字符數(shù)，怎么辦？

據(jù)我觀察，現(xiàn)有的應(yīng)用中，這種兩者共存的情況比較少見(jiàn)，但是也不是可不可以用，下方提供了兩種方式供參考。

4. 文本展示

前面寫到了文本字?jǐn)?shù)的自適應(yīng)，那么輸入好的文本，如果單行展示不完，對(duì)溢出的部分可用三種方式處理：

• 截?cái)啵何谋緮?shù)量較大時(shí)，只截取頭部的一部分；
• 換行：文本數(shù)量較小時(shí)可以換行展示；
• 省略：省略號(hào)可以放在文本前、中、后位置，這取決于文本哪個(gè)部位最不重要。

四、特殊的輸入框形式

1. 單輸入框連續(xù)操作

一個(gè)非常簡(jiǎn)單的輸入框，但一次只能否顯示一個(gè)輸入文本，并以細(xì)微的動(dòng)畫過(guò)渡下一個(gè)輸入。

我們可以在輸入部分?jǐn)?shù)據(jù)后進(jìn)行補(bǔ)充，輸入框右側(cè)再會(huì)出現(xiàn)一個(gè)快速刪除全部的圖標(biāo)，方便用戶快速刪除所輸入的數(shù)據(jù)，而不是僅能依靠鍵盤上的刪除按鍵一個(gè)個(gè)數(shù)據(jù)刪除。

有內(nèi)容輸入后，會(huì)出現(xiàn)×控件，可以讓用戶一鍵刪除。內(nèi)容清除為空時(shí)，icon隱藏。

我認(rèn)為這是輸入框的一種比較好用且用戶友好的形式，右下角的數(shù)字告訴用戶總共有多少個(gè)問(wèn)題，哪個(gè)是當(dāng)前問(wèn)題；當(dāng)他們前進(jìn)到下一個(gè)問(wèn)題時(shí)，我們將顯示一個(gè)進(jìn)度條，指示表單的完成級(jí)別。

像這樣的輸入框?qū)τ趩?wèn)卷或簡(jiǎn)單的表單可能非常有用。

這樣做的好處是：用戶分心的程度較小，并且填寫此表格的工作似乎要少得多。當(dāng)然，這種方法也有其缺點(diǎn)，無(wú)法返回或概述之前的答案。

2. 自然語(yǔ)言形

一種使用自然語(yǔ)言而非常規(guī)形式，使用自定義輸入元素進(jìn)行輸入。

自然語(yǔ)言確實(shí)是一種有趣的形式，將經(jīng)典形式轉(zhuǎn)換為使用自然語(yǔ)言從用戶那里獲取信息。

為此，將構(gòu)建一個(gè)句子，其中一些單詞和部分是選擇元素和文本輸入；然后，我們將轉(zhuǎn)換選擇元素，我們也可以自定義它們。

當(dāng)然，自然語(yǔ)言形式非常適合某些情況，但并不適合所有情況。

但如果在正確的位置以正確的方式使用它們，也更具吸引力。

3. 全屏

全屏輸入框，其思想是在輸入框字段之間移動(dòng)時(shí)允許使用一些精美的動(dòng)畫進(jìn)行無(wú)干擾的文本輸入。

這個(gè)想法是為了擴(kuò)展輸入框，并且一次只以全屏顯示一個(gè)問(wèn)題或輸入框字段。

用戶可以無(wú)干擾地輸入數(shù)據(jù)，并且可以為字段添加一些精美的動(dòng)畫；一旦所有字段均已填寫或移入，我們將在最后一步中顯示摘要；在這里，輸入數(shù)據(jù)仍然可以查看和更正，最后提交表格。

這種形式包含兩個(gè)元素：輸入框標(biāo)簽字段（每個(gè)都單獨(dú)顯示），右側(cè)的點(diǎn)導(dǎo)航（這允許返回已經(jīng)填寫的問(wèn)題）。

顯示輸入框當(dāng)前位置的數(shù)字指示器，繼續(xù)按鈕，它將移至下一個(gè)字段，包括字段內(nèi)的一些詳細(xì)信息，例如：信息圖標(biāo)和幾個(gè)自定義輸入。

填寫完所有信息后，進(jìn)入最后的審核瀏覽器，可以更正信息并提交表單。

目前見(jiàn)得比較多的全屏輸入框就是搜索框了。

六、結(jié)語(yǔ)

對(duì)于輸入框，工作中并沒(méi)有接觸的這么全面。

最開始是想寫B(tài)端輸入框的，但寫著寫著發(fā)現(xiàn)使用場(chǎng)景多且通用，交互頻次之高，盡量寫全點(diǎn)吧。

希望自己能堅(jiān)持，你的關(guān)注，就是對(duì)我的最大鼓勵(lì)。

參考資料：

UI設(shè)計(jì)組件-文本框/輸入框（上）https://mp.weixin.qq.com/s/u6HWCv7vtll9sJJ3JOZMzg

在UX表單設(shè)計(jì)中的浮動(dòng)標(biāo)簽?zāi)Ｊ?/a>

信息輸入框的交互思考

小小輸入框背后隱藏的潛規(guī)則

優(yōu)化輸入框，讓填寫如絲般順滑

為什么不應(yīng)該使用實(shí)線或帶下劃線的文本字段

本文由 @小龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議