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

2024-3-4    前端達人

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


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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