本文為「超級(jí)QQ秀好友時(shí)光」項(xiàng)目的設(shè)計(jì)思路分享。超級(jí)QQ秀是QQ用戶在社交世界的虛擬化身，本文為“好友時(shí)光”項(xiàng)目過(guò)程中設(shè)計(jì)流程、方法和思路的匯總分享。

超級(jí)QQ秀是QQ用戶在社交世界的虛擬化身，用戶可通過(guò)超級(jí)QQ秀展現(xiàn)獨(dú)特社交人格、展示穿搭品味、打造專屬個(gè)人“IP”。而對(duì)于每個(gè)QQ用戶來(lái)說(shuō)，聊天對(duì)話頁(yè)都是聊天行為中不可或缺的核心的觸達(dá)體驗(yàn)路徑，是QQ最核心的功能。

本文將分享如何通過(guò)打造”聊天沉浸感“，讓社交互動(dòng)更豐富有趣。

CHAPTER-1：核心價(jià)值提煉

項(xiàng)目前期，挖掘用戶使用動(dòng)機(jī)對(duì)于業(yè)務(wù)價(jià)值提煉和后續(xù)創(chuàng)意設(shè)計(jì)的執(zhí)行至關(guān)重要。通過(guò)調(diào)研用戶使用場(chǎng)景化聊天的底層訴求，我們將目標(biāo)用戶確定在社交關(guān)系中更愿意使用Avatar進(jìn)行聊天的用戶群體——即擁有“親密關(guān)系”的用戶，如情侶、閨蜜、兄弟、基友、死黨等高活躍社交關(guān)系鏈用戶群體中。

圖：將超級(jí)QQ秀融入聊天場(chǎng)景的核心價(jià)值提煉

親密關(guān)系鏈用戶在社交中有更高頻的互動(dòng)訴求和更聚焦的使用場(chǎng)景，例如：與閨蜜分享時(shí)尚穿搭，與情侶穿同款情侶裝，與對(duì)方的虛擬化身實(shí)時(shí)互動(dòng)…等無(wú)法在傳統(tǒng)聊天界面中實(shí)現(xiàn)的社交訴求。而場(chǎng)景化聊天的形式會(huì)給予了他們一種實(shí)實(shí)在在的“陪伴”感。

CHAPTER-2：設(shè)計(jì)策略與目標(biāo)

場(chǎng)景化社交的價(jià)值是讓親密關(guān)系能夠可視化呈現(xiàn)。角色比頭像更生動(dòng)，互動(dòng)玩法讓聊天更有趣，讓社交關(guān)系的呈現(xiàn)更進(jìn)一步。圍繞親密關(guān)系進(jìn)行產(chǎn)品體驗(yàn)和視覺(jué)設(shè)計(jì)，可以更精準(zhǔn)打動(dòng)目標(biāo)用戶。Avatar的存在不能僅僅作為展示穿搭的”花瓶”，更需具備實(shí)際社交功能價(jià)值。

所以，我們提出以下三個(gè)核心設(shè)計(jì)策略并以此推導(dǎo)核心功能點(diǎn)、確定設(shè)計(jì)目標(biāo)，使Avatar成為社交互動(dòng)中不可或缺的助手。

圖：圍繞“讓Avatar既有趣，又有用“而設(shè)計(jì)

Step1：場(chǎng)景化設(shè)計(jì)，打造身臨其境的沉浸感

打造身臨其境的雙人專屬聊天場(chǎng)景，提升整個(gè)消息界面UI的沉浸感受。用戶將能夠感受到仿佛置身于真實(shí)場(chǎng)景中的體驗(yàn)，融入休閑放松的聊天環(huán)境中。

Step2：Avatar動(dòng)作設(shè)計(jì)，讓鮮活人設(shè)直觀感知

通過(guò)設(shè)計(jì)豐富又有趣的Avatar動(dòng)作，讓Avatar煥發(fā)活力和動(dòng)感，激發(fā)用戶的好奇心和聊天樂(lè)趣，使他們更加愿意用Avatar進(jìn)行互動(dòng)和交流。

Step3：好友時(shí)光，社交關(guān)系鏈的可視化見(jiàn)證

通過(guò)“好友時(shí)光”功能，打造獨(dú)特的私人專屬小空間，使Avatar成為用戶社交關(guān)系的見(jiàn)證者。該功能將承載和沉淀兩人的關(guān)鍵社交數(shù)據(jù)和信息，讓用戶能夠更深入地記錄和分享彼此間的精彩時(shí)刻。

CHAPTER-3：界面設(shè)計(jì)，體驗(yàn)與創(chuàng)新的平衡之道

