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

5 評論 8751 瀏覽 50 收藏 10 分鐘

輸入作為用戶主動與產品進行的交互行為,由于用戶需求的不同,輸入本身就帶有很大的可變性與不可預測性。

簡簡單單的輸入行為幫助我們開啟了通往產品新世界的大門,然而缺少反饋設計的輸入有時候卻讓用戶不悅甚至迷茫。

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

輸入設計值得注意的交互反饋

輸入行為的載體

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

輸入設計最常出現的位置在產品的搜索設計中,通常采用輸入框、圖標與文本三種元素想結合的形式;另一種常使用的位置出現在頁面評論處,采用輸入框和占為文本結合的形式,在用戶點擊輸入框后鍵盤自動喚起便于用戶參與評論,同時輸入框放大便于預覽已輸入的信息。

以簡書APP中出現的輸入設計為例,來分析元件載體常出現的位置和形式:

  • 在簡信對話頁面中,底部輸入位置采用了輸入框和文本相結合的形式;
  • 在簡書的文章發布頁中,采用了分割線的形式,這種設計形式擺脫了輸入框的束縛,呈現出另一種視覺形式。

輸入設計值得注意的交互反饋

輸入行為的交互反饋

根據輸入載體常出現的位置和形式,可以將輸入行為在實際交互過程中的反饋分為:搜索反饋、字數反饋、內部反饋、即時反饋和鍵盤反饋。

反饋是設計細節上的升華,接下來將為各個反饋提供相對應的產品案例,逐一呈現給各位。

搜索反饋

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

在豆瓣的搜索過程中,當用戶點擊搜索框后,首先展示的是最近的搜索記錄,搜索記錄能記錄下來最近搜索了哪些內容,通過回顧記錄也加深了對精彩的書或電影的印象;在右側的界面中,輸入文字后會提供相對應的搜索建議,這種反饋幫助用戶減少了完整輸入的麻煩,往往我們只需要提供關鍵字,搜索建議就能夠為我們提供需要的內容。

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

輸入設計值得注意的交互反饋

字數反饋

字數反饋是產品為用戶提供的一種明確的字數限制。在固定的空間中用明顯的的反饋提示用戶,以免他們疑惑為什么無法下一步輸入。

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

輸入設計值得注意的交互反饋

內部反饋

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

當前很多產品的輸入框的高度設計是動態可變化的,當文字超過一行便向上延展高度,至少可以顯示三至五行,比如大家熟悉的微信就默認顯示5行文字,超過則不再變化。

  • 在簡書APP的評論輸入框中,當文字超出了輸入框的范圍,輸入框的右側會出現一個滾動條,讓用戶可以上下滾動查看內容,避免溢出框外的內容無法再被檢視。
  • 右側Messages的輸入框中,采用了和簡書不一樣的反饋形式,當輸入文字過多的時候在輸入框上方的邊界沒有完全切齊文字,故意露出文字下半部可以引導用戶知道有更多的文字在上方。

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

輸入設計值得注意的交互反饋

即時反饋

即時反饋就是即時校驗。

用戶普遍不喜歡填完一個長表單并提交之后,才發現哪里填錯了然后重新填寫。在錯誤出現之后,界面應該在第一時刻將錯誤信息呈現出來,讓他們能更早改正錯誤。 用戶能收到即時的反饋,也能清晰的標注出所有的要求,便于用戶更正。

這種反饋屢見不鮮,但卻不是每個都做得很好。在慕課網的登錄頁面中,當輸入手機號出現問題時,在輸入密碼前會出現緊貼著輸入框的報錯信息,立刻檢驗輸入的內容是否正確,用戶更快地被提醒錯誤并修正內容,讓用戶更有信心、更快地完成輸入。

通常大家在設計時關注的都是輸入錯誤狀態下的紅色反饋,實際上輸入正確后綠色的成功反饋有時也是必要的。

輸入設計值得注意的交互反饋

鍵盤反饋

鍵盤的反饋更像是不同輸入框相對應的鍵盤設計,不同的使用場景中出現合適的鍵盤也是設計中應該考慮的部分,例如輸入銀行賬號時對應的數字鍵盤。

  • 左側是汽車之家的注冊頁,當點擊手機號快捷注冊的時候,輸入框獲得焦點并喚起了數字鍵盤,省去了再次切換鍵盤的麻煩。
  • 在付款時彈出的數字鍵盤(指紋沒有被識別出來時)。例如在微信紅包的輸入中,點擊總數會彈出數字鍵盤方便直接輸入金額。

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

輸入設計值得注意的交互反饋

結語

正確的時間該做正確的事,簡潔的輸入中應該使用恰當的反饋。輸入得到反饋好似用戶有了一份可供參考的行動指南,使用起產品也會無所拘束,所以有時候看似簡單的設計卻能帶來意料之外的收獲。

 

本文由 @YIZI 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

專欄作家

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 相互扶持啦,我這個UI不也來看文章了嗎

    來自山東 回復
    1. ????

      來自北京 回復
  2. ??
    UI/UE設計師呢?這都是PM的工作了?從商業到文本框全部一個人做?其他人摸魚么?

    來自四川 回復
    1. 產品是整個團隊共同打磨出來的,PM了解并補充設計細節,打造出的產品體驗豈不更好?

      來自北京 回復
    2. UE做,UI不做

      來自四川 回復