什么是設計輸入？（這種設計形式擺脫了輸入框的束縛呈現出另一種視覺(jué)形式）

輸入作為用戶(hù)主動(dòng)與產(chǎn)品進(jìn)行的什設??設計輸入束縛視覺(jué)交互行為，由于用戶(hù)需求的計輸不同，輸入本身就??帶有很大的入種可變性與不可預測性。

簡(jiǎn)簡(jiǎn)單單的形式形式輸入行為幫助我們開(kāi)啟了通往產(chǎn)品新世界的大門(mén)，然而缺少反饋設計的擺脫輸入有(you)時(shí)候卻讓用戶(hù)不悅甚至迷茫。

相較于輸(′?｀*)入元件的呈現出種設計，輸入背后的什設設計輸入束縛視覺(jué)設計才是真正(zheng)需要設計師根據進(jìn)一步思考用戶(hù)的使用情境┐(′?｀)┌與行為而精心設計的部分。

輸入行為的計輸載體

輸入行為(′▽?zhuān)?)常見(jiàn)的載體是簡(jiǎn)潔易用的輸入框元件，ヽ(′ー｀)ノ除了單一輸入框的入種形式，還有與圖標或按鈕等交互元件的形(xing)式形式組合形式(′ω｀*)。這??些元件分布在產(chǎn)品頁(yè)面的擺脫各個(gè)位置，發(fā)揮著(zhù)不同的呈現出種作用。

輸入ˉ\_(ツ)_/ˉ設計最常出現的什設設計輸入束(shu)縛視覺(jué)??位置在產(chǎn)品的搜索設計中，通常采用輸入框、計輸圖標與文本三種元素想結合的入(ru)種形式；另一種常使用的位置出現在(′?_?`)頁(yè)面評論處，采用輸入框和占為文本結合的形式，在用??戶(hù)點(diǎn)擊輸入框后鍵(′?｀)盤(pán)自動(dòng)喚起便于用戶(hù)參與評論，同時(shí)輸入框放大便于預覽已輸入的信息。

以簡(jiǎn)書(shū)APP中出現的??輸入設計為(′ω｀)例，來(lái)分析元件載體常出現的位置和形式：

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

根(gen)據輸入載體常出現的位置和形式，可(╯°□°）╯︵ ┻━┻以將輸入行為在實(shí)際交互過(guò)程中的反饋分為：搜索反饋、字數反饋、內部反(fan)饋、即時(shí)反饋和鍵盤(pán)反饋。

反饋是設計細節上的升華，接下來(lái)將為各個(gè)反饋提供相對應(ying)的產(chǎn)品案例，逐一呈現給各位。

搜索反饋

對搜索輸入的設計應該引起我們足夠的重視，簡(jiǎn)單的搜索框能讓好的使用體驗發(fā)揮到極致，同理能力越大，擔任(╥_╥)的責任也越多。

在豆瓣的搜索過(guò)程中，當用戶(hù)點(diǎn)擊搜索框后，首先展示的是最近的搜索ヽ(′ー｀)ノ記錄，搜索記錄能記錄下來(lái)最近搜索了哪??些內容ヽ(′ー｀)ノ，通過(guò)回顧記錄也加深了對精彩的書(shū)或電影的印象；在右側的界面中，輸入文字后會(huì )提┐(′?｀)┌供相對應的搜索建議，這種反饋幫助用??戶(hù)減少了完整輸入的麻煩，往往我們只需要提供關(guān)鍵字，搜索建議就能夠為我(wo)們提供需要的內容。

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

字數反饋

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

在左側的谷歌翻譯中，能看到在輸入框右下角顯示了總字數的限制以及當前輸入了多少文字，這種反饋為我們帶來(lái)了很清晰的輸入指示。右側的(°ロ°) !知乎個(gè)人資料編輯頁(yè)面中，一句話(huà)介紹自己的字數限制在30個(gè)，當輸入超過(guò)限制字┐(′д｀)┌數之后就會(huì )彈出明顯的反饋框提示不能超過(guò)限制，這種形式的反饋能讓受眾快速認識到當前輸入存在的問(wèn)(′▽?zhuān)?題卻不會(huì )打消輸入的積極性。內部反饋

這里的內部反饋是指信息在輸入框內的表現形式。

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

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

即時(shí)反饋(?????)

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

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

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

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

鍵盤(pán)反饋

左側是汽車(chē)之家的注冊頁(yè)，當點(diǎn)擊手機號快捷注冊的時(shí)候，輸入框獲得焦點(diǎn)并喚起了數字鍵盤(pán)，省去了再次切換鍵盤(pán)的麻(′?｀)煩。在付款時(shí)彈出的數字鍵盤(pán)（指紋沒(méi)有被識別出來(lái)時(shí)）。例如在微信紅包的輸入中，點(diǎn)擊總數會(huì )彈出數字鍵盤(pán)方便直接輸入(ru)金額。

對于數字鍵盤(pán)的安全性（習慣）與用戶(hù)體驗（虛擬鍵盤(pán)容易誤觸）間的平衡同樣需要在設計中考慮。

結語(yǔ)

正確的時(shí)間該做正確的事(′?ω?`)，簡(jiǎn)潔的輸入中應該使用恰當的反(╯‵□′)╯饋。輸入得到反饋好似用戶(hù)有了一份可供參考的行動(dòng)指南，使用起產(chǎn)品也會(huì )無(wú)所拘束，所以有時(shí)候看似簡(jiǎn)單的設計卻能帶來(lái)意料之外的收獲。