關於輸入框的細節

1、輸入框型別:包括資訊輸入框、註冊、登入輸入框、搜尋輸入框、原創輸入框、對話輸入框以及其它；

2、文字輸入框使用場景多，互動頻次高，是基本的介面控制元件之一。每一個介面都分別對預設、輸入和反饋三個狀態進行設計。輸入的結果我們常常用顏色來反饋，比如藍色代表連結，灰色代表失效，綠色代表正確，黃色代表提示，紅色代表錯誤。

下面是一些設計中需要注意的細節:

一、標註鍵盤型別

根據輸入框的不同資料型別，為使用者提供不同的鍵盤標註，比如輸入手機號是標註數字鍵盤等等，使用者會偏愛那些根據輸入內容提供了合適鍵盤的應用。

二、考慮鍵盤喚起狀態

左圖：這樣佈局看起來沒問題，但沒有考慮到鍵盤調起的狀態，因為鍵盤調起來的時候登入按鈕會被擋住，操作成本就會增加。

中圖：不管鍵盤有沒有被喚起，頁面的佈局都不會改變。

右圖：當鍵盤喚起時，頁面向上提，漏出登入按鈕。

三、減少使用者輸入

01、增加一次性清除按鈕：當輸入框內容不為空的時候獲得焦點，顯示一次性清除內容的按鈕，而不需要使用者一直按刪除鍵，一個個字元刪。

02、智慧預設：需要填寫、選取的表單最好有預設的初始值或者內容填充在其中，可以是建議，也可以是相關推薦，這樣可以幫助使用者更準確、高效地填寫資訊。常見的使用場景有搜尋聯想輸入，地址定位等。

四、輸入提示

資料的呈現方式多種多樣。所以，當你在設計輸入框的時候，應當與使用者輸入資訊的型別、格式相互匹配。

01、選中輸入框準備輸入的時候，應當提供清晰的視覺提示，這樣讓使用者明確知道自己的位置，而不是迷失在茫茫表格中，這種細微的反饋會讓使用者更有掌控力。比如外發光的輸入框，或者閃動的游標，變顏色、加粗等都行。

02、金額輸入：當使用者輸入的金額超過千時，出現最高分位提示，每多輸入一位，最高分位隨之增加。

03、通過設計輸入框格式來“格式化”輸入內容，讓使用者可以清楚的知道應該輸入哪種型別，多少位。

04、對於手機的輸入設定成3-4-4格式，身份證的輸入設定成6-8-4格式，便於使用者能夠清楚及時瞭解到自己輸入的號碼有無缺漏。【對於身份證與手機，儲存後可將中間幾位數變成*號，畢竟是敏感資訊】。

05、輸入框的輸入記錄：對部分輸入框的內容進行記錄，比如登入使用者名稱、手機號，無需使用者二次登入時輸入，提高輸入速率，優化使用者體驗。

五、必要的說明

01、不要過於依賴佔位文字和標籤。一旦在輸入框裡輸入內容，佔位文字就無法被看到了，一則使用者無法檢查輸入的內容是否正確，二則當使用者在輸入框中看到提示文字，他們有可能認為這個文字框已被預填成功從而忽略它。可以使用浮動標籤，當使用者填寫當前文字框時，行內標籤即浮動到文字框頂部，這樣可以使使用者隨時確認他們填寫的內容是否正確。一般當螢幕中多於兩個輸入框時，行內標籤就不適用了。

具體標籤說明可檢視：http://www.woshipm.com/pd/931662.html

 來源：www.woshipm.com/ucd/361227.html

02、加入文字說明：比如專業性強，大眾可能不清楚的文字解釋：例如銀行轉賬不是及時到賬，需要兩小時，金額每天有上限，並且和所剩的餘額相關。如果這些是在使用者輸入完才告知，或者報錯，那麼這個鍋使用者當然不願意背。再比如安全隱私或者金錢相關，有心理顧慮，可以承諾不會對使用者造成損失，或者找背書，該方案已經通過XXX安全認證。消除顧慮之後才能順利進行下一步。

03、幫助資訊（或相關文字）應當出現在需要的地方，比如表單中用文字說明為何需要填寫信用卡號，以及生日日期填寫之後的福利，又或者“服務條款”連結的存在。它們適時地出現，幫助使用者解釋了一些令人困惑的問題。一般說來，這類幫助資訊最好不要超過100字。

 來源：www.woshipm.com/ucd/361227.html

六、清晰的反饋

關於填寫錯誤的描述應該非常清晰，比如註冊時密碼填寫，不要說密碼安全性過低，而要說，密碼必須超過8位，或者密碼必須包含大小寫和數字。

註冊填寫手機號，當提示使用者手機號已被註冊時，應提供跳轉登入的入口。

七、及時的驗證

1、在使用者填完內容後立刻告知使用者輸入內容是否正確，而不是等提交後才提示。

2、實時的頁內校驗可以馬上告知使用者輸入的正確性。幫助使用者及時改正，無需等到點選提交按鈕。如果只有一個錯誤要修正，那就很容易，能降低使用者放棄的可能性。

八、輸入限制問題

對於輸入框，當文字只輸入一行的時候，不會有什麼問題，但輸入多行的時候，如果輸入框對字數有限制，而你沒有把規則告訴使用者，那使用者一定會吐糟。

01、微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字；5行字以內，輸入框會自動向上撐開；超過5行時輸入框大小不變動，5行以上的文字被遮擋住。但微信這裡有個細節體驗不是很好，因為遮擋住的內容完全看不見。這個點唱吧的聊天介面就做得比較好，被擋住的文字會露出半行，讓使用者知道原來上面還有字。

02、釋出微博的時候，會在右下角告訴你已經輸入多少文字，如果超過140字後，數字的顏色會變成橙色，起到警示作用。

03、知乎提問介面，當離限制字數差10個字以內時，提示還差幾個字；當輸入超過限制字數時，直接提示已超過多少個字。

九、移動端自查清單

01-這個輸入框真的是必須有的嗎？

02-輸入框的文字描述在它的上方嗎？（不在裡面，也不在下面）

03-這個輸入框是必填的（*）還是選填的？

04-有沒有把輸入框裡的佔位符都去掉？

05-輸入框是否足夠大，以便完整顯示那些最有可能出現的輸入內容？

06-當鍵盤出現的時候，輸入框是否在橫屏和豎屏兩個模式下都能被看到？

07-輸入框是否有合適的預設值？

任何可用的歷史記錄值？

使用者經常使用的值？

08-能不能用手機的特有功能（攝像頭，GPS，語音，聯絡人）來填充呢？

09-能不能根據其他資訊幫助使用者得出要填的值（例如，根據郵政編碼，或者優惠券輸入碼來推測使用者所在的地區）？

10-是否支援直接複製並貼上到輸入框內？

11-適合這個輸入框的鍵盤是哪個型別的？（譯註：如英文鍵盤還是數字鍵盤）

12-能不能根據前面輸入的字元進行自動聯想或自動匹配？

對姓名、地址和電子郵件地址，不啟用自動更正。

13-允許單詞拼寫錯誤或是縮寫嗎？

14-允許使用者以任何格式輸入資訊嗎？（譯註：如信用卡號、電話號碼裡的「-」符號）

可以把使用者輸入的各式資訊自動轉換為統一格式

來源：http://www.woshipm.com/pd/165608.html