現在很多APP都已經使用了語音搜索這一功能，我們總結了語音搜索嵌入APP的幾步走——喚醒、輸入、識別、執行，探索傳統界面交互方式如何融合、甚至是遷移至語音交互等未來的交互方式。這篇文章我從入口、喚醒方式、頁面層級方式來分析喚醒階段的設計。

語音交互

語音交互有著解放雙手雙眼、高效、自然、學習成本低等優勢，正被越來越多地應用到面向普通用戶的產品和服務中。

但由於準確率、用戶的使用習慣等的限制，視覺界面需要實時配合，提供一定的引導提示與反饋，以保證語音交互的易學性、可用性，保證用戶使用過程中有控制感和信任感、體驗良好。

第一步 喚醒

1-入口

最常見的語音搜索入口方式有三種，分別是：依附於搜索框、依附於鍵盤、位於主導航中。不論哪種入口方式，採用的象徵圖形都與麥克風相關，符合人們日常使用麥克風收錄聲音的心理模型。

方式一：依附於搜索框

位於搜索框內部的右側或左側，或位於搜索框外部的右側。如下圖：

以夸克APP為例，首頁中入口icon放置在搜索框內部右側；搜索結果頁中，入口icon放置在底部工具欄的搜索框右側。

通常簡潔輕量或剛嘗試上線語音搜索模塊的產品中會使用這種方式。它對搜索框原有的佈局改動較小，對用戶原有的搜索操作習慣衝擊也較小。

將搜索中的輸入方式的選擇提前，用戶在首頁激活搜索模塊的同時就選擇了輸入方式，且搜索過程中無法切換。語音搜索入口的曝光時間短，除非用戶目的性很強，否則很容易忽略它、直接按照習慣或默認方式使用鍵盤輸入，這不利於吸引新用戶嘗試使用語音搜索功能。

· 使用建議：

適當地增加氣泡、蒙層之類的引導，向用戶介紹語音搜索的功能、優勢、如何使用等，有助於喚起用戶嘗試的慾望、培養用戶使用語音搜索的習慣。

方式二：依附於鍵盤

位於鍵盤上方，通常是懸浮按鈕的形式，部分類型的產品使用Tab欄的形式。如下圖所示：

以微信和京東APP為例，激活搜索框、調出鍵盤後，懸浮按鈕如“長按說出你想要的東西”會出現在鍵盤上方。

這類入口按鈕通常由圓形或圓角矩形的背景、“麥克風輸入”相關語義的icon、“按住說話”等操作提示語組成。在icon圖形本身的示能性之外，增加了相關交互操作的引導。

· 使用建議：

按鈕可以隨著搜索中間頁一起加載出現，也可以在所有頁面內容加載完成後劃變、切入，吸引用戶關注。入口按鈕始終應位於頁面最頂層，按鈕所在通欄可以適當增加背景。

Tab的樣式的語音搜索入口如下圖所示：

以網易有道詞典APP為例，在搜索中間頁的鍵盤上方，有輸入方式的切換Tab，可以在鍵盤輸入、語音輸入、手寫輸入三種輸入方式中切換。

這種方式中，用戶先進入搜索模塊，然後再選擇是使用默認的鍵盤打字方式、還是語音輸入或其他輸入方式。語音搜索入口雖然位於二級頁面甚至三級頁面，但用戶打字輸入時，注視的位置會在鍵盤與輸入框輸入內容之間往返切換，入口會持續地展示在用戶的視線流中。

內容功能較為豐富的產品，如購物、生活、影音、社交、工具平臺等眾多類型的APP搜索中間頁，均可採用位於鍵盤上方的懸浮按鈕作為語音搜索入口。在某些搜索內容類型較複雜，比如翻譯APP中，可以用Tab作為不同輸入方式的切換入口。

方式三：位於主導航中，C位出道

位於主導航Tab欄的中間位置，與其他Tab對比鮮明，用戶在各層級的頁面均可快速使用語音搜索功能。如下圖：

以搜狗搜索、百度APP為例，它們都為搜索引擎類、人工智能相關產品，有海量的數據信息做支撐，深耕語音交互，從識別算法、修正算法，到中間各個細節狀態的交互反饋都有很成熟的解決方案。在公司技術支撐不足，或語音交互與主功能聯繫不夠緊密時，不建議使用此方案。

