接下來我們從幾種常見的輸入框來分析設(shè)計(jì)時(shí)需要注意的點(diǎn)趾疚。

信息輸入框

信息輸入框是最常見的輸入框之一缨历，往往以表單輸入框的形式存在。

輸入前

1糙麦、輸入框大小

表單輸入框的大小往往會(huì)影響用戶輸入的心情辛孵。由于拇指的觸發(fā)區(qū)域控制在 45~57px之間，因此輸入框的高度應(yīng)該保持在設(shè)計(jì)在32~40px之間比較合理赡磅。

2魄缚、必填項(xiàng)提醒

輸入框內(nèi)出現(xiàn)“必填”的文字占位符。

輸入框內(nèi)出現(xiàn)“*”的符號焚廊。

3冶匹、告知用戶輸入什么內(nèi)容

輸入框前文案提示：一般為短語习劫，簡短易懂。

輸入框內(nèi)占位符文本提示：可以是一句話嚼隘，也可以是短語榜聂。缺點(diǎn)是一旦輸入提示會(huì)消失。

輸入框前文案提示+輸入框內(nèi)文字補(bǔ)充說明嗓蘑。（推薦使用）

4须肆、重要信息的提示

格式提示

①輸入框內(nèi)文字占位符提示

②格式拆分編輯

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

字?jǐn)?shù)限制提醒

一般以文案形式提醒拒贱。比如：在輸入框后顯示不得超過X字。

規(guī)則補(bǔ)充說明

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

輸入時(shí)

1、當(dāng)前輸入位置提示

光標(biāo)提示

外框標(biāo)亮提示

2暖呕、限制條件提示

字?jǐn)?shù)

①字?jǐn)?shù)限制輸入

先看一個(gè)反面案例：手機(jī)號碼位數(shù)是規(guī)定的斜做，但在下圖中，當(dāng)輸入位數(shù)超過時(shí)湾揽，仍然可以輸入瓤逼。

比較好的處理方式應(yīng)當(dāng)是當(dāng)達(dá)到限制字?jǐn)?shù)時(shí)，鍵盤自動(dòng)縮回库物，不允許再輸入內(nèi)容霸旗，這樣可以提醒用戶檢查輸入的內(nèi)容是否不小心多輸了文字。

②字?jǐn)?shù)實(shí)時(shí)提醒

實(shí)時(shí)提醒用戶當(dāng)前輸入內(nèi)容字?jǐn)?shù)戚揭。

格式

鍵盤默認(rèn)彈出诱告。

比如手機(jī)號、銀行卡號默認(rèn)需要輸入數(shù)字的輸入框民晒，彈出的鍵盤默認(rèn)為數(shù)字鍵盤精居；若輸入的內(nèi)容包涵文字、字母等內(nèi)容镀虐，默認(rèn)彈出字母鍵盤箱蟆。

3、減少用戶輸入

歷史記錄

在用自己的手機(jī)電腦時(shí)刮便，經(jīng)常會(huì)需要經(jīng)常填手機(jī)號或者一些內(nèi)容空猜。可以

4、一鍵刪除功能

有內(nèi)容輸入后辈毯，會(huì)出現(xiàn)×控件坝疼，可以讓用戶一鍵刪除。

輸入后

1谆沃、敏感信息的顯示

針對于手機(jī)號碼钝凶、密碼或銀行卡號等敏感信息勇垛，呈現(xiàn)為“*”或“· ”再登。

2、格式拆分顯示

可以使用戶快速檢查是否輸錯(cuò)辙喂。比如：銀行卡號按照4-4-4-4顯示据沈；手機(jī)號按照4-3-3顯示等等哟沫。

3、內(nèi)容放大顯示

輸入內(nèi)容放大顯示锌介，便于用戶進(jìn)行內(nèi)容的預(yù)覽嗜诀。

登錄注冊框

登錄注冊框在設(shè)計(jì)時(shí)需要注意以下幾點(diǎn)：

1、輸入框文案填寫類型提示

默認(rèn)情況下輸入框內(nèi)會(huì)有文案告知用戶填寫的信息類型孔祸，輸入框下方有溫馨提醒關(guān)于填寫內(nèi)容更詳細(xì)的一些要求或建議（比如編輯狀態(tài)下的密碼輸入框下方有文案提示：不能包括空格隆敢、b.長度為8-16個(gè)字符、c.必須包含字母崔慧、數(shù)字拂蝎、符號中至少2種）

2、輸入時(shí)鍵盤調(diào)用

根據(jù)輸入框填寫內(nèi)容類型不同分別調(diào)用不同類型的鍵盤：字母鍵盤或數(shù)字鍵盤尊浪。

3匣屡、密碼顯示

密碼保密處理：鍵盤鍵入密碼過程中，系統(tǒng)會(huì)隱藏用戶實(shí)際輸入的字符以“.”替代拇涤；點(diǎn)擊輸入框后面的顯示按鈕即可查看核實(shí)密碼輸入是否正確，且查看操作可以在密碼輸入任何過程中進(jìn)行誉结。

4鹅士、反饋

對于一些內(nèi)容，可以實(shí)時(shí)反饋惩坑。當(dāng)表單輸入框有一系列需要輸入的內(nèi)容時(shí)掉盅，如果在進(jìn)入下一個(gè)文本框時(shí)，能夠?qū)崟r(shí)判斷上一個(gè)文本框輸入的內(nèi)容是否合乎規(guī)范以舒，可供用戶實(shí)時(shí)修改趾痘。

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

密碼默認(rèn)顯示。當(dāng)點(diǎn)擊登錄按鈕后侣集，若密碼不正確键俱，密碼自動(dòng)顯示內(nèi)容，可以讓用戶檢查密碼是否正確世分。