中视频网站版式特色研究报告 -...

中国视频网站版式特色研究报告2019年

2©2019.6 iResearch Inc. www.iresearch.com.cn

摘要

来源：艾瑞咨询研究院自主研究绘制。

哔哩哔哩在网站首页、频道页、播放页和番剧更新页各方面的回忆匹配准确性均高于其他视频网站，显示出了明显的特点；

网站配色、个人兴趣内容推荐、弹幕和番剧更新页成为哔哩哔哩最具有自身特色的版式风格。

视频网站版式设计时必须要根据内容的需要，将图片、视频和文字组成一个有机有序的整体，充分考虑应用场景，使其成为与浏览者的沟通手段，优秀的版式设计对用户起到正面助推作用，帮助网站突出品牌形象；

排行榜/热门推荐成为视频网站首页版式最深记忆点，用户对频道页中的热门搜索区和视频推荐区记忆最深刻，同时视频用户认为播放页各方面版式设计都很重要，社交和内容设计需兼顾；

84.7%的视频网站用户认为视频网站需要有独特的版式设计，并且89.4%的用户会因为好的网站版式而对其增加好感；

SMS

3

研究方法和研究内容 1

中国视频网站版式设计综述 2

主要视频网站版式分析 3

视频网站版式用户评价 4


研究方法《视频网站版式特色研究报告》主要通过桌面研究和在线定量调研两种方法获取报告内容和数据


在线定量调研桌面研究

• 通过对行业公开信息进行整合和

梳理，分析视频网站版式设计的

重要性。

行业公开信息

行业资深专家公开发表的观点

行业出版物

• 对主要视频网站版式信息进行研

究，分析不同的视频网站版式设

计特色与版式呈现逻辑。

• 通过在线定量调研的方式了解用

户对不同视频网站版式设计的偏

好与关注度，说明版式设计对视

频网站的重要性与必要性，并呈

现不同视频网站的版式设计特

色。

• 样本条件：平时喜欢上网访问视

频网站的用户（N=1511，于

2019年6月使用艾瑞iClick调研

数据获得）。


研究内容从网站总体、首页、频道页、番剧更新页、播放页5个方面分析和评价视频网站版式，并重点分析8个视频网站的版式特色


网站总体

频道页

播放页

网站首页

番剧更新页

视频网站版式重点分析页面

重点分析视频网站对象

6






常见网页版式设计有6种，视频网站由于同时包含文字、图片和视频多种元素，因此在网页版式设计上通常将不同设计方

式进行融合或将单一设计方式进行个性化改良。

常见网页版式


左右框架型左右框架型结构，一般导航链接放左边，有时最上面会有一个小的标题或标致，右面是正文

上下框架型上下框架型结构与左右框架性类似，区别仅仅在于是一种上下分为两页的框架

封面型一般出现在网站首页，通过精美的平面设计并结合局部动画效果，之后在网页中放上几个简单的链接或者仅放一个“进入”之类的链接，以提示访问者进入网站下一

级页面

国字型一般最上端是网站logo、banner和导航栏，中间是当前网页的主要内容(通常被分为大小不等的三列，而中间的一列用来放置主体内容)，最下面是网站版权声明等

拐角型与“国”字型结构最上端和最下端结构布局是一样的。唯一区别体现在中间样式，拐角型中间通常被分为大小不等的两列，其中较宽的一列用来放置主体内容

标题正文型一般最上面是当前网页的标题或类型的对象(如修饰性图像)，下面是当前网页的正文

常见的6种网页版式设计


网站版式设计规范


画板尺寸需要尽可能配适用户屏

幕分辨率

图片规范常用4（宽）：3

（高）、16（宽）：9（高）、1:1等比例

文字规范文字大小不小于

12px，文字渲染与系统和浏览器有关

表单通过 CSS 给系统设计

的表单增加样式，包括颜色、大小、内外

边距

适配Retina屏幕图片的选取需要更大地

清晰度

栅格栅格的大小取决于内容

排版的疏密程度要求

按钮图标风格随流行变迁，设计时要同时设计好鼠标悬

停、按下状态

网站版式基本设计规范

网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计相对灵活，最后会呈现出

多种版式风格。但在具体设计时，依然有些基本设计规范，并且这些规范基本适用于所有类型的网站。


视频网站版式设计原则视频网站版式设计需要遵循三个原则和技巧


直观性易读性美观性

