前言

隨著 AI 技術的不斷進步，用戶對于信息獲取的即時性、準確性及個性化程度均提出了更高的期望，而對于設計師的挑戰則是如何利用設計思維和 AI 技術，幫助用戶更高效地獲取信息，同時打造出具有智能感知的新功能。

本文將結合百度 APP 近期上線的「捏合總結」功能，分享如何將 AI 能力與設計思維結合提升產品智能感知，從而優化用戶體驗，希望能為深耕 AI 方向的設計師們提供有價值的參考和啟發。

背景現狀

目前百度 APP 核心場景存在搜索結果選擇多、長文閱讀低效、視頻獲取信息慢等問題，導致用戶獲取信息效率低。為此，我們運用 AI 技術對內容進行總結提煉，構建了一個覆蓋全場景的通用體驗鏈路，即「捏合前引導→觸發捏合→內容加載→結果展現」，以提高用戶的信息獲取效率。

設計協同業務團隊圍繞以下 3 個維度展開探索：

1. 亮點打造—搭建創新鏈路體驗
2. 智能感知—打造AI智能化設計語言
3. 信息提效—結構化排版促信息獲取

一、搭建創新鏈路體驗

1.手勢創新 雙指捏合觸發方式

以兼容百度 APP 全場景為目標，我們從「功能入口觸發」「手勢觸發」兩種方式進行深入對比探索：

1. 功能入口觸發：在通用框架上增加AI總結入口，直觀清晰；
2. 手勢觸發：在觸發手勢的選擇上，從各系統/平臺手勢規范（iOS和主流機型）和當前手勢是否與端內存在沖突兩個方面進行深入分析，將目光鎖定在“雙指捏合”手勢上。

通過實驗驗證，將 AI 入口嵌入通用框架的方式往往不夠顯眼，難以激發用戶的興趣，而采用雙指捏合作為交互觸發機制，不僅設計新穎，還在用戶群體中獲得了積極反響。

2. 精細化引導 建設用戶捏合心智

在捏合功能缺乏明顯入口的情況下，如何塑造用戶捏合心智呢？

我們初步采用「全頁面強阻斷式引導」以強化用戶對該功能的認知，但實驗表明這種方法影響了用戶獲取信息的效率。因此，我們基于用戶場景細化引導策略，針對“搜索結果、圖文/動態、三方落地頁、視頻詳情頁和小程序頁”5 種頁面類型，分別考慮捏合需求、內容可讀性和 AI 文本質量來定制捏合前鏈路的引導策略。

數據分析顯示，用戶在搜索落地頁和視頻詳情頁的捏合需求最強烈。我們根據頁面內容質量和可讀性調整了引導強度，對質量低、可讀性差的頁面加強引導，而對高質量、易讀的頁面則減少引導?？紤]到 AI 生成文本的質量差異，我們提高了生成文本質量高場景的引導權重。具體總結為以下幾點：

1. 搜索和視頻詳情頁：用戶需求強烈且AI總結質量高，采取強引導方案；
2. 三方落地頁：頁面可讀性差而AI總結效果好，選擇中引導，以提升用戶認知、優化閱讀體驗；
3. 圖文/動態落地頁和小程序頁：內容質量較高且用戶捏合需求適中或較低，采用弱引導，以保持瀏覽體驗。

3. 全頁面容器 打造沉浸式瀏覽體驗

使用全頁面容器展示總結內容，充分利用屏幕空間，優化展示效果，同時增強用戶互動和沉浸體驗，營造專注而愉悅的閱讀氛圍。

4. 動態反饋 豐富感受提升體驗

用戶執行雙指捏合手勢時，即時的震動反饋確認了操作的成功，此時用戶還可以在界面上雙指進行自由拖動，這不僅增加了互動樂趣，也讓交互過程更加直觀和豐富。

二、打造 AI 智能化設計語言

在塑造用戶體驗的初始階段，視覺元素扮演著至關重要的角色。我們的目標是打造一個智能且引人注目的用戶界面，通過其新穎性來突出功能，同時提供一種創新的視覺體驗，滿足用戶對人工智能和未來創新的期待。

我們著手從智能符號、漸變色彩、表意動效三方面進行深入細化探索。

1. 智能符號 增強識別度

為強化 AI 感知，在界面中融入輕盈的「AI」品牌標識和象征智慧與知識的「星星」符號，使用戶能夠快速識別相關 AI 功能。

2. 漸變色彩 傳遞科技感知

通過前期情緒版的構思發現，紫色可以傳遞科技的智能感覺，我們與百度 APP 的主題藍色進行了不同效果的組合嘗試，最終確定了藍粉色的漸變效果，創造出一種現代且具有科技感的視覺效果，同時還能傳遞出 AI 產品的親和力和情感智能，進而在用戶心中建立起積極的形象。

3. 表意動效 傳遞 AI 抽象概念

動效在 UI 設計中扮演著至關重要的角色，它不僅能夠豐富用戶界面的視覺效果，還能極大地提升用戶體驗。

在捏合功能的設計中，我們利用動畫來絲滑地呈現「觸發捏合→內容加載」的過渡，從而保證①有效傳遞產品的智能感；②減少加載等待過程中用戶的跳出率。

用戶觸發捏合功能后會經歷「捏合松手后的容器轉場」「AI 內容的加載」兩個關鍵階段：

1）符合操作預期的容器轉場效果

考慮到用戶雙指捏合的操作行為，采取當前頁面跟隨手指收縮的轉場效果，更符合操作預期。

2）沉浸的加載動畫

加載動畫的目的是為了緩解 AI 內容生成時用戶等待的焦慮感，降低用戶的跳出率。結合 AI 匯總整合分析內容的原理，為縮小后的容器設計了呼吸般的縮放律動效果，輔以頁面內波紋同步擴散的效果，模擬 AI 的思考動態，增加頁面沉浸感，營造出一個既智能又富有動感的視覺體驗。

在搜索場景的生成頁中，增加了更為直觀的分析動畫，將 AI 的資料搜集、整合和分析過程具象化呈現，幫助用戶理解 AI 工作的過程。通過直觀的骨架屏效果，不僅讓頁面看起來更加充實，也幫助用戶建立預期，從而降低跳出率。

3）漸進式披露動態效果

在總結文本的展示上使用打字機效果，搭配漸進式披露的策略，可以更快速地對生成后的內容進行呈現。相較于逐字打字機效果，這種方式不僅提升了信息展示的效率，還增加了頁面的律動感。

三、結構化排版促信息獲取

為保證 AI 總結生成內容的瀏覽清晰度，我們針對信息層級與模塊結構進行了打磨，確保為用戶提供一個舒適的瀏覽體驗。

1. 結構布局

采用總分結構展示信息，顯著提高了內容的易讀性和用戶閱讀效率。通過視覺層次和邏輯順序，向用戶提供了一條易于理解和遵循的信息流，進而提升整體閱讀體驗。

通過在頁面的多個模塊間設置寬敞的間距，使瀏覽過程更為舒適，同時增強了頁面的節奏感和呼吸空間。簡約的灰色背景與圖標、文字之間形成了鮮明的層級關系，使內容突出而清晰，保證了視覺的統一性和簡潔性。

2. 內容激發

根據不同類型的頁面，底部可以搭配「相關推薦」或「大家還在搜」模塊，提供更加個性化的瀏覽體驗。

3. 圖標匹配策略

根據文本的主題、內容和上下文，使用圖標輔助增強信息的表達效果，提升用戶理解度，使信息傳遞更為直觀、生動和高效。圖標匹配策略不僅有助于突出關鍵信息，還可以提升整體的視覺美感和用戶體驗。

寫在最后

在本次百度 APP 捏合項目創新探索中，我們將設計思維與 AI 能力進行創新結合，解決產品原有的體驗問題，在這個過程中我們嘗試結合用戶認知塑成模型，總結以下幾點：

1. 「發現理解」降低用戶學習成本：貼合用戶場景的多種功能精細化引導形式；
2. 「實施行動」降低用戶操作成本：從行為鏈路上塑造新穎且易用的雙指觸發交互模式；
3. 「接受反饋」降低用戶接受成本：使用流暢的動畫和觸感反饋完成各環節的流暢過渡；
4. 「形成認知」塑造產品智能感知：定義輕盈靈動的智能設計語言和清晰的結構化排版強化用戶的心智。

通過以上方式，幫助用戶在使用功能的過程中逐漸形成「會用→好用→愛用」的心智，從而為用戶建立全新的AI產品認知，助力功能發布，逐步提升功能的使用量。

本次項目也使我們對產品 AI 重構產生了一些新的理解，未來百度 APP 的 AI 體驗將向著交互方式更加自然、視覺語言更加輕盈的方式進行持續探索，也希望本文能為其他正在進行產品 AI 重構的設計師們帶來一些新的啟發。