當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索

2024-3-4    前端達人

前言
 
隨著AI技術的發(fā)展,越來越多的產品嘗試結合AI進行功能升級,作為設計師的你是否也在面臨這樣的問題:如何將AI技術與場景需求更好的結合,為用戶提供順暢的AI原生設計體驗呢?
 
本文將以AI裝扮項目為例,分兩部分介紹我們是如何通過深入分析用戶痛點與需求,結合公司內部能力支持,找到AI創(chuàng)新突破口。同時發(fā)揮設計優(yōu)勢,在沒有行業(yè)參考前提下,探尋出一條AI創(chuàng)新實踐之路,設計主導創(chuàng)新方案優(yōu)化落地。
 
 
第一部分:為什么要做裝扮AI創(chuàng)新
 
1.百度APP裝扮業(yè)務介紹
 
裝扮是百度APP的一個基礎能力,支持用戶設置頭像、皮膚、主頁背景、套裝等,以滿足用戶個性化訴求為目標,對設計有著較高的依賴。當前主要面臨兩個問題:
 
  •  
    功能缺少吸引力:
    各類裝扮操作流程為選擇→預覽→裝扮,體驗單一,缺乏趣味性和吸引力
 
  •  
    裝扮資源迭代慢:
    裝扮資源更新對設計師依賴度較高,但手工繪圖的成本高且周期長
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
2.裝扮用戶分析
 
通過用戶調研和數(shù)據(jù)分析,對裝扮用戶有以下兩點發(fā)現(xiàn):
 
  •  
    個性化需求難以滿足:
    通過裝扮調研問卷發(fā)現(xiàn),用戶沒有佩戴裝扮的大部分原因是由于現(xiàn)有的免費裝扮資源無法滿足用戶個性化需求
 
  •  
    年輕群體對AI的喜愛:
    裝扮用戶趨于年輕化,而年輕群體對智能化、趣味性產品有濃厚興趣,同時對個性化、定制化也有著更高的要求
 
3.了解內部能力支撐
 
百度文心AI生圖技術較為成熟,支持輸入描述詞后免費生成多張圖片。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
4.設計機會點
 
通過前面的分析,我們提出一個洞察思考:
裝扮是否可以接入文心AI生圖的能力,讓用戶自主生圖并用于裝扮?
 
我們從用戶、業(yè)務、設計三方視角分析裝扮中心接入文心AI生圖能力的可行性和價值:
 
  •  
    用戶側:豐富裝扮玩法,提升裝扮體驗的趣味性和吸引力
 
  •  
    業(yè)務側:吸引更多用戶裝扮,提高裝扮用戶量和滲透率
 
  •  
    設計側:探索AI能力實際應用場景,積累AI原生設計經驗;同時降低設計師生圖成本,降本增效
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
 
第二部分:如何進行裝扮AI創(chuàng)新突破
 
作為AI創(chuàng)新型項目,我們經歷了三期迭代嘗試,不斷打磨升級AI裝扮體驗:1期快速試水驗證效果,2期創(chuàng)新突破交互體驗,3期結合數(shù)據(jù)持續(xù)優(yōu)化,下面會從以下3個階段講述設計創(chuàng)新思考過程。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
Step1:快速試水,驗證玩法
 
首先我們快速調研了國內外具有AI生成能力的產品做為體驗摸底,發(fā)現(xiàn)競品在AI生圖的創(chuàng)作體驗上趨于雷同,創(chuàng)作頁主要分為描述詞輸入框、選擇風格、尺寸及張數(shù)等操作模塊,對于普通用戶來說
創(chuàng)作體驗復雜、輸入門檻高
。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
在項目初期,我們希望能夠快速驗證用戶對這套新玩法是否感興趣,所以目標是低成本快速上線驗證玩法。
 
我們將AI裝扮流程分為4步:點擊入口→開始創(chuàng)作→生成圖片→預覽裝扮效果及裝扮。
 
結合一期目標我們有兩個設計難點:1.如何簡化創(chuàng)作流程;2.如何精簡步長減少折損
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
設計難點1:如何簡化創(chuàng)作流程
 
解決思路:
在創(chuàng)作流程上我們決定簡化方案,采取讓用戶選取關鍵詞組合的簡化方式來生成圖片,簡化創(chuàng)作流程快速上線驗證。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
設計難點2:如何精簡步長減少折損
 
解決思路:
在圖片生成與裝扮預覽步驟中,通過縮短路徑讓用戶快速直達裝扮預覽頁,減少折損。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
在方案選擇上,我們基于
路徑更短、突出裝扮預覽效果
的目標,選擇了方案1進行深化:
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
一期方案與上線數(shù)據(jù)
 
