什么？空間也做直播了！沒錯，在當(dāng)今直播的熱潮下，國內(nèi)外的直播產(chǎn)品大都是基于陌生人的關(guān)系鏈，且內(nèi)容結(jié)構(gòu)與視覺效果同質(zhì)化嚴(yán)重。如何讓用戶更好的分享生活？如何為用戶提供差異化的內(nèi)容消費？如何給用戶更多新鮮趣味的互動玩法？這是我們做直播希望解決的問題。

Qzone依托自身優(yōu)勢，另辟蹊徑地發(fā)掘基于好友關(guān)系鏈的直播場景。與此同時，我們不斷探索更符合空間用戶直播的設(shè)計形態(tài)，發(fā)掘與競品的差異點，尋找直播的下一個突破口，通過系統(tǒng)化的設(shè)計，為用戶提供非一般的直播體驗。

系統(tǒng)化的互動體驗

1、互動形式探索

直播主要圍繞“主播與觀眾”之間的互動，其二者之間屬于強互動關(guān)系；同時“觀眾之間”也存在著弱互動關(guān)系（如：觀眾之間可以聊天），良好的互動環(huán)境、趣味的互動形式，對于提升提升直播氛圍、提升互動體驗起著舉足輕重的作用。

通過對競品的分析,我們總結(jié)出目前直播產(chǎn)品常見的幾種互動方式:

通過對直播數(shù)據(jù)的分析，我們發(fā)現(xiàn)送禮的操作大都存在于PGC直播的場景，而在UGC的直播場景，好友間極少存在花錢送禮的需求。因此在UGC層面，我們也在探索除了滿足基本功能之外，更加有趣、刺激活躍的互動形式，這里我們創(chuàng)新性的設(shè)計了兩種互動玩法。

2、按信息優(yōu)先級，布局產(chǎn)品框架

在項目前期，我們對交互框架在多個維度進行了分析與嘗試。

在功能模塊的劃分上，區(qū)分用戶操作與信息的優(yōu)先級：功能操作>輕量互動>主播信息>房間信息。操作區(qū)域根據(jù)用戶的使用頻次來劃分優(yōu)先級：點贊 >評論 >送禮。在互動區(qū)域的布局上，經(jīng)過多次調(diào)整優(yōu)化，最終布局實現(xiàn)了主播端與觀眾端框架上的統(tǒng)一。

3、信息的引流與閉環(huán)

直播開始時，可以通過Qzone的消息push，通知到好友及關(guān)注的粉絲；在直播的過程中，可以將直播分享給外部平臺，從而吸引更多觀眾前來圍觀；優(yōu)質(zhì)的直播可以通過直播聚合頁得到曝光。

信息閉環(huán)（沉淀），當(dāng)直播結(jié)束后，內(nèi)容將以feed形式沉淀，支持回看，使直播得到二次曝光的機會，便于內(nèi)容的再次傳播。

從整體到局部的打磨

1、全局觀意識

在初期探索中，我們從Qzone自身的角度來展開設(shè)計，但這樣缺乏對QQ系產(chǎn)品的統(tǒng)一性考量。因此，我們從全局觀的視角思考設(shè)計的一致性，整體權(quán)衡多個產(chǎn)品設(shè)計的語言及風(fēng)格。

這次的設(shè)計我們統(tǒng)一思考了“Qzone、企鵝FM、全民K歌”三大平臺。在前期的方案中，頂部、底部、評論框的設(shè)計都缺乏一致性。因此，在后期的設(shè)計中，更深入的去思考交互體驗、視覺風(fēng)格的一致化。

2、保留與繼承

三個產(chǎn)品打通來設(shè)計，包括頂部主播信息、觀眾列表、底部操作、評論框全部一致化設(shè)計，在布局上也進行了統(tǒng)一。與此同時，又保留了各個產(chǎn)品原有的UI（圖形）風(fēng)格、繼承了各產(chǎn)品的品牌色，空間：黃色、FM：黑金、K歌：紅色。

3、細節(jié)打磨

在頁面的設(shè)計中，每一個細節(jié)的優(yōu)化，對最終的結(jié)果都有至關(guān)重要的作用。針對頁面頂部的信息，我們圍繞產(chǎn)品易用性、信息展示的完整度及優(yōu)先級，做了更進一步的優(yōu)化。

將幾個產(chǎn)品放在一起來設(shè)計，從整體風(fēng)格的設(shè)定到細節(jié)的精細打磨，甚至多終端的一致性與延續(xù)性，需要對設(shè)計進行更加全面的考量。

酷炫的互動

直播的動畫 (效) 部分也內(nèi)涵乾坤，包含：動態(tài)表情、禮物動畫、點贊動畫、動效庫的組建等。這里的設(shè)計初衷是希望豐富產(chǎn)品的屬性及其功能。從而增強設(shè)計的靈動感與趣味感，強化產(chǎn)品的情感化表達。

1、多元化的互動形式

