輸入作為用戶主動(dòng)與產(chǎn)品進(jìn)行的交互行為，由于用戶需求的不同，輸入本身就帶有很大的可變性與不可預(yù)測性。

簡簡單單的輸入行為幫助我們開啟了通往產(chǎn)品新世界的大門，然而缺少反饋設(shè)計(jì)的輸入有時(shí)候卻讓用戶不悅甚至迷茫。

相較于輸入元件的設(shè)計(jì)，輸入背后的設(shè)計(jì)才是真正需要設(shè)計(jì)師根據(jù)進(jìn)一步思考用戶的使用情境與行為而精心設(shè)計(jì)的部分。

輸入行為的載體

輸入行為常見的載體是簡潔易用的輸入框元件，除了單一輸入框的形式，還有與圖標(biāo)或按鈕等交互元件的組合形式。這些元件分布在產(chǎn)品頁面的各個(gè)位置，發(fā)揮著不同的作用。

輸入設(shè)計(jì)最常出現(xiàn)的位置在產(chǎn)品的搜索設(shè)計(jì)中，通常采用輸入框、圖標(biāo)與文本三種元素想結(jié)合的形式；另一種常使用的位置出現(xiàn)在頁面評論處，采用輸入框和占為文本結(jié)合的形式，在用戶點(diǎn)擊輸入框后鍵盤自動(dòng)喚起便于用戶參與評論，同時(shí)輸入框放大便于預(yù)覽已輸入的信息。

以簡書APP中出現(xiàn)的輸入設(shè)計(jì)為例，來分析元件載體常出現(xiàn)的位置和形式：

• 在簡信對話頁面中，底部輸入位置采用了輸入框和文本相結(jié)合的形式；
• 在簡書的文章發(fā)布頁中，采用了分割線的形式，這種設(shè)計(jì)形式擺脫了輸入框的束縛，呈現(xiàn)出另一種視覺形式。

輸入行為的交互反饋

根據(jù)輸入載體常出現(xiàn)的位置和形式，可以將輸入行為在實(shí)際交互過程中的反饋分為：搜索反饋、字?jǐn)?shù)反饋、內(nèi)部反饋、即時(shí)反饋和鍵盤反饋。

反饋是設(shè)計(jì)細(xì)節(jié)上的升華，接下來將為各個(gè)反饋提供相對應(yīng)的產(chǎn)品案例，逐一呈現(xiàn)給各位。

搜索反饋

對搜索輸入的設(shè)計(jì)應(yīng)該引起我們足夠的重視，簡單的搜索框能讓好的使用體驗(yàn)發(fā)揮到極致，同理能力越大，擔(dān)任的責(zé)任也越多。

在豆瓣的搜索過程中，當(dāng)用戶點(diǎn)擊搜索框后，首先展示的是最近的搜索記錄，搜索記錄能記錄下來最近搜索了哪些內(nèi)容，通過回顧記錄也加深了對精彩的書或電影的印象；在右側(cè)的界面中，輸入文字后會(huì)提供相對應(yīng)的搜索建議，這種反饋幫助用戶減少了完整輸入的麻煩，往往我們只需要提供關(guān)鍵字，搜索建議就能夠?yàn)槲覀兲峁┬枰膬?nèi)容。

很多產(chǎn)品都在使用這種形式的反饋，例如百度的搜索引擎、萬能的淘寶搜索，這種反饋對用戶來說是友好而易用的，產(chǎn)品應(yīng)該盡快普及這種反饋。

字?jǐn)?shù)反饋

字?jǐn)?shù)反饋是產(chǎn)品為用戶提供的一種明確的字?jǐn)?shù)限制。在固定的空間中用明顯的的反饋提示用戶，以免他們疑惑為什么無法下一步輸入。

• 在左側(cè)的谷歌翻譯中，能看到在輸入框右下角顯示了總字?jǐn)?shù)的限制以及當(dāng)前輸入了多少文字，這種反饋為我們帶來了很清晰的輸入指示。
• 右側(cè)的知乎個(gè)人資料編輯頁面中，一句話介紹自己的字?jǐn)?shù)限制在30個(gè)，當(dāng)輸入超過限制字?jǐn)?shù)之后就會(huì)彈出明顯的反饋框提示不能超過限制，這種形式的反饋能讓受眾快速認(rèn)識(shí)到當(dāng)前輸入存在的問題卻不會(huì)打消輸入的積極性。