一期上線后裝扮中心的日均設置量提升近3倍,AI裝扮各環(huán)節(jié)轉化漏斗較高,在各商城中,AI裝扮設置量位列第二,僅次于頭像,驗證AI裝扮對用戶的吸引力較大,于是我們開始啟動二期優(yōu)化。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
Step2:創(chuàng)新突破,打造亮點
 
對比一期直接讓用戶選取主體詞和風格詞的半自動化方式生成圖片,雖然自定義能力較弱,但是生圖方式更容易;二期希望增加用戶自行輸入生成圖片,滿足用戶更加個性化和多樣性的需求,但同時輸入門檻對用戶來說也更高。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
現(xiàn)有AI生圖輸入門檻之所以較高,是因為一張高質量圖片對生圖描述詞有很高的要求。我們分析發(fā)現(xiàn),高質量描述詞需要從畫面風格、色彩、細節(jié)、光影效果、構圖比例、畫質甚至是相機設置等多維度來描述,專業(yè)詞匯多,對于普通用戶來說撰寫門檻高、難度大。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
這就留給我們一個難題:
如何讓用戶低門檻生成一張高質量圖片?
 
結合二期目標我們有兩個設計難點:1.如何創(chuàng)新突破生圖體驗;2.裝扮流程整體重構
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
設計難點1:如何創(chuàng)新突破生圖體驗
 
1)思路發(fā)散
 
首先我們發(fā)散了兩個方向:
 
方向1:提供高質量描述詞范例讓用戶直接使用
 
方向2:輔助用戶寫出高質量描述詞,比如提供描述詞潤色功能、高級描述詞庫疊加、按公式引導用戶選擇詞組組合等形式輔助創(chuàng)作
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
2)框架探索
 
如果創(chuàng)作頁要給用戶提供豐富的引導內容,同時兼顧輸入面板的穩(wěn)定露出,基礎平鋪框架承載力有限,無法兼顧豐富引導內容的展示和輸入功能的穩(wěn)定露出。我們提出使用雙層框架的形式,將承載“引導內容”和“輸入功能”的容器拆分相互獨立,在承載“引導內容”的容器中支持用戶像刷feed一樣上滑,同時頂層容器穩(wěn)定置底展示輸入功能。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
3)多方案嘗試
 
我們圍繞以上兩個方向進行了創(chuàng)作頁從基礎到高階的多套方案探索。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
方案收斂過程中,我們決定進行用戶測試,觀察用戶對不同方案的理解與接受程度。
 
4)用戶測試與痛點分析
 
我們找了多名不同類型的用戶,觀察他們對各個方案的理解和使用情況,了解用戶在使用過程中遇到的問題和痛點,并制作表格記錄每一位用戶的反饋與建議。
 
匯總后得到以下發(fā)現(xiàn)點:
 
1.用戶對點擊推薦描述詞的生成圖片效果沒有預期,且表示操作難以理解
 
2.有配圖會增強吸引力,文字或步驟多會有負面影響
 
3.用戶對風格選擇沒有強烈訴求
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
5)提煉問題迭代優(yōu)化
 
根據(jù)測試結論1&2我們想到,能否結合方案2-1與2-2,采用圖片范例代替純文字范例,這樣用戶對生成效果就有了直接的預期,同時提高了點擊吸引力和可玩性;根據(jù)結論3我們對現(xiàn)有步驟進行了簡化,省略風格選擇步驟,采用智能識別描述詞風格或默認智能推薦生圖風格,來減少用戶生圖步驟。
 
最終方案與競品對比生圖難度更低、生圖步驟更短,同時我們也進行了新方案的回訪,所有用戶均表示新方案更簡單直接,且吸引力更強。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
設計難點2:裝扮流程整體重構
 
在入口頁和生成圖片&裝扮預覽流程我們也發(fā)散了多個方案,同樣通過用戶測試選出最優(yōu)方案。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
二期方案設計
 
用戶在裝扮中心點擊入口進入創(chuàng)作頁,點擊圖例或輸入內容后點擊底部生成按鈕,跳轉AI生成圖片頁面,支持用戶在當前頁面預覽圖片、重新生成、修改描述、保存圖片及分享等操作,底部按鈕強引導進入裝扮預覽頁進行裝扮。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
上線效果
 
1)上線數(shù)據(jù)漏斗分析
 
AI裝扮2期上線后,在入口、輸入頁和裝扮預覽頁轉化較1期均有大幅提升,在輸入難度大于1期的前提下,輸入轉化依然高于1期。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
2)實際圖片生成效果
 
以下是一些真實用戶生成的圖片,不同風格的生成質量都能達到理想效果。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
3)數(shù)據(jù)指導持續(xù)優(yōu)化
 