我們也在不斷探索在UGC直播場景中，除了評論、點贊、送禮之外更豐富、輕量化的互動形式。動態(tài)表情則以QQ表情為原型，我們又重新包裝演繹，從而活躍UGC直播場景的互動量，讓直播的過程驚喜不斷。

2、禮物設(shè)計

在直播中送禮，要讓用戶覺得錢花的物超所值，因此，禮物需要體現(xiàn)出品質(zhì)感，禮物要從題材到質(zhì)感再到動畫，都有細致的設(shè)計表現(xiàn)，才會讓觀眾覺得很特別，才肯花錢買買買~

題材層面，針對主播類型我們分成了幾類禮物：通用、美食、教學(xué)、才藝。根據(jù)不同的直播內(nèi)容，在真實的送禮場景上，讓用戶選擇與主播內(nèi)容相匹配的禮物。比如才藝類直播，我們準(zhǔn)備了：玫瑰花、金話筒等；美食類直播有：拉面、冰淇淋等。

表現(xiàn)層面，構(gòu)圖上要讓禮物在畫面中顯得盡量飽滿，不同等級的禮物，也要在細節(jié)上有所區(qū)分，貴重的禮物從精致程度、畫面效果、細節(jié)層次都要有所體現(xiàn)，比如普通的“小星星”和昂貴的“一碗拉面”之間在細節(jié)上就需要拉開差距。在禮物質(zhì)感的表現(xiàn)上，選擇了寫實的風(fēng)格，適當(dāng)夸張了其華麗的質(zhì)感，希望讓用戶覺得花這個錢哄主播開心~值！

3、禮物動畫的一致性設(shè)計

既要保持禮物動畫在多個平臺的一致性，又不希望禮物動畫給手機性能帶來過多負荷，減少對手機性能的消耗，讓不同平臺的用戶可以有一致性的動畫體驗。因此，在禮物動畫的部分，我們根據(jù)ios和android的系統(tǒng)特性，每個動畫輸出兩套動畫資源，播放時長由后臺下發(fā)數(shù)據(jù)。

在ios平臺，全部提供動畫序列幀，設(shè)定好間隔時間，后臺直接讀取圖片資源進行播放；android平臺，考慮到手機性能，則做好單個的循環(huán)，然后由開發(fā)來控制位移、縮放、透明度等內(nèi)容。所以，這里也制定了相對應(yīng)的設(shè)計規(guī)范，以便更好地跟CP進行對接。在設(shè)計動畫的時候，也會有相對應(yīng)的策略，如：帶軌跡動畫、固定位置播放動畫，以便之后的內(nèi)容拓展。

4、點贊動畫

圖形融入了QQfamily的形象，一方面與競品具有本質(zhì)上的差異化，另外，多樣化的點贊圖形、豐富而細膩的動畫效果，無疑為點贊的體驗增加了趣味性，讓點贊不再枯燥乏味，觀眾點贊的手根本停不下來。

5、動效庫的組建

此次的項目涉及到大量的頁面和控件之間的動效銜接，為了最大幅度地節(jié)省設(shè)計與開發(fā)的工作量，提升動效設(shè)計的一致性與可復(fù)用性，我們引入了facebook的origami動效原型工具。通過它，設(shè)計師在前期可以反復(fù)快速的在手機上測試動效。與此同時，針對相類似的互動，我們采用了一致的動畫參數(shù)，如：禮物浮層、觀眾列表、主播名片卡、結(jié)束頁面。在后期，分別為ios和android輸出兩套動效代碼，以供開發(fā)使用。

產(chǎn)品推廣短片

前期預(yù)熱短片

視頻創(chuàng)意：為了避開文字對視頻內(nèi)容的遮擋，讓文字內(nèi)容與視頻有更多的連接感，確保這兩者可以有更好的視覺效果，這里采用了 “翻牌”的形式，與此同時還可以營造出“魔術(shù)般“的視覺效果。每次翻開都是不可預(yù)期的，用戶不知道下一刻會是誰來表白，從而制造驚喜的感覺。這里需要對分鏡頭做的極為細致，每個色板應(yīng)該怎么翻，才會連接起來更順暢，不拖沓。在音樂高潮階段，主題文字剛好在同一時刻翻轉(zhuǎn)出現(xiàn)，這都需要對視頻從整體節(jié)奏，到卡片間的銜接邏輯有十足的把握。

小結(jié)

圍繞好友關(guān)系鏈的互動模式，發(fā)掘適于好友之間直播的玩法，在互動模式、界面設(shè)計、動效（畫）樣式、禮物質(zhì)感、產(chǎn)品推廣都做了精致的打磨，通過系統(tǒng)化的設(shè)計，為用戶打造一個完善的直播體系。

來源：騰訊ISUX

原文地址：https://isux.tencent.com/qzone-live.html

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會明確標(biāo)注作者和來源，若標(biāo)注有誤，請聯(lián)系主編QQ：419297645