編輯導(dǎo)語：“信息輸入”是用戶在使用app時(shí)不可缺少的一環(huán)，高效的輸入形式不僅能極大提升效率，還能促進(jìn)產(chǎn)品多方面的發(fā)展。本篇文章作者為我們分享了大廠的“信息輸入”設(shè)計(jì)案例，為我們的工作需求和個(gè)人作品提供一些靈感，一起來看。

“信息輸入”是用戶使用APP最常見的形式，高效的輸入形式不僅能極大提升效率，還能有效地促進(jìn)產(chǎn)品易用性、口碑、甚至業(yè)務(wù)目標(biāo)上的實(shí)現(xiàn)，是每個(gè)產(chǎn)品和設(shè)計(jì)師都需要掌握的知識(shí)點(diǎn)。

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

大致分為：產(chǎn)品能力（8個(gè)）+交互體驗(yàn) （8個(gè)）

一、產(chǎn)品能力上1. 橫屏?xí)r分割鍵位

在游戲狀態(tài)下的手機(jī)鍵盤都會(huì)變成寬屏模式，為了解決【跨度過大】的問題，百度輸入法就嘗試將鍵盤一分為二，讓鍵盤更佳貼合左右手的打字習(xí)慣。

讓用戶更快更清晰地輸入信息、減少打錯(cuò)字的概率，突顯產(chǎn)品的個(gè)性化服務(wù)與對用戶的重視程度。

Mark一下：橫屏狀態(tài)下，需要思考是否有更高效的操作方式。

2. 語音轉(zhuǎn)文字自配表情

「微信」將語音內(nèi)容轉(zhuǎn)化為文字時(shí)，系統(tǒng)能檢測用戶當(dāng)前的情緒并自動(dòng)添加相應(yīng)的Emoji表情，如開心、難過、憤怒等表情，特別有意思。

更好地表達(dá)出自己、感知好友的當(dāng)前情緒，以便更好地進(jìn)行交流，并通過這種小細(xì)節(jié)提升用戶對產(chǎn)品的印象。

Mark一下：挖掘【行為/情緒】上對用戶的關(guān)懷點(diǎn)，可助力產(chǎn)品口碑與印象的提升。

3. 關(guān)鍵詞自動(dòng)匹配表情

在iOS的原生鍵盤輸入文字，再去打開表情/符號(hào)鍵盤時(shí)，系統(tǒng)會(huì)自動(dòng)在文字上自動(dòng)高亮對應(yīng)的表情，方便用戶直接選擇，特別有意思。

減少用戶操作成本，同時(shí)利于表達(dá)當(dāng)下情緒，給用戶帶來驚喜并拉進(jìn)之間的距離。

Mark一下：學(xué)會(huì)分析/檢測用戶當(dāng)下的情緒/心理，并做出相對應(yīng)的設(shè)計(jì)。

4. 電腦復(fù)制文字, 手機(jī)同步收到

在電腦和手機(jī)上都使用同一個(gè)「搜狗輸入法」賬號(hào)，只要電腦上復(fù)制文字，移動(dòng)端上就能同步檢測到復(fù)制信息，并且進(jìn)行粘貼提示，非常便捷。

用戶能感知到系統(tǒng)已自動(dòng)復(fù)制文字，無需在電腦上再發(fā)送給手機(jī)、手機(jī)上再去復(fù)制信息并粘貼，大大減少操作鏈路與成本。

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

5. 自動(dòng)計(jì)算數(shù)學(xué)公式

在搜狗輸入法輸入簡單的計(jì)算公式時(shí)，系統(tǒng)會(huì)自動(dòng)幫你計(jì)算并前置展示結(jié)果。若點(diǎn)擊會(huì)將該公式和結(jié)果顯示在輸入框內(nèi)。

用戶不用專門打開計(jì)算器就能知道結(jié)果，減少操作鏈路。同時(shí)突顯產(chǎn)品的便捷性與科技性。

Mark一下：前置展示潛在的用戶訴求、產(chǎn)品服務(wù)、競爭優(yōu)勢等。

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

各大APP搜索框的大小都是固定好的，當(dāng)輸入較長文本（如鏈接）時(shí)編輯起來就很麻煩，需要來回移動(dòng)光標(biāo)。

而UC瀏覽器上的輸入框，當(dāng)你輸入的文字越多時(shí)，文字就跟著變小，便于用戶看到更多內(nèi)容，再也而不用移動(dòng)光標(biāo)才能看到全部信息。

Mark一下：當(dāng)信息復(fù)雜+數(shù)量巨大時(shí)，必須給予用戶清晰的分類與狀態(tài)、位置指引。

7. 檢測關(guān)鍵詞顯示電話號(hào)碼

在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測對應(yīng)的手機(jī)號(hào)碼：

當(dāng)你輸入 【打+我/通訊錄好友名字+電話】時(shí)，鍵盤上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼，點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。

用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號(hào)碼，大大提升操作體驗(yàn)與效率。

8. 前置展示搜索結(jié)果

相比于國內(nèi)的其他瀏覽器，夸克瀏覽器在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣，讓用戶一目了然。

用戶無需觸發(fā)搜索、進(jìn)入結(jié)果頁才能看到想要查詢的信息，大大提升信息的查詢效率、增加后續(xù)用戶來夸克搜索的粘性與意愿。

Mark一下：前置展示潛在的用戶訴求、產(chǎn)品服務(wù)、競爭優(yōu)勢等。

二、交互體驗(yàn)上1. 不用心算現(xiàn)在多少錢了

在微信發(fā)起轉(zhuǎn)賬，輸入數(shù)字時(shí)會(huì)檢測對應(yīng)的數(shù)額（千、萬、十萬、百萬等），用戶一眼就能知道輸入了多少前，特別nice。

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

Mark一下：記得檢測信息數(shù)量是否有對應(yīng)的梯位。

2. 評論時(shí)也能看短視頻

在快手觀看短視頻時(shí)想查看、發(fā)表評論，原本的視頻會(huì)繼續(xù)播放+等比例縮小置頂，這樣一來就實(shí)現(xiàn)了「邊評論 邊看視頻」，有點(diǎn)類型「分屏」的意思。

避免原來看視頻的體驗(yàn)被打斷、錯(cuò)過重要的視頻片段，同時(shí)方便用戶跟隨視頻的播放而即興發(fā)揮評論。

Mark一下：學(xué)會(huì)用同一個(gè)模塊 兼容多種交互/內(nèi)容。

3. 可定位的的用戶評論

在小宇宙里收聽音頻且發(fā)表評論時(shí)，輸入框下面會(huì)帶有【標(biāo)記時(shí)點(diǎn)】的入口：

勾選它且發(fā)布評論后，其他用戶點(diǎn)擊已標(biāo)記的時(shí)間點(diǎn)，當(dāng)前播放的音頻內(nèi)容會(huì)直接跳轉(zhuǎn)至該時(shí)間點(diǎn)位置。

用戶能清晰的知道當(dāng)前評論是圍繞音頻的哪個(gè)時(shí)間點(diǎn)，從而快速收聽所對應(yīng)的音頻內(nèi)容，大大減少操作鏈路與成本。

Mark一下：要讓用戶清晰地感知當(dāng)前的操作進(jìn)度/狀態(tài)。

4. 自動(dòng)加載收貨人+手機(jī)

拼多多上新建收貨地址時(shí)，系統(tǒng)會(huì)加載已存在的收貨人姓名+手機(jī)（從創(chuàng)建過的收貨地址信息里獲取），用【已有信息的選擇】代替手動(dòng)輸入。

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

Mark一下：盡量減少需要用戶記憶的事情/行動(dòng)，提供「再認(rèn)」上的解決方案。

5. 新建筆記先定位內(nèi)容欄

印象筆記新建筆記時(shí)，會(huì)將鍵盤光標(biāo)自動(dòng)定位到【內(nèi)容編輯區(qū)】中，而不是【標(biāo)題區(qū)】。

也許基于用戶行為的分析+數(shù)據(jù)的驗(yàn)證，大部分用戶新建筆記的目的與行為就是：立即記錄、輸入此時(shí)/當(dāng)下的想法。畢竟‘標(biāo)題’這種概括性信息 往往不是最首要的，因?yàn)樗遣淮_定的圖片：一是很難確保用戶 已經(jīng)有了想好的標(biāo)題名稱；二是標(biāo)題很可能隨著整體內(nèi)容的變化而更改。

Mark一下：根據(jù)用戶訴求調(diào)整內(nèi)容優(yōu)先級。

6. 差評會(huì)自動(dòng)匿名

美團(tuán)或餓了么上選擇差評時(shí)，系統(tǒng)會(huì)自動(dòng)勾上匿名評價(jià)。而當(dāng)選擇中評或好評時(shí)，則取消匿名評價(jià)。

避免用戶發(fā)表差評時(shí) 受到商家的惡意騷擾，同時(shí)通過這種小細(xì)節(jié)提升用戶對產(chǎn)品的印象Mark一下：涉及「用戶隱私」的場景要思考如何進(jìn)行關(guān)懷設(shè)計(jì)。

7. 根據(jù)需要 變換輸入欄順序

在海底撈連接WiFi時(shí)，輸入欄位置會(huì)根據(jù)輸入狀態(tài)進(jìn)行調(diào)整：·未輸入手機(jī)號(hào)碼時(shí)，【電話號(hào)碼欄】在最上面；·已輸入手機(jī)號(hào)碼+已觸發(fā)獲取驗(yàn)證碼時(shí)，【驗(yàn)證碼欄】就變成了在最上面了。

使重要的信息都圍繞在第一欄輸入，減少手指與視線移動(dòng)，增加操作效率與速度。Mark一下：根據(jù)用戶訴求調(diào)整內(nèi)容優(yōu)先級08.吉祥物跟隨操作行為？在Readme的注冊頁面中，在切換不同的輸入欄時(shí)，右邊的吉祥物貓頭鷹的手/翅膀 也會(huì)跟著指動(dòng)到對應(yīng)的輸入欄中，并特別有趣。

通過吉祥物的手指到輸入欄，幫助用戶知道當(dāng)前輸入的是哪一行、在輸什么，從而減少信息錯(cuò)誤的發(fā)生，也讓整個(gè)注冊流程變得有趣、順暢，同時(shí)加深新用戶對產(chǎn)品的印象。

Mark一下：吉祥物不應(yīng)只靜態(tài)展示，可以跟隨用戶行為做相應(yīng)的變化。

#專欄作家#

和出此嚴(yán)，微信公眾號(hào)：和出此嚴(yán)，人人都是產(chǎn)品經(jīng)理專欄作家。一枚在鵝廠成長中的‘90后老干部’，主產(chǎn)各種接地氣的交互/產(chǎn)品干貨。以做產(chǎn)品的方式，寫好每一篇文章。

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

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