B站产品需求文档

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币数量、硬币数量。右边，显示出空间两字。点击该区，右侧滑出空间页面，可以进行编辑资料、管理空间等操作