AI創(chuàng)新設計:捏合總結的實踐與思考

0 評論 719 瀏覽 2 收藏 14 分鐘

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

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

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

背景現(xiàn)狀

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

設計協(xié)同業(yè)務團隊圍繞以下3個維度展開探索:

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

②智能感知—打造AI智能化設計語言?

③信息提效—結構化排版促信息獲取?

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

1.手勢創(chuàng)新?

雙指捏合觸發(fā)方式以兼容百度APP全場景為目標,我們從「功能入口觸發(fā)」「手勢觸發(fā)」兩種方式進行深入對比探索:??

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

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

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

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

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

?數(shù)據(jù)分析顯示,用戶在搜索落地頁和視頻詳情頁的捏合需求最強烈。我們根據(jù)頁面內容質量和可讀性調整了引導強度,對質量低、可讀性差的頁面加強引導,而對高質量、易讀的頁面則減少引導??紤]到AI生成文本的質量差異,我們提高了生成文本質量高場景的引導權重。

具體總結為以下幾點:

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

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

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

4. 動態(tài)反饋?豐富感受提升體驗

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

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

在塑造用戶體驗的初始階段,視覺元素扮演著至關重要的角色。

我們的目標是打造一個智能且引人注目的用戶界面,通過其新穎性來突出功能,同時提供一種創(chuàng)新的視覺體驗,滿足用戶對人工智能和未來創(chuàng)新的期待。

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

1. 智能符號 增強識別度

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

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

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

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

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

①有效傳遞產品的智能感;

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

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

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

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

2)沉浸的加載動畫

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

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

3)漸進式披露動態(tài)效果

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

相較于逐字打字機效果,這種方式不僅提升了信息展示的效率,還增加了頁面的律動感。

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

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

1. 結構布局

采用總分結構展示信息,顯著提高了內容的易讀性和用戶閱讀效率。

通過視覺層次和邏輯順序,向用戶提供了一條易于理解和遵循的信息流,進而提升整體閱讀體驗。

通過在頁面的多個模塊間設置寬敞的間距,使瀏覽過程更為舒適,同時增強了頁面的節(jié)奏感和呼吸空間。

簡約的灰色背景與圖標、文字之間形成了鮮明的層級關系,使內容突出而清晰,保證了視覺的統(tǒng)一性和簡潔性。

2. 內容激發(fā)

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

3. 圖標匹配策略

根據(jù)文本的主題、內容和上下文,使用圖標輔助增強信息的表達效果,提升用戶理解度,使信息傳遞更為直觀、生動和高效。

圖標匹配策略不僅有助于突出關鍵信息,還可以提升整體的視覺美感和用戶體驗。

寫在最后

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

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

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

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

本文由人人都是產品經理作者【百度MEUX】,微信公眾號:【百度MEUX】,原創(chuàng)/授權 發(fā)布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!