同時,進一步分析漏斗數(shù)據(jù)發(fā)現(xiàn),雖然整體漏斗數(shù)據(jù)優(yōu)于以往,但是在圖片生成頁的用戶流失較大,于是我們開始探索在滿足用戶預覽圖片訴求的同時,是否存在能夠快速進入裝扮預覽頁的方案。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
Step3:持續(xù)迭代,精細體驗
 
3期我們以簡化操作流程,提升裝扮轉化率為目標進行設計方案探索,結合用戶在創(chuàng)作頁點擊生成按鈕后希望先看到生成圖片的訴求,我們3期的設計難點是:
如何在預覽圖片和減步長中尋找平衡?
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
設計難點:在預覽圖片和減步長中尋找平衡
 
1)框架探索
 
考慮到用戶想要先看到生成圖片的訴求,所以在思考方案過程中引入動效來銜接頁面之間的變化,減少用戶跳轉的可行性。
 
方向1:縮短主操作路徑,次要功能建立預期,后置操作;優(yōu)勢是層級簡單,核心操作聚焦
 
方向2:僅預覽圖片結果,后置操作;優(yōu)勢是操作路徑短
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
2)方案細化與測試
 
根據(jù)框架探索我們細化了3個方案:
 
為了更直觀的展示,我們制作了3個方案的Demo并進行用戶測試,大部分用戶認為方案1更直觀且簡潔。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
3)最終方案展示
 
生成中:展示重新生成、保存等相關操作,建立用戶預期
 
生成后:展示生成圖片并自動上滑,同時調起裝扮預覽面板,縮短裝扮路徑
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
優(yōu)化后數(shù)據(jù)對比
 
對比2期方案,優(yōu)化后方案點擊生成按鈕直達裝扮預覽頁,縮短裝扮路徑,上線后日均裝扮成功轉化率顯著提升。
 
當設計遇上AI——百度APP裝扮體驗AI創(chuàng)新探索
 
 
 
 
結語
 
本文以百度APP裝扮體驗AI創(chuàng)新探索為例,分享了從設計視角出發(fā),設計師如何結合AI能力進行設計創(chuàng)新,為用戶提供順暢的AI原生體驗,并分三步推動項目落地與優(yōu)化的思考過程。通過本次項目,我們也積累了一些經驗分享給大家:
 
1.避免慣性思維,站在用戶視角看問題
 
作為設計師,可能我們已經看過、使用過很多AI類產品,對它的玩法非常熟悉。在設計前期,我們常常理所當然的認為用戶已經理解掌握生圖的方法,結果在測試階段發(fā)現(xiàn)即便是公司內部互聯(lián)網員工,理解使用起來也有一定門檻。所以我們一定要避免慣性思維,注意時刻抽身站在用戶視角,多問問自己:我們的用戶群體是否能夠快速理解并掌握設計方案。
 
2.用戶測試是有效的工具,可以幫助設計師獲得更深入的用戶反饋,并將其轉化為理想方案設計點
 
整個過程中,我們遇到了很多困難與挑戰(zhàn),尤其是在2期輸入體驗的優(yōu)化上,在競品創(chuàng)作體驗千篇一律且都不理想的情況下,初期思考的方案均沒有達到簡單且能直接輸入高質量描述詞的理想效果,設計思路此時也達到了瓶頸。這時候引入用戶測試是一種很好的幫助設計師“換腦”的方式,用戶不會直接告訴我們理想方案是什么,但是我們可以從用戶的反饋中抽絲剝繭,轉化成理想方案的設計點。
 
3.設計方案應盡量簡單直觀,避免需要用戶進行過多的思考和轉換
 
通過我們多次的用戶測試發(fā)現(xiàn),除了大家熟知的設計方案應該盡量簡單清晰、避免過多的復雜步驟和操作以外,還應該盡量避免用戶需要思考轉化的步驟:比如給一段純文字示例讓用戶來生成圖片,這個文字與圖片生成的效果是需要用戶通過思考并轉換的,也許生圖結果與用戶預期天差地別。所以在調研后我們采取了“圖生圖”的方式,用戶喜歡哪張圖片,就使用它的描述詞來生成相似,這樣更加直觀,減少在大腦里轉換思考的過程。
 
以上就是我們的思考全過程與全部心得,希望對大家做類似AI創(chuàng)新型項目有所幫助。百度AI裝扮項目依然在持續(xù)優(yōu)化與完善,歡迎有興趣、有建議的小伙伴,來找我們一起溝通交流~
 
 
關于我們:
MEUX,百度移動生態(tài)用戶體驗設計中心,負責百度移動生態(tài)體系的用戶/商業(yè)產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產品等。MEUX以「簡單極致」為設計理念,創(chuàng)造極致用戶體驗的同時賦能商業(yè),推動設計行業(yè)的價值和影響力,讓生活因設計而更美好。
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTYxMDA5Ng==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