对于竖屏屏播放页面，除了把视频基本信息区、弹幕操作区、视频反馈区下移至非视频区域外，在视频区域，还增加了最大化视频按钮，减去了常用播放设置按钮、锁频按钮和截图按钮。

此外，竖屏播放页面在非视频区域，增加了广告区以及相似视频推荐区，均以单列、纵向的方式展示相关广告和视频。

对比腾讯视频、优酷视频等相似视频推荐区均以横向滑动的方式呈现相关内容的模式，B站纵向的设计利于用户查看视频，提高推荐视频的点击率，虽然不如横向滑动一样可以呈现更多的内容和占用更少的空间， 但是有更好的内容分发效果。

4）页面逻辑

对于横屏播放页面，其页面逻辑如下。

返回按钮：点击可以切换到视频竖屏播放页面。

视频基本信息区：点击UP主头像，跳转到UP的个人空间；点击视频参与的活动标签，右侧弹出相应活动的介绍、双列展示优秀稿件，点击弹窗外区域，弹窗消失。

视频反馈区：点击点赞、不喜欢图标可以进行点赞、不喜欢操作，并在进行操作后标红相应图标；点击投币，右侧弹出弹窗，弹窗外区域，弹窗消失；或者在弹窗中选择投币的数额，投币后弹窗消失，中间出现提示消息框——“投币成功”，悬浮三秒后消失；点击转发，下侧弹出弹窗，转发成功后或点击弹窗外的区域后，弹窗消失。

播放设置按钮：点击后右侧弹出播放设置弹窗弹窗，点击弹窗外的区域，弹窗消失。

视频互动弹窗：在视频播放到一定时间时弹出，用户点击弹窗内的选项按钮后消失，当用户没有任何操作时，悬浮5秒后消失。弹窗主要用于UP主发起某个互动话题，或是用于激励用户进行视频反馈（投币、收藏、点赞和关注UP主）的操作。

视频进度操作区：显示当前播放视频进度，用户调整进度后，视频播放跳转到相应进度处进行播放。

截图按钮：点击截图按钮，截图当前视频区域页面，图片自动保存在相册，并在视频中部显示“截图保存相册成功”消息提示框，悬浮三秒后消失。

锁频按钮：点击锁频按钮，播放页面的其它操作按钮、信息栏消失，视频转换为锁频模式，按钮由“解锁”图标变为“上锁”图标，再次点击图标后，视频转换为非锁频模式。

播放控制按钮：点击后视频进行播放/暂停操作，按钮切换成“暂停”/“播放”图标。

视频剧集切换按钮：位于播放控制按钮的右侧，当视频有续集时，有此按钮。点击按钮，切换到下一集。

弹幕操作区：点击弹幕关闭/开启按钮，视频关闭/开启弹幕，按钮切换为弹幕关闭/开启图标。点击弹幕设置按钮，右侧弹出弹幕设置弹窗，点击弹窗外的区域，弹窗消失。点击弹幕输入框，视频暂停，弹出弹幕输入键盘框，点击发送弹幕或是弹幕键盘输入框外的区域，键盘框消失，视频继续播放。

常用键盘播放设置按钮：从左到右由选集按钮（如无选集，则无此按钮）、倍速按钮、清晰度调整按钮组成；点击按钮，右侧弹出相应弹窗，用户进行操作后，弹窗消失，左侧显示消息提示框，提示用户操作成功，消息框悬浮三秒；或当用户点击弹窗外的区域后，弹窗消失。

竖屏播放的页面逻辑与横屏基本相同，对于多增的元素，其页面逻辑如下：

最大化视频按钮：点击可以最大化视频，切换到视频横屏播放模式。

视频简介/评论页面切换栏：下划线标红正在浏览的页面按钮，当用户点击相应页面的按钮时，非视频区域切换到对应页面。

广告区域：广告分为紧贴视频下方的广告和位于推荐视频区域的广告；点击广告，跳转到相应广告页面，点击广告右侧的“扩展”图标，下侧弹出广告反馈弹窗，用户在弹窗内进行相关操作或点击弹窗外的区域后，弹窗消失。

视频标签分类区：用户点击相关的分类标签后，跳转到对应的视频标签分类页面。

