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

2023-8-31    博博

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

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

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

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

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

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

2.1.4設計亮點:頂部背景跟隨banner顏色進行變化頂部背景跟隨banner進行變化,當用戶滑動banner時頂部背景會跟隨banner的顏色進行變化,這樣可以讓界面的配色看起來更加和諧,提升界面視覺一致性。同時賦予用戶體驗驚喜感。

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

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

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

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

2.2.3產(chǎn)品亮點:視頻大卡片推薦這種樣式的推薦形式雖然同屏下相比雙瀑布流的可推薦內容少,但可以讓用戶更注重內容視頻本身,推薦的視頻內容都為該作品的熱門片段,小編經(jīng)??粗粗桶怖艘粋€新劇,很適合作為長視頻推薦列表使用

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

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

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

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

3.1.1設計亮點:定制化的視頻播放器對于熱門的內容,騰訊視頻依然會定制化頁面,給予專屬的配色與標題,給用戶提供更加沉浸的氛圍感

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

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

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

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

作者:不是作家
來源:站酷

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