B站产品需求文档

本文从产品结构、全局说明、流程图、页面逻辑图、页面详细说明页五个角度，对年轻人喜欢的B站进行了全方位的分析，希望对你有帮助。

B站定位是多元化视频平台，主要功能是视频播放，围绕视频播放构建的用户体验十分完善，本文只选取常用的视频播放等功能进行分析。

一、文档综述

1.1 文档属性

1.2 产品简介

产品类型：视频平台

产品slogan：你感兴趣的视频都在B站

产品介绍：是一个围绕用户、创作者和内容，构建出一个源源不断产生优质内容的生态系统的多元文化社区。

产品定位：中国年轻世代高度聚集的文化社区和视频平台

1.3 产品用户

用户活跃程度：

2020年5月19日，B站公布了截至2020年3月31日的第一季度未经审计的财务报告。财报显示，B站2020年一季度，月均活跃用户达到1.72亿，同比增长70％；移动端月均活跃用户达到1.56亿，同比增长77％；日均活跃用户达到5100万，同比增长69%。

在用户基数大幅增加的基础上，社区活跃度也进一步跃升。尤其是用户日均使用时长攀升至87分钟，环比提升10分钟；而社区月均互动数则高达49亿次，为去年同期的三倍之多。

1.4 需求总结

二、产品结构

2.1 产品功能结构图

右击，在新标签页中打开即可查看

2.2 产品信息架构图

右击，在新标签页中打开即可查看

三、全局说明

3.1 登录页面

权限说明：

登录状态下可以进行所有操作。

未登录状态下进入APP，除了可以观看视频，其他所有功能都不能进行。

右击，在新标签页中打开即可查看

页面名称：登录页面

页面入口：未登录状态下，在“我的”页面左上角显示“点击登录”，或者使用除了观看视频之外的所有的交互功能时，会自动跳转进入登录页面

页面功能：实现两种方式的登录——手机验证码登录、密码登录

页面逻辑内容及其交互详细说明：

手机验证码登录方式：

初始界面下，呈现国家/地区选择框、手机号码输入栏、验证码输入栏、获取验证码按钮、验证登录按钮。
手机号码默认+86，输入限制16位数字，当输入非数字内容时，输入栏不予显示；输入数字后，获取验证码按钮亮起；输入错误格式、无效号码时，点击“获取验证码”，弹出“手机号格式错误”。
点击“获取验证码”后，会弹出一个滑图验证，“获取验证码”按钮变为“60s后重试”，倒计时结束前不能在获取验证码。
验证码正确，完成登录，进入“我的”页面。

密码登录：

初始界面下，右上方有密码登录按钮，点击进入密码登录界面。
登录界面，呈现账号输入栏、密码输入栏、忘记密码按钮、注册按钮、登录按钮。
账号输入栏支持输入手机号与邮箱，且没有字数限制、字符类别限制；密码输入栏同上也没有任何限制，输入密码时输入的字符会短暂的显示2s，然后隐藏为“*”。
点击注册，进入“手机号登陆注册”页面，通过手机号验证注册账号。
忘记密码时，点击“忘记密码”按钮，会弹出“已绑定手机号”、“已绑定邮箱”的选项，点击前者，跳转进入手机号验证登录方式，点击后者，通过绑定邮箱重置密码。
账号密码登录成功后，完成登录，进入“我的”页面。

3.2 网络环境

此为在没有wifi，打开了数据的状态下，横屏竖屏播放的页面。

流程，先关闭wifi、打开数据，再点进视频。

结果，播放页面会提醒流量消耗。

右击，在新标签页中打开即可查看

此为在没有网络状态下，TAB栏的五个页面

流程，先关闭网络，再打开APP。

结果，前两个TAB页面不能显示，后三个TAB页面可以正常显示。

右击，在新标签页中打开即可查看

3.3 键盘输入

只有在手机号验证登录时，点击手机号输入栏/验证码输入栏，会弹出数字键盘。

其余所有的输入都是弹出字母键盘。

右击，在新标签页中打开即可查看

在竖屏播放页面，右下角有一个笑脸按钮，点击后，底侧弹出表情包键盘。