相似视频推荐区：以单列的形式给用户推荐与观看视频相关的视频，点击跳转到对应视频的播放页面，用户点击该区域视频右下角的“扩展”按钮，这个视频所占区域的右下角弹出“添加至稍后再看”选项，点击该选项或是点击弹窗外的区域，弹窗消失。

其评论、发送弹幕、广告反馈操作逻辑如下图所示：

5）思考

对比其它视频APP，B站的横屏播放页面突出了视频上传者、视频参与话题活动的信息；在左上角的视频基本信息区域设置了UP主的头像框、视频参加的话题，这样一是帮助UP主获取更多的关注，从而激励他们进行创作，二是用话题的形式，增加社区不同类型内容的讨论度，也引导了用户产出高质量的内容。

其次，B站在视频播放区加入了互动弹窗，想要增加视频的互动/反馈度，激励用户进行点赞/投币/收藏/转发/互动等操作。

但总体而言，相比其它视频APP，B站播放视频的区域元素太多，结构过于复杂，容易遮挡视频内容，影响观看体验。

互动弹窗占据视频播放区太多位置，且不可以选择关闭，影响观看原视频。可以在播放设置中添加关闭互动弹窗功能，让用户自行选择是否要开启互动弹窗，或者可以设置当点击互动弹窗外的区域，关闭弹窗，而不是悬浮五秒后弹窗才消失。

此外，评论页面可按照热度和时间顺序显示评论，但当用户评论了视频后，不可以快速看到自己的评论内容。建议在“按热度”“按时间”评论选项栏下加一个“我的评论”选项，便于用户查看以前观看视频时的心情和想法，记录用户的成长。

其次，目前比较难以在竖屏播放页面中找到“缓存”按钮，如果想要下载视频，需要在竖屏播放页面中，点击右上角的“展开”按钮，才可以选择视频缓存，操作十分不便捷；而且“缓存”图标的设置也不醒目，对于新用户而言，难以找到下载视频的按钮，建议在视频反馈区右侧添加“离线缓存”按钮。

2. 首页

1）页面名称：首页

2）页面入口：打开APP后的默认页面，或者单机底部导航栏的“首页”，即可跳转到首页页面。

3）页面结构

按照从上到下，从左到右的顺序分为：用户头像栏、搜索栏、游戏中心按钮、消息按钮、子页面切换栏、动态广告/活动/热门视频展示栏、双列视频/其它内容展示栏、底部导航栏。

4）页面逻辑

用户头像栏：点击进入“我的”页面。

搜索栏：点击进入搜索页面，用户可以在此页面查看热搜、搜索历史、搜索发现词条。

游戏中心按钮：点击可以跳转到游戏中心页面。

消息按钮：点击可以跳转到消息中心页面。

子页面切换栏：下划线标红当前页面的按钮，点击想要切换的页面按钮，可以在首页分类下的“直播”“推荐”“热门”“追番”“影视”“建档百年”页面之间切换。

动态广告/活动/热门视频展示栏：单列大屏展示相应的内容，点击跳转到对应页面。

双列视频/其它内容展示栏：点击对应视频/内容区域，跳转到视频播放/内容页面；每个视频区域的右下角有“展开“按钮，点击，下侧弹出视频反馈弹窗，用户可以在这里选择对此类视频推荐的反馈，反馈完成后，弹窗消失，上方显示”将减少类似视频推荐“信息提示，悬浮三秒消失，或是点击弹窗外区域，弹窗消失。

底部导航栏：标红当前页面按钮，点击相应页面的按钮，跳转到对应页面。

其简要的页面交互逻辑如下图所示：

5）思考

与其它视频播放APP的首页相比，B站的首页元素较为简洁，以“导航栏”+“广告/活动/热门视频栏”+“双列视频/内容展示栏”三个要素组成。

双列视频/内容推荐栏多为用户感兴趣的剪辑/原创视频，少量穿插直播间、专栏、游戏和广告内容，非视频内容会在内容标题下面打上所属类型的标签（如“广告”“游戏”“直播”等），均采用一样的排版呈现在用户眼前。比起其它视频APP的复杂结构，排版和交互更为简洁，且每个视频标题下方都会显示视频的频道和分区，便于用户快速知道这个视频的主内容是什么。

