看似簡單的輸入框，實際上對用戶體驗有著十分明顯的營銷，那麼如何優化？看文章如何解讀。
填寫是一件麻煩事，我們或多或少感受糟糕體驗。設計開發者也很無奈，感覺身體被掏空。怎麼辦？
讓我們從優化輸入框開始吧！看著簡單的框，對用戶體驗的影響很大。特別是在非常有限的手機屏幕中，怎麼幫助用戶順利的填寫完呢？值得我們好好研究。
視覺層面
舒適的填寫區域
常用的數值是：拇指的滑動觸發區域在寬高45px左右，圖標的操作區域是48dp，輸入框行高在80dp左右，行間距在8dp。
左圖行距過於擁擠，而且文字大小不統一，給用戶一種填寫內容很多的感覺
簡潔的描述
填寫標籤要簡潔， 過長的標籤有兩個問題：
- 使填寫的內容壓縮。
- 影響整頁對齊。
平行排布優點是：符合視線規律。閱讀更快。如果要填寫的標籤實在過長，檢查一下是否說不清楚的可以用佔位符描述？或者採取垂直排布的方式。平行排布優點是：對標籤字數限制不嚴格。
恰當的顏色
輸入的結果我們常常用顏色來反饋，比如藍色代表鏈接，灰色代表失效，綠色代表正確，黃色代表提示，紅色代表錯誤。紅色的使用要慎重，因為紅色默認為最高等級警告，如果紅色的提示出現過多會對用戶造成緊張感，想到試卷上滿篇的厚叉了麼？所以把提示分級吧。
對於大家公認的色彩暗示，如果隨意交換容易造成誤解，特別紅色和灰色。這有點像我們默認為穿裙子的形象是女，穿褲子是男，如果有天你看到穿裙子標識的男廁所，會困惑嗎？
對於約定俗成的事，走尋常路才更易用
明確的指示
當用戶選中準備輸入的時候，應當提供清晰的視覺提示，這樣讓用戶明確知道自己的位置，而不是迷失在茫茫表格中，這種細微的反饋會讓用戶更有掌控力。
交互層面
標註鍵盤類型
手機上的鍵盤觸摸點非常小，觸摸鍵盤需要隨時調整，根據每個表單域的不同數據類型，為用戶提供不同的鍵盤佈局。輸入方式有三種。對於第一種純數字的我們可以鎖定為數字鍵盤。
- 純數字: 電話號碼、郵編、各種號碼
- 純文本: 用戶名、地址等
- 混合格式: 評論、備註等等
上圖填寫電話號碼，如果如右圖默認好數字鍵盤，填寫時就節省一次切換鍵盤的功夫。
對於一些固定選項我們常常使用控件幫助用戶更快填寫，比如日期，性別，地區等等。儘量在當前頁面調用控件。如果填寫內容範圍廣，需要進入二級頁面另一頁來選擇適合，儘量提供快速檢索方式。還有一種情況是對於容易填錯的選項，使用控件，減少用戶的填寫錯誤，從而減少心理負擔。
但是我們要思考使用控件是否更快速，下圖這個例子，填寫還款日的時候進入另一個選擇，把1—28以及月末安行排開，初衷應該是為了容錯，但是使用起來繁瑣。
及時驗證
當你好不容易填寫完長長的信息，點擊提交，這時候界面提示：你有20項填錯……雖然我知道作為金融產品，這項的目的是為了限制錯誤。然而這種處理方法顯然不是最好的。
沒有人喜歡後知後覺的反饋，特別是錯誤。告知用戶輸入內容是否正確的最佳時機，是在用戶填完內容後立刻告知用戶。內聯驗證可以馬上告知用戶輸入的正確性。幫助用戶及時改正，無需等到點擊提交按鈕。如果只有一個錯誤要修正，那就很容易，能降低用戶放棄的可能性。
清晰的反饋
關於填寫錯誤的描述應該非常清晰，比如註冊時密碼填寫，不要說密碼安全性過低，而要說，密碼必須超過8位，或者密碼必須包含大小寫和數字。總結為兩點：
- 發生了什麼錯誤，可能原因是什麼。
- 用戶應該做什麼來改正錯誤。
必要的說明
有兩種輸入項目常常要加入說明：
- 專業性強，大眾可能不清楚
- 安全隱私或者金錢相關，有心理顧慮
針對第一種，說明能減少輸入錯誤，例如銀行轉賬不是及時就到，而是需要兩小時，金額不是任意的，每天有上限，並且和所剩的餘額相關。如果這些是在用戶輸入完才告知，或者報錯，那麼這個鍋用戶當然不願意背。
針對第二種，有心理顧慮的，可以承諾不會對用戶造成損失，或者找背書，該方案已經通過XXX安全認證。消除顧慮之後才能順利進行下一步。
上圖轉說明了限額，以及限額原因，能讓用戶在正確範圍內使用
減少用戶輸入
說了那麼多，最讓用戶舒心的莫過於幫助他們填寫，因此，許多需要填寫、選取的表單最好有預設的初始值或者內容填充在其中，這樣可以讓用戶用起來更加方便，這就是智能預設。常見的使用場景有搜索聯想輸入，地址定位等。
總的來說，優化輸入框設計主要有三個方向：
- 提高輸入速度
- 為用戶輸入提供引導幫助
- 直接有效的指出用戶輸入過程中的問題
重視每一個接觸點的用戶的感受，這樣我們的產品才被打磨的越來越精緻。
作者：Uki加菲喵
相關推薦