在字母键盘中，也可以点击笑脸按钮，切换至表情包键盘。

右击，在新标签页中打开即可查看

3.4 评论框

右击，在新标签页中打开即可查看

页面名称：评论页面

页面入口：在TAB栏“首页”下，任一标签页面内，点击右上角“消息”按钮，进入消息页面

页面结构：

评论切换栏
用户信息栏
用户的评论内容
对用户评论的反馈
二次评论
评论栏

页面逻辑内容及其详细交互：

从左到右，发送弹幕、弹幕开关。

发送弹幕，点击该按钮，按钮变为“弹幕输入中”，同时底侧弹出键盘，可以进行弹幕的发送。

弹幕开关，默认为开启弹幕；点击该图标，图标右下角显示“禁止“图标，关闭弹幕；再次点击，复原。

评论切换栏，默认“按热度”（热度按多项指标计算），所有用户的评论按热度从大到小排序；点击该按钮，变为”按时间“，所有用户的评论按时间，最近发布的排序靠前。

用户信息栏：从左到右，用户信息、关注。

显示用户头像、名称、账号等级、评论时间（只有竖屏播放-评论框内，显示了用户逇账号等级）

关注，在“按热度”下，排序靠前的三个用户会显示“关注”按钮；如果是该视频的up主的评论，不管“按热度”、“按时间”，都会显示。

点击后变为灰色的“已关注”，然后再次点击，底侧弹出窗口，点击”取消关注“即可取消关注。

用户的评论内容，点击此范围，底侧弹出键盘，进行对该用户评论内容的二次评论。

对用户评论的反馈，从左到右，点赞、不喜欢、分享、评论、拉黑按钮。

点赞，按钮右方显示点赞数，点击该按钮，点赞数加1，同时按钮与点赞数变红，如果再次点击，恢复原状。
不喜欢，点击后，按钮变红，如果再次点击，恢复原状（同时点赞与不喜欢不能同时点击，点击其中一个，将取消之前对另一个的点击）。
分享，点击后，底侧弹出分享框，可将该用户评论分享至第三方平台。
评论，点击后，底侧弹出键盘，进行对该用户评论内容的二次评论。
拉黑，点击后，从该按钮弹出窗口，可选择“加入黑名单”/“举报”：点击前者，将弹出警示，点击”确认“可拉黑该用户；点击后者，右侧弹出举报页面，必须且只能选择一个举报的类型，然后点击“提交”按钮可进行举报。

二次评论：

此栏显示了用户对用户评论的评论，包括用户名称、评论内容，最下方是二次评论的数量。点击此栏，底侧弹出二次评论框，展示所有的二次评论。

评论栏：从左到右，评论栏、表情包。

评论栏，点击后，底侧弹出键盘，进行对该视频的评论（可点击表情包按钮，切换至表情包键盘）。
表情包，点击后，底侧弹出表情包键盘，可自由选择多种表情包。选择完毕后，可点击键盘按钮，切换至普通键盘，输入文字，完成对视频的评论。

3.5 消息页

右击，在新标签页中打开即可查看

页面名称：消息页面

页面入口：在“首页”任一标签下，点击右上角消息按钮，右侧弹出消息页面

页面结构：通讯录区、互动区、消息区

页面逻辑内容及其交互详细说明：

通讯录区：

左边的为通讯录按钮，点击后，右侧弹出通讯录页面。

右边的为消息设置按钮，点击后，弹出弹窗，从上到下分别为“消息设置”、“up主”小助手、“应援团消息助手”，点击将进入相应页面。

互动区：

此处是一个互动消息的集中，可以按照不同的互动类型查看与个人有关的互动消息。从左到右描述：

回复我的：点击后，右侧弹出页面，里面从上到下按时间顺序展示了其他用户对于我发表的评论的回复。点击任一回复框，将跳转进入该回复所在的页面。
@我：点击后，右侧弹出页面，里面从上到下按时间顺序展示了其他用户发表的对@我的评论。点击任一评论框，将跳转进入该回复所在的页面。
收到的赞：点击后，右侧弹出页面，里面从上到下按时间顺序展示了其他用户对于我的评论的点赞。点击任一回复框，将跳转进入该回复所在的页面。
系统通知：点击后，右侧弹出页面，里面从上到下按时间顺序展示了系统通知。