在行業(yè)標(biāo)準(zhǔn)體驗(yàn)上進(jìn)行創(chuàng)新，需更加注重“平衡之道”。聊天界面的UI框架與使用體驗(yàn)已然成為業(yè)內(nèi)所有主流聊天App的統(tǒng)一標(biāo)準(zhǔn)，引入新元素會(huì)對(duì)用戶的已有使用習(xí)慣構(gòu)成一定挑戰(zhàn)，因此聊天界面的功能設(shè)計(jì)創(chuàng)新需要非常慎重。設(shè)計(jì)成本、性能壓力、落地實(shí)現(xiàn)，也是在方案設(shè)計(jì)上需要綜合考量的因素。

圖：開(kāi)啟好友時(shí)光后，沉浸體驗(yàn)感受全面升級(jí)

1. 平衡沉浸感和信息獲取效率

在界面設(shè)計(jì)時(shí)，針對(duì)不同用戶使用場(chǎng)景需要關(guān)注關(guān)鍵信息的層級(jí)呈現(xiàn)，以平衡用戶信息獲取效率與沉浸體驗(yàn)之間微妙的關(guān)系。

在消息對(duì)話場(chǎng)景下，用戶更注重聊天效率和聊天內(nèi)容的呈現(xiàn)。我們將80%的屏幕空間用于原有的聊天功能，Avatar此時(shí)作為配角出場(chǎng)于靠近聊天框上方的位置。用戶既能在聊天的同時(shí)隨時(shí)點(diǎn)擊Avatar進(jìn)行操作和互動(dòng)，又不會(huì)影響原有的聊天體驗(yàn)。

而當(dāng)用戶側(cè)滑進(jìn)入好友時(shí)光后，Avatar成為好友親密關(guān)系鏈的見(jiàn)證者，他們作為頁(yè)面的主角居于頁(yè)面C位，記錄彼此社交關(guān)系的點(diǎn)滴。同時(shí)，身后的場(chǎng)景也會(huì)放大到更聚焦的狀態(tài)，輔助關(guān)系鏈數(shù)據(jù)和互動(dòng)操作等懸浮態(tài)功能設(shè)計(jì)，讓用戶能夠在好友時(shí)光中感受到更沉浸的場(chǎng)景化體驗(yàn)。

圖：Avatar屏占比隨界面功能使用重點(diǎn)而動(dòng)態(tài)變化的呈現(xiàn)

2. 平衡性能壓力和流暢使用體驗(yàn)

3D角色需引擎實(shí)時(shí)渲染對(duì)手機(jī)性能要求是非常高的。所以我們另一個(gè)需要重點(diǎn)思考和平衡的是——如何確保聊天體驗(yàn)流暢，并最大程度減少性能占用壓力。

為了確保用戶在聊天過(guò)程中獲得流暢且不卡頓的使用體驗(yàn)，我們?cè)诔两皆O(shè)計(jì)中采用了3D實(shí)時(shí)角色渲染與2D場(chǎng)景疊加合成布局的方式。通過(guò)這種方式能夠減少移動(dòng)端全屏場(chǎng)景3D渲染所帶來(lái)的性能壓力，并將最核心的性能占用保留給AvatarView，確保動(dòng)作動(dòng)畫(huà)流暢展示。這樣一來(lái)，用戶在與角色進(jìn)行互動(dòng)時(shí)能夠享受到流暢而優(yōu)質(zhì)的體驗(yàn)。

圖：3D+2D分層合成渲染，最大化減少性能占用壓力。

同時(shí)，2D場(chǎng)景圖片資源也提升了場(chǎng)景設(shè)計(jì)和制作效率，通過(guò)場(chǎng)景布局規(guī)范縮放規(guī)則規(guī)范的制定，實(shí)現(xiàn)聊天和好友時(shí)光2個(gè)場(chǎng)景復(fù)用同一套設(shè)計(jì)資源，輸出更加靈活可控，從設(shè)計(jì)側(cè)減少了制作成本，一舉兩得。

CHAPTER-4：場(chǎng)景動(dòng)作設(shè)計(jì)，打造極致沉浸和鮮活感

1. 場(chǎng)景設(shè)計(jì)：感受身臨其境的沉浸

在場(chǎng)景設(shè)計(jì)的創(chuàng)意上，我們希望用戶在開(kāi)啟好友時(shí)光后仿佛置身于”向往的生活”之中，為用戶打造一個(gè)充滿輕松、浪漫、休閑和夢(mèng)幻的聊天環(huán)境，讓他們與好友共同享受一段美好時(shí)光，擺脫現(xiàn)實(shí)的束縛，帶來(lái)身心的寧?kù)o與愉悅。所以場(chǎng)景設(shè)計(jì)風(fēng)格會(huì)圍繞：輕松、浪漫、休閑、夢(mèng)幻的調(diào)性而設(shè)計(jì)，并設(shè)定了多種不同的場(chǎng)景創(chuàng)意類(lèi)型，例如投射現(xiàn)實(shí)類(lèi)、節(jié)日節(jié)氣類(lèi)、虛擬夢(mèng)幻類(lèi)、趣味創(chuàng)意類(lèi)…通過(guò)精心設(shè)計(jì)的場(chǎng)景，以滿足多樣化的用戶需求。

