騰訊QQ空間直播的設(shè)計(jì)經(jīng)驗(yàn)總結(jié)
什么?空間也做直播了!沒錯(cuò),在當(dāng)今直播的熱潮下,國(guó)內(nèi)外的直播產(chǎn)品大都是基于陌生人的關(guān)系鏈,且內(nèi)容結(jié)構(gòu)與視覺效果同質(zhì)化嚴(yán)重。如何讓用戶更好的分享生活?如何為用戶提供差異化的內(nèi)容消費(fèi)?如何給用戶更多新鮮趣味的互動(dòng)玩法?這是我們做直播希望解決的問題。
Qzone依托自身優(yōu)勢(shì),另辟蹊徑地發(fā)掘基于好友關(guān)系鏈的直播場(chǎng)景。與此同時(shí),我們不斷探索更符合空間用戶直播的設(shè)計(jì)形態(tài),發(fā)掘與競(jìng)品的差異點(diǎn),尋找直播的下一個(gè)突破口,通過系統(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)起著舉足輕重的作用。
通過對(duì)競(jìng)品的分析,我們總結(jié)出目前直播產(chǎn)品常見的幾種互動(dòng)方式:
通過對(duì)直播數(shù)據(jù)的分析,我們發(fā)現(xiàn)送禮的操作大都存在于PGC直播的場(chǎng)景,而在UGC的直播場(chǎng)景,好友間極少存在花錢送禮的需求。因此在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ù)用戶的使用頻次來劃分優(yōu)先級(jí):點(diǎn)贊 >評(píng)論 >送禮。在互動(dòng)區(qū)域的布局上,經(jīng)過多次調(diào)整優(yōu)化,最終布局實(shí)現(xiàn)了主播端與觀眾端框架上的統(tǒng)一。
3、信息的引流與閉環(huán)
直播開始時(shí),可以通過Qzone的消息push,通知到好友及關(guān)注的粉絲;在直播的過程中,可以將直播分享給外部平臺(tái),從而吸引更多觀眾前來圍觀;優(yōu)質(zhì)的直播可以通過直播聚合頁(yè)得到曝光。
信息閉環(huán)(沉淀),當(dāng)直播結(jié)束后,內(nèi)容將以feed形式沉淀,支持回看,使直播得到二次曝光的機(jī)會(huì),便于內(nèi)容的再次傳播。
從整體到局部的打磨
1、全局觀意識(shí)
在初期探索中,我們從Qzone自身的角度來展開設(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)、視覺風(fēng)格的一致化。
2、保留與繼承
三個(gè)產(chǎn)品打通來設(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)品放在一起來設(shè)計(jì),從整體風(fēng)格的設(shè)定到細(xì)節(jié)的精細(xì)打磨,甚至多終端的一致性與延續(xù)性,需要對(duì)設(shè)計(jì)進(jìn)行更加全面的考量。
酷炫的互動(dòng)
直播的動(dòng)畫 (效) 部分也內(nèi)涵乾坤,包含:動(dòng)態(tài)表情、禮物動(dòng)畫、點(diǎn)贊動(dòng)畫、動(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)量,讓直播的過程驚喜不斷。
2、禮物設(shè)計(jì)
在直播中送禮,要讓用戶覺得錢花的物超所值,因此,禮物需要體現(xiàn)出品質(zhì)感,禮物要從題材到質(zhì)感再到動(dòng)畫,都有細(xì)致的設(shè)計(jì)表現(xiàn),才會(huì)讓觀眾覺得很特別,才肯花錢買買買~
題材層面,針對(duì)主播類型我們分成了幾類禮物:通用、美食、教學(xué)、才藝。根據(jù)不同的直播內(nèi)容,在真實(shí)的送禮場(chǎng)景上,讓用戶選擇與主播內(nèi)容相匹配的禮物。比如才藝類直播,我們準(zhǔn)備了:玫瑰花、金話筒等;美食類直播有:拉面、冰淇淋等。
表現(xiàn)層面,構(gòu)圖上要讓禮物在畫面中顯得盡量飽滿,不同等級(jí)的禮物,也要在細(xì)節(jié)上有所區(qū)分,貴重的禮物從精致程度、畫面效果、細(xì)節(jié)層次都要有所體現(xiàn),比如普通的“小星星”和昂貴的“一碗拉面”之間在細(xì)節(jié)上就需要拉開差距。在禮物質(zhì)感的表現(xiàn)上,選擇了寫實(shí)的風(fēng)格,適當(dāng)夸張了其華麗的質(zhì)感,希望讓用戶覺得花這個(gè)錢哄主播開心~值!
3、禮物動(dòng)畫的一致性設(shè)計(jì)
既要保持禮物動(dòng)畫在多個(gè)平臺(tái)的一致性,又不希望禮物動(dòng)畫給手機(jī)性能帶來過多負(fù)荷,減少對(duì)手機(jī)性能的消耗,讓不同平臺(tái)的用戶可以有一致性的動(dòng)畫體驗(yàn)。因此,在禮物動(dòng)畫的部分,我們根據(jù)ios和android的系統(tǒng)特性,每個(gè)動(dòng)畫輸出兩套動(dòng)畫資源,播放時(shí)長(zhǎng)由后臺(tái)下發(fā)數(shù)據(jù)。
在ios平臺(tái),全部提供動(dòng)畫序列幀,設(shè)定好間隔時(shí)間,后臺(tái)直接讀取圖片資源進(jìn)行播放;android平臺(tái),考慮到手機(jī)性能,則做好單個(gè)的循環(huán),然后由開發(fā)來控制位移、縮放、透明度等內(nèi)容。所以,這里也制定了相對(duì)應(yīng)的設(shè)計(jì)規(guī)范,以便更好地跟CP進(jìn)行對(duì)接。在設(shè)計(jì)動(dòng)畫的時(shí)候,也會(huì)有相對(duì)應(yīng)的策略,如:帶軌跡動(dòng)畫、固定位置播放動(dòng)畫,以便之后的內(nèi)容拓展。
4、點(diǎn)贊動(dòng)畫
圖形融入了QQfamily的形象,一方面與競(jìng)品具有本質(zhì)上的差異化,另外,多樣化的點(diǎn)贊圖形、豐富而細(xì)膩的動(dòng)畫效果,無疑為點(diǎn)贊的體驗(yàn)增加了趣味性,讓點(diǎn)贊不再枯燥乏味,觀眾點(diǎn)贊的手根本停不下來。
5、動(dòng)效庫(kù)的組建
此次的項(xiàng)目涉及到大量的頁(yè)面和控件之間的動(dòng)效銜接,為了最大幅度地節(jié)省設(shè)計(jì)與開發(fā)的工作量,提升動(dòng)效設(shè)計(jì)的一致性與可復(fù)用性,我們引入了facebook的origami動(dòng)效原型工具。通過它,設(shè)計(jì)師在前期可以反復(fù)快速的在手機(jī)上測(cè)試動(dòng)效。與此同時(shí),針對(duì)相類似的互動(dòng),我們采用了一致的動(dòng)畫參數(shù),如:禮物浮層、觀眾列表、主播名片卡、結(jié)束頁(yè)面。在后期,分別為ios和android輸出兩套動(dòng)效代碼,以供開發(fā)使用。
產(chǎn)品推廣短片
前期預(yù)熱短片
視頻創(chuàng)意:為了避開文字對(duì)視頻內(nèi)容的遮擋,讓文字內(nèi)容與視頻有更多的連接感,確保這兩者可以有更好的視覺效果,這里采用了 “翻牌”的形式,與此同時(shí)還可以營(yíng)造出“魔術(shù)般“的視覺效果。每次翻開都是不可預(yù)期的,用戶不知道下一刻會(huì)是誰(shuí)來表白,從而制造驚喜的感覺。這里需要對(duì)分鏡頭做的極為細(xì)致,每個(gè)色板應(yīng)該怎么翻,才會(huì)連接起來更順暢,不拖沓。在音樂高潮階段,主題文字剛好在同一時(shí)刻翻轉(zhuǎn)出現(xiàn),這都需要對(duì)視頻從整體節(jié)奏,到卡片間的銜接邏輯有十足的把握。
小結(jié)
圍繞好友關(guān)系鏈的互動(dòng)模式,發(fā)掘適于好友之間直播的玩法,在互動(dòng)模式、界面設(shè)計(jì)、動(dòng)效(畫)樣式、禮物質(zhì)感、產(chǎn)品推廣都做了精致的打磨,通過系統(tǒng)化的設(shè)計(jì),為用戶打造一個(gè)完善的直播體系。
來源:騰訊ISUX
原文地址:https://isux.tencent.com/qzone-live.html
版權(quán):人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范,任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來源,若標(biāo)注有誤,請(qǐng)聯(lián)系主編QQ:419297645
- 目前還沒評(píng)論,等你發(fā)揮!