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

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

系統(tǒng)化的互動(dòng)體驗(yàn)

1、互動(dòng)形式探索

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

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

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

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

在項(xiàng)目前期，我們對(duì)交互框架在多個(gè)維度進(jìn)行了分析與嘗試。

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

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

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

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

從整體到局部的打磨

1、全局觀意識(shí)

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

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

2、保留與繼承

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

3、細(xì)節(jié)打磨

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

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

酷炫的互動(dòng)

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

1、多元化的互動(dòng)形式

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

2、禮物設(shè)計(jì)

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

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

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

3、禮物動(dòng)畫(huà)的一致性設(shè)計(jì)

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

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

4、點(diǎn)贊動(dòng)畫(huà)

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

5、動(dòng)效庫(kù)的組建

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

產(chǎn)品推廣短片

前期預(yù)熱短片

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

小結(jié)

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

來(lái)源：騰訊ISUX

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

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