圖：場(chǎng)景設(shè)計(jì)風(fēng)格定位，確定后續(xù)場(chǎng)景設(shè)計(jì)方向

默認(rèn)場(chǎng)景

在默認(rèn)場(chǎng)景的設(shè)計(jì)上，從好友關(guān)系鏈的維度特性出發(fā)，設(shè)定情侶、同學(xué)、閨蜜、基友等QQ用戶現(xiàn)有互動(dòng)關(guān)系的場(chǎng)景，綁定社交關(guān)系鏈的用戶雙方會(huì)默認(rèn)呈現(xiàn)關(guān)系鏈場(chǎng)景。

圖：好友關(guān)系鏈與場(chǎng)景設(shè)計(jì)融合

運(yùn)營(yíng)場(chǎng)景

郊外露營(yíng)、濱海公路、夢(mèng)幻游樂(lè)園、沙灘度假…這都是現(xiàn)實(shí)生活中會(huì)與好友一同享受美好時(shí)光的場(chǎng)所。我們將這些值得紀(jì)念的場(chǎng)景還原到聊天界面的設(shè)計(jì)中，通過(guò)投射現(xiàn)實(shí)生活中的美好瞬間，進(jìn)一步體現(xiàn)了場(chǎng)景與社交關(guān)系的緊密結(jié)合。

圖：”向往生活“類(lèi)場(chǎng)景設(shè)計(jì)，投射現(xiàn)實(shí)生活的美好瞬間

超級(jí)QQ秀的服裝設(shè)計(jì)涵蓋四季，所以在場(chǎng)景設(shè)計(jì)上也巧妙地融合了四季的韻律，將季節(jié)特性融入場(chǎng)景的策劃中，以展現(xiàn)四季間迷人而獨(dú)特的美景，讓Avatar代替用戶盡情感受春夏秋冬的絕美時(shí)光。

圖：體現(xiàn)四季交替的場(chǎng)景化設(shè)計(jì)

我們也注重節(jié)日時(shí)場(chǎng)景氛圍的表達(dá)。例如，在中秋節(jié)上線了”萬(wàn)家燈火”的場(chǎng)景，與超級(jí)QQ秀用戶熱愛(ài)的國(guó)風(fēng)類(lèi)型服飾風(fēng)格所契合，通過(guò)結(jié)合節(jié)日或時(shí)下節(jié)氣進(jìn)行場(chǎng)景氛圍的設(shè)計(jì)，為用戶提供更豐富多樣的聊天體驗(yàn)，感受濃厚的節(jié)日氛圍和傳統(tǒng)文化底蘊(yùn)。

圖：“萬(wàn)家燈火”中秋節(jié)日?qǐng)鼍埃钍苡脩粝矏?ài)

除此之外，結(jié)合時(shí)下年輕人喜愛(ài)的流行梗，也能增強(qiáng)用戶的共鳴感和參與度。敲木魚(yú)、擺爛、佛系…這些都是當(dāng)下年輕人經(jīng)常提及的“熱點(diǎn)”和獨(dú)特“精神狀態(tài)”。通過(guò)引入這些潮流元素，能夠與年輕用戶更深入地互動(dòng)，為他們帶來(lái)更加有趣和創(chuàng)新的聊天體驗(yàn)。這些有趣的創(chuàng)意場(chǎng)景設(shè)計(jì)，都將在后續(xù)好友時(shí)光的迭代中陸續(xù)推出，敬請(qǐng)期待。

2. 動(dòng)作設(shè)計(jì)：讓鮮活人設(shè)更直觀的感知

在角色動(dòng)作設(shè)計(jì)環(huán)節(jié)的設(shè)計(jì)目標(biāo)是——讓鮮活人設(shè)更直觀感知。根據(jù)用戶使用場(chǎng)景和Avatar角色特性，設(shè)定四種豐富有趣的動(dòng)作觸發(fā)交互邏輯，在讓角色更鮮活生動(dòng)，擁有輔助社交價(jià)值。

圖：四大動(dòng)作觸發(fā)交互設(shè)計(jì)，讓鮮活人設(shè)更直觀感知

場(chǎng)景待機(jī)動(dòng)作

