AI 當(dāng)前如火如荼，正以驚人的速度改變著我們的生活和工作方式。我們淘寶設(shè)計(jì)團(tuán)隊(duì)也在探索如何借助 AI 的能力，打破談及 AI 即聊天對(duì)話的思維慣性，構(gòu)建更高效、實(shí)用、符合電商場(chǎng)景的體驗(yàn)范式，來幫助用戶解決全鏈路購(gòu)物場(chǎng)景問題，重塑用戶的購(gòu)物體驗(yàn)。

更多天貓?jiān)O(shè)計(jì)案例：

手貓 AI 購(gòu)物助手

一、回歸需求本身

談到 AI 智能工具，大家對(duì) Chat GPT 這類沉浸式聊天對(duì)話式 AI 產(chǎn)品一定不陌生。

但對(duì)電商平臺(tái)來說，用戶場(chǎng)景更為復(fù)雜，用戶常常在搜索和查看商品間反復(fù)橫跳，在商品詳情頁(yè)龐雜的信息中翻找，在多個(gè)商品間糾結(jié)不知道怎么選，看其他用戶怎么評(píng)價(jià)，在購(gòu)物車?yán)飦砘販惒恢涝趺促I更省…不少問題伴隨鏈路產(chǎn)生，讓用戶在鏈路和獨(dú)立聊天頁(yè)間來回進(jìn)出，并不是合適的解決方案。

我們認(rèn)為 AI 智能技術(shù)是手段，需求場(chǎng)景不同、產(chǎn)品功能不同，面向用戶的設(shè)計(jì)形態(tài)自然也應(yīng)該有所不同。要設(shè)計(jì)更高效、實(shí)用、符合電商場(chǎng)景的 AI 產(chǎn)品體驗(yàn)，核心邏輯是先梳理逛-找-看-對(duì)比-聊-買-售后完整購(gòu)物鏈路下各個(gè)階段的痛點(diǎn)，其次針對(duì)解決痛點(diǎn)所需功能選擇對(duì)應(yīng)智能技術(shù)和合適的設(shè)計(jì)形態(tài)。

需求導(dǎo)向的智能設(shè)計(jì)邏輯

需要清楚地意識(shí)到線上購(gòu)物發(fā)展多年，用戶痛點(diǎn)存在的依然存在，只是過去的技術(shù)給出的是過去的解決方案，新技術(shù)給老問題帶來了新解法。

智能技術(shù)包含但不限于 ML 機(jī)器學(xué)習(xí)（常見于關(guān)聯(lián)推薦）、機(jī)器視覺與圖像處理（常見于識(shí)圖搜索）、RPA 流程自動(dòng)化（常見于長(zhǎng)路徑多步驟自動(dòng)化處理）、GenAI 生成式 AI、NLP 自然語(yǔ)言處理（常見于語(yǔ)音識(shí)別對(duì)話）等

二、兩種產(chǎn)品架構(gòu)

我們先來看兩個(gè)典型例子：

A. 在 Google Pixel 8 的拍照體驗(yàn)中，用戶可以一鍵優(yōu)化照片中諸如閉眼、沒看鏡頭等問題。整個(gè)操作過程中沒有使用對(duì)話頁(yè)或用自然語(yǔ)言作為需求輸入方式來觸發(fā)照片修復(fù)功能，而是通過照片編輯頁(yè)中一個(gè)簡(jiǎn)單的 Magic Button、一步點(diǎn)擊操作后瞬間換頭的效果，給用戶帶來“Wow-Moment”。足夠可靠的智能技術(shù)，對(duì)應(yīng)足夠簡(jiǎn)單自然的交互方式，不需要多余的粉飾。

Google Pixel 8 官方換臉視頻片段

B. 在多應(yīng)用多任務(wù)并行的辦公場(chǎng)景中，Microsoft Copilot 以輔助模式在應(yīng)用一側(cè)新開對(duì)話窗口，根據(jù)用戶輸入的自然語(yǔ)言指令將結(jié)果直接作用顯示于相關(guān)應(yīng)用的任務(wù)中。對(duì)話式的交互方式在這個(gè)場(chǎng)景下，將原來具有專業(yè)性要求、需要用戶自主按步操作的復(fù)雜前臺(tái)功能后臺(tái)化，使用戶通過描述需求就能獲得結(jié)果，省去不少操作成本。

Microsoft Copilot 桌面應(yīng)用截圖

