在數(shù)字化時(shí)代，我們的交互體驗(yàn)正變得日益豐富和多元。這篇文章深入探討了多模態(tài)交互如何跨越傳統(tǒng)感官界限，創(chuàng)造出更加直觀、情境化和動(dòng)態(tài)的用戶體驗(yàn)。

隨著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)文閱讀低效、視頻獲取信息慢等問(wèn)題，導(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è)維度展開(kāi)探索：

①亮點(diǎn)打造—搭建創(chuàng)新鏈路體驗(yàn)?

②智能感知—打造AI智能化設(shè)計(jì)語(yǔ)言?

③信息提效—結(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ì)上。

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

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

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

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

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

具體總結(jié)為以下幾點(diǎn)：

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

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

使用全頁(yè)面容器展示總結(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)樂(lè)趣，也讓交互過(guò)程更加直觀和豐富。

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

在塑造用戶體驗(yàn)的初始階段，視覺(jué)元素扮演著至關(guān)重要的角色。

我們的目標(biāo)是打造一個(gè)智能且引人注目的用戶界面，通過(guò)其新穎性來(lái)突出功能，同時(shí)提供一種創(chuàng)新的視覺(jué)體驗(yàn)，滿足用戶對(duì)人工智能和未來(lái)創(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. 漸變色彩 傳遞科技感知

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

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

動(dòng)效在UI設(shè)計(jì)中扮演著至關(guān)重要的角色，它不僅能夠豐富用戶界面的視覺(jué)效果，還能極大地提升用戶體驗(yàn)。在捏合功能的設(shè)計(jì)中，我們利用動(dòng)畫來(lái)絲滑地呈現(xiàn)「觸發(fā)捏合→內(nèi)容加載」的過(guò)渡，從而保證

①有效傳遞產(chǎn)品的智能感；

②減少加載等待過(guò)程中用戶的跳出率。

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

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

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

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

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

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

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

在總結(jié)文本的展示上使用打字機(jī)效果，搭配漸進(jìn)式披露的策略，可以更快速地對(duì)生成后的內(nèi)容進(jìn)行呈現(xiàn)。

相較于逐字打字機(jī)效果，這種方式不僅提升了信息展示的效率，還增加了頁(yè)面的律動(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)容的易讀性和用戶閱讀效率。

通過(guò)視覺(jué)層次和邏輯順序，向用戶提供了一條易于理解和遵循的信息流，進(jìn)而提升整體閱讀體驗(yàn)。

通過(guò)在頁(yè)面的多個(gè)模塊間設(shè)置寬敞的間距，使瀏覽過(guò)程更為舒適，同時(shí)增強(qiáng)了頁(yè)面的節(jié)奏感和呼吸空間。

簡(jiǎn)約的灰色背景與圖標(biāo)、文字之間形成了鮮明的層級(jí)關(guān)系，使內(nèi)容突出而清晰，保證了視覺(jué)的統(tǒng)一性和簡(jiǎn)潔性。

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

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

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

根據(jù)文本的主題、內(nèi)容和上下文，使用圖標(biāo)輔助增強(qiáng)信息的表達(dá)效果，提升用戶理解度，使信息傳遞更為直觀、生動(dòng)和高效。

圖標(biāo)匹配策略不僅有助于突出關(guān)鍵信息，還可以提升整體的視覺(jué)美感和用戶體驗(yàn)。

寫在最后

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

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

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

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