2023-1-4 博博
一、項目背景
語音搜索場景在功能不斷迭代的同時，也在探索更年輕化的玩法、傳遞更多元的體驗感受。在產品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經實現，但從產品形態以及用戶反饋上看，還沒有達到可情感互動的效果。所以在本次迭代上，我們著重從情感聯結、閑聊互動的維度，對語音搜索進行創新性嘗試。
二、設計挑戰與目標
圍繞項目背景，從現在語音搜索的用戶行為與框架來看，有幾個比較明確的問題：
因為前期在語音搜索的優化中，已經嘗試在面板中引入AI形象，上線后用戶反響強烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時語音搜索引入AI伙伴是體現同行業差異化的有力創新點，從行業報告《2021年中國智能語音市場分析報告》中，也闡述了打造沉浸感語音搜索體驗與引入AI是目前智能語音市場的發展趨勢。
綜合以上原因，設計團隊在與產品討論過后，達成本次升級的核心目標：
三、設計舉措
1、構建認知 - 語音搜索基礎框架升級
在舊頁面中，語音面板限制了人物與按鈕的展現，人物既要承載功能反饋又需要作為物理操作按鍵進行點擊操作，與用戶認知相悖且也不利于功能擴展。因此在新版本設計中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關系。
我們將語音搜索頁面框架分為主要功能與輔助功能區。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強情緒傳遞感的同時保證框架可拓展性。
同時，將原堆積在面板中的功能與信息按優先級歸位，確保頁面信息清晰易讀、功能操作熱區無重疊、信息反饋區無干擾。新框架上線后，AI伙伴互動與語音搜索的認知關系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導流增加，面板退出率下降。
2、引入情感 - 全場景情感化體驗提升
除了通過框架層面進行認知優化之外，為營造更貼合“人”的互動體驗與情感建立，我們又根據語音場景對每個狀態進行了情感體驗升級。改版上線后，用戶閑聊訴求和互動點擊行為均有所提升，從而驗證情感化的體驗提升，滿足了用戶互動訴求。
1）情感化引導提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實體，同時使用年輕化的引導語氣拉近與用戶間的距離，增加數字人曝光，建立新用戶心理預期，激發興趣點提轉化。
2）互動提示規則升級：圍繞“人”的真實情感，通過彈出氣泡的方式模擬AI伙伴狀態，比如聽歌、讀書、游戲。以此引發用戶點擊或進行互動行為嘗試。并且配合AI伙伴升級引導規則，使引導能夠根據不同場景進行適配，保證其既可以承接語音常規引導功能，又可以承接負一樓聊天互動，點擊氣泡可跳轉對應負一樓場景、聯動數字人語境內容，避免造成場景情感化割裂。
3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態反饋，想要模擬更真實的“人”的狀態，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態、指令響應、引導等5種狀態。對應不同的狀態，規劃相應的數字人反饋動作或組合使用方式，可復用拓展其他相關場景，為設計與開發提效。
3、感知升級 - 營造沉浸視覺氛圍
確定了產品主要改版方向后，通過對目標的提煉，提取設計關鍵點「年輕化」與「情感化」，配合AI伙伴形象，需要呈現出輕松活力的氛圍感，設計中運用了大面積的毛玻璃質感，使場景更加輕盈、沉浸。通過對色彩的運用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設計突破。
1）定義視覺風格：圍繞改版目標，定義設計關鍵詞，由關鍵詞延伸設計風格要點。
2）形色字構質動：從「形色字質構」5個方面提煉設計特征。
基于視覺方向及特征提煉，在質感、形狀、顏色三個設計中改動最大的方向詳細描述。
考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。
①基礎色彩范圍制定：
以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進行歸類處理，從中提取主題色系，從搜索色庫中對應選出主題色環。
②如何在數字人裝扮中提取主體色：
我們需要把色彩量化，建立特定場景取色規則，根據規則層層篩選，我們可以從中獲取N種主體侯選色。
③校正主體色，與搜索智庫色彩形成映射關系：
通過對數字人裝扮的色彩分類，我們以H值為標準，通過調整S值與B值，劃分了12個色相，設定對應色系的H值區間范圍，如智能取色色值在該色相區間范圍內，且吸取到的候選色個數最多，就在對應的色庫卡中選取主體色。
校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度
④建立輔助色搭配規則：
為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調的一致性，其次利用對比色和互補色，選擇更加豐富多元的色相，制造更強烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。
⑤組件化思維拆解頁面元素：
在梳理了智能取色機制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現，那么在做到視覺減負的同時，如何能靈活的替換對應元素呢？
我們以組件化思維去拆分設計，進行立體化的分層，將引導層（熱詞推薦引導關注）、信息展示層（承接語音各類狀態與信息）、形象層（強化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據需要進行顏色延展，保證視覺樣式達成橫向統一，呈現出更加豐富的視覺內容，避免審美疲勞。
總結本次語音搜索的改版升級，我們通過“構建伙伴認知、滿足情感互動、增強沉浸體驗”等手段，增強AI伙伴的曝光率，進一步向用戶傳達智能搜索的感知，從而促進搜索行為轉化。
構建認知過程中強化AI伙伴形象，增強語音搜索功能拓展性；同時結合“情感化”等全場景引導手段，營造更貼合“人”的互動體驗與情感建立，對每個狀態進行了情感體驗升級；最后重新定制視覺風格，圍繞「年輕化」關鍵點對整體氛圍進行強化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗也得到了顯著提升。
四、寫在最后
我們正處于數字化快速變革的時代，傳統工具的基礎功能已不再滿足用戶的訴求，人們的感官也從現實空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個信息輸入-結果輸出的傳統搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達、情感和學習能力，滿足人們更高層次的情感訴求的同時，也可以讓搜索更加簡單有趣。
未來我們持續對語音搜索進行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗，創造出更多有趣的、創新的、別出心裁的年輕化設計。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司