若想為語音搜索提供儘量多的入口，可以將上述方式進行結合，目前看到比較合適的方案有百度地圖、愛奇藝，如下圖所示：

愛奇藝APP就是將方式一、二結合，在首頁的搜索框內部左側、搜索中間頁的鍵盤上方都放置了語音搜索的入口。既可以方便熟練用戶快速地進入語音搜索模塊，也讓“路人”用戶甚至“黑粉”用戶可以快捷嚐鮮體驗、逐步過渡使用。

2-喚醒方式

喚醒方式通常有點擊、長按兩種。喚醒方式的選擇與入口方式掛鉤。

方式一：點擊

點擊後自動錄音，再次點擊或無聲音輸入時停止錄音。如下圖：

以滴滴出行APP為例，點擊地址搜索框內的麥克風icon，便開始記錄用戶的說話內容，再次點擊icon會停止收錄聲音，若未點擊icon但長時間無聲音輸入也會自動停止收錄聲音。個別APP會在點擊入口後喚醒語音交互模塊、但不錄音，再次點擊或長按錄音按鈕後開始錄音。

· 優勢：

+ 會讓用戶有很強的控制感

+ 誤操作的情況少

+ 對入口的界面尺寸、位置無太多要求

· 劣勢：

- 增加點擊的次數

- 需要有一定的文案提示

- 用戶無法感知到APP多久檢測不到聲音後會停止錄音，有時會因為思考時間、停頓時間略長而被動結束輸入

· 使用建議：

當入口為放置在搜索框中或一側的icon，或Tab欄中的一項時，受限於入口的界面尺寸、交互規範，入口難以承載如長按、連擊等持續時間較長的交互動作，通常都是通過點擊喚醒。其他入口方式中，可以根據產品原有的交互規範對優劣勢進行取捨，判斷是否選用點擊喚醒的方式。

此方式類似於在微信中發語音的操作，長按錄音，鬆開停止收錄。如下圖：

在美團APP的搜索中間頁，按住語音搜索的入口按鈕便開始收錄聲音，頁面中會有一定的狀態反饋（在下篇的輸入階段會詳細分析），鬆開按鈕後會停止收錄聲音，並繼續後續的識別、搜索步驟。

· 優勢：

+ 有微信語音長期以來培養的操作習慣

+ 用戶有控制感

· 劣勢：

- 入口的尺寸要足夠大，以支持手指準確按住

- 會對屏幕區域有較多遮擋

- 手指可能誤移出按鈕區域，導致錄音停止

- 若用戶抬起手機講話，會無法看到屏幕上的視覺反饋內容

· 注意事項：

當入口或開關的形式為按鈕時，尺寸要足以支持長按操作。可以根據產品用戶群體的使用習慣、學習能力，對優劣勢進行取捨，選擇是否使用此喚醒方式。

為了儘可能整合優勢、摒棄劣勢，個人比較推薦像搜狗搜索APP中結合的方式，如下圖所示：

搜狗搜索APP對上述兩種喚醒方式進行了有機的結合——“按下說話”按鈕可以兼容點擊、長按兩種操作，用戶用不同的方式操作時，均可開啟語音收錄，同時頁面會給出對應提示：如果用戶點擊按鈕開始說話，會提示“點擊完成”；若長按按鈕說話，會提示“鬆開搜索”、“鬆開搜索，上滑取消”。

整合後的喚醒方式兼容性更大、對不同習慣背景的用戶都比較友好。但要注意頁面的提示、反饋一定要合理充分，並且要容易被發現、易讀。

3-語音搜索模塊的頁面層級

被喚醒的語音搜索模塊與原頁面的關係，有3種常見的形式：基於原頁面組件、彈出彈窗、進入子頁面。

方式一：基於原頁面組件

這種方式不增加頁面組件、不跳轉頁面，直接基於搜索框和入口按鈕進行後續的輸入識別。如下圖：

在微信進行語音搜索時，語音輸入、識別的內容和識別中的狀態反饋均直接呈現在搜索框中，輸入中的狀態直接基於入口按鈕展示。

這種形式適用於場景化、功能較具體的APP，其搜索內容簡單、聚焦，無需進行較多的輸入內容提示或較長時間的識別等待。

方式二：彈出彈窗

在原頁面上彈出彈窗來承載語音搜索模塊。如下圖：

