<span id="ubbei"><video id="ubbei"></video></span>
<span id="ubbei"></span>
<span id="ubbei"><video id="ubbei"></video></span>
<strike id="ubbei"><video id="ubbei"></video></strike><th id="ubbei"></th>
<span id="ubbei"><video id="ubbei"></video></span><span id="ubbei"></span><span id="ubbei"><video id="ubbei"></video></span>
<th id="ubbei"><video id="ubbei"><span id="ubbei"></span></video></th>
<span id="ubbei"></span>
<th id="ubbei"><video id="ubbei"><span id="ubbei"></span></video></th><strike id="ubbei"><dl id="ubbei"><ruby id="ubbei"></ruby></dl></strike>
<span id="ubbei"></span>
<th id="ubbei"></th>
<span id="ubbei"></span>
<th id="ubbei"></th>
<span id="ubbei"></span>
<span id="ubbei"></span>
<span id="ubbei"></span>
<span id="ubbei"><video id="ubbei"><strike id="ubbei"></strike></video></span>
<strike id="ubbei"><video id="ubbei"></video></strike>

  • <output id="ubbei"></output>
          1. <li id="ubbei"><s id="ubbei"><strong id="ubbei"></strong></s></li>
          2. 从设计师的角度分析,主流视频网站有何功能亮点?

            本文主要针对爱奇艺、优酷、腾讯视频的网页版首页部分进行分析,希望通过竞品分析发现同类产品的功能亮点,发现其传递品牌文化和产品理念的方式。

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

            研究内容:

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

            用户人群画像:

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

            通过百度指数可以发现视频类产品用户主要分布的南方地区,中年?#34892;?#23621;多

            这些元素在设计上可以借鉴的是:

            1. 网站的文字、?#35745;?#21487;以适当偏大些;
            2. 页面结构更加清晰;
            3. 可以推出卫视同步模块,吸引部分通过电视端播放吸引过来的中老年用户。

            焦点图部分对比

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

            (1)腾讯视频

            腾讯视频焦点图适配对比

            焦点图:

            1. “大家都在看”模块共展示16张图
            2. “重磅推荐”模块共展示9张图
            3. 焦点图文案部分始终靠右侧

            文案:

            1. 文案简短
            2. 选中状态横向展示出描述文案

            分类:

            1. 大屏时显示分类图标、应用?#34892;?#20837;口
            2. 展示更多的热门分类
            3. 顶部显示VIP影院入口

            可借鉴的地方:

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

            (2)爱奇艺视频

            爱奇艺 焦点图.png

            焦点图:

            1. 共10张
            2. 大屏时背景渐变为黑色

            文案:

            1. 主副标题在一行显示,文案过长;
            2. 选中状态变成两行。

            分类:小屏时显示为三行,大屏时变成两行。

            顶部按钮:小屏时只显示图标,大屏时显示图标跟文案。

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

            (3)优酷视频

            优酷 焦点图.png

            焦点图:共7张,选中状态显示两行。

            可借鉴的地方:

            1. 大屏时显示更多的图标入口;
            2. 适配规则。

            自?#35270;?#25928;果对比

            优酷:

            最小宽度:1292px

            最大宽度:1830px

            焦点图:左右和上面?#29992;?#29256;

            导航:增加减少内容、入口

            缩略图:大小变化、增加内容

            广告:通栏广告宽度变化,多广告位大小变化

            腾讯视频:

            最小宽度:1280px

            最大宽度:1790px

            焦点图:左右和上面?#29992;?#29256;

            导航:增加较少内容,小屏时不限时分类图标

            缩略图:大小变化、增加内容

            广告:通栏广告右侧增加广告位,且有比例变化

            爱奇艺:

            最小宽度:1055px

            最大宽度:1765px

            焦点图:左右?#29992;?#29256;

            导航:内容不增减,小屏时三行展示,宽屏时两行

            缩略图:大小变化、增加内容

            广告:通栏广告宽度变化、多广告位大小变化,规则同缩略图

            头部导航栏的功能变化

            3个网站的大致相同,均为LOGO、搜索、个人?#34892;?#20837;口及功能、?#30053;?#23458;户端等功能。

            顶部导航栏对比.png

            腾讯视频:

            1. 显示主要分类;
            2. 显示全部分类入口;
            3. 搜索框内有关键词,有“排行榜?#20154;选比?#21475;,且图标明显;
            4. 适配时分类变多;
            5. 适配时增加VIP日寇欧;
            6. 点亮“精选?#20445;?#39318;页即精选,突出首页的内容。

            爱奇艺:

            1. 显示主要分类;
            2. 显示全部分类入口;
            3. 搜索框内有关键词,有“排行榜?#20154;选比?#21475;,入口图标悬浮点亮;
            4. 适配时分类变多;
            5. 适配时增加图标底部文案。

            优酷:

            1. 显示主要分类
            2. 显示全部分类入口欧
            3. 搜索框内无关键词
            4. 适配时分类变多
            5. 适配时增加,订阅入口

            可借鉴的地方:

            1. 首页即精选,跟其他分类区别,有选中状态;
            2. 搜索框内有默认关键词,增?#29992;?#26174;的“排行榜?#27604;?#21475;。

            频道入口对比

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

            顶部分类展开.png

            顶部浮层对比

            顶部浮层.png

            可借鉴的地方:

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

            主要模块对比

            腾讯视频首?#31243;?#33394;模块.png

            腾讯视频首?#31243;?#33394;模块

            可借鉴的地方:

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

            爱奇艺首?#31243;?#33394;模块.png

            爱奇艺视频首?#31243;?#33394;模块:

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

            优酷视频首?#31243;?#33394;模块.png

            优酷首?#31243;?#33394;模块:

            可借鉴的地方:

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

            卡片样式对比

            腾讯视频 卡片样式.png

            (1)腾讯视频

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

            可借鉴的地方:

            1. 短视频部分可以同时显示视?#30340;?#23481;跟海报;
            2. 悬浮后直接播放视频;
            3. 视频分类标签比较丰富。

            爱奇艺 卡片样式.png

            (2)爱奇艺

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

            可借鉴的地方:

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

            优酷 卡片样式.png

            (3)优酷

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

            排行榜对比

            排行榜对比.png

            可借鉴的地方:可加入对应的?#35745;?

            右侧快捷按钮对比

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

            右侧快捷键.png

            页面底部模块对比

            网页底部模块.png

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

            可借鉴的地方:

            1. 结构清晰的显示 不同客户端的?#30053;?#20837;口
            2. 最后一个模块可以显示 为你推荐
            3. 有更多精彩入口引导

            网站宣传语对比

            网站宣传语.png

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

            对比可发现,优酷的宣传语是带声音的,而且?#19990;?#19978;口,很容易给人留下印象;哔哩哔哩的宣传语很适合产品的定位,让用户有归宿?#23567;?/p>

            可借鉴的地方:宣传语简短、容易?#19988;洹?#20307;现品牌定位

            页面布局对比

            尝试通过页面布局、内容分布,反推产品的定位。

            • 腾讯:以“不负好时光”为产品slogan,主打原创短视频、自制综艺;
            • 爱奇艺:以“悦享?#20998;省?#20026;产品slogan,主打娱乐、综艺、网剧;
            • 优酷?#22909;?#26377;slogan,主打电视剧、网剧。

            模块对比.png

            腾讯视频?#33322;?#26500;清晰,不同模块类型穿插,样式不单一

            爱奇艺?#21644;计?#38388;距近,信息量巨大,?#35745;?#39068;色多,相对艳丽一些

            优酷?#21644;计?#27604;较大,样式相对单一,但是能看出品牌色-蓝色、红色更为突出

            可借鉴的地方:

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

            视频网站?#35745;?#24456;重要,如果视频截图选择的更好,视觉效果会有更大的提升。

            下面是同一部剧集不同网站的对比图:

            头图效果对比.png

            头图效果对比2.png

            同一个片子,每家的?#35745;?#33394;系都不同 腾讯更有质?#23567;?#29233;奇艺饱和度高,偏紫色、优酷偏冷色(蓝色),都在偏向自家的主题色。

            对比可以看出,优酷的?#35745;?#26356;清晰、饱和度更高。

            新的可能性

            目前主流的视频网站在设计?#29616;?#28176;趋同,如果可以把移动端的?#20004;?#24335;+瀑布流的概念引入到网页端,可能会带来更好的观影体验。

            于是有了以下一些想法:

            1. 定制首屏,只推荐我?#34892;?#36259;的内容,例如:新闻、电影、动漫之类,可以飘着弹幕;
            2. 只显示?#35745;?#28385;屏的?#35745;?#20449;息可供选择(瀑布流显示信息,一屏显示,可以不断刷新)。

            概念稿 01.png

            概念稿 02.png

            概念稿 03.png

            这次只是初步的分析,都是浮于表面现象,接下来会针对局部的功能进行更深入的分析,敬请期待~

            本文由 @赵?#20999;?#29233;冒险 原创发布于人人都是产品经理。未经许可,禁止转载

            题图来自Unsplash,基于CC0协议

            我来评几句
            登录后评论

            已发表评论数()

            相关站点

            热门文章
            陕西高频十一选五 老时时彩360开奖结果 陕西十一选五专家推推荐 极速飞艇计划 甘肃快3今天出号预测 快乐时时彩是哪里的 多乐彩走势图解 快乐双彩是怎么算的 买贵州快3 168澳洲幸运5开奖结果 搜狐彩票注册 3d组三组六走势图 张继伟三肖中特 广东36选7开奖时间 六会彩码报是真的吗 中国福彩3d开奖结果