從這兩個(gè)案例，我們不難總結(jié)出鏈路節(jié)點(diǎn)融入式和全功能集合中心式兩種產(chǎn)品形態(tài)，分別對(duì)應(yīng)兩類主要用戶場(chǎng)景：A.在某個(gè)鏈路節(jié)點(diǎn)下遇到問題，需要從旁輔助提供對(duì)應(yīng)場(chǎng)景功能幫助；B.不想或不知道如何深入鏈路去找對(duì)應(yīng)功能完成操作，需要助手全權(quán)代勞。

1. 鏈路節(jié)點(diǎn)融入式

針對(duì)鏈路場(chǎng)景，既要讓用戶可見可用，也要保證原有鏈路體驗(yàn)的連續(xù)性和沉浸感，不干擾用戶主鏈路。對(duì)此，需要設(shè)計(jì)一套匹配 AI 適時(shí)主動(dòng)性，輕量、靈活的自適應(yīng)組件模塊融入各場(chǎng)景輔助給用戶提供幫助，并統(tǒng)一交互范式保證體驗(yàn)一致性。

①自適應(yīng)組件模塊

通過分析對(duì)比各種頁(yè)面組件的輕量感和靈活性，可以使用鏈路打斷性弱和頁(yè)面融合性相對(duì)平衡的底部提示氣泡作為 AI 主動(dòng)觸達(dá)用戶的通用性交互模塊，頁(yè)面內(nèi)卡片元素和小浮卡為被動(dòng)觸發(fā)的內(nèi)容結(jié)果模塊。

頁(yè)面組件輕量感和靈活性對(duì)比

組件定義除了可以讓不同業(yè)務(wù)的設(shè)計(jì)師參與進(jìn)來拓展場(chǎng)合，還可以讓大模型通過學(xué)習(xí)我們介入設(shè)計(jì)的標(biāo)準(zhǔn)流程，自行組裝輸出更多我們窮舉不到的場(chǎng)景。

②嵌入內(nèi)容流和從旁輔助兩種形態(tài)

實(shí)際用戶在購(gòu)物過程中遇到的問題，有些是跟當(dāng)前頁(yè)面某個(gè)內(nèi)容點(diǎn)強(qiáng)相關(guān)的（比如商家無法及時(shí)回復(fù)）；有些是全局性的（比如不知道如何跟商家溝通），需要作為第三方角色從旁輔助去協(xié)助用戶。

前者我們可以通過在對(duì)應(yīng)內(nèi)容點(diǎn)用與當(dāng)前頁(yè)面相似的模塊，加少量的 AI 提示去觸達(dá)用戶；后者可以使用底部提示氣泡，去靈活提供用戶當(dāng)前所需內(nèi)容。

兩種形態(tài)舉例

③AI 主動(dòng)交互范式

區(qū)別于傳統(tǒng)被動(dòng)式響應(yīng)的交互方式，適時(shí)適度地主動(dòng)前置感知、理解、判斷、響應(yīng)用戶需求，是產(chǎn)品讓人覺得智能懂我的重要原因。在用戶和 AI 的交互過程中，通過對(duì)場(chǎng)景、觸發(fā)、操作、結(jié)果和干預(yù)這五個(gè)要素的主動(dòng)關(guān)系設(shè)計(jì)，可以使整個(gè)智能體驗(yàn)更符合用戶預(yù)期。

1. 什么場(chǎng)景下：流程節(jié)點(diǎn)、頁(yè)面觸點(diǎn)、用戶需求
2. 以何種形式觸發(fā)什么功能：誰(shuí)觸發(fā)、輕重度、是什么功能的感知
3. 功能操作：是否需要、操作步驟
4. 如何返回什么結(jié)果：是否當(dāng)前流程節(jié)點(diǎn)頁(yè)、局部變/當(dāng)前全變/新頁(yè)面、結(jié)果狀態(tài)
5. 結(jié)果反饋/需求修正

A-U 交互主動(dòng)關(guān)系圖

以下是“詳情頁(yè)商品信息答疑”和“IM 咨詢商品”兩個(gè)例子來解釋這個(gè)交互范式。

2. 全功能集合中心式

中心頁(yè)核心幫用戶解決腦海中有一個(gè)需求但不知道如何解決或鏈路太深不想逐步操作的問題，比如不知道怎么找到想買的東西、不知道怎么挑選禮物、大促要退的商品很多挨個(gè)操作麻煩等，以及讓用戶知道我們有哪些 AI 能力。

