請注意:輸入設(shè)計需要這些交互反饋

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

??文末有福利 ??

簡簡單單的輸入行為幫助我們開啟了通往產(chǎn)品新世界的大門授艰,然而缺少反饋設(shè)計的輸入有時候卻讓用戶不悅甚至迷茫。相較于輸入元件的設(shè)計淮腾,輸入背后的設(shè)計才是真正需要設(shè)計師根據(jù)進(jìn)一步思考用戶的使用情境與行為而精心設(shè)計的部分。

輸入行為的載體

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

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

1玉雾、輸入設(shè)計最常出現(xiàn)的位置是在產(chǎn)品的搜索設(shè)計中,通常采用輸入框垦缅、圖標(biāo)與文本三種元素共同結(jié)合的形式驹碍;

2、另一種常使用的位置出現(xiàn)在頁面評論處怔球,采用輸入框和占為文本結(jié)合的形式浮还,在用戶點擊輸入框后鍵盤自動喚起便于用戶參與評論,同時輸入框放大便于預(yù)覽已輸入的信息担汤;

3洼冻、在簡信對話頁面中碘赖,底部輸入位置采用了輸入框和文本相結(jié)合的形式外构;

4播掷、在簡書的文章發(fā)布頁中歧匈,采用了分割線的形式,這種設(shè)計形式擺脫了輸入框的束縛件炉,呈現(xiàn)出另一種視覺形式斟冕。

簡書APP

輸入行為的交互反饋

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

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

搜索反饋

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

1拜效、在豆瓣的搜索過程中,當(dāng)用戶點擊搜索框后到千,首先展示的是最近的搜索記錄赴穗,搜索記錄能記錄下來最近搜索了哪些內(nèi)容,通過回顧記錄也加深了對精彩的書或電影的印象了赵;

2甸赃、輸入文字后埠对,會提供相對應(yīng)的搜索建議,這種反饋幫助用戶減少了完整輸入的麻煩,往往我們只需要提供關(guān)鍵字胯究,搜索建議就能夠為我們提供需要的內(nèi)容裕循。

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

搜索反饋

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

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

1惫周、在左側(cè)的谷歌翻譯中士败,能看到在輸入框右下角顯示了總字?jǐn)?shù)的限制以及當(dāng)前輸入了多少文字,這種反饋為我們帶來了很清晰的輸入指示漾狼。

2饥臂、右側(cè)的知乎個人資料編輯頁面中隅熙,一句話介紹自己的字?jǐn)?shù)限制在30個稽煤,當(dāng)輸入超過限制字?jǐn)?shù)之后就會彈出明顯的反饋框提示不能超過限制,這種形式的反饋能讓受眾快速認(rèn)識到當(dāng)前輸入存在的問題卻不會打消輸入的積極性囚戚。

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

內(nèi)部反饋

這里的內(nèi)部反饋是指信息在輸入框內(nèi)的表現(xiàn)形式酵熙。當(dāng)前很多產(chǎn)品的輸入框的高度設(shè)計是動態(tài)可變化的,當(dāng)文字超過一行便向上延展高度驰坊,至少可以顯示三至五行匾二,比如大家熟悉的微信就默認(rèn)顯示5行文字,超過則不再變化拳芙。

1察藐、在簡書APP的評論輸入框中,當(dāng)文字超出了輸入框的范圍舟扎,輸入框的右側(cè)會出現(xiàn)一個滾動條,讓用戶可以上下滾動查看內(nèi)容睹限,避免溢出框外的內(nèi)容無法再被檢視譬猫。

2、在右側(cè)Messages的輸入框中羡疗,采用了和簡書不一樣的反饋形式删窒,當(dāng)輸入文字過多的時候在輸入框上方的邊界沒有完全切齊文字,故意露出文字下半部可以引導(dǎo)用戶知道有更多的文字在上方顺囊。

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

內(nèi)部反饋

即時反饋

即時反饋就是即時校驗晕换。用戶普遍不喜歡填完一個長表單并提交之后,才發(fā)現(xiàn)哪里填錯了然后重新填寫站宗。在錯誤出現(xiàn)之后闸准,界面應(yīng)該在第一時刻將錯誤信息呈現(xiàn)出來,讓他們能更早改正錯誤梢灭。 用戶能收到即時的反饋夷家,也能清晰的標(biāo)注出所有的要求,便于用戶更正敏释。

這種反饋屢見不鮮库快,但卻不是每個都做得很好。在慕課網(wǎng)的登錄頁面中钥顽,當(dāng)輸入手機(jī)號出現(xiàn)問題時义屏,在輸入密碼前會出現(xiàn)緊貼著輸入框的報錯信息,立刻檢驗輸入的內(nèi)容是否正確蜂大,用戶更快地被提醒錯誤并修正內(nèi)容闽铐,讓用戶更有信心、更快地完成輸入奶浦。

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

