众所周知,B站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近82%的用户是Z世代用户(90-09年出生的人群),他们也是生长在互联网下的一代人。
越往下看你越惊叹,总有一个你不知道的彩蛋设计细节。
01
网生用户-Z世代人群
2.【选封面】开屏页-自选模式
使用场景作为一个二次元发展起来的视频社区,用户对于产品品牌具有亲切感。但B站发展至今二次元内容逐渐被多元生态所代替,类目占比逐渐变小,老用户的情感记忆那里体现。
设计思考设计目标:提升品牌IP传播,让用户享受更加丰富的开屏页,从而满足用户情绪。
设计方案:在「设置」-「开屏画面设置」中,你可以随机展示或者自定义选择画面,总共为用户提供20张图片,每一个都是2233娘和B站重要日子的组合插画,其中不乏几张经典页面。当用户选择特定画面时,不仅能强化IP记忆点,同时也体现出产品对用户的重视程度。
3.【弹幕清屏】视频页-双指点击快速隐藏
设计思考设计目标:优化弹幕开关的便捷操作,给予用户优质的交互体验。
设计方案:在视频播放页面,常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些,你可以双指点击屏幕,触发开关弹幕功能,相比常规「先点击屏幕」「再关闭弹幕」两步操作,双指点击屏幕更加高效,虽然多指操作学习成本高,但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠,有时候常用的功能要进入3个层级才能使用,何不换种思路,运用多指交互来提升用户操作体验,未尝不是一种好的体验升级。
4.【进度条】视频页-眼睛跟随方向
使用场景一个产品除了空状态、界面元素外,如何在视频页中给予用户品牌感知,增加趣味体验。
设计思考设计目标:提升视频页进度条的趣味性,从而强化B站品牌透传。
设计方案:在视频页中,当你对视频进度进行左右拖拽时,进度条的指示图标「小电视」的眼睛会左右移动,当你向左滑动眼睛跟随左边,向右滑动小眼睛跟随右边,很是有趣,通过IP结合进度条的交互设计让原本单一的形态变得趣味横生。当然,进度条的样式不止一种,还有很多彩蛋视频也有不同的样式,快去找一找吧。(对了,最近在使用【优酷】时也发现进度条的微设计,感兴趣的朋友不妨看看。)
5.【一键三连】视频页-长按点赞触发联动
使用场景一键三连最早的发源地,或许你此时才知道这个功能吧。
设计思考设计目标:提升在同质化产品中的特殊功能点设计,强化产品一键三连功能。
设计方案:在视频页浏览时,看到超级喜欢的UP主视频,激动到想要一键三连,可以长按点赞按钮,你会看到右边投币和收藏显示进度条占比,当一圈走完,点赞、投币、收藏同时完成,这就是一键三连的激活功能。不仅如此,移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能,产品特有的功能感知满满。
6.【快速听歌】视频切换-你的下一款听歌软件何必是一款听歌软件
设计思考设计目标:解决用户听歌时视频弹幕干预,将视频切换音乐模式,专注听歌。
02
学习用户-学生人群
7.【视频放大】双指移动-放大缩小画面
使用场景当你用B站学习时,小小的手机屏幕很难看到细节,该怎么解决?
设计思考设计目标:提升细节放大展效果,让用户看清具体信息,提高学习效率
设计方案:在视频页,除了上面说的双指点击触发弹幕开关,你可以通过双指拉伸把视频任意放大,当然你也可以捏和把视频缩小。当改变了原始视频尺寸,底部会有一个「还原屏幕」的按钮,点击即可快速矫正视频。还不快快用起来~
8.【学英语】老友记-学习注释
使用场景是不是还在边看英文电影边学英语,这样虽然是个办法,但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译,效率性大打折扣。
设计思考设计目标:提高音乐学习效率,在视频中增加实时英文解析,帮助快速学英语。
9.【一起看】放映厅-学习氛围瞬间拉满
使用场景一起刷B站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗?
设计思考设计目标:解决异地分开刷B站的阻隔感,提升随时随地一起刷剧学习的幸福感。
设计方案:在视频页,点击「一起看」进入放映厅,你可以自己新建放映厅,也可以进入别人的放映厅,总之可以多些朋友一起看视频,一起交流,完美解决异地或者独处的孤独感~
10.【写笔记】笔记功能-教学视频的高效学习工具
使用场景同样是看视频学习,当你身边只有手机时,需要做笔记,还在通过备忘录等形式在App之间来回切换记录吗?
设计思考设计目标:解决看视频时难以记录重点知识的情况,提升记录笔记效率,从而高效学习。
设计方案:在公开课等教学类视频中,通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此,还能查看其他用户的笔记内容并且可以一键三连进行互动,具有双向学习性,简直不要太棒。笔记做完还可以一键复制,粘贴到你的知识库中,解决内容迁移问题。在B站学习的用户不妨快来试试~
04
网页用户-喜欢探索型人群
11.【弹幕撤回】2分钟内可撤回-避免文字误伤
使用场景B站是个弹幕网,很多时候观看者头脑一热随意发表的弹幕言论,会给其他用户带来观影不适以及平台污染,如何解决。
设计方案:在视频页发送了一个弹幕,用户可在视频中看到自己的弹幕,鼠标进入,选择撤回,要注意只能在2分钟内进行撤回,并且一天之内只能撤回5次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表,找到自己的弹幕,长按会出现撤回选项,点击撤回即可。
12.【鬼畜秘密】网页端鬼畜区长按「返回顶部」按钮10s输入对应字母进入经典鬼畜区
使用场景人们总对好奇的事物产生兴趣,尤其是在自己不知道的前提下。
设计思考设计目标:增加鬼畜区弹幕彩蛋功能,提升此类目视频曝光。
设计方案:在鬼畜区频道,长按10s右下角的返回顶部按钮,会激活底部黑色输入列表,文案写着:“尝试输入字母,发现鬼畜秘密...”带你进入另一个神秘空间。
13.【鬼畜霸屏】在鬼畜搜索下长按A键头会有另一个彩蛋等你
使用场景文案的引导会激发用户好奇产生尝试。
设计思考设计目标:引导用户进行随机字母输入,提升彩蛋互动玩法。
14.【小黑屋】了解规则-查看案情加深学习
设计思考设计目标:为了建立良好的视听环境和用户体验,规范产品的内容形式。
05
开发用户-喜欢探索型人群
15.【代码良言】小黑屋右箭源代码-金石良言
使用场景程序员在小黑屋页面,想要越狱查看代码等行为。
设计思考设计目标:告知程序员,开发者们小黑屋不仅是用来规范视频用户做出的行为,同样也是针对开发者以及程序员的。
设计方案:在「小黑屋」页面,右键「显示网页源代码」,在一行代码中间,你会看到一句话:“一朝耍流氓,十年挂南墙;不乖的孩子统统都要打屁股;越狱是不可能越狱的,这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多,同时增强小黑屋的准则态度,让B站用户做一个遵守准则的好用户。
06
结语
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。