所谓直观，指的是在打开的瞬间，用户能够明白这些内容和画面想要传达什么信息。这是视觉心理的问题，版式需要舒朗而明确，脉络清晰。视频网站实现直观性的技巧通常是图文互补，许多视频都有封面，并附有视频亮点文字描述。

视觉引导，让整个排版布局有一个相对清晰的阅读顺序和视觉线索，用户不会因为模棱两可的排版而选择错误的阅读顺序。视线流能够让用户下意识、按照顺序来获取信息，更加容易理解其中的内容。

为了实现美观性，需要考虑设计风格、配色和页面构成等要素。通常最能够引人注意的不是文字，而是视觉效果，而视频网站由于图片和视频为主导，所以在视觉效果上更容易抓到访问者的眼球。美观性需要留意两个层面的技巧，一是留白的使用，二是结合色彩心理学。

视频网站版式设计的原则和技巧


视频网站版式设计需考虑的因素


要符合人的视觉习惯比如暗色播放背景不容易干扰用户观看、视频播放器必须足够大

要保证有效的传达信息网站的元素设计上更能体现个性，文案的设计与视频内容契合，并能吸引用户点击观看

突出主要信息网站主推和独家内容的要更容易被访问者看到，导航等工具能起到好的指引作用

保持视觉引导的流畅感图文、视频的布局符合人们的浏览习惯，瀑布式、分栏式等分类区割让访问者更容易找到想看的内容

视频网站版式设计考虑因素

视频网站版式设计作为一种特殊的版面，既有文字，又有图片和视频，内容繁多、复杂，设计时必须要根据内容的需要，

将图片、视频和文字按照一定的次序进行合理的编排和布局，使他们组成一个有机有序的整体，充分考虑应用场景，使其

成为与浏览者的沟通手段，而不仅仅是起到装饰的作用。


视频网站版式组成


由四个主要部分构成，主体内容和点缀元素更容易凸显网站风格和个性

主体

视觉焦点，主导着整个设计，视频网站主体通常显示为当前主推的内容主角图或简单视频，一般表现为首页整幅大图或出现在视觉左侧，主体是整个版面最吸引人的部分，相当于主角的作用。

文案

对主体的辅助说明或引导，起到配角的作用。视频网站的文案包括导航、视频内容简短描述等，通常是吸引和引导访问者进行下一步动作，直接点击视频或跳转下一个子网页。

点缀元素

好的点缀元素能够渲染气氛，大部分的点缀元素遵循三角形原则。视频网站点缀元素通常体现在头部Banner或视频封面上。此外，以哔哩哔哩为例，其专属站娘22&33娘和小电视等商标衍生的动漫形象已经作为重要点缀元素，受到网站用户的喜爱，也同时凸显了网站二次元和年轻的个性特征。

背景

可分为纯色/彩色肌理/图片/图形等。视频网站首页通常采用纯色背景，频道页可能根据各自内容不同采取不同背景设计策略，播放页也以纯色背景为主，但也会出现视频播放器与评论区采用不同背景的情况。

视频网站版式主要构成


版式设计对视频网站的重要作用


优秀的版式设计对用户起到正面助推作用，帮助网站实现流量粘性提升和品牌形象宣传

合适的版式设计会很好的符合访问者使用习惯，从而使用户产生访问依赖性，有助于提升用户对网站的好感度，并进一步提升网站粘性

不同的版式设计风格体现了网站的运营个性和核心用户个性，版式设计个性越鲜明，也越容易吸引特定用户

好的版式设计能起到很强的指引作用，有利于将用户导向感兴趣的内容，或提升网站主推内容的到达率

提升访问者好感度

良性引导用户访问行为

凸显网站品牌个性

版式设计对视频网站的作用

13






首页版式（1/3）


网站Logo

网站主推内容

网站Banner

分区导航

分区导航

搜索栏和视频排行

版区内容动态

版区内容排行榜

以哔哩哔哩为代表的视频网站，第一屏的设计更突出网站属性，强调Banner和Logo，也更具有二次元风格，配色更活泼

缤纷。导航分类更偏重娱乐性，动画、番剧、直播通常位于分区前列。而在第一屏以下更突出内容，按照版区分类呈现，

每个版区显示2行动态内容，每行视频数量通常为4-5个（根据显示器分辨率配适），最右边为版区视频排行。这类版式设

计兼顾了网站风格属性和内容，明显区别于以内容为重点的视频网站，更容易受到年轻人的关注和喜爱。




网站Logo

主推内容

分区导航