这与B站主推原创中等长度视频以及主打社区文化有关；交互越简洁，排版越简单，信息呈现越直白，越便于用户进行内容的粗略查看，快速找到自己喜欢的高质量视频，减少用户决策时间。同时，双列的视频/内容展示的设计，也给了用户更多选择的空间、增加了视频的曝光度。

3. 频道页

1）页面名称：频道页

2）页面入口：点击最下方页面切换栏的“频道”，即可跳转到频道页面。

3）页面结构

按照从上到下的顺序分为：子页面切换栏、搜索栏、订阅频道展示栏、最近看过的频道展示栏、我订阅的频道展示栏、热门频道展示栏、其它频道详细展示栏和底部导航栏。

4）页面逻辑

① 频道——频道页

子页面切换栏：下划线标红当前页面的按钮，点击想要切换的子页面按钮，可以在频道页面下的“频道”“分区”页面之间切换。

搜索栏：点击进入搜索页面，用户可以在此页面查看搜索历史词条。

订阅频道展示栏：横向展示用户订阅的频道的图标，点击图标，跳转到对应的频道页面。

看过的频道展示栏：按看频道的时间的顺序，由近及远地横向展示用户看过的频道和日期，向右滑动显示更早期的时间看过的频道，点击其中一个频道，跳转到对应的频道页面。

我订阅的频道展示栏：双列展示订阅频道的精选视频，点击视频，跳转到相应视频的播放页面，若无订阅频道，则不展示此栏。

热门频道展示栏：横向展示热门频道的图标，点击一个频道的图标，跳转到对应的频道页面；点击栏目右上角的“换一换“按钮，更新此栏推荐的热门频道，并更新下方“热门频道详细展示栏”展示的频道。

热门频道详细展示栏：按照“热门频道展示栏”的推荐频道的顺序，双列展示对应频道的精选视频，点击视频，跳转到相应视频播放页面；点击展示栏右上角的“订阅”按钮，按钮变灰，并显示“已订阅”，用户成功订阅此频道。

底部导航栏：标红当前显示页面的按钮，点击其它页面的按钮，跳转到对应页面。

② 频道——分区页

子页面切换栏：下划线标红当前页面的按钮，点击想要切换的子页面按钮，可以在频道页面下的“频道”“分区”页面之间切换。

详细分区展示栏：点击相应的分区图标，跳转到对应的分区页面。

底部导航栏：标红当前显示页面的按钮，点击其它页面的按钮，跳转到对应页面。

简要页面交互逻辑如下图所示：

5）思考

频道页属于B站的5大核心功能页，有利于用户选择喜欢的分区和频道进行视频的观看，且频道页细化了顾客需求，针对不同喜好的客户推出不同的内容，以分区为一级分类，频道为二级分类的模式，为顾客提供更加细致化的服务。

由于B站是以个强调社区的APP，频道的细化也有利于喜好不同的用户在不同的圈子进行社区内容的创作、浏览和讨论，让用户快速加入自己的兴趣圈子，提升社区认同感，提高每个小社区的人的互动频率，鼓励用户创作更多的内容。

在“频道——频道”页面，B站展示频道的顺序是用户关注的频道、用户看过的频道、用户关注的频道的精选视频展示、热门频道、热门频道的精选视频展示，权重是关注大于浏览记录大于热门，比较清晰地显示了以用户的兴趣为主展开的频道内容展示。

笔者认为或许可以再添加一个维度，推荐的频道，用户多次刷关注的频道，容易因为内容同质化而厌倦视频，在用户关注的频道下面加一个“猜你喜欢”频道推荐，有利于扩展用户参与讨论的社圈，增加刷B站乐趣的多样性，从而有更高的用户粘性。

此外，当点击“频道——频道”页的搜索框时，只能展示历史搜索记录，无推荐频道、热门频道的展示，虽然在“频道——频道”页有详细的热门频道展示，但笔者认为，在搜索页面展现相应的词条，会更有利于用户发现自己感兴趣的社区内容。

4. 动态页

1）页面名称：动态页。

2）页面入口：点击最下方底部导航栏的“动态”按钮，即可跳转到动态页面。

