看似簡(jiǎn)單的輸入框，實(shí)際上對(duì)用戶體驗(yàn)有著十分明顯的營(yíng)銷(xiāo)，那么如何優(yōu)化？看文章如何解讀。

填寫(xiě)是一件麻煩事，我們或多或少感受糟糕體驗(yàn)。設(shè)計(jì)開(kāi)發(fā)者也很無(wú)奈，感覺(jué)身體被掏空。怎么辦？

讓我們從優(yōu)化輸入框開(kāi)始吧！看著簡(jiǎn)單的框，對(duì)用戶體驗(yàn)的影響很大。特別是在非常有限的手機(jī)屏幕中，怎么幫助用戶順利的填寫(xiě)完呢？值得我們好好研究。

視覺(jué)層面

舒適的填寫(xiě)區(qū)域

常用的數(shù)值是：拇指的滑動(dòng)觸發(fā)區(qū)域在寬高45px左右，圖標(biāo)的操作區(qū)域是48dp，輸入框行高在80dp左右，行間距在8dp。

左圖行距過(guò)于擁擠，而且文字大小不統(tǒng)一，給用戶一種填寫(xiě)內(nèi)容很多的感覺(jué)

簡(jiǎn)潔的描述

填寫(xiě)標(biāo)簽要簡(jiǎn)潔， 過(guò)長(zhǎng)的標(biāo)簽有兩個(gè)問(wèn)題：

1. 使填寫(xiě)的內(nèi)容壓縮。
2. 影響整頁(yè)對(duì)齊。

平行排布優(yōu)點(diǎn)是：符合視線規(guī)律。閱讀更快。如果要填寫(xiě)的標(biāo)簽實(shí)在過(guò)長(zhǎng)，檢查一下是否說(shuō)不清楚的可以用占位符描述？或者采取垂直排布的方式。平行排布優(yōu)點(diǎn)是：對(duì)標(biāo)簽字?jǐn)?shù)限制不嚴(yán)格。

恰當(dāng)?shù)念伾?/p>

輸入的結(jié)果我們常常用顏色來(lái)反饋，比如藍(lán)色代表鏈接，灰色代表失效，綠色代表正確，黃色代表提示，紅色代表錯(cuò)誤。紅色的使用要慎重，因?yàn)榧t色默認(rèn)為最高等級(jí)警告，如果紅色的提示出現(xiàn)過(guò)多會(huì)對(duì)用戶造成緊張感，想到試卷上滿篇的厚叉了么？所以把提示分級(jí)吧。

對(duì)于大家公認(rèn)的色彩暗示，如果隨意交換容易造成誤解，特別紅色和灰色。這有點(diǎn)像我們默認(rèn)為穿裙子的形象是女，穿褲子是男，如果有天你看到穿裙子標(biāo)識(shí)的男廁所，會(huì)困惑嗎？

對(duì)于約定俗成的事，走尋常路才更易用

明確的指示

當(dāng)用戶選中準(zhǔn)備輸入的時(shí)候，應(yīng)當(dāng)提供清晰的視覺(jué)提示，這樣讓用戶明確知道自己的位置，而不是迷失在茫茫表格中，這種細(xì)微的反饋會(huì)讓用戶更有掌控力。

交互層面

標(biāo)注鍵盤(pán)類型

手機(jī)上的鍵盤(pán)觸摸點(diǎn)非常小，觸摸鍵盤(pán)需要隨時(shí)調(diào)整，根據(jù)每個(gè)表單域的不同數(shù)據(jù)類型，為用戶提供不同的鍵盤(pán)布局。輸入方式有三種。對(duì)于第一種純數(shù)字的我們可以鎖定為數(shù)字鍵盤(pán)。

1. 純數(shù)字: 電話號(hào)碼、郵編、各種號(hào)碼
2. 純文本: 用戶名、地址等
3. 混合格式: 評(píng)論、備注等等

上圖填寫(xiě)電話號(hào)碼，如果如右圖默認(rèn)好數(shù)字鍵盤(pán)，填寫(xiě)時(shí)就節(jié)省一次切換鍵盤(pán)的功夫。

對(duì)于一些固定選項(xiàng)我們常常使用控件幫助用戶更快填寫(xiě)，比如日期，性別，地區(qū)等等。盡量在當(dāng)前頁(yè)面調(diào)用控件。如果填寫(xiě)內(nèi)容范圍廣，需要進(jìn)入二級(jí)頁(yè)面另一頁(yè)來(lái)選擇適合，盡量提供快速檢索方式。還有一種情況是對(duì)于容易填錯(cuò)的選項(xiàng)，使用控件，減少用戶的填寫(xiě)錯(cuò)誤，從而減少心理負(fù)擔(dān)。

但是我們要思考使用控件是否更快速，下圖這個(gè)例子，填寫(xiě)還款日的時(shí)候進(jìn)入另一個(gè)選擇，把1—28以及月末安行排開(kāi)，初衷應(yīng)該是為了容錯(cuò)，但是使用起來(lái)繁瑣。

及時(shí)驗(yàn)證

當(dāng)你好不容易填寫(xiě)完長(zhǎng)長(zhǎng)的信息，點(diǎn)擊提交，這時(shí)候界面提示：你有20項(xiàng)填錯(cuò)……雖然我知道作為金融產(chǎn)品，這項(xiàng)的目的是為了限制錯(cuò)誤。然而這種處理方法顯然不是最好的。

沒(méi)有人喜歡后知后覺(jué)的反饋，特別是錯(cuò)誤。告知用戶輸入內(nèi)容是否正確的最佳時(shí)機(jī)，是在用戶填完內(nèi)容后立刻告知用戶。內(nèi)聯(lián)驗(yàn)證可以馬上告知用戶輸入的正確性。幫助用戶及時(shí)改正，無(wú)需等到點(diǎn)擊提交按鈕。如果只有一個(gè)錯(cuò)誤要修正，那就很容易，能降低用戶放棄的可能性。

清晰的反饋

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

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

必要的說(shuō)明

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

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

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

針對(duì)第二種，有心理顧慮的，可以承諾不會(huì)對(duì)用戶造成損失，或者找背書(shū)，該方案已經(jīng)通過(guò)XXX安全認(rèn)證。消除顧慮之后才能順利進(jìn)行下一步。

上圖轉(zhuǎn)說(shuō)明了限額，以及限額原因，能讓用戶在正確范圍內(nèi)使用

減少用戶輸入

說(shuō)了那么多，最讓用戶舒心的莫過(guò)于幫助他們填寫(xiě)，因此，許多需要填寫(xiě)、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中，這樣可以讓用戶用起來(lái)更加方便，這就是智能預(yù)設(shè)。常見(jiàn)的使用場(chǎng)景有搜索聯(lián)想輸入，地址定位等。

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

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

重視每一個(gè)接觸點(diǎn)的用戶的感受，這樣我們的產(chǎn)品才被打磨的越來(lái)越精致。

作者：Uki加菲喵

來(lái)源：http://www.jianshu.com/p/aba4bf4de862

本文由 @Uki加菲喵 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供