次级主推内容

搜索框

第二类首页版式的特点是突出网站首播、独播或自制的内容，以整幅海报的形式出现，其他推荐内容则以侧边栏出现。分

区导航通常出现在首页第一屏的最下方，并且内容分类多样，除了娱乐类内容，还有军事、纪录片、健康、教育等版区。

这类网站通常不过分突出自己的Logo，更多依靠内容来实现网站流量和粘性的提升，目前爱奇艺、优酷、腾讯视频、芒果

TV、PP视频等均采用这样的首页版式。




网站Logo

搜索框

版区导航

主推内容

第三类首页版式的特点是呈现尽可能多的内容，主推内容适当缩小但依然在视觉左边最容易看到的位置，其他推荐内容则

更多以文字形式展现。版区导航一般位于主推内容上方，分区相对较少但兼顾娱乐和生活内容。这类版式以搜狐视频为典

型代表。


频道页版式（1/2）


网站Banner

网站Logo

频道主推内容

版区导航

热门排行子频道最新内容

子频道最新内容近期热门内容

广告

第一类频道页版式和首页版式风格一致，继承首页Banner、Logo、版区导航和配色。频道页主推内容位置也与首页相

同，在用户视觉的左上角。频道内容推荐更讲究实时性和热门的特点，子频道主要呈现最新投稿和上传的作品，热门内容

则推荐用户点击和评论弹幕排名靠前作品。这类网站通常拥有数量较多的UGC/PUGC作品，呈现作品的目的是鼓励创作和

推荐优秀作品，以哔哩哔哩为主要代表。


频道页版式（2/2）


频道主推内容

网站Logo 搜索栏

频道次级主推内容

子频道推荐内容子频道次级推荐内容

频道分类导航热门关键字

第二类频道页版式更注重独家、自制和精品内容的推荐。频道主推内容以横幅Banner形式展现，Banner右边通常为频道

次级主推内容。频道页导航通常显示该频道中的内容分类，而下屏一般成列不同子频道内容。目前大多主流视频网站的频

道页均是这样的版式设计，例如爱奇艺、优酷、腾讯视频、芒果TV、PP视频等。


番剧更新页版式（1/2）


更新时间点

当日更新内容

后一日更新内容

上一日更新内容

第一种番剧更新页版式以哔哩哔哩为代表，更详细的显示更新的时间节点，并且由于番剧数量多，排列上以宫格形式呈

现，并同时显示前后两日的更新内容，目的是方便用户更好的追番和补番。目前该版式设计尚不多见。


番剧更新页版式（2/2）


番剧标题和更新时间

一周日历

第二种番剧更新页是目前最常见的版式表现形式，Acfun、爱奇艺、腾讯视频、优酷、芒果TV均采用类似的设计。这类版

式主要体现为番剧频道页显示当天更新目录，但不显示其他每天的番剧内容，用户需通过点击具体某天来查看更新情况。

视频封面格式也有普通视频封面大小一致，以横向分布，这样的排列方式更适用于番剧数量不多或番剧更新不频繁的平

台。


播放页版式（1/3）


播放器弹幕列表/视频推荐

播放选集

用户评分

视频评论相关推荐

第一种播放页版式更强调社交属性，通常上半屏为视频播放器和弹幕列表/视频推荐，而选集按钮则位于上半屏的最下端，

以横向划屏呈现。下半屏为用户评分和视频评论。这样的播放页版式最大程度上体现了用户对视频的评论和想法，强调社

交的视频网站会倾向使用这样的版式设计，哔哩哔哩主要采用这样的设计方式。




播放器播放选集

排行榜

相关推荐

视频评论

第二种播放页版式依然以内容为主打，上半屏为播放器+视频选集，而下半屏会有更多的内容推荐，包括视频排行榜和用

户个人兴趣视频推荐，多数以内容为卖点和优势的网站会偏爱使用这样的版式设计，例如爱奇艺、腾讯视频、优酷、芒果

TV等。


第三种播放页版式会同时兼顾内容与用户社交。上半屏为视频播放器与视频选集，下半屏的2/3面积为视频推荐，1/3为视

频评论，采用这一版式设计的典型网站是搜狐视频。



播放器播放选集

视频评论视频推荐

24





25©2019.6 iResearch Inc. www.iresearch.com.cn ©2019.6 iResearch Inc. www.iresearch.com.cn