3）页面结构

按照从上到下的顺序分为：频道——子页面切换栏、发布动态栏、搜索栏、最常访问关注UP主展示栏、“频道与话题”展示栏、关注的用户动态更新展示区和页面切换栏。

4）页面逻辑

子页面切换栏：下划线标红当前显示页面按钮，点击想要跳转页面按钮，可以在动态页面下的“视频”“综合“页面之间切换。

发布动态栏：点击跳转到发布动态页面。

搜索栏：下拉页面，可以显示搜索栏，点击搜索栏，进入搜索页面，用户可以在此页面查看大家都在搜、搜索历史的话题词条。

最常访问关注UP主展示栏：横向展示关注UP主的头像和用户名，对于更新了动态的UP主，头像框右下角标红点显示，向右滑动可以查看更多的UP主信息。

UP主的排序规则为，首先按照关注的UP主是否进行了动态更新进行排序，更新了的UP主排在未更新的UP主前；其次按照该用户对关注UP主的访问量进行排序，用户访问次数越多的UP主排在越前面。当用户点击相应UP主的头像时，按时间的顺序，在“关注用户动态更新展示区“下由近及远地展示该UP主的动态。

对于正在直播的关注UP主，其头像放在该栏的最前面，并在头像最下方标注“正在直播”，用户点击其头像可以进入相应的直播间。

频道与话题展示栏：点击对应话题或频道，跳转到相应话题或频道页面，点击“查看更多”，跳转到“话题”页面。

关注用户动态更新展示区：以时间顺序，由近及远地展示关注用户的动态，下滑展现用户更多的动态内容。若动态是视频，点击动态跳转到视频播放页面，若是其它内容，则点击后可查看详情。

底部导航栏：标红当前显示页面的按钮，点击相应页面的按钮，跳转到对应页面。

简略的页面逻辑如下图所示：

5）思考

动态页的的内容部分主要由三个部分组成，最常访问的UP主头像、“频道与话题“以及关注用户更新的动态内容。

“频道——频道”页和“动态”页的功能有所类似，都是围绕用户展开的一个社区，只是一个对应的是用户关注的频道的社区视频内容，一个对应的是用户关注的人的动态内容，后者更加强调的是用户的个人社交圈。在展示上，不同于频道页的双列式展示，动态页采取了单列式内容展示，且每个动态都采用大图进行展示。

频道页的双列展示有利于提供更多的创作视频曝光机会，激励创作者进行创作，也给与了用户更多选择自己喜欢内容机会。而动态页对接的是已关注的UP主的动态，其动态内容一般是用户感兴趣的，一般都会进行浏览，不用太多的选择权，单列展示更利于用户进行内容的查看，减少操作。

此外，虽然在动态页，关注的UP主动态更新了会在头像右下角标红显示，但当点开动态内容时，无法跳转到上次查看这个UP主的动态的地方，新增一个“从上次浏览的地方开始浏览”功能，可以减少用户下滑查找上次看到动态的地方的时间，使用户操作更加便捷。

5. 会员购

1）页面名称：“会员购”页。

2）页面入口：点击底部导航栏的“会员购”按钮，即可跳转到会员购页面。

3）页面结构

按照从上到下的顺序分为：魔力仓库按钮、购物车按钮、会员购中心按钮、搜索栏、商品分类栏、商品活动展示栏、魔力赏商品展示栏、商品上新按钮、抢先看按钮、人气排行按钮、用户签到按钮、商品展示栏、底部导航栏。

4）页面逻辑

魔力仓库按钮：点击按钮，跳转到魔力仓库页面。

购物车按钮：点击按钮，跳转到购物车页面。

会员购中心按钮：点击按钮，跳转到会员购中心页面

搜索栏：点击搜索栏，跳转到搜索页面，可以查看搜索历史和搜索发现。

商品分类栏：点击相应的分类图标，按照类别跳转到对应的商品展示页面，点击“全部分类”，跳转到商品分类页面。

商品上新按钮：点击按钮，跳转到商品上新页面。

抢先看按钮：点击按钮，跳转到抢先看页面。

商品排行按钮：点击按钮，跳转到商品排行页面。

用户签到按钮：点击按钮，跳转到用户签到页面。