如何打造聊天場景的極致沉浸感
本文為「超級QQ秀好友時光」項目的設計思路分享。超級QQ秀是QQ用戶在社交世界的虛擬化身,本文為“好友時光”項目過程中設計流程、方法和思路的匯總分享。
超級QQ秀是QQ用戶在社交世界的虛擬化身,用戶可通過超級QQ秀展現獨特社交人格、展示穿搭品味、打造專屬個人“IP”。而對于每個QQ用戶來說,聊天對話頁都是聊天行為中不可或缺的核心的觸達體驗路徑,是QQ最核心的功能。
本文將分享如何通過打造”聊天沉浸感“,讓社交互動更豐富有趣。
CHAPTER-1:核心價值提煉
項目前期,挖掘用戶使用動機對于業務價值提煉和后續創意設計的執行至關重要。通過調研用戶使用場景化聊天的底層訴求,我們將目標用戶確定在社交關系中更愿意使用Avatar進行聊天的用戶群體——即擁有“親密關系”的用戶,如情侶、閨蜜、兄弟、基友、死黨等高活躍社交關系鏈用戶群體中。
圖:將超級QQ秀融入聊天場景的核心價值提煉
親密關系鏈用戶在社交中有更高頻的互動訴求和更聚焦的使用場景,例如:與閨蜜分享時尚穿搭,與情侶穿同款情侶裝,與對方的虛擬化身實時互動…等無法在傳統聊天界面中實現的社交訴求。而場景化聊天的形式會給予了他們一種實實在在的“陪伴”感。
CHAPTER-2:設計策略與目標
場景化社交的價值是讓親密關系能夠可視化呈現。角色比頭像更生動,互動玩法讓聊天更有趣,讓社交關系的呈現更進一步。圍繞親密關系進行產品體驗和視覺設計,可以更精準打動目標用戶。Avatar的存在不能僅僅作為展示穿搭的”花瓶”,更需具備實際社交功能價值。
所以,我們提出以下三個核心設計策略并以此推導核心功能點、確定設計目標,使Avatar成為社交互動中不可或缺的助手。
圖:圍繞“讓Avatar既有趣,又有用“而設計
Step1:場景化設計,打造身臨其境的沉浸感
打造身臨其境的雙人專屬聊天場景,提升整個消息界面UI的沉浸感受。用戶將能夠感受到仿佛置身于真實場景中的體驗,融入休閑放松的聊天環境中。
Step2:Avatar動作設計,讓鮮活人設直觀感知
通過設計豐富又有趣的Avatar動作,讓Avatar煥發活力和動感,激發用戶的好奇心和聊天樂趣,使他們更加愿意用Avatar進行互動和交流。
Step3:好友時光,社交關系鏈的可視化見證
通過“好友時光”功能,打造獨特的私人專屬小空間,使Avatar成為用戶社交關系的見證者。該功能將承載和沉淀兩人的關鍵社交數據和信息,讓用戶能夠更深入地記錄和分享彼此間的精彩時刻。
CHAPTER-3:界面設計,體驗與創新的平衡之道
在行業標準體驗上進行創新,需更加注重“平衡之道”。聊天界面的UI框架與使用體驗已然成為業內所有主流聊天App的統一標準,引入新元素會對用戶的已有使用習慣構成一定挑戰,因此聊天界面的功能設計創新需要非常慎重。設計成本、性能壓力、落地實現,也是在方案設計上需要綜合考量的因素。
圖:開啟好友時光后,沉浸體驗感受全面升級
1. 平衡沉浸感和信息獲取效率
在界面設計時,針對不同用戶使用場景需要關注關鍵信息的層級呈現,以平衡用戶信息獲取效率與沉浸體驗之間微妙的關系。
在消息對話場景下,用戶更注重聊天效率和聊天內容的呈現。我們將80%的屏幕空間用于原有的聊天功能,Avatar此時作為配角出場于靠近聊天框上方的位置。用戶既能在聊天的同時隨時點擊Avatar進行操作和互動,又不會影響原有的聊天體驗。
而當用戶側滑進入好友時光后,Avatar成為好友親密關系鏈的見證者,他們作為頁面的主角居于頁面C位,記錄彼此社交關系的點滴。同時,身后的場景也會放大到更聚焦的狀態,輔助關系鏈數據和互動操作等懸浮態功能設計,讓用戶能夠在好友時光中感受到更沉浸的場景化體驗。
圖:Avatar屏占比隨界面功能使用重點而動態變化的呈現
2. 平衡性能壓力和流暢使用體驗
3D角色需引擎實時渲染對手機性能要求是非常高的。所以我們另一個需要重點思考和平衡的是——如何確保聊天體驗流暢,并最大程度減少性能占用壓力。
為了確保用戶在聊天過程中獲得流暢且不卡頓的使用體驗,我們在沉浸式設計中采用了3D實時角色渲染與2D場景疊加合成布局的方式。通過這種方式能夠減少移動端全屏場景3D渲染所帶來的性能壓力,并將最核心的性能占用保留給AvatarView,確保動作動畫流暢展示。這樣一來,用戶在與角色進行互動時能夠享受到流暢而優質的體驗。
圖:3D+2D分層合成渲染,最大化減少性能占用壓力。
同時,2D場景圖片資源也提升了場景設計和制作效率,通過場景布局規范縮放規則規范的制定,實現聊天和好友時光2個場景復用同一套設計資源,輸出更加靈活可控,從設計側減少了制作成本,一舉兩得。
CHAPTER-4:場景動作設計,打造極致沉浸和鮮活感
1. 場景設計:感受身臨其境的沉浸
在場景設計的創意上,我們希望用戶在開啟好友時光后仿佛置身于”向往的生活”之中,為用戶打造一個充滿輕松、浪漫、休閑和夢幻的聊天環境,讓他們與好友共同享受一段美好時光,擺脫現實的束縛,帶來身心的寧靜與愉悅。所以場景設計風格會圍繞:輕松、浪漫、休閑、夢幻的調性而設計,并設定了多種不同的場景創意類型,例如投射現實類、節日節氣類、虛擬夢幻類、趣味創意類…通過精心設計的場景,以滿足多樣化的用戶需求。
圖:場景設計風格定位,確定后續場景設計方向
默認場景
在默認場景的設計上,從好友關系鏈的維度特性出發,設定情侶、同學、閨蜜、基友等QQ用戶現有互動關系的場景,綁定社交關系鏈的用戶雙方會默認呈現關系鏈場景。
圖:好友關系鏈與場景設計融合
運營場景
郊外露營、濱海公路、夢幻游樂園、沙灘度假…這都是現實生活中會與好友一同享受美好時光的場所。我們將這些值得紀念的場景還原到聊天界面的設計中,通過投射現實生活中的美好瞬間,進一步體現了場景與社交關系的緊密結合。
圖:”向往生活“類場景設計,投射現實生活的美好瞬間
超級QQ秀的服裝設計涵蓋四季,所以在場景設計上也巧妙地融合了四季的韻律,將季節特性融入場景的策劃中,以展現四季間迷人而獨特的美景,讓Avatar代替用戶盡情感受春夏秋冬的絕美時光。
圖:體現四季交替的場景化設計
我們也注重節日時場景氛圍的表達。例如,在中秋節上線了”萬家燈火”的場景,與超級QQ秀用戶熱愛的國風類型服飾風格所契合,通過結合節日或時下節氣進行場景氛圍的設計,為用戶提供更豐富多樣的聊天體驗,感受濃厚的節日氛圍和傳統文化底蘊。
圖:“萬家燈火”中秋節日場景,深受用戶喜愛
除此之外,結合時下年輕人喜愛的流行梗,也能增強用戶的共鳴感和參與度。敲木魚、擺爛、佛系…這些都是當下年輕人經常提及的“熱點”和獨特“精神狀態”。通過引入這些潮流元素,能夠與年輕用戶更深入地互動,為他們帶來更加有趣和創新的聊天體驗。這些有趣的創意場景設計,都將在后續好友時光的迭代中陸續推出,敬請期待。
2. 動作設計:讓鮮活人設更直觀的感知
在角色動作設計環節的設計目標是——讓鮮活人設更直觀感知。根據用戶使用場景和Avatar角色特性,設定四種豐富有趣的動作觸發交互邏輯,在讓角色更鮮活生動,擁有輔助社交價值。
圖:四大動作觸發交互設計,讓鮮活人設更直觀感知
場景待機動作
每個待機動作都是基于場景特點精心設計的不同動作,這些動作與場景緊密相連,傳遞沉浸氛圍。在待機動作的設計中注重表達角色動作的松弛感和呼吸感。當用戶未主動觸發動作時,這些待機動作輕盈、松弛,不會打擾用戶的聊天。
圖:部分待機動作實機演示,更多動作呈現請到好友時光體驗
互動動作
互動動作是設計上最重要的一環,我們設計了雙人動作和單人動作這兩種不同特性的動作。
在雙人動作的設計上更側重動作表現力和趣味性。如送你花花、擁吻、慶祝等,通過賦予角色連貫流暢的動作設計,提升了雙人角色互動時的故事感。
圖:部分雙人動作演示,更多動作呈現請到好友時光體驗
而單人動作的設計會更偏重社交日常情緒的呈現,比如你好、再見、哭泣等一些常見表情去拓展更為完整的肢體表達,使得在社交互動中更加貼合高頻使用場景,雙管齊下,全面輔助社交情緒傳達。
圖:部分單人動作演示,更多動作呈現請到好友時光體驗
通知引導
我們還賦予Avatar一些實用功能,以增加其實際業務價值。在好友時光中,Avatar承載不同消息類型的通知功能,充當用戶的信使,更快地傳遞信息,提供高效的溝通體驗。
輸入聯動
在文本消息輸入時,Avatar會實時演繹出相關的表情和動作,營造驚喜感和趣味感。這種動態聯動提升了聊天質量,還輔助文本信息增強情緒的表達和交流效果。
在Avatar動作設計時,既要注重場景的沉浸感,也注重用戶體驗與功能性的實用性,讓角色不僅有趣而且有用。無論是待機動作的呈現、互動動作的多樣性,還是Avatar承載實用功能和與消息輸入的聯動,都旨在提供更豐富、更生動的聊天體驗,加強用戶與角色之間的情感連接,并輔助實現實際的業務價值。
CHAPTER-5:結語
這是一次非常大膽的設計探索與落地實踐,令我們非常開心的是,在生動有趣Avatar與沉浸的場景的襯托下,用戶的換裝欲望顯著提升。好友時光方案上線后收到用戶的一致好評,滿足用戶的秀曬意愿,核心指標提升顯著,換裝率、付費率均有顯著正向提升,DAU明顯上漲。
“好友時光”功能體驗指引:
未來好友時光將繼續不斷優化和創新,持續為用戶帶來更具吸引力和感染力的聊天新體驗,打造一個更加豐富多彩的虛擬交流世界!如果你想體驗好友時光功能,打開QQ任意好友的消息對話頁,左滑即可開啟好友時光功能??靵眢w驗用Avatar和朋友沉浸式社交的超次元互動新玩法吧!
作者:ISUX設計
來源公眾號:騰訊ISUX(ID:tencent_isux),騰訊ISUX用戶體驗與設計部。
本文由人人都是產品經理合作媒體@騰訊ISUX 授權發布,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!