每個(gè)待機(jī)動(dòng)作都是基于場(chǎng)景特點(diǎn)精心設(shè)計(jì)的不同動(dòng)作，這些動(dòng)作與場(chǎng)景緊密相連，傳遞沉浸氛圍。在待機(jī)動(dòng)作的設(shè)計(jì)中注重表達(dá)角色動(dòng)作的松弛感和呼吸感。當(dāng)用戶未主動(dòng)觸發(fā)動(dòng)作時(shí)，這些待機(jī)動(dòng)作輕盈、松弛，不會(huì)打擾用戶的聊天。

圖：部分待機(jī)動(dòng)作實(shí)機(jī)演示，更多動(dòng)作呈現(xiàn)請(qǐng)到好友時(shí)光體驗(yàn)

互動(dòng)動(dòng)作

互動(dòng)動(dòng)作是設(shè)計(jì)上最重要的一環(huán)，我們?cè)O(shè)計(jì)了雙人動(dòng)作和單人動(dòng)作這兩種不同特性的動(dòng)作。

在雙人動(dòng)作的設(shè)計(jì)上更側(cè)重動(dòng)作表現(xiàn)力和趣味性。如送你花花、擁吻、慶祝等，通過(guò)賦予角色連貫流暢的動(dòng)作設(shè)計(jì)，提升了雙人角色互動(dòng)時(shí)的故事感。

圖：部分雙人動(dòng)作演示，更多動(dòng)作呈現(xiàn)請(qǐng)到好友時(shí)光體驗(yàn)

而單人動(dòng)作的設(shè)計(jì)會(huì)更偏重社交日常情緒的呈現(xiàn)，比如你好、再見(jiàn)、哭泣等一些常見(jiàn)表情去拓展更為完整的肢體表達(dá)，使得在社交互動(dòng)中更加貼合高頻使用場(chǎng)景，雙管齊下，全面輔助社交情緒傳達(dá)。

圖：部分單人動(dòng)作演示，更多動(dòng)作呈現(xiàn)請(qǐng)到好友時(shí)光體驗(yàn)

通知引導(dǎo)

我們還賦予Avatar一些實(shí)用功能，以增加其實(shí)際業(yè)務(wù)價(jià)值。在好友時(shí)光中，Avatar承載不同消息類(lèi)型的通知功能，充當(dāng)用戶的信使，更快地傳遞信息，提供高效的溝通體驗(yàn)。

輸入聯(lián)動(dòng)

在文本消息輸入時(shí)，Avatar會(huì)實(shí)時(shí)演繹出相關(guān)的表情和動(dòng)作，營(yíng)造驚喜感和趣味感。這種動(dòng)態(tài)聯(lián)動(dòng)提升了聊天質(zhì)量，還輔助文本信息增強(qiáng)情緒的表達(dá)和交流效果。

在Avatar動(dòng)作設(shè)計(jì)時(shí)，既要注重場(chǎng)景的沉浸感，也注重用戶體驗(yàn)與功能性的實(shí)用性，讓角色不僅有趣而且有用。無(wú)論是待機(jī)動(dòng)作的呈現(xiàn)、互動(dòng)動(dòng)作的多樣性，還是Avatar承載實(shí)用功能和與消息輸入的聯(lián)動(dòng)，都旨在提供更豐富、更生動(dòng)的聊天體驗(yàn)，加強(qiáng)用戶與角色之間的情感連接，并輔助實(shí)現(xiàn)實(shí)際的業(yè)務(wù)價(jià)值。

CHAPTER-5：結(jié)語(yǔ)

這是一次非常大膽的設(shè)計(jì)探索與落地實(shí)踐，令我們非常開(kāi)心的是，在生動(dòng)有趣Avatar與沉浸的場(chǎng)景的襯托下，用戶的換裝欲望顯著提升。好友時(shí)光方案上線后收到用戶的一致好評(píng)，滿足用戶的秀曬意愿，核心指標(biāo)提升顯著，換裝率、付費(fèi)率均有顯著正向提升，DAU明顯上漲。

“好友時(shí)光”功能體驗(yàn)指引：

未來(lái)好友時(shí)光將繼續(xù)不斷優(yōu)化和創(chuàng)新，持續(xù)為用戶帶來(lái)更具吸引力和感染力的聊天新體驗(yàn)，打造一個(gè)更加豐富多彩的虛擬交流世界！如果你想體驗(yàn)好友時(shí)光功能，打開(kāi)QQ任意好友的消息對(duì)話頁(yè)，左滑即可開(kāi)啟好友時(shí)光功能。快來(lái)體驗(yàn)用Avatar和朋友沉浸式社交的超次元互動(dòng)新玩法吧！