對常見的輸入框你真的了解嗎？有時(shí)會(huì)因?yàn)殚_發(fā)一個(gè)輸入框需要3天時(shí)間而驚呆，真的需要這么多嘛，對于非業(yè)務(wù)人員而言，輸入框就是一個(gè)方框或者一條橫線而已。那我們就以最常見的登錄頁為例，聊一聊輸入框。

登錄頁輸入框

這是常見的4家app 的登錄頁，美團(tuán)、餓了嗎、京東、叮咚買菜。

這里最關(guān)鍵的輸入框其實(shí)就倆，手機(jī)號/用戶名/賬號 輸入框，密碼/驗(yàn)證碼輸入框兩個(gè)，但是這里卻涉及到一個(gè)輸入框的多種形態(tài)。

• 默認(rèn)狀態(tài)
• 點(diǎn)擊狀態(tài)
• 輸入部分內(nèi)容
• 輸入完整內(nèi)容
• 錯(cuò)誤、異常提示
• 密碼框可見與不可見
• 特定前后綴輸入框
• 帶區(qū)號的組合輸入框
• 帶移除圖標(biāo)輸入框
• 不可輸入狀態(tài)輸入框

默認(rèn)狀態(tài)

進(jìn)入登錄頁的展示頁面，展示的用手機(jī)號登錄的輸入框，現(xiàn)在常規(guī)的情況下都會(huì)帶有提示信息。比出現(xiàn)錯(cuò)誤信息提示更好的是，更用心的設(shè)計(jì)防止這類問題發(fā)生。在用戶選擇動(dòng)作發(fā)生之前，就要防止用戶容易混淆或者錯(cuò)誤的選擇。

這里帶區(qū)號的組合輸入框，+86部分可點(diǎn)擊，更換區(qū)號，后方輸入手機(jī)號提示灰字展示輸入類型，或者是輸入用戶名或賬號；

手指點(diǎn)擊輸入框位置時(shí)出現(xiàn)光標(biāo)引導(dǎo)輸入，并彈出輸入鍵盤，點(diǎn)擊空白區(qū)輸入框又可以收回。這里充分利用了尼爾森十大原則里的可控性原則，是用戶的控制性和自由度的展現(xiàn)。

部分輸入及完整輸入

這里只輸入手機(jī)號時(shí)，下方的登錄按鈕是置灰的，且手機(jī)號按照344的位數(shù)展示，根據(jù)米勒定律的分段記憶原則，便于記憶及且用戶不容易輸錯(cuò)。手機(jī)號輸入位數(shù)超過11位則限制輸入，這里也是根據(jù)特定輸入框來定義的，例如手機(jī)號，身份證號等這些特定位數(shù)的字符來特殊定義。

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

而且現(xiàn)在絕大部分登錄等的輸入框，都會(huì)設(shè)計(jì)成按鈕在輸入框下方，以確保彈出的鍵盤不會(huì)遮擋按鈕帶來體驗(yàn)上的降低。

特定前后綴輸入框

在一些應(yīng)用和網(wǎng)站后臺等的特定的賬號或域名輸入的部分，前綴會(huì)是http://或https：//等的一系列超文本鏈接格式，后綴是.com或.cn等。為了方便用戶快速明確輸入內(nèi)容及防止輸入錯(cuò)誤，用戶只需輸入變化的部分即可。還有一些沒有設(shè)置前后綴的則會(huì)有搜索地址并智能地自動(dòng)補(bǔ)全地址信息，常見于網(wǎng)址、郵箱等特定格式，可以讓用戶自由選擇不同類型例如郵箱等的前后綴。

錯(cuò)誤提示

錯(cuò)誤提示這里有兩種情況，一種是賬號密碼輸入錯(cuò)誤，一種是環(huán)境條件異常如斷網(wǎng)鏈接不上服務(wù)器等。

提示方式也根據(jù)實(shí)際情況的不同，展示在對應(yīng)的輸入框下方，環(huán)境條件異常則用toast提示

其他頁面的其他類型的輸入框

• 特定數(shù)字、金額類的輸入框
• 特定賬號的輸入框，帶前后綴的
• 文本輸入框，帶字符限制和不帶字符限制
• 聊天輸入框
• 是否允許輸入特殊字符

看似簡單的東西越復(fù)雜，在做輸入框的時(shí)候，每一種狀態(tài)都需要考慮到并且設(shè)計(jì)出來，還有的細(xì)節(jié)問題還需要和產(chǎn)品大大進(jìn)行確定和標(biāo)注。后面這么多的邏輯及狀態(tài)，很多也是來自之前自己經(jīng)驗(yàn)不足踩過的坑，當(dāng)然也不全面，感興趣可以留言一起討論，一起進(jìn)步。

作者：就不，公眾號：豬三的日常

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

題圖來自Unsplash， 基于CC0協(xié)議