如何借助AI讓用戶體驗(yàn)更智能？來看手機(jī)天貓的實(shí)戰(zhàn)案例！

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

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

手貓 AI 購物助手

一、回歸需求本身

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

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

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

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

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

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

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

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

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

Google Pixel 8 官方換臉視頻片段

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

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

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

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

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

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

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

頁面組件輕量感和靈活性對比

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

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

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

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

兩種形態(tài)舉例

③AI 主動交互范式

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

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

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

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

2. 全功能集合中心式

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

這類場景下，一問一答的聊天對話是一種解決方式，但核心是多輪指令和結(jié)果之間交互或收斂關(guān)系的處理。對此，我們的新方案在開發(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. 在次級視覺區(qū)適度出現(xiàn)
2. 盡可能當(dāng)前頁面完成無跳轉(zhuǎn)，避免多步重操作
3. 非強(qiáng)制性，不會阻斷用戶主操作
4. 未發(fā)生或結(jié)束操作后自覺退出

2. 感知有度

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

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

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

3. 一步操作

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

4. 結(jié)果直給

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

結(jié)語

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

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

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