视频网站体验评价观看流畅度和视频内容丰富性最影响视频网站体验超过60%的视频网站用户认为观看流畅度和视频内容丰富性是他们最重视的体验因素。从具体视频网站体验满意度来分

析，哔哩哔哩在视频内容丰富性、操作便利性、内容更新及时性、版式设计美观和版区规划合理性等方面满意度较高。

样本：所有被访者N=1511；于2019年6月通过iUserSurvey调研获得。样本：最常访问哔哩哔哩的被访者N=135；于2019年6月通过iUserSurvey调研获得。

28.7%

29.8%

33.4%

39.9%

44.5%

45.9%

46.7%

58.0%

63.9%

65.5%

版区规划合理性

社交互动体验

版式设计美观度

内容推荐精准性

搜索结果精准性

网页跳转和反应速度

操作便利性

内容更新及时性

视频内容丰富性

观看流畅度

2019年中国视频网站体验评估重视因素 2019年哔哩哔哩体验满意度TOP3因素

视频内容丰富操作便利91.9%

内容更新及时88.2%

版式设计美观版区规划合理

86.7%


网站首页版式记忆点

样本：所有被访者N=1511；经常访问哔哩哔哩的被访者N=585；于2019年6月通过iUserSurvey调研获得。

排行榜/热门推荐成为视频网站首页版式最深记忆点在视频网站首页版式方面，约3成的用户对排行榜/热门推荐记忆最深刻。相比其他视频网站，哔哩哔哩的首页版式记忆点

有所不同，专属站娘、Banner横幅、配色、Logo和频道导航分区都给访问者留下深刻印象，显著高于行业平均水平。

32.7%

37.8%

30.4%

25.6%

34.4% 34.4%

28.6%

25.1%23.8%

26.5%28.4%

排行榜/热门

推荐

个人兴趣推

荐

视频封面搜索栏网站Logo 配色频道导航分

区

网站图标个人中心指

引

Banner横幅专属站娘

2019年中国视频网站首页版式记忆点

行业平均（%）哔哩哔哩（%）


网站频道页版式记忆点


用户对频道页中的热门搜索区和视频推荐区记忆最深刻在频道页版式设计中，热门搜索区和视频推荐区给访问者的印象最深刻。哔哩哔哩用户对其频道页各方面的版式记忆力度

均更强，尤其是个人兴趣推荐区、视频封面和配色上，显著高于行业平均记忆度。

36.6%34.9%

37.3% 36.2%34.9%

28.6%

热门搜索区视频推荐区个人兴趣推荐区视频封面配色视频搜索筛选栏

2019年中国视频网站频道页版式记忆点



网站播放页版式记忆点


播放页各方面版式设计均较为重要，社交和内容设计需兼顾从行业总体来看，视频用户认为播放页各方面的版式设计都会成为重要记忆点。哔哩哔哩用户对其播放页各方面版式设计

记忆力更强，尤其是视频弹幕和视频评论这些与社交有关的功能设计给用户留下的印象显著高于其他视频网站，此外，个

人兴趣推荐、视频图标、播放按钮、配色和视频缓冲文字说明也是哔哩哔哩播放页的重要特色设计。

40.5%

31.8%

26.5%30.4%

26.0% 26.7% 25.6% 25.8% 25.8% 25.6%27.7%

视频弹幕视频评论相关内容推

荐

个人兴趣推

荐

播放器尺寸播放器功能视频简介视频图标播放按钮配色视频缓冲文

字说明

2019年中国视频网站播放版式记忆点



68.1%

85.1%

87.0%

88.4%

2019年中国视频网站版式设计

重要性评价（TOP2）

版式与功能和内容的匹配，会让我的使用更加便捷

版式让我体会到网站在功能、设计等细节方面的用心

我对网站版式习惯了，就希望网站一直这样

我认为版式是一个网站非常重要的特色

版式设计重要性评价

样本：所有被访者N=1511；于2019年6月通过iUserSurvey调研获得。

版式需体现自身独特性，好的版式有利于提升用户的喜好度


独特必要性评估

有必要84.7%


对网站喜好度的影响

会增加好感度89.4%

84.7%的视频网站用户认为视频网站需要有独特的版式设计，并且89.4%的用户会因为好的网站版式而对其增加好感。超

过85%的用户认同版式与功能和内容的匹配会让自己使用更加便捷，同时也体现了网站在功能、设计等细节方面的用心，

而用户一旦习惯了网站版式会希望网站一直维持同样的设计。


视频网站版式回忆匹配度