內(nèi)部反饋

這里的內(nèi)部反饋是指信息在輸入框內(nèi)的表現(xiàn)形式。

當(dāng)前很多產(chǎn)品的輸入框的高度設(shè)計(jì)是動(dòng)態(tài)可變化的，當(dāng)文字超過一行便向上延展高度，至少可以顯示三至五行，比如大家熟悉的微信就默認(rèn)顯示5行文字，超過則不再變化。

• 在簡書APP的評論輸入框中，當(dāng)文字超出了輸入框的范圍，輸入框的右側(cè)會(huì)出現(xiàn)一個(gè)滾動(dòng)條，讓用戶可以上下滾動(dòng)查看內(nèi)容，避免溢出框外的內(nèi)容無法再被檢視。
• 右側(cè)Messages的輸入框中，采用了和簡書不一樣的反饋形式，當(dāng)輸入文字過多的時(shí)候在輸入框上方的邊界沒有完全切齊文字，故意露出文字下半部可以引導(dǎo)用戶知道有更多的文字在上方。

二者反饋的形式雖然不同，最終達(dá)成的效果卻是異曲同工的。將這兩種設(shè)計(jì)形式巧妙地結(jié)合在一起，輸入反饋能達(dá)到事半功倍的效果。

即時(shí)反饋

即時(shí)反饋就是即時(shí)校驗(yàn)。

用戶普遍不喜歡填完一個(gè)長表單并提交之后，才發(fā)現(xiàn)哪里填錯(cuò)了然后重新填寫。在錯(cuò)誤出現(xiàn)之后，界面應(yīng)該在第一時(shí)刻將錯(cuò)誤信息呈現(xiàn)出來，讓他們能更早改正錯(cuò)誤。 用戶能收到即時(shí)的反饋，也能清晰的標(biāo)注出所有的要求，便于用戶更正。

這種反饋屢見不鮮，但卻不是每個(gè)都做得很好。在慕課網(wǎng)的登錄頁面中，當(dāng)輸入手機(jī)號(hào)出現(xiàn)問題時(shí)，在輸入密碼前會(huì)出現(xiàn)緊貼著輸入框的報(bào)錯(cuò)信息，立刻檢驗(yàn)輸入的內(nèi)容是否正確，用戶更快地被提醒錯(cuò)誤并修正內(nèi)容，讓用戶更有信心、更快地完成輸入。

通常大家在設(shè)計(jì)時(shí)關(guān)注的都是輸入錯(cuò)誤狀態(tài)下的紅色反饋，實(shí)際上輸入正確后綠色的成功反饋有時(shí)也是必要的。

鍵盤反饋

鍵盤的反饋更像是不同輸入框相對應(yīng)的鍵盤設(shè)計(jì)，不同的使用場景中出現(xiàn)合適的鍵盤也是設(shè)計(jì)中應(yīng)該考慮的部分，例如輸入銀行賬號(hào)時(shí)對應(yīng)的數(shù)字鍵盤。

• 左側(cè)是汽車之家的注冊頁，當(dāng)點(diǎn)擊手機(jī)號(hào)快捷注冊的時(shí)候，輸入框獲得焦點(diǎn)并喚起了數(shù)字鍵盤，省去了再次切換鍵盤的麻煩。
• 在付款時(shí)彈出的數(shù)字鍵盤（指紋沒有被識(shí)別出來時(shí)）。例如在微信紅包的輸入中，點(diǎn)擊總數(shù)會(huì)彈出數(shù)字鍵盤方便直接輸入金額。

對于數(shù)字鍵盤的安全性（習(xí)慣）與用戶體驗(yàn)（虛擬鍵盤容易誤觸）間的平衡同樣需要在設(shè)計(jì)中考慮。

結(jié)語

正確的時(shí)間該做正確的事，簡潔的輸入中應(yīng)該使用恰當(dāng)?shù)姆答仭］斎氲玫椒答伜盟朴脩粲辛艘环菘晒﹨⒖嫉男袆?dòng)指南，使用起產(chǎn)品也會(huì)無所拘束，所以有時(shí)候看似簡單的設(shè)計(jì)卻能帶來意料之外的收獲。

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

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