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。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司