前言

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

本文將結(jié)合百度 APP 近期上線的「捏合總結(jié)」功能，分享如何將 AI 能力與設(shè)計(jì)思維結(jié)合提升產(chǎn)品智能感知，從而優(yōu)化用戶體驗(yàn)，希望能為深耕 AI 方向的設(shè)計(jì)師們提供有價(jià)值的參考和啟發(fā)。

背景現(xiàn)狀

目前百度 APP 核心場(chǎng)景存在搜索結(jié)果選擇多、長(zhǎng)文閱讀低效、視頻獲取信息慢等問題，導(dǎo)致用戶獲取信息效率低。為此，我們運(yùn)用 AI 技術(shù)對(duì)內(nèi)容進(jìn)行總結(jié)提煉，構(gòu)建了一個(gè)覆蓋全場(chǎng)景的通用體驗(yàn)鏈路，即「捏合前引導(dǎo)→觸發(fā)捏合→內(nèi)容加載→結(jié)果展現(xiàn)」，以提高用戶的信息獲取效率。

設(shè)計(jì)協(xié)同業(yè)務(wù)團(tuán)隊(duì)圍繞以下 3 個(gè)維度展開探索：

1. 亮點(diǎn)打造—搭建創(chuàng)新鏈路體驗(yàn)
2. 智能感知—打造AI智能化設(shè)計(jì)語言
3. 信息提效—結(jié)構(gòu)化排版促信息獲取

一、搭建創(chuàng)新鏈路體驗(yàn)

1.手勢(shì)創(chuàng)新 雙指捏合觸發(fā)方式

以兼容百度 APP 全場(chǎng)景為目標(biāo)，我們從「功能入口觸發(fā)」「手勢(shì)觸發(fā)」兩種方式進(jìn)行深入對(duì)比探索：

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

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

2. 精細(xì)化引導(dǎo) 建設(shè)用戶捏合心智

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

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

數(shù)據(jù)分析顯示，用戶在搜索落地頁和視頻詳情頁的捏合需求最強(qiáng)烈。我們根據(jù)頁面內(nèi)容質(zhì)量和可讀性調(diào)整了引導(dǎo)強(qiáng)度，對(duì)質(zhì)量低、可讀性差的頁面加強(qiáng)引導(dǎo)，而對(duì)高質(zhì)量、易讀的頁面則減少引導(dǎo)。考慮到 AI 生成文本的質(zhì)量差異，我們提高了生成文本質(zhì)量高場(chǎng)景的引導(dǎo)權(quán)重。具體總結(jié)為以下幾點(diǎn)：

1. 搜索和視頻詳情頁：用戶需求強(qiáng)烈且AI總結(jié)質(zhì)量高，采取強(qiáng)引導(dǎo)方案；
2. 三方落地頁：頁面可讀性差而AI總結(jié)效果好，選擇中引導(dǎo)，以提升用戶認(rèn)知、優(yōu)化閱讀體驗(yàn)；
3. 圖文/動(dòng)態(tài)落地頁和小程序頁：內(nèi)容質(zhì)量較高且用戶捏合需求適中或較低，采用弱引導(dǎo)，以保持瀏覽體驗(yàn)。

3. 全頁面容器 打造沉浸式瀏覽體驗(yàn)

使用全頁面容器展示總結(jié)內(nèi)容，充分利用屏幕空間，優(yōu)化展示效果，同時(shí)增強(qiáng)用戶互動(dòng)和沉浸體驗(yàn)，營(yíng)造專注而愉悅的閱讀氛圍。

4. 動(dòng)態(tài)反饋 豐富感受提升體驗(yàn)

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

二、打造 AI 智能化設(shè)計(jì)語言

在塑造用戶體驗(yàn)的初始階段，視覺元素扮演著至關(guān)重要的角色。我們的目標(biāo)是打造一個(gè)智能且引人注目的用戶界面，通過其新穎性來突出功能，同時(shí)提供一種創(chuàng)新的視覺體驗(yàn)，滿足用戶對(duì)人工智能和未來創(chuàng)新的期待。

我們著手從智能符號(hào)、漸變色彩、表意動(dòng)效三方面進(jìn)行深入細(xì)化探索。

1. 智能符號(hào) 增強(qiáng)識(shí)別度

為強(qiáng)化 AI 感知，在界面中融入輕盈的「AI」品牌標(biāo)識(shí)和象征智慧與知識(shí)的「星星」符號(hào)，使用戶能夠快速識(shí)別相關(guān) AI 功能。

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

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

