深度拆解騰訊視頻app的細(xì)節(jié)設(shè)計(jì)

2023-8-31    博博

1.內(nèi)容結(jié)構(gòu)作為視頻內(nèi)容平臺(tái),通過(guò)對(duì)騰訊視頻APP的結(jié)構(gòu)梳理,發(fā)現(xiàn)產(chǎn)品內(nèi)大部分的內(nèi)容都是圍繞視頻來(lái)進(jìn)行拓展,整體框架分為:首頁(yè)、短視頻、VIP會(huì)員、熱議、我的這幾個(gè)模塊。本次我們主要針對(duì)于首頁(yè)與播放器這兩個(gè)場(chǎng)景進(jìn)行重點(diǎn)分析

2.首頁(yè)首頁(yè)作為騰訊視頻的首個(gè)場(chǎng)景,主要以視頻內(nèi)容推廣為主,主要內(nèi)容有如下:頂部操作區(qū)、內(nèi)容推薦區(qū)、各分區(qū)推薦頁(yè)等

2.1頂部操作區(qū)
頂部操作區(qū)一般集合著大量的操作入口,主要功能如下:加追與預(yù)約:其中包含用戶添加的追劇列表、熱門預(yù)約、歷史觀看記錄等功能搜索:點(diǎn)擊進(jìn)入搜索結(jié)果頁(yè),其中包含熱門榜單、歷史記錄,用戶也可以快速搜索自己需要查找的視頻內(nèi)容游戲中心:游戲中心主要是推廣騰訊自家的游戲內(nèi)容,通過(guò)游戲中心對(duì)游戲進(jìn)行引流與拉新周邊商城:周邊商城里面為視頻的周邊產(chǎn)品,用戶可以在周邊商城中進(jìn)行商品購(gòu)買

2.1.1產(chǎn)品亮點(diǎn):加追與預(yù)約功能在首頁(yè)左上角增加最近再追功能,此功能讓用戶在首頁(yè)就可以更快速的找到自己在追的內(nèi)容,而且在頁(yè)面中還包含新片預(yù)約和歷史瀏覽記錄功能,讓用戶在了解更多預(yù)約內(nèi)容與歷史記錄。此功能放在首頁(yè)很好的降低用戶操作成本,提升產(chǎn)品體驗(yàn)。

2.1.2設(shè)計(jì)誤區(qū):加追功能關(guān)閉交互加追功能在關(guān)閉時(shí)有一個(gè)縮放交互,此交互場(chǎng)景可以很好的讓用戶感知當(dāng)前是從哪里進(jìn)行跳轉(zhuǎn),出發(fā)點(diǎn)是好的,但由于在點(diǎn)開(kāi)時(shí)沒(méi)有縮放動(dòng)畫與縮放的樣式不太理想反而導(dǎo)致此交互效果并不好,所以可以適當(dāng)優(yōu)化下。

2.1.3設(shè)計(jì)亮點(diǎn):滑動(dòng)屏幕頂導(dǎo)隱藏與出現(xiàn)交互當(dāng)用戶滑動(dòng)屏幕時(shí),頂部操作區(qū)會(huì)跟隨手勢(shì)進(jìn)行向上隱藏,這樣可以在用戶向上滑動(dòng)瀏覽信息時(shí)給界面帶來(lái)更多的展示空間,當(dāng)用戶向下滑動(dòng)一定距離時(shí)頂導(dǎo)出現(xiàn),方便用戶對(duì)頂導(dǎo)進(jìn)行相關(guān)操作。這里的交互細(xì)節(jié)很舒適,大家可以多多學(xué)習(xí)。

2.1.4設(shè)計(jì)亮點(diǎn):頂部背景跟隨banner顏色進(jìn)行變化頂部背景跟隨banner進(jìn)行變化,當(dāng)用戶滑動(dòng)banner時(shí)頂部背景會(huì)跟隨banner的顏色進(jìn)行變化,這樣可以讓界面的配色看起來(lái)更加和諧,提升界面視覺(jué)一致性。同時(shí)賦予用戶體驗(yàn)驚喜感。

