流量引導的頁面設(shè)計:視頻列表頁和視頻詳情頁實例


手機視頻


1.背景

最近在考慮一個問題键痛,如何從主app里合理地引導流量到自己的子功能惑艇,主要是兩種手段:

(1)設(shè)置合理的功能入口

(2)在用戶正常的使用路徑上增加引導功能

在考慮過程中煎楣,參考了大量app的頁面設(shè)計,發(fā)現(xiàn)不同視頻app的設(shè)計各有千秋狈孔,遂總結(jié)如下珠插。


2.微博視頻


微博視頻


微博視頻是微博app中的視頻功能,僅對核心功能進行分析渣淤。

2.1 微博列表的視頻消息


動態(tài)列表的視頻消息

視頻消息的格式和其它微博消息的格式相同赏寇,描述區(qū)、常規(guī)操作區(qū)的交互與其它消息類型保持一致价认,因此針對視頻類型的個性化功能嗅定,僅有視頻區(qū)是可發(fā)揮空間

猜想,視頻類型有以下特點:

(1)視頻類型需要全屏播放

(2)同一個上傳用戶的視頻類型不會太多

(3)視頻有分發(fā)訴求:用戶看文字用踩、看圖片渠退,往往有強烈的人格訴求,即只看某些博主發(fā)布的脐彩,但是看視頻更高的為內(nèi)容訴求碎乃,有在不同博主的作品間瀏覽的訴求

針對視頻類型的以上特點,微博設(shè)計了一個巧妙的視頻詳情頁惠奸。


2.2 微博的視頻詳情頁


微博的視頻詳情頁

視頻詳情頁暫且分為沉浸狀態(tài)和高亮狀態(tài)梅誓。

首次進入某個視頻詳情頁時,均為高亮狀態(tài)佛南。

進入視頻頁的方法有:從微博動態(tài)列表進入梗掰,從另一個視頻詳情頁滑動切入,從全屏視頻頁退出共虑。

高亮和沉浸狀態(tài)下愧怜,可以上下滑動切換視頻。

高亮狀態(tài)下妈拌,可以使用評論拥坛、點贊蓬蝶、分享功能。

這個頁面設(shè)計得很巧妙:


視頻分發(fā)能力對比

和傳統(tǒng)的視頻詳情頁對比猜惋,傳統(tǒng)的視頻詳情頁往往在頁面下部設(shè)計視頻列表承載分發(fā)功能丸氛。

傳統(tǒng)視頻詳情頁的推薦列表的展示效率有限,要展示全部信息著摔,展示3條已經(jīng)占用大量空間缓窜。推薦視頻列表和該頁面的其他功能爭搶空間,導致頁面越做越長谍咆,用戶不容易發(fā)現(xiàn)推薦區(qū)域禾锤,功能之間互相搶流量。無論展示幾條推薦摹察,用戶只能點擊一次視頻恩掷,播放視頻數(shù):展示視頻數(shù)遠小于1。

可滑動的列表用戶滑動只需要滑動即轉(zhuǎn)到另外一個視頻供嚎,跳轉(zhuǎn)到新視頻的成本比較小黄娘,比較符合用戶連續(xù)瀏覽的習慣。用戶的發(fā)現(xiàn)新視頻--瀏覽行為合二為一克滴,播放視頻數(shù):展示視頻數(shù)=1逼争。雖然沒有具體數(shù)據(jù)支持,這種滑動的分發(fā)方式分發(fā)效率一定更高劝赔。

但是這種頁面也有缺點誓焦,由于沉浸模式的存在,以及滑動的過程中盡可能不要被其他操作打斷望忆,這種設(shè)計中評論等操作的使用頻度一定會低于常規(guī)的設(shè)計罩阵。

但是微博這個頁面并非視頻類型消息的唯一入口,很多用戶會從微博動態(tài)列表瀏覽視頻启摄,在微博動態(tài)列表進行轉(zhuǎn)評贊等操作明顯容易的多稿壁。

動態(tài)列表承載將用戶關(guān)注的內(nèi)容推送給用戶,用戶對該內(nèi)容進行轉(zhuǎn)評贊等操作歉备,增加微博的互動度傅是。

視頻列表承載將更多用戶可能感興趣的視頻推送給用戶,用戶瀏覽更多視頻蕾羊,進而關(guān)注新的博主喧笔,增加微博內(nèi)容的擴散度。


2.3 全屏視頻頁


全屏視頻頁

全屏頁的設(shè)計是為了承載視頻播放的全屏訴求龟再,視頻列表的設(shè)計上书闸,很多交互會與用戶習慣的全屏觀看視頻時的交互沖突,所以視頻全屏的功能不能由視頻列表頁承擔利凑。