视频网站各主要页面的平均回忆匹配准确率不足40%

从视频网站行业整体来看，无论是首页、频道页、播放页和番剧更新页，用户的回忆匹配准确率还不到40%。但值得一提

的是，哔哩哔哩用户最容易在众多视频网站中做出正确匹配，准确率都超过60%。

38.1% 37.3% 36.0%33.5%

60.6% 62.9%65.0%

60.4%

首页频道页播放页番剧更新页

2019年中国视频网站版式设计回忆匹配度



哔哩哔哩版式特色评价

样本：经常访问哔哩哔哩的被访者N=585，经常访问哔哩哔哩并且经常看动画/番剧的被访者N=321；于2019年6月通过iUserSurvey调研获得。

配色、兴趣推荐、弹幕和番剧更新页是最具特色的版式风格

首页频道页播放页番剧更新页

网站Logo46.7%

配色53.7%

弹幕45.3%

番剧窗格式排列方式49.5%

配色43.4%

个人兴趣推荐44.6%

配色36.4%

番剧更新集数提示47.4%

Banner横幅36.6%

热门搜索40.9%

个人兴趣推荐33.5%

今日更新时间提示46.1%

2019年哔哩哔哩网站版式设计区别特色

哔哩哔哩用户认为哔哩哔哩的首页在网站Logo、配色和Banner横幅图片方面能够明显区别其他视频网站。在频道页上配

色、个人兴趣内容推荐和热门搜素是其主要特色。播放页的最大特色是弹幕，其次是配色和个人兴趣推荐。番剧更新页的

罗列方式和信息提示对用户来说非常重要且具有识别性。

32©2019.6 iResearch Inc. www.iresearch.com.cn ©2019.6 iResearch Inc. www.iresearch.com.cn

哔哩哔哩版式满意度评价哔哩哔哩用户对网站版式总体设计满意度高85.6%的哔哩哔哩用户喜欢目前的网站总体版式设计，各具体板块的满意度也均超过80.0%，其中满意度最高的是视频播

放页。

样本：经常访问哔哩哔哩的被访者N=585；于2019年6月通过iUserSurvey调研获得。样本：经常访问哔哩哔哩的被访者N=585；于2019年6月通过iUserSurvey调研获得。

2019年哔哩哔哩网站版式设计总体

喜好度85.3%

84.8%

84.1%

83.1%

视频播放页网站首页版区频道页番剧更新页

2019年哔哩哔哩网站版式设计具体满意

度评价（TOP2）

喜欢85.6%

33

在艾瑞我们相信数据的力量，专注驱动大数据洞察为企业赋能。

在艾瑞我们提供专业的数据、信息和咨询服务，让您更容易、更快捷的洞察市场、预见未来。

在艾瑞我们重视人才培养，Keep Learning，坚信只有专业的团队，才能更好地为您服务。

在艾瑞我们专注创新和变革，打破行业边界，探索更多可能。

在艾瑞我们秉承汇聚智慧、成就价值理念为您赋能。

400-026-2099

扫描二维码

读懂全行业

海量的数据专业的报告

我们是艾瑞，我们致敬匠心始终坚信“工匠精神，持之以恒”，致力于成为您专属的商业决策智囊。

[email protected]

关于艾瑞

34

版权声明

本报告为艾瑞咨询制作，报告中所有的文字、图片、表格均受有关商标和著作权的法律保护，部分文字和数据采集于公

开信息，所有权为原著者所有。没有经过本公司书面许可，任何组织和个人不得以任何形式复制或传递。任何未经授权

使用本报告的相关商业行为都将违反《中华人民共和国著作权法》和其他法律法规以及有关国际公约的规定。

免责条款

本报告中行业数据及相关市场预测主要为公司研究员采用桌面研究、行业访谈、市场调查及其他研究方法，并且结合艾

瑞监测产品数据，通过艾瑞统计预测模型估算获得；企业数据主要为访谈获得，仅供参考。本报告中发布的调研数据采

用样本调研方法，其数据结果受到样本的影响。由于调研方法及样本的限制，调查资料收集范围的限制，该数据仅代表

调研时间和人群的基本状况，仅服务于当前的调研目的，为市场和客户提供基本参考。受研究方法和数据获取资源的限

制，本报告只提供给用户作为市场参考资料，本公司对该报告的数据和观点不承担法律责任。

法律声明

中视频网站版式特色研究 报告 -...

Documents

中视频网站版式特色研究报告 -...