2.1.5設(shè)計(jì)亮點(diǎn):下拉刷新新玩法大多數(shù)產(chǎn)品下拉都為刷新界面操作,但騰訊視頻對(duì)下拉進(jìn)行兩部交互操作,用戶下拉到第一個(gè)階段會(huì)出現(xiàn)提示"下拉發(fā)現(xiàn)更多好玩"當(dāng)前這時(shí)用戶松手可以進(jìn)行常規(guī)刷新操作, 但用戶看到這樣的提示會(huì)更想知道在向下拉到會(huì)帶來(lái)怎么的內(nèi)容,當(dāng)用戶再次下拉后會(huì)出現(xiàn)對(duì)應(yīng)的內(nèi)容推薦,類似于游戲推廣與熱播劇推廣,賦予用戶驚喜感的同時(shí)還能增加廣告收入。

2.2內(nèi)容推薦區(qū)內(nèi)容推薦區(qū)主要以推薦視頻內(nèi)容為主,主要功能分為:Banner:banner主要推薦站內(nèi)的熱門內(nèi)容與廣告,支持滑動(dòng)切換與自動(dòng)切換展示雙瀑布流推薦位與大卡片推薦:卡片形式采用“封面/視頻+標(biāo)題+標(biāo)簽”的形式,推薦一些站內(nèi)的熱門內(nèi)容與廣告內(nèi)容定制內(nèi)容頁(yè):熱門的視頻會(huì)定制內(nèi)容頁(yè),為視頻定制界面樣式與布局

2.2.1設(shè)計(jì)亮點(diǎn):Banner切換的創(chuàng)新交互方式騰訊視頻的Banner 切換動(dòng)畫是十分有特點(diǎn)的,整體是logo的剪影效果,并且在右下角的數(shù)量指示點(diǎn)也是logo的形狀,很好的突出品牌形象,設(shè)計(jì)創(chuàng)新的同時(shí)強(qiáng)化品牌在用戶心中的位置。

2.2.2產(chǎn)品亮點(diǎn):雙瀑布流推薦機(jī)制banner下方共6個(gè)雙瀑布流推薦位,這種排列方式可以在一屏中展示更多的信息,但不足就是如果界面全部都是這種排列方式會(huì)導(dǎo)致用戶瀏覽成本提高,降低用戶的瀏覽欲望,所以騰訊視頻把內(nèi)容控制在6個(gè),不會(huì)給用戶增加瀏覽負(fù)擔(dān),其次在推薦機(jī)制上對(duì)前兩個(gè)卡片進(jìn)行“最近在看”標(biāo)簽,和視頻預(yù)覽,相比其他靜態(tài)卡片可以讓用戶更加快速的發(fā)現(xiàn)自己想看的內(nèi)容。

2.2.3產(chǎn)品亮點(diǎn):視頻大卡片推薦這種樣式的推薦形式雖然同屏下相比雙瀑布流的可推薦內(nèi)容少,但可以讓用戶更注重內(nèi)容視頻本身,推薦的視頻內(nèi)容都為該作品的熱門片段,小編經(jīng)常看著看著就安利了一個(gè)新劇,很適合作為長(zhǎng)視頻推薦列表使用

2.2.4設(shè)計(jì)亮點(diǎn):不一樣的定制化分區(qū)內(nèi)容頁(yè)騰訊視頻會(huì)根據(jù)站內(nèi)的熱門內(nèi)容進(jìn)行定制化分區(qū)內(nèi)容頁(yè),雖然這種形式在各個(gè)視頻平臺(tái)都有設(shè)計(jì),但騰訊視頻的似乎更加與眾不同,它相比其他競(jìng)品不僅增加了開(kāi)屏動(dòng)畫,加強(qiáng)界面氛圍感,同時(shí)在功能上增加了一級(jí)標(biāo)題,如在長(zhǎng)相思專題中的“獨(dú)家花絮、有聲書、看微綜、相思榜”等入口,可以讓用戶在頁(yè)面中發(fā)現(xiàn)更多劇情本身以外的衍生內(nèi)容,一級(jí)標(biāo)題的形式也可以讓用戶直達(dá)視頻播放頁(yè),快速了解想要看到的視頻內(nèi)容。

2.2.5設(shè)計(jì)誤區(qū):分區(qū)中的入口icon設(shè)計(jì)電視劇作為騰訊視頻的高頻點(diǎn)擊分區(qū),在頭部的icon確實(shí)有失大廠風(fēng)范,圖標(biāo)過(guò)大、視覺(jué)比例不一致、風(fēng)格不統(tǒng)一等問(wèn)題,很影響界面的視覺(jué)美感,但入口的點(diǎn)擊轉(zhuǎn)化是否有影響未知。

3.播放器相關(guān)播放器作為視頻產(chǎn)品的核心使用場(chǎng)景,其中的功能非常龐大,騰訊視頻的播放器內(nèi)容主要分為:豎屏播放頁(yè)與橫屏播放器

3.1豎屏播放頁(yè)豎屏播放頁(yè)為用戶點(diǎn)擊進(jìn)入視頻的第一個(gè)場(chǎng)景,主要功能為:頂部播放器:頂部為視頻播放區(qū)域詳情:詳情中包含視頻標(biāo)題、選集、討論、周邊、視頻推薦等功能底部快捷操作區(qū):包含再追、下載、投屏、一起看、分享等功能

3.1.1設(shè)計(jì)亮點(diǎn):定制化的視頻播放器對(duì)于熱門的內(nèi)容,騰訊視頻依然會(huì)定制化頁(yè)面,給予專屬的配色與標(biāo)題,給用戶提供更加沉浸的氛圍感

3.1.2產(chǎn)品亮點(diǎn):底部操作區(qū)功能相比其他產(chǎn)品,騰訊視頻在進(jìn)入豎屏播放頁(yè)后不會(huì)再頂部的視頻中默認(rèn)展示操作內(nèi)容,給用戶帶來(lái)更好的觀看體驗(yàn),并且把視頻相關(guān)的操作內(nèi)容放置底部做成一個(gè)底部操作區(qū),用戶可以在底部快速的對(duì)視頻進(jìn)行操作如:下載、投屏、一起看、分享等。而不是把功能分散在界面中,這樣不僅可以降低用戶的尋找這些高頻操作的成本,同時(shí)提升視頻的觀看體驗(yàn)。

3.2橫屏播放器橫屏播放器是大家在使用產(chǎn)品中最高頻的操作,這里騰訊視頻也是下了很大的成本,也有不少的細(xì)節(jié),界面的主要功能有:頂部操作區(qū):標(biāo)題、一起看、臻彩視聽(tīng)、投屏等功能左右側(cè)操作區(qū):鎖屏、討論、拍照、錄像等功能底部操作區(qū):進(jìn)度條、暫停、彈幕、倍速、發(fā)電、選集等功能其他場(chǎng)景:彈幕播放、特效、音量控制、快進(jìn)等功能

3.2.1設(shè)計(jì)亮點(diǎn):定制化進(jìn)度條與標(biāo)記糖點(diǎn)對(duì)應(yīng)熱門視頻內(nèi)容,騰訊視頻會(huì)定制化進(jìn)度條樣式與進(jìn)度點(diǎn)樣式,(如《長(zhǎng)相思》中定制紅色木槿花)讓用戶更加沉浸的觀看體驗(yàn),同時(shí)在進(jìn)度條上方有標(biāo)記樣式,用戶點(diǎn)擊會(huì)觸發(fā)標(biāo)記動(dòng)效與糖點(diǎn),所有標(biāo)記的糖點(diǎn)數(shù)據(jù)也會(huì)以波動(dòng)圖的形式顯示在進(jìn)度條上方,提高互動(dòng)玩法。

3.2.2產(chǎn)品亮點(diǎn):發(fā)電功能為自己支持的CP上分在底部操作區(qū)增加發(fā)電功能,用戶可以點(diǎn)擊為自己支持的cp送出禮物,不僅可以滿足用戶的“嗑CP”心理,同時(shí)對(duì)直播場(chǎng)景中的核心送禮功能很好的結(jié)合到視頻產(chǎn)品中,給視頻內(nèi)容提供了商業(yè)價(jià)值,提高產(chǎn)品收入。

作者:不是作家
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司UI咨詢、用戶體驗(yàn)公司軟件界面設(shè)計(jì)公司

日歷

鏈接

個(gè)人資料

存檔