有一些產(chǎn)品會在全屏播放頁面增加滑動切換視頻的功能浆劲,結(jié)果就是屏幕左側(cè)滑動調(diào)節(jié)亮度嫌术,屏幕右側(cè)滑動調(diào)節(jié)音量,屏幕底部滑動調(diào)節(jié)進度牌借,屏幕中間滑動切換視頻度气,甚至還有長按屏幕、雙擊屏幕彈出視頻列表等復雜的交互膨报,使用起來頗為不便磷籍。

設(shè)計上比較中規(guī)中矩,故不進行詳細分析现柠。



3.抖音

抖音類產(chǎn)品的設(shè)計均與微博視頻列表的思路類似院领,滑動即切換,自動播放視頻晒旅。


抖音視頻列表

抖音能采用這種設(shè)計是與抖音的視頻類型分不開的栅盲。

(1)抖音幾乎全是手機錄制視頻,絕大多數(shù)為豎屏废恋,分辨率基本全為手機分辨率,直接使用手機全屏為播放框即可

(2)抖音是短視頻扒寄,沒有調(diào)整視頻進度和屏幕亮度等需求

但是這種設(shè)計帶來的弊端也是顯而易見鱼鼓,這種設(shè)計會導致評論數(shù)較低,比如截圖该编,34w的贊數(shù)只有幾千評論迄本。如果將評論內(nèi)容外放,在視頻頁設(shè)置直接可評論的功能入口课竣,評贊比應該會更高嘉赎。抖音這種設(shè)計自有他們?nèi)∩岬脑颉?/p>


4.秒拍和快手


秒拍和快手對比

將秒拍和快手對比是因為二者的設(shè)計思路相仿,視頻列表頁均采用圖片展示于樟,羅列展示feed流公条。

但是二者還是有差別,也與本身的視頻特點相關(guān):

快手雙列展示迂曲,期望同一頁盡量展示相對多的視頻靶橱。快手的視頻尺寸不一致路捧,單列同屏展示的數(shù)量非常少关霸。沒有視頻描述,截圖即內(nèi)容杰扫。適合UGC內(nèi)容队寇。

秒拍單列展示,期望展示盡可能多的視頻相關(guān)內(nèi)容章姓。秒拍的視頻尺寸相對一致佳遣,橫屏視頻在單列同屏展示的數(shù)量比較多炭序,如果雙屏展示的話,橫屏視頻的縮略圖太小苍日,容易看不清惭聂。秒拍有視頻描述,且去掉視頻描述時很難從截圖推斷視頻內(nèi)容相恃。適合PGC內(nèi)容辜纲。

但是秒拍這種展示方式也帶來了弊端,視頻截圖列表模糊不清拦耐,瀏覽的體驗很差耕腾。


暫時列舉了以上四種視頻列表的設(shè)計方式,不對好壞優(yōu)劣進行評價杀糯,每個產(chǎn)品都有自己的取舍道理扫俺。但是通過分析不同設(shè)計的側(cè)重點、推測設(shè)計動機固翰,能對自己進行功能設(shè)計時有所裨益狼纬。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市骂际,隨后出現(xiàn)的幾起案子疗琉,更是在濱河造成了極大的恐慌,老刑警劉巖歉铝,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盈简,死亡現(xiàn)場離奇詭異,居然都是意外死亡太示,警方通過查閱死者的電腦和手機柠贤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來类缤,“玉大人臼勉,你說我怎么就攤上這事⊙椒牵” “怎么了坚俗?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岸裙。 經(jīng)常有香客問我猖败,道長,這世上最難降的妖魔是什么降允? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任恩闻,我火速辦了婚禮,結(jié)果婚禮上剧董,老公的妹妹穿的比我還像新娘幢尚。我一直安慰自己破停,他們只是感情好,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布尉剩。 她就那樣靜靜地躺著真慢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪理茎。 梳的紋絲不亂的頭發(fā)上黑界,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天,我揣著相機與錄音皂林,去河邊找鬼朗鸠。 笑死,一個胖子當著我的面吹牛础倍,可吹牛的內(nèi)容都是我干的烛占。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼沟启,長吁一口氣:“原來是場噩夢啊……” “哼忆家!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起美浦,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤弦赖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后浦辨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡沼沈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年流酬,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片列另。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡芽腾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出页衙,到底是詐尸還是另有隱情摊滔,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布店乐,位于F島的核電站艰躺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏眨八。R本人自食惡果不足惜腺兴,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望廉侧。 院中可真熱鬧页响,春花似錦篓足、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至没陡,卻和暖如春涩哟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背诗鸭。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工染簇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人强岸。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓锻弓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蝌箍。 傳聞我的和親對象是個殘疾皇子青灼,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容