聊天列表：从上到下按时间顺序展示了用户对我发送的私信，点击任一私信栏，右侧弹出与该用户的对话页面，类似于社交APP的对话。

3.6 分享页

3.6.1 竖屏分享页面

右击，在新标签页中打开即可查看

3.6.2 横屏分享页面

在横批播放页面，点击分享按钮，底侧弹出分享框，同时页面的其余功能按钮消失，变为播放视频的页面效果。

分享的功能同竖屏一致。

3.7 播放页面交互

此部分主要是考察，在播放视频时，单击/双击页面带来的交互及页面变化。

3.7.1 竖屏播放页面交互

右击，在新标签页中打开即可查看

3.7.2 横屏播放页面交互

右击，在新标签页中打开即可查看

3.8 播放页面功能

此部分主要是考察，在播放视频时，播放页面上的各种功能。

3.8.1 竖屏页面播放功能

右击，在新标签页中打开即可查看

3.8.2 横屏页面播放功能

右击，在新标签页中打开即可查看

四、产品流程图

4.1 登录注册流程

右击，在新标签页中打开即可查看

4.2 观看视频/购物流程

右击，在新标签页中打开即可查看

五、产品页面逻辑图

右击，在新标签页中打开即可查看

六、页面详细说明页

6.1 首页页面

右击，在新标签页中打开即可查看

页面名称：首页-推荐页面

页面入口：在首页，第二栏位于“推荐”时。每次打开APP，会自动跳入首页-推荐页面

页面结构：搜索区；标签区；轮播区；展示区；TAB栏

页面逻辑内容及其交互详细说明：

整个页面：上拉可刷新

搜索区：

位于页面最顶端，从左到右描述：
左边是用户头像，点击后，跳转进入“我的”页面。
中间是搜索栏，点击后，右侧滑出搜索页面。
右边是消息按钮，点击后，右侧滑出消息页面，详见上文消息页面。

标签区：

该部分可以选择进入不同页面，每次打开APP，会自动跳入推荐页面。
在推荐页面，“推荐”二字加粗、变红，底部有一红线。
切换页面的交互方式有两种，左右滑动以及直接点击“直播”/“热门”等按钮。

轮播区：

三个banner轮流向左滑动，每次展示持续2s。
右下角有三个圆点，当展示某一banner时，对应的圆点将亮起，其余的变灰。
用户可以左右滑动以切换banner。
点击Banner，右侧滑出相应的页面。

展示区：

视频呈两栏式分布，可上下滑动。
每一视频包括的信息：封面、播放量、评论、时长、视频名称、点赞数/视频类型。
点击该区，右侧滑出竖屏播放页面，视频自动播放。

TAB栏：

在首页页面，对应的文字、图标变红。
点击其他图标，可跳转进入其他页面。

6.2 频道页面

6.2.1 频道-频道页面

右击，在新标签页中打开即可查看

页面名称：频道-频道页面

页面入口：打开APP后，点击TAB”频道“，默认进入频道页面

页面结构：

标签区
搜索区
订阅区
最近看过区
详细订阅区

页面逻辑内容及其交互详细说明

整个页面：上拉可刷新

标签区：

左边是频道按钮，右边是分区按钮。
在频道页面，“频道”按钮显示为红色加粗，下方有一红线。
在整个页面任意位置，向左滑动/点击分区按钮，将切换至分区页面。

搜索区：

点击后，右侧滑出搜索页面。

订阅区：

此处展示的是用户订阅的频道。
订阅的频道从左到右按订阅时间先后分布，最右边的一个是“更多频道”。
点击任一订阅频道，右侧滑出该频道页面；点击“更多频道”按钮，右侧滑出“全部频道”页面。

6.2.2 频道-分区页面

右击，在新标签页中打开即可查看

页面名称：分区页面

页面入口：打开APP后，点击TAB频道，进入频道页面，向左滑动，进入分区页面