如百度地圖和淘寶APP中，通過入口會喚醒語音交互彈窗，彈窗可以提供充足的頁面空間來做語音輸入的操作提示、狀態反饋、輸入和識別的內容反饋等等。並且，彈窗的頁面層級最高，有很強的提示作用，能第一時間讓用戶感知到頁面和交互流程的變化，最大程度地降低用戶的焦灼感與失控感。

這種方式適用於功能範圍較適中、沒有太多個性化內容推薦的APP。

方式三：進入子頁面

子頁面也分為兩種，一種相當於拉大的彈窗，為的是有更多的頁面空間展示品牌卡通形象、展示更多的搜索內容或操作提示等。如下圖：

以愛奇藝和喜馬拉雅APP為例，它們子頁面承載的內容與方式二彈窗承載的內容幾乎相同。

另一種子頁面會承載更多形式的推薦內容和引導，甚至是與語音客服機器人的對話，如下圖：

在支付寶和飛豬APP中，除了基本的提示、推薦外，會開展對話引導用戶繼續執行操作。

第二種子頁面方式適用於產品體量較大、功能內容繁雜且有較強的語音語義識別、對話能力的APP。建議不具備以上特徵與能力的APP不要輕易嘗試對話的形式，否則容易讓用戶產生“人工智障”的不良印象。

劃重點

· 常見的語音搜索入口有依附於搜索框、依附於鍵盤、位於主導航 3 種形式。

· 喚醒方式主要有點擊、長按兩種：點擊開關，誤操作的可能性較低；長按操作，可以延續用戶在微信中長按發語音的習慣，但操作易遮擋屏幕，影響界面信息的傳達。

· 語音搜索模塊的頁面層級主要有 3 種形式：基於原頁面組件進行語音搜索、在原頁面彈出彈窗、進入語音搜索子頁面，它們可承載的信息量依次增多。

不同的產品嵌入語音搜索功能時，應根據自身的技術能力、產品定位等，選擇體量適合、交互風格接近的方案。必要時可以將多種方案進行有機的結合。

第二步：輸入

輸入是語音搜索的核心交互階段，在這個階段中用戶說出搜索內容、設備進行錄入。為了讓用戶學習、適應語音交互的模式，用說話代替鍵盤打字，並在交互過程中有掌控感和信任感、避免操作誤區，開關控制、提示引導、狀態反饋的設計都十分重要。

1-開關控制

開關控制在上篇的喚醒方式中已經有所說明，由於大多數APP中，入口icon或按鈕即為語音錄入的開關，所以開關控制方式同喚醒方式一致，主要有點擊、長按兩種方式，如下圖所示：

如上圖的兩個例子：

第一種是喜馬拉雅APP採用的以點擊為主的交互：點擊開始、再次點擊或長時間無語音輸入時關閉的方式，控制感強，但操作步驟較多、用戶難以感知多長時間無語音輸入會關閉收錄聲音；

第二種是京東採用的長按開始、鬆手時關閉的輸入方式，雖然用戶有長按發送微信語音的習慣基礎，但容易誤操作、且操作過程中會對屏幕信息有所遮擋。

不少APP將兩種方式進行了有機的結合。

2-提示引導

許多用戶可能因為過往不太美好的語音交互經歷，而對語音搜索有所戒備或懷疑。簡單明瞭的提示引導可以消除用戶的心理障礙，對語音搜索功能建立一定的信任。

提示引導主要包括對開關方式和表述方式的說明。

開關方式，即如何操作控制開始、結束。根據入口或按鈕位置的不同，可以有不同的提示方式。如下圖所示：

上圖中，百度地圖APP的入口在搜索框內，使用了氣泡進行提示。類似的還有按鈕在搜索框附近或者主導航中時，也可以採用氣泡或者蒙層引導的形式進行提示。類似上圖中京東APP中的按鈕在鍵盤上、喜馬拉雅APP的按鈕在頁面下方的情況，可在按鈕上或按鈕附近提示操作方式。

注意事項：長按開始錄音時，按住屏幕的手部對屏幕會有一定的遮擋，提示的文字、圖形的位置應適當遠離點按區域。

對錶述方式的引導提示主要是輸入時可以說什麼、怎麼說的文字或符號。

目前大多數用戶仍在語音搜索的學習探索階段，怎麼說、說什麼的提示建議對用戶會很受用。一方面可以讓用戶學習用怎樣的語言描述可以簡單直接地完成搜索任務、規避一些操作誤區；另一方面也可以填充常用、熱門搜索等運營內容，吸引用戶嘗試使用語音搜索。

語音搜索組件的形式不同時，語音輸入提示的形式、數量也不完全相同，如下圖所示：

語音搜索模塊以氣泡或彈窗形式承載時，如上圖中的百度地圖APP，頁面空間有限，通常以一條文字的形式進行提示。

而像上圖中的支付寶APP，在單獨的頁面進行語音搜索，有充足的頁面空間，可以採用平鋪標籤、卡片，甚至詳情頁來說明如何用語音搜索。

3-狀態反饋

對於語音錄入這個看不見摸不著的過程，手機有沒有在記錄聲音、音量大小是否合適等狀態都需要視覺界面進行反饋。輸入過程中一般有這幾種形式的狀態反饋：

· 最常見的是伴隨音量大小變化而變化的麥克風、聲波等。動效的節奏、速率變化的呼吸感，可以展現語音交互的可控感、智能感、趣味性等等。例如：

上圖中隨音量大小而膨脹或縮小的同心圓氣泡、隨聲波而流動起伏的波浪聲波線、橫型或豎型的聲波線，都是不錯的嘗試。

其中，搜狗搜索採用的豎線型聲波波動起來的示意性最強，可以帶來沉浸的感受，也最貼合人們對聲波的心理模型，是較優的方案。

· 開關按鈕的顏色等樣式變換。

· 開關按鈕附近的文字提示，如點擊按鈕開始錄音後，提示文字變為“點擊結束”，可以作為反饋表示目前正在進行錄音。

· 在語音搜索模塊中顯示的反饋文字，如“請說，我在聆聽…”等類似的文字，擬人化地表示手機正在收錄聲音。

· 機器人、產品卡通形象或其他象徵的動畫，如下圖所示：

圖例中，喜馬拉雅APP使用了產品形象“小雅”，夸克APP中眨眼睛的“夸克寶寶”，百度地圖的小度，都通過動畫反饋錄音中的狀態，體現了語音交互的AI感，以及模擬真實對話的感覺。

· 音效反饋，語音輸入開始、結束時設定特定的反饋音效，提示直接明瞭，而且可以維持語音、聽覺通道交互的完整性。

· 震動反饋。

除了上述這些反饋方式，還可以探索趣味化、故事化的表現方式，有望提升語音交互的智能感、自然感、趣味性，從而彰顯品牌風格、提升用戶黏度。

除了在輸入過程中的狀態反饋，在操作出錯、音量過小無法識別時，都要進行必要的狀態反饋。如下圖所示：

如上圖的淘寶和搜狗搜索APP中輸入識別失敗情況下的頁面設計，在未檢測到或未識別出說話內容時，提示錯誤情況“未能識別”、“抱歉我沒聽清”，以及後續操作“請點擊麥克風重試”、“請再說一遍”，並且給出語音搜索的內容提示“你可以試試這樣說”、“我可以幫你做這些事”。

讓用戶在操作出錯時可以清晰地明白錯誤原因、明確當前狀態、學習如何操作。

第三步：識別

語音搜索的第三步是識別用戶說的話，將其轉化為文字，並在頁面上展示給用戶。過程中，可以根據算法進行一定的修正，調整無意義或有誤文字內容。

通過設計 ｢識別｣ 過程中的上屏方式、修正方式，可以體現語音輸入的快速、輕便、高效、容易把控等。

1-上屏方式

識別內容顯示到屏幕上時，應儘量做到快、實時、流暢。逐字上屏通常是在輸入語音內容的同時進行識別、逐個字上屏，逐句上屏通常是在語音內容輸入完成後識別、識別修正出完整的一句話之後再顯示到屏幕上。

· 逐字上屏

+ 優勢：實時反饋、有可控感、體驗快

- 劣勢：會展示給用戶原始的識別結果，如果結果文字是錯誤的也會先展示出來、再進行修正

· 建議：通過輸入文字的透明度或顏色等樣式變化，體現出正在識別或修正文字的動態過程，儘量引導用戶著重關注成功輸入的文字，忽視識別、修正中的錯誤文字。如下圖所示：

如圖中的搜狗搜索APP，將識別或修正中的內容用半透明的文字顯示，以體現動態識別修正的過程。有錯不要緊，只要能及時認識到錯誤並改正，還是好同志嘛。

