tft每日頭條

 > 生活

 > 設計方案優化教程

設計方案優化教程

生活 更新时间:2024-09-05 02:02:54

編輯導語:“信息輸入”是用戶在使用app時不可缺少的一環,高效的輸入形式不僅能極大提升效率,還能促進産品多方面的發展。本篇文章作者為我們分享了大廠的“信息輸入”設計案例,為我們的工作需求和個人作品提供一些靈感,一起來看。

設計方案優化教程(如何優化信息輸入)1

“信息輸入”是用戶使用APP最常見的形式,高效的輸入形式不僅能極大提升效率,還能有效地促進産品易用性、口碑、甚至業務目标上的實現,是每個産品和設計師都需要掌握的知識點。

本次帶大家看下有哪些有趣的‘信息輸入’小案例,給你的工作需求、個人作品提供靈感來源~

大緻分為:産品能力(8個) 交互體驗 (8個)

一、産品能力上

1. 橫屏時分割鍵位

在遊戲狀态下的手機鍵盤都會變成寬屏模式,為了解決【跨度過大】的問題,百度輸入法就嘗試将鍵盤一分為二,讓鍵盤更佳貼合左右手的打字習慣。

設計方案優化教程(如何優化信息輸入)2

讓用戶更快更清晰地輸入信息、減少打錯字的概率,突顯産品的個性化服務與對用戶的重視程度。

Mark一下:橫屏狀态下,需要思考是否有更高效的操作方式。

2. 語音轉文字自配表情

「微信」将語音内容轉化為文字時,系統能檢測用戶當前的情緒并自動添加相應的Emoji表情,如開心、難過、憤怒等表情,特别有意思。

設計方案優化教程(如何優化信息輸入)3

更好地表達出自己、感知好友的當前情緒,以便更好地進行交流,并通過這種小細節提升用戶對産品的印象。

Mark一下:挖掘【行為/情緒】上對用戶的關懷點,可助力産品口碑與印象的提升。

3. 關鍵詞自動匹配表情

在iOS的原生鍵盤輸入文字,再去打開表情/符号鍵盤時,系統會自動在文字上自動高亮對應的表情,方便用戶直接選擇,特别有意思。

設計方案優化教程(如何優化信息輸入)4

減少用戶操作成本,同時利于表達當下情緒,給用戶帶來驚喜并拉進之間的距離。

Mark一下:學會分析/檢測用戶當下的情緒/心理,并做出相對應的設計。

4. 電腦複制文字, 手機同步收到

在電腦和手機上都使用同一個「搜狗輸入法」賬号,隻要電腦上複制文字,移動端上就能同步檢測到複制信息,并且進行粘貼提示,非常便捷。

設計方案優化教程(如何優化信息輸入)5

用戶能感知到系統已自動複制文字,無需在電腦上再發送給手機、手機上再去複制信息并粘貼,大大減少操作鍊路與成本。

Mark一下:對用戶重要/常用的功能可以設置「快捷操作」。

5. 自動計算數學公式

在搜狗輸入法輸入簡單的計算公式時,系統會自動幫你計算并前置展示結果。若點擊會将該公式和結果顯示在輸入框内。

設計方案優化教程(如何優化信息輸入)6

用戶不用專門打開計算器就能知道結果,減少操作鍊路。同時突顯産品的便捷性與科技性。

Mark一下:前置展示潛在的用戶訴求、産品服務、競争優勢等。

6. 輸入框文字越多就越小?

各大APP搜索框的大小都是固定好的,當輸入較長文本(如鍊接)時編輯起來就很麻煩,需要來回移動光标。

而UC浏覽器上的輸入框,當你輸入的文字越多時,文字就跟着變小,便于用戶看到更多内容,再也而不用移動光标才能看到全部信息。

設計方案優化教程(如何優化信息輸入)7

Mark一下:當信息複雜 數量巨大時,必須給予用戶清晰的分類與狀态、位置指引。

7. 檢測關鍵詞顯示電話号碼

在iOS的原生鍵盤裡,可以根據輸入詞檢測對應的手機号碼:

當你輸入 【打 我/通訊錄好友名字 電話】時,鍵盤上會自動顯示自己或好友的電話号碼,點擊号碼就能自動粘貼在輸入框中。

設計方案優化教程(如何優化信息輸入)8

用戶無需前往通訊錄就能輕松「獲知 想起」誰誰的電話号碼,大大提升操作體驗與效率。

8. 前置展示搜索結果

相比于國内的其他浏覽器,誇克浏覽器在搜索框中輸入“某城市 天氣”的關鍵詞,上方就會以卡片的形式顯示該地區最近一周的天氣,讓用戶一目了然。