页面结构：标签区、类别区、TAB栏

页面逻辑内容以及交互详细说明：

标签区：

左边是频道按钮，右边是分区按钮。
在分区页面，“分区”按钮显示为红色加粗，下方有一红线。
在整个页面任意位置，向右滑动/点击分区按钮，将切换至频道页面。

类别区：

这一部分展示了所有的分区。
可以向下滑动。
点击任一图标，右侧滑出该分区页面。

TAB栏：

在频道页面，对应的文字、图标变红。
点击其他图标，可跳转进入其他页面。

6.3 动态页面

6.3.1 动态-综合

右击，在新标签页中打开即可查看

页面名称：动态-综合页面

页面入口：

打开APP后，点击TAB栏“动态”按钮，进入综合页面。
在视频页面任意位置，向右滑动/点击综合按钮，将切换至综合页面。

页面结构：

从上到下描述：

标签区
搜索区
关注up主的直播区
话题区
综合动态区
TAB栏

页面逻辑内容及其交互详细说明：

整个页面：上拉可刷新

标签区：

从左到右，视频、综合、编辑按钮。
在综合页面，“综合”按钮显示为红色加粗，下方有一红线。
点击编辑按钮，右侧滑出编辑页面，可以编辑并发布动态。
点击后，底侧跳出搜索页面，可以搜索动态内容。

关注up主的直播区：

此处显示的是用户关注的正在直播的up主。
点击头像后，右侧滑出该up主竖屏直播页面，默认播放直播。

话题区：

此处显示的是网站的热门话题以及用户的订阅话题。
点击“查看更多”按钮，右侧滑出话题页面。

综合动态区：

此处从上到下，按投稿时间先后展示了关注的up主的综合动态（包括专栏、视频、图文）。
可以上下滑动，查看更多综合动态。
点击右上角“更多”按钮，底侧弹出弹窗，页面其余部分变暗。弹窗内容包括稍后在看等功能。
点击up主头像，右侧滑出up主个人空间。
点击其余部分，右侧滑出竖屏视频播放页面/专栏页面/图文页面。
TAB栏：同上。

6.3.2 动态-视频

右击，在新标签页中打开即可查看

页面名称：动态-视频页面

页面入口：

打开APP后，点击TAB栏“动态”按钮，进入综合页面，向右滑动，进入视频页面。
在视频页面任意位置，向左滑动/点击综合按钮，将切换至综合页面。

页面结构：

从上到下描述：

标签区
搜索区
关注up主的最常访问区
我的追番追剧区
视频动态区
TAB栏

页面逻辑内容及其交互详细说明：

整个页面：上拉可刷新

标签区：

从左到右，视频、综合、编辑按钮。
在综合页面，“视频”按钮显示为红色加粗，下方有一红线。
点击编辑按钮，右侧滑出编辑页面，可以编辑并发布动态。

搜索区：

点击后，底侧跳出搜索页面，可以搜索动态内容。

关注up主的最常访问区：

此处显示的是用户关注的最常访问的up主
头像右下角有红点的up主排在左边，没有的排在右边。
头像右下角的红点表示该up主有新的视频动态，点击红点头像后，跳转进入该up主的视频动态页面。返回后，该up主红点消失。

我的追番追剧区：

此处显示的用户的追番追剧，可左右滑动。
点击任一番剧，右侧滑出该番剧竖屏播放页面。
点击右上角“全部”按钮，右侧滑出“我的收藏”页面，默认“追番”标签。

视频动态区：

此处从上到下，按投稿时间先后展示了关注的up主的视频动态。
可以上下滑动，查看更多视频动态。
点击右上角“更多”按钮，底侧弹出弹窗，页面其余部分变暗。弹窗内容包括稍后在看等功能。
点击up主头像，右侧滑出up主个人空间。
点击其余部分，右侧滑出竖屏视频播放页面。
TAB栏：同上。

6.4 会员购页面

右击，在新标签页中打开即可查看

页面名称：动态-综合页面

页面入口：打开APP后，点击TAB栏“会员购”按钮，进入会员购页面

页面结构：

从上到下描述

功能区
搜索区
分类区
精选区
轮播区
展示区
TAB栏

页面逻辑内容及其交互详细说明：

整个页面：上拉可刷新

功能区：

从左到右，收藏、购物车、会员购中心按钮。
点击按钮，右侧将滑出对应的页面，可进行相应的操作。
点击后，底侧跳出搜索页面，可以搜索动态内容。

分类区：

此处展示的是商品的分类，点击图标可进入对应的分类商品。

精选区：

从左到右，分别为“今日上新”、“圈子社区”、“IP乐园”。点击后，将进入相应的页面。

轮播区：

六个banner轮流向左滑动，每次展示持续5s。
右下角有三个圆点，当展示某一banner时，对应的圆点将亮起，其余的变灰。
用户可以左右滑动以切换banner。
点击Banner，右侧滑出相应的页面。

展示区：

顶部的四个按钮是类别，下方是对应的商品展示区。
商品呈两栏式分布，点击某一商品，进入该商品详细页，可以完成支付购买。

TAB栏：同上。

6.5 我的页面

右击，在新标签页中打开即可查看

页面名称：我的页面

页面入口：

点击TAB栏“我的”按钮，进入我的页面。
在“首页”页面，点击左上角头像，进入我的页面。

页面结构：

从上到下描述

背景设置区
用户信息区
社交区
大会员区
视频功能区
创作区
服务区
TAB栏

页面逻辑内容及其交互详细说明：

背景设置区：

从左到右的功能，扫一扫、主题颜色、夜间。
点击扫一扫，右侧滑出该功能页面。
点击主题颜色，右侧滑出该功能页面，可以设置首页视图、主题颜色。
点击夜间，切换至夜间模式，整个APP的白色背景变为灰色背景。

用户信息区：

左边，包括用户头像、昵称、性别符号、账号等级、会员资格、B币数量、硬币数量。
右边，显示出空间两字。
点击该区，右侧滑出空间页面，可以进行编辑资料、管理空间等操作。

社交区：

此处显示的是与社交相关。
从左到右，显示用户的动态、关注的up主、用户的粉丝。
点击任一按钮，可进入相应页面。

大会员区：

点击此部分，右侧滑出大会员页面，可进行与大会员相关的操作。

视频功能区：

从左到右，显示离线缓存、历史记录、我的收藏、稍后在看。
点击任一按钮，可进入相应页面。

创作区：

右上角，显示圆角框红色填充背景的“发布”按钮。点击后，底侧弹出弹窗，可以编辑并发布相应内容。
从左到右，显示创作首页、创作学院、创作日历、热门活动。点击任一按钮，可进入相应页面。

服务区：

此处显示了“推荐服务”与“更多服务”。
点击任一按钮，可进入相应页面。

TAB栏：同上。

七、总结

整体来看，B站功能完善而强大，围绕视频播放为中心构建了庞大的功能生态；同时完整的分类体系体现了多元化的内容，包揽了年轻用户所想观看的一切。

TAB栏一个是动态，一个是会员购。

动态可以理解为，B站不仅仅想要发展围绕观看视频所形成弹幕文化、社区氛围，也在构建up主与观众之间的关系链，进一步沉淀用户之间的氛围。

动态本质上与微博一般无二，是一种中心化的用户与一般观众的单向联系。

但是我个人的理解，两者是有不同的，对微博而言，用户间的联系是根本，对B站而言，视频是根本，用户间的联系为辅，具体反映为：up主们更多的是利用动态转发个人的视频、专栏等，用作给视频导流；转发视频的动态的点赞、评论多于日常动态。

会员购则是B站的特有了。形式与其他购物平台一般无二，但是商品完全聚焦在二次元，包括手办、魔力赏、游戏相关等，异常鲜明地针对B站的用户群体。

购物从两个方面来讲，二次元商品这个垂直领域B站是无敌的，但是体量有限。同时在B站不断破圈的进程中，内容、用户越来越多元的进程中，商品却仍然聚焦于二次元，说明用户不习惯B站购买非二次元商品，个人比较不看好。

本文由 @MPC 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议