3. 表意動(dòng)效 傳遞 AI 抽象概念

動(dòng)效在 UI 設(shè)計(jì)中扮演著至關(guān)重要的角色，它不僅能夠豐富用戶界面的視覺效果，還能極大地提升用戶體驗(yàn)。

在捏合功能的設(shè)計(jì)中，我們利用動(dòng)畫來絲滑地呈現(xiàn)「觸發(fā)捏合→內(nèi)容加載」的過渡，從而保證①有效傳遞產(chǎn)品的智能感；②減少加載等待過程中用戶的跳出率。

用戶觸發(fā)捏合功能后會(huì)經(jīng)歷「捏合松手后的容器轉(zhuǎn)場(chǎng)」「AI 內(nèi)容的加載」兩個(gè)關(guān)鍵階段：

1）符合操作預(yù)期的容器轉(zhuǎn)場(chǎng)效果

考慮到用戶雙指捏合的操作行為，采取當(dāng)前頁面跟隨手指收縮的轉(zhuǎn)場(chǎng)效果，更符合操作預(yù)期。

2）沉浸的加載動(dòng)畫

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

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

3）漸進(jìn)式披露動(dòng)態(tài)效果

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

三、結(jié)構(gòu)化排版促信息獲取

為保證 AI 總結(jié)生成內(nèi)容的瀏覽清晰度，我們針對(duì)信息層級(jí)與模塊結(jié)構(gòu)進(jìn)行了打磨，確保為用戶提供一個(gè)舒適的瀏覽體驗(yàn)。

1. 結(jié)構(gòu)布局

采用總分結(jié)構(gòu)展示信息，顯著提高了內(nèi)容的易讀性和用戶閱讀效率。通過視覺層次和邏輯順序，向用戶提供了一條易于理解和遵循的信息流，進(jìn)而提升整體閱讀體驗(yàn)。

通過在頁面的多個(gè)模塊間設(shè)置寬敞的間距，使瀏覽過程更為舒適，同時(shí)增強(qiáng)了頁面的節(jié)奏感和呼吸空間。簡(jiǎn)約的灰色背景與圖標(biāo)、文字之間形成了鮮明的層級(jí)關(guān)系，使內(nèi)容突出而清晰，保證了視覺的統(tǒng)一性和簡(jiǎn)潔性。

2. 內(nèi)容激發(fā)

根據(jù)不同類型的頁面，底部可以搭配「相關(guān)推薦」或「大家還在搜」模塊，提供更加個(gè)性化的瀏覽體驗(yàn)。

3. 圖標(biāo)匹配策略

根據(jù)文本的主題、內(nèi)容和上下文，使用圖標(biāo)輔助增強(qiáng)信息的表達(dá)效果，提升用戶理解度，使信息傳遞更為直觀、生動(dòng)和高效。圖標(biāo)匹配策略不僅有助于突出關(guān)鍵信息，還可以提升整體的視覺美感和用戶體驗(yàn)。

寫在最后

在本次百度 APP 捏合項(xiàng)目創(chuàng)新探索中，我們將設(shè)計(jì)思維與 AI 能力進(jìn)行創(chuàng)新結(jié)合，解決產(chǎn)品原有的體驗(yàn)問題，在這個(gè)過程中我們嘗試結(jié)合用戶認(rèn)知塑成模型，總結(jié)以下幾點(diǎn)：

1. 「發(fā)現(xiàn)理解」降低用戶學(xué)習(xí)成本：貼合用戶場(chǎng)景的多種功能精細(xì)化引導(dǎo)形式；
2. 「實(shí)施行動(dòng)」降低用戶操作成本：從行為鏈路上塑造新穎且易用的雙指觸發(fā)交互模式；
3. 「接受反饋」降低用戶接受成本：使用流暢的動(dòng)畫和觸感反饋完成各環(huán)節(jié)的流暢過渡；
4. 「形成認(rèn)知」塑造產(chǎn)品智能感知：定義輕盈靈動(dòng)的智能設(shè)計(jì)語言和清晰的結(jié)構(gòu)化排版強(qiáng)化用戶的心智。

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

本次項(xiàng)目也使我們對(duì)產(chǎn)品 AI 重構(gòu)產(chǎn)生了一些新的理解，未來百度 APP 的 AI 體驗(yàn)將向著交互方式更加自然、視覺語言更加輕盈的方式進(jìn)行持續(xù)探索，也希望本文能為其他正在進(jìn)行產(chǎn)品 AI 重構(gòu)的設(shè)計(jì)師們帶來一些新的啟發(fā)。

百度MEUX