設計方案優化教程(如何優化信息輸入)9

用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息,大大提升信息的查詢效率、增加後續用戶來誇克搜索的粘性與意願。

Mark一下:前置展示潛在的用戶訴求、産品服務、競争優勢等。

二、交互體驗上

1. 不用心算現在多少錢了

在微信發起轉賬,輸入數字時會檢測對應的數額(千、萬、十萬、百萬等),用戶一眼就能知道輸入了多少前,特别nice。

設計方案優化教程(如何優化信息輸入)10

用戶無需【邊輸入,邊計算這是多少錢】的腦力投入(特别是對于年紀大的用戶),增加信息輸入效率與速度。

Mark一下:記得檢測信息數量是否有對應的梯位。

2. 評論時也能看短視頻

在快手觀看短視頻時想查看、發表評論,原本的視頻會繼續播放 等比例縮小置頂,這樣一來就實現了「邊評論 邊看視頻」,有點類型「分屏」的意思。

設計方案優化教程(如何優化信息輸入)11

避免原來看視頻的體驗被打斷、錯過重要的視頻片段,同時方便用戶跟随視頻的播放而即興發揮評論。

Mark一下:學會用同一個模塊 兼容多種交互/内容。

3. 可定位的的用戶評論

在小宇宙裡收聽音頻且發表評論時,輸入框下面會帶有【标記時點】的入口:

勾選它且發布評論後,其他用戶點擊已标記的時間點,當前播放的音頻内容會直接跳轉至該時間點位置。

設計方案優化教程(如何優化信息輸入)12

用戶能清晰的知道當前評論是圍繞音頻的哪個時間點,從而快速收聽所對應的音頻内容,大大減少操作鍊路與成本。

Mark一下:要讓用戶清晰地感知當前的操作進度/狀态。

4. 自動加載收貨人 手機

拼多多上新建收貨地址時,系統會加載已存在的收貨人姓名 手機(從創建過的收貨地址信息裡獲取),用【已有信息的選擇】代替手動輸入。

選擇已存在記錄的信息,可以免去操作,大大降低操作成本。

設計方案優化教程(如何優化信息輸入)13

Mark一下:盡量減少需要用戶記憶的事情/行動,提供「再認」上的解決方案。

5. 新建筆記先定位内容欄

印象筆記新建筆記時,會将鍵盤光标自動定位到【内容編輯區】中,而不是【标題區】。

設計方案優化教程(如何優化信息輸入)14

也許基于用戶行為的分析 數據的驗證,大部分用戶新建筆記的目的與行為就是:立即記錄、輸入此時/當下的想法。畢竟‘标題’這種概括性信息 往往不是最首要的,因為它是不确定的圖片:一是很難确保用戶 已經有了想好的标題名稱;二是标題很可能随着整體内容的變化而更改。

Mark一下:根據用戶訴求調整内容優先級。

6. 差評會自動匿名

美團或餓了麼上選擇差評時,系統會自動勾上匿名評價。而當選擇中評或好評時,則取消匿名評價。

設計方案優化教程(如何優化信息輸入)15

避免用戶發表差評時 受到商家的惡意騷擾,同時通過這種小細節提升用戶對産品的印象Mark一下:涉及「用戶隐私」的場景要思考如何進行關懷設計。

7. 根據需要 變換輸入欄順序

在海底撈連接WiFi時,輸入欄位置會根據輸入狀态進行調整:·未輸入手機号碼時,【電話号碼欄】在最上面;·已輸入手機号碼 已觸發獲取驗證碼時,【驗證碼欄】就變成了在最上面了。

設計方案優化教程(如何優化信息輸入)16

使重要的信息都圍繞在第一欄輸入,減少手指與視線移動,增加操作效率與速度。Mark一下:根據用戶訴求調整内容優先級08.吉祥物跟随操作行為?在Readme的注冊頁面中,在切換不同的輸入欄時,右邊的吉祥物貓頭鷹的手/翅膀 也會跟着指動到對應的輸入欄中,并特别有趣。

設計方案優化教程(如何優化信息輸入)17

通過吉祥物的手指到輸入欄,幫助用戶知道當前輸入的是哪一行、在輸什麼,從而減少信息錯誤的發生,也讓整個注冊流程變得有趣、順暢,同時加深新用戶對産品的印象。

Mark一下:吉祥物不應隻靜态展示,可以跟随用戶行為做相應的變化。

#專欄作家#

和出此嚴,和出此嚴,人人都是産品經理專欄作家。一枚在鵝廠成長中的‘90後老幹部’,主産各種接地氣的交互/産品幹貨。以做産品的方式,寫好每一篇文章。

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

題圖來自 Pexels,基于CC0協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved