无码一区二区三区中文字幕

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

2023-8-31 博博

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

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

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

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

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

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

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

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

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

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

2.2.2產(chǎn)品亮點(diǎn)：雙瀑布流推薦機(jī)制banner下方共6個雙瀑布流推薦位，這種排列方式可以在一屏中展示更多的信息，但不足就是如果界面全部都是這種排列方式會導(dǎo)致用戶瀏覽成本提高，降低用戶的瀏覽欲望，所以騰訊視頻把內(nèi)容控制在6個，不會給用戶增加瀏覽負(fù)擔(dān)，其次在推薦機(jī)制上對前兩個卡片進(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)常看著看著就安利了一個新劇，很適合作為長視頻推薦列表使用

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

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

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

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

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

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

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

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

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