从设计师的角度分析主流视频网站

主要针对爱奇艺、优酷、腾讯视频的网页版首页部分进行分析

希望通过竞品分析发现同类产品的功能亮点,发现其传递品牌文化和产品理念的方式

研究对象:腾讯视频、爱奇艺、优酷网页版首页
研究内容:

  • 功能模块导航
  • 版块布局
  • 互动体验
  • 设计风格
  • 界面架构

用户人群画像:

主流视频网站近期百度指数

通过百度指数可以发现视频类产品用户主要分布的南方地区,中年男性居多

这些元素在设计上可以借鉴的是:
1.网站的文字、图片可以适当偏大些
2.页面结构更加清晰
3.可以推出卫视同步模块,吸引部分通过电视端播放吸引过来的中老年用户

焦点图部分对比

(圆形标注表示差异点,矩形表示相同部分)

腾讯视频焦点图适配对比

焦点图:
1.“大家都在看”模块共展示16张图
2.“重磅推荐”模块共展示9张图
3.焦点图文案部分始终靠右侧
文案:
1.文案简短
2.选中状态横向展示出描述文案
分类:
1.大屏时显示分类图标、应用中心入口
2.展示更多的热门分类
3.顶部显示VIP影院入口

可借鉴的地方:
1.适配规律
2.频道分类清晰明确
3.焦点图文案精简便于快速理解
4.大屏时出现主要频道分类的icon,页面更加精致

爱奇艺 焦点图.png

焦点图:
1.共10张
2.大屏时背景渐变为黑色
文案:
1.主副标题在一行显示,文案过长
2.选中状态变成两行
分类:
1.小屏时显示为三行,大屏时变成两行
顶部按钮:
小屏时只显示图标,大屏时显示图标跟文案

可借鉴的地方:
1.小屏幕时,只显示图标,大屏时显示图标跟文案

优酷 焦点图.png

焦点图:
1.共7张
2.选中状态显示两行

可借鉴的地方:
1.大屏时显示更多的图标入口
2.适配规则

自适应效果对比

优酷
最小宽度:1292px
最大宽度:1830px
焦点图:左右和上面加蒙版
导航:增加减少内容、入口
缩略图:大小变化、增加内容
广告:通栏广告宽度变化,多广告位大小变化

腾讯视频
最小宽度:1280px
最大宽度:1790px
焦点图:左右和上面加蒙版
导航:增加较少内容,小屏时不限时分类图标
缩略图:大小变化、增加内容
广告:通栏广告右侧增加广告位,且有比例变化

爱奇艺
最小宽度:1055px
最大宽度:1765px
焦点图:左右加蒙版
导航:内容不增减,小屏时三行展示,宽屏时两行
缩略图:大小变化、增加内容
广告:通栏广告宽度变化、多广告位大小变化,规则同缩略图

头部导航栏的功能变化:

3个网站的大致相同,均为LOGO、搜索、个人中心入口及功能、下载客户端等功能。

顶部导航栏对比.png

腾讯视频
1.显示主要分类
2.显示全部分类入口
3.搜索框内有关键词,有“排行榜热搜”入口,且图标明显
4.适配时分类变多
5.适配时增加VIP日寇欧
6.点亮“精选”,首页即精选,突出首页的内容
爱奇艺
1.显示主要分类
2.显示全部分类入口
3.搜索框内有关键词,有“排行榜热搜”入口,入口图标悬浮点亮
4.适配时分类变多
5.适配时增加图标底部文案
优酷
1.显示主要分类
2.显示全部分类入口欧
3.搜索框内无关键词
4.适配时分类变多
5.适配时增加 订阅入口

可借鉴的地方
1.首页即精选,跟其他分类区别,有选中状态
2.搜索框内有默认关键词,增加明显的“排行榜”入口

频道入口对比

腾讯、优酷、爱奇艺均做了分类,选择时更清晰,腾讯视频在一级频道后增加了二级标签,层级更加清晰。
且3个网站在频道入口鼠标悬浮状态时会出现频道下的热门推荐,爱奇艺用了图片+标题的展示形式,但只能展示4个内容,腾讯和优酷用标题展示,可展示较多信息。

顶部分类展开.png

顶部浮层对比

顶部浮层.png

可借鉴的地方:
1.未登入也显示部分播放记录,相比单一的空白页更清楚明白
2.显示产生播放记录的设备,移动端/电脑端,便于查找播放记录

主要模块对比

腾讯视频首页特色模块.png

腾讯视频首页特色模块

可借鉴的地方:
1.标出可翻页的页数,更直观显示内容多少
2.将主推的自媒体账号放到分类标题处
3.将自媒体头像提取出来
4.将分类的排行榜外置,结构清晰