即時反饋

鍵盤反饋

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

1耳高、左側(cè)是汽車之家的注冊頁,當(dāng)點擊手機(jī)號快捷注冊的時候所踊,輸入框獲得焦點并喚起了數(shù)字鍵盤泌枪,省去了再次切換鍵盤的麻煩。

2秕岛、另一種常見的情況是在付款時彈出的數(shù)字鍵盤(指紋沒有被識別出來時)碌燕。例如在微信紅包的輸入中,點擊總數(shù)會彈出數(shù)字鍵盤方便直接輸入金額继薛。

對于數(shù)字鍵盤的安全性(習(xí)慣)與用戶體驗(虛擬鍵盤容易誤觸)之間的平衡問題同樣需要在設(shè)計中考慮修壕。

鍵盤反饋

結(jié)語

正確的時間該做正確的事,簡潔的輸入中應(yīng)該使用恰當(dāng)?shù)姆答伓艨肌]斎氲玫椒答伜盟朴脩粲辛艘环菘晒﹨⒖嫉男袆又改洗瑞褂闷甬a(chǎn)品也會無所拘束,所以有時候看似簡單的設(shè)計卻能帶來意料之外的收獲灌具。更多精選文章請掃碼關(guān)注公眾號:Clip設(shè)計夾


精彩推薦:

1青团、聊聊卡片式設(shè)計的運用

2譬巫、如何構(gòu)建直觀有效的導(dǎo)航結(jié)構(gòu)?

3督笆、如何設(shè)計深色模式芦昔?這3點因素需要考慮

4、深度解析:服務(wù)藍(lán)圖的應(yīng)用邏輯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娃肿,一起剝皮案震驚了整個濱河市咕缎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌料扰,老刑警劉巖凭豪,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異记罚,居然都是意外死亡墅诡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門桐智,熙熙樓的掌柜王于貴愁眉苦臉地迎上來末早,“玉大人,你說我怎么就攤上這事说庭∪涣祝” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵刊驴,是天一觀的道長姿搜。 經(jīng)常有香客問我,道長捆憎,這世上最難降的妖魔是什么舅柜? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮躲惰,結(jié)果婚禮上致份,老公的妹妹穿的比我還像新娘。我一直安慰自己础拨,他們只是感情好氮块,可當(dāng)我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著诡宗,像睡著了一般滔蝉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上塔沃,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天蝠引,我揣著相機(jī)與錄音,去河邊找鬼。 笑死立肘,一個胖子當(dāng)著我的面吹牛边坤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谅年,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼茧痒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了融蹂?” 一聲冷哼從身側(cè)響起旺订,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎超燃,沒想到半個月后区拳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡意乓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年樱调,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片届良。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡笆凌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出士葫,到底是詐尸還是另有隱情乞而,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布慢显,位于F島的核電站爪模,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏荚藻。R本人自食惡果不足惜屋灌,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望应狱。 院中可真熱鬧共郭,春花似錦、人聲如沸侦香。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽罐韩。三九已至,卻和暖如春污朽,著一層夾襖步出監(jiān)牢的瞬間散吵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留矾睦,地道東北人晦款。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像枚冗,于是被迫代替她去往敵國和親缓溅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 寫在前面 無論網(wǎng)站或是App赁温,搜索功能幾乎成了標(biāo)配坛怪,在其間占據(jù)著或輕或重的位置。一方面股囊,搜索可以幫助用戶節(jié)約時間袜匿、...
    vivijia閱讀 1,636評論 0 33
  • 不知不覺,歲寒輸入法的更新歷史已經(jīng)可以列出這么一長串來了稚疹。從中可以看出居灯,歲寒的發(fā)展過程也是一個不斷試錯的過程,其中...
    臨歲之寒閱讀 33,966評論 1 6
  • 一内狗、信息架構(gòu)與流程 1.信息架構(gòu) 1.1信息架構(gòu)是否容易理解 整體的信息架構(gòu)怪嫌、導(dǎo)航、模塊入口的設(shè)計其屏,是否符合用戶既...
    青槿17閱讀 3,692評論 1 30
  • 多出門走走喇勋,長長見識。見識多了偎行,興趣自然就會長出來川背。 學(xué)校老師發(fā)來信息,邀請兒子作為優(yōu)秀學(xué)長代表回校去給新生作演講...
    譚皓勻閱讀 307評論 1 1
  • 踢毽子才開始了一次蛤袒,沒想到還沒開始第二次熄云,就被室友拖得干干凈凈的地腰斬了。今天我年邁的床要身肩大任了――我要做仰臥...
    little常閱讀 111評論 0 0