技術水平足以保證處理時長和準確性的產品，可以選擇逐詞上屏的方案，並對上屏文字的顏色、透明度進行調整以表示輸入、修正中的狀態。

· 逐句上屏

+ 優勢：可以一步到位，展示最終確定的結果

- 劣勢：用戶感知到的識別速度較慢，控制感差

· 建議：若識別時間較長，應加入“識別中”的動效，如下圖所示：

京東和美團APP中，採用逐句識別的方式，識別時間較長，會出現識別中的動效，將系統狀態反饋給用戶，讓用戶有充足的掌控感。

因技術水平限制，處理速度較慢、識別修正耗時較長的產品，建議在輸入的過程中同步在後臺識別修正、最終只展示整段搜索關鍵詞上屏，識別處理過程中前臺頁面可以展示識別中的動效。

2-修正方式

語音搜索時輸入的內容長度較短，絕大多數APP中會對識別的內容進行自動修正，不可手動修正。修正的開始時機有邊識別邊修正、全部內容識別完開始修正兩種方案。識別和修正的結束通常根據算法計算情況決定，計算結束後停止識別修正，用戶無法、也不應手動結束。

例如用戶長按按鈕輸入時，系統邊錄入邊識別邊修正；用戶鬆開按鈕停止講話，此時不意味著系統要結束識別修正，系統應在識別修正完成後再執行下一步。（有的線上APP對結束識別修正的邊界判斷有誤）

不同產品在修正階段應根據自身產品內容策略，制定修正依據：

· 常規的專有名詞

· 用戶本機數據，如通訊錄名稱等

· APP自身的本地數據，如關注的公眾號名稱等

· 根據APP場景定義，如地名、商品名、APP的功能等

· 學習用戶的輸入習慣

第四步：執行

完成搜索詞的識別修正後，就進入了執行階段。針對不同的產品類型、搜索詞類型，執行可分為執行搜索、跳轉至功能專區、給出操作提示等不同解決方案。

· 針對社交類、內容類、電商類、工具類應用等，搜索詞為聊天記錄、地點、影視劇、商品等時，應直接用識別得到的關鍵詞執行搜索操作，展示搜索結果頁面；

· 針對功能模塊或活動專區等搜索詞，如在京東中搜索“5G”，可以在識別完成後直接進入對應的功能專區；

· 在有多輪對話能力的語音搜索模塊中，針對任務操作指令，如在支付寶中發紅包、飛豬中訂機票，識別出關鍵詞後，可以通過文字、語音、列表等確認用戶意圖或給出下一步的操作提示，如下圖所示：

· 另外，對於語義識別後的無意義、與產品功能無關的話語，可以進行聊天式的回應、內容推薦等。

但一定要在成熟的語義識別算法的基礎上進行多輪對話、聊天的嘗試，否則很容易損失產品的可用性、喪失用戶的信任感，這對語音交互的推廣是極其不利的。

劃重點

· 在入口、按鈕周圍增加明確的操作提示，儘可能地利用語音搜索組件的頁面空間或氣泡等引導形式說明語音交互的過程中可以怎麼說、說什麼，打消用戶的心理障礙，讓用戶願意學習使用；

· 在輸入、識別的過程中實時反饋，對不同操作狀態加以示意，通過動效、透明度等樣式變化展示語音輸入快速、準確的效果，以體現系統的智能、可控。其中豎型聲波線展示有聲音輸入、識別內容逐字上屏都是比較不錯的反饋方案；

· 執行過程中，要充分利用語義識別算法，對於明確的內容，直接執行搜索；對於未匹配的內容或仍需後續操作的內容，給用戶提出明確的操作建議。

如果公司的技術能力與產品規劃允許，可以為語音搜索模塊設定一定的角色形象，氣質風格等，相關的狀態反饋動效、話術等都可與其緊密聯繫。

原文鏈接：

https://mp.weixin.qq.com/s/hV2CHz5hnCT3FLYcjEPwGA

https://mp.weixin.qq.com/s/8xPFbDQeFeZA6bVuOdrqSQ

IXDC深圳站現已完美落幕

讓我們一起期待下一個十年!

2020.07.16—07.19

北京·國家會議中心

一起探索更多新可能

將對設計的熱愛延續，我們下個十年見！

客服電話/微信：188-2626-0168

相關精彩：

閱讀更多 IXDC 的文章

關鍵字: 人工智能 愛奇 設計