爱奇艺首页特色模块.png

爱奇艺视频首页特色模块

可借鉴的地方:
1.第一个视频位可翻页,可展示更多信息

腾讯视频首页特色模块.png

优酷首页特色模块

可借鉴的地方:
1.优酷的分类标签部分更注重互动的友好性,鼠标滑过自动切换,在一个页面即时互动
2.音乐分类模块对应有音乐排行榜入口
3.分类标题上同时有两个入口

卡片样式对比

腾讯视频 卡片样式.png

腾讯视频
卡片样式多样化,多视频可以快速预览(9张图),影片介绍有更多分类:金马奖、豆瓣高分等标签,综艺相关短视频还会出现内容海报(通过短视频带动长视频)

可借鉴的地方
1.短视频部分可以同时显示视频内容跟海报
2.悬浮后直接播放视频
3.视频分类标签比较丰富

爱奇艺 卡片样式.png

爱奇艺
卡片样式上有更多可以交互的部分:可以顶、踩来进行交互,操作简单容易,在用户使用的时候看到曾经看过但是不好看的片子可以顺手踩一下
在卡片上遇到喜欢的剧集可以直接收藏,喜欢的自媒体账号也可以直接关注
用户有更多互动的机会,感觉参与度、自主权更高一些

可借鉴的地方:
1.突出收藏按钮
2.自媒体部分可以直接关注
3.顶、踩的操作简单,可以促进用户进行互动,也更好了解用户的喜好,同时促进用户主动登录

优酷 卡片样式.png

优酷

可借鉴的地方:
1.优酷视频的优势就是,可以直接切换tab展示,快速浏览

排行榜对比

排行榜对比.png

可借鉴的地方:
1.可加入对应的图片

右侧快捷按钮对比

右侧功能栏:功能方便,不同的产品,有不同的功能,均以意见反馈和回到顶部为主。


右侧快捷键.png

页面底部模块对比

网页底部模块.png

爱奇艺的页面底部模块,让用户感到被挽留

可借鉴的地方:
1.结构清晰的显示 不同客户端的下载入口
2.最后一个模块可以显示 为你推荐
3.有更多精彩入口引导

网站宣传语对比

网站宣传语.png

腾讯视频-中国领先的在线视频媒体平台,海量高清视频在线观看
爱奇艺-在线视频网站-海量正版高清视频在线观看
优酷-这世界很酷
哔哩哔哩( ゜- ゜)つロ 干杯~bilibili
芒果TV-看见好时光
搜狐视频-中国领先的综合视频网站,正版高清视频在线观看,原创视频上传,全网视频搜索

对比可发现,优酷的宣传语是带声音的,而且朗朗上口,很容易给人留下印象
哔哩哔哩的宣传语很适合产品的定位,让用户有归宿感

可借鉴的地方:
1.宣传语简短、容易记忆、体现品牌定位

页面布局对比

尝试通过页面布局、内容分布,反推产品的定位
腾讯:以“不负好时光”为产品slogan,主打原创短视频、自制综艺
爱奇艺:以“悦享品质”为产品slogan,主打娱乐、综艺、网剧
优酷:没有slogan,主打电视剧、网剧

模块对比.png

腾讯视频:结构清晰,不同模块类型穿插,样式不单一
爱奇艺:图片间距近,信息量巨大,图片颜色多,相对艳丽一些
优酷:图片比较大,样式相对单一,但是能看出品牌色-蓝色、红色更为突出

可借鉴的地方:
1.结构清晰
2.模块多样化
3.每个模块有自己的色系,类似腾讯的综艺模块、爱奇艺的儿童模块、优酷的娱乐模块

视频网站图片很重要,如果视频截图选择的更好,视觉效果会有更大的提升
下面是同一部剧集不同网站的对比图

头图效果对比.png

头图效果对比2.png

同一个片子,每家的图片色系都不同
腾讯更有质感、爱奇艺饱和度高,偏紫色、优酷偏冷色(蓝色),都在偏向自家的主题色
对比可以看出,优酷的图片更清晰、饱和度更高

新的可能性

目前主流的视频网站在设计上逐渐趋同,如果可以把移动端的沉浸式+瀑布流的概念引入到网页端,可能会带来更好的观影体验。
于是有了以下一些想法:
1.定制首屏,只推荐我感兴趣的内容,例如新闻、电影、动漫之类,可以飘着弹幕
2.只显示图片,满屏的图片信息可供选择(瀑布流显示信息,一屏显示,可以不断刷新)

概念稿 01.png

概念稿 02.png

概念稿 03.png

88

你可能感兴趣的:(从设计师的角度分析主流视频网站)