這類場(chǎng)景下，一問一答的聊天對(duì)話是一種解決方式，但核心是多輪指令和結(jié)果之間交互或收斂關(guān)系的處理。對(duì)此，我們的新方案在開發(fā)中，等上線后再跟大家分享相關(guān)設(shè)計(jì)經(jīng)驗(yàn)。

三、四個(gè)體驗(yàn)原則

1. 次不妨主

在設(shè)計(jì)過程中，要確保原有主鏈路的體驗(yàn)連續(xù)性和操作習(xí)慣，避免為了強(qiáng)調(diào) AI 功能做打斷性交互設(shè)計(jì)，前面鏈路節(jié)點(diǎn)融入式產(chǎn)品架構(gòu)的設(shè)計(jì)核心就是在遵循這個(gè)大原則。這種體驗(yàn)包括以下四個(gè)特征：

1. 在次級(jí)視覺區(qū)適度出現(xiàn)
2. 盡可能當(dāng)前頁(yè)面完成無跳轉(zhuǎn)，避免多步重操作
3. 非強(qiáng)制性，不會(huì)阻斷用戶主操作
4. 未發(fā)生或結(jié)束操作后自覺退出

2. 感知有度

在視覺層級(jí)上，結(jié)果的呈現(xiàn)要適度，避免過度搶用戶的視覺瀏覽焦點(diǎn)。

應(yīng)當(dāng)根據(jù)用戶當(dāng)前情境需求，合理設(shè)計(jì)信息層級(jí)和用戶視聽覺等感官輸入強(qiáng)度，從操控觸發(fā)、過程等待、結(jié)果變化三個(gè)維度適時(shí)反饋給用戶，避免過度刺激或信息過載，使用戶能夠在接收信息、交互和反饋時(shí)保持舒適和專注。

1. 操控觸發(fā)：組件響應(yīng)時(shí)間點(diǎn)=用戶實(shí)際操作時(shí)間點(diǎn)的絕對(duì)跟手操作（點(diǎn)擊縮小、松手放大）、功能觸發(fā)感知（模塊功能符號(hào)變化/全局背景掃光）
2. 過程等待：響應(yīng)延遲有反饋、思考過程狀態(tài)表達(dá)、主動(dòng)觸發(fā)倒計(jì)時(shí)提示
3. 結(jié)果變化：頁(yè)面內(nèi)局部變刷新感知、獨(dú)立模塊聯(lián)動(dòng)展開（氣泡-飄條）

3. 一步操作

盡可能讓用戶以最直接、最快捷的方式達(dá)到目的，能一步就不要兩步操作，降低多步操作帶來的跳轉(zhuǎn)流失和用戶誤操作率。

4. 結(jié)果直給

加強(qiáng)對(duì)結(jié)果的關(guān)注，確保用戶能夠快速、直觀地看到其操作的結(jié)果。展現(xiàn)過程狀態(tài)清晰、結(jié)果簡(jiǎn)潔易懂，就算做不到也要直接告訴用戶而不是委婉含糊的文案表述，減少用戶在達(dá)成目標(biāo)過程中猜測(cè)或困惑的時(shí)間，使用戶能夠輕松理解并快速做出下一步?jīng)Q策。

結(jié)語(yǔ)

在 AI 產(chǎn)品體驗(yàn)設(shè)計(jì)中，AI 技術(shù)本身很容易成為關(guān)注的焦點(diǎn)，“回歸用戶需求本身”尤為重要，這種意識(shí)和原則有助于避免過度設(shè)計(jì)，創(chuàng)建真正以用戶為中心的產(chǎn)品體驗(yàn)。

目前 AI 購(gòu)物助手設(shè)計(jì)解決方案主要應(yīng)用于手機(jī)天貓 APP 里，鏈路節(jié)點(diǎn)融入式方案已在購(gòu)前、中、后全場(chǎng)景主鏈路中推動(dòng)落地，包括首頁(yè)推薦、搜索、商詳、IM、購(gòu)物車和訂單列表，全功能集合中心式交互方案目前正在開發(fā)中。后續(xù)我們還將持續(xù)深度探索用戶在購(gòu)前、中、后細(xì)分場(chǎng)景下的需求方案，構(gòu)建更高效、實(shí)用、符合電商場(chǎng)景的 AI 購(gòu)物體驗(yàn)。

歡迎關(guān)注「淘寶設(shè)計(jì)」公眾號(hào)：