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