本文是以b站为对象做的暗色模式的具体应用分析。

一 项目背景

1.1  暗色模式简介

暗色模式是在UI界面中大面积采用深色构成界面主体的设计。采用更低的对比度来提高视觉舒适度。其使用场景并不仅限于夜晚，很多用户白天也会长时间使用，所以黑暗模式应满足WCAG无障碍阅读最低AA级的标准。且夜间模式≠暗黑模式。

1.2  暗色模式优点

虽然暗黑模式有很多优点，且风刮的很大，但也不一定适合所有产品，为了验证暗黑模式是否适用于B站，我们对B站用户做了分析，得出其典型用户画像。

1.3  用户画像（分析B站典型用户）

我们了解到B站的主要用户集中在一、二线城市，年龄以21-27为主，男女比例大概是1:1

1.4  问卷调查（是否B站用户真的有这个需求？）

我们在明确用户画像后有针对性的发放调查问卷，用具体数据来验证理论，在本次调查中，针对用户是否愿意使用暗黑模式一问，有74.16%的人表示会使用，所以此次暗黑模式的适配是可行的，其中根据所处环境光线选择开启的用户占30.24%，更愿意在睡前开启的用户占25.84%，由此得出，我们在做适配时，既要保证页面在明亮环境下的可读性，也要保证用户在夜间使用的舒适度。

二 追番页暗色模式改版

2.1  竞品分析

根据暗色模式下背景与文字颜色(正文)对比度的不同强弱，我们选择了网易云音乐、蜗牛睡眠与优酷三个具有代表性的APP进行分析

低对比度(4.6-7)：大大缓解了夜间使用的视觉疲劳，但在其他场景使用时内容识别度受损，适用于使用场景集中于夜间或室内的产品和文字内容阅读需求低的产品

高对比度(14以上)：充分保证了内容辨识度，但长时间浏览造成的视觉疲劳也加大，利于全场景使用，但夜间使用时体验有所降低，适用于工具类需要快速找到功能入口的产品或页面，不适用于需要长时间浏览或文字内容阅读需求大的产品

中等对比度(7-14)：虽然无法在内容辨识度和视觉舒适度上达到顶峰，但是是两者对焦的一个平衡点，更利于全场景的使用，可以减少用户在不同场景下进行暗色模式的切换次数，以提升用户体验，夜间浏览的舒适度也适中，适用于哔哩哔哩，因此我们以中等对比度为方向对哔哩哔哩进行暗色模式改版

2.2  发现问题

首页的主要作用是进行流量分发，引导用户快速进入下一级页面，因此信息层级划分及整体视觉线的流畅显得尤为重要。同样，在做暗黑模式的适配时，页面背景色与文字的对比度和使用舒适度也要保证。基于这两点，我们对页面做了分析，主要问题是背景色与文字对比度不符合标准、图标不符合b站的年轻化特点、视觉线混乱。

为此我们从颜色对比度调整，图标精细化与视觉线重新梳理的角度做此次改版。

2.3  改版对比

三 视觉层级拆解

层级展示

3.1  背景层

为了满足中等对比度的需求，背景颜色比纯白色 对比度要大于15.8:1(无障碍阅读)

因此我们确定底背景层（00dp）为【#121212】，然后在其色值上叠加不同透明度的主色

【#F483A5】，经过多稿尝试，最终确定叠加2%主色得出背景层，即01dp

【#161414】(与纯白色对比度为18.3:1)

3.2  导航栏、tab栏

通过在色值【#161414】上叠加不同透明度的纯白色来进行层级的划分

例如导航栏搜素框进行了10%的白色叠加，tab栏底板进行了2%的白色叠加

图标选中时的颜色使用低饱和低明度的颜色以统一页面整体亮度

3.3  图文区

不同层级的文字选用不同透明度的纯白色，正文为70%不透明度的纯白色，与背景颜色的对比度为9.44:1，在7-14之间（中等的对比度）(大于7:1 满足WCGA AAA标准)

图片采用了30%黑色-40%黑色的渐变遮罩来控制亮度

3.4  banner与金刚区图标

对金刚区图标进行了重绘

通过用户画像分析，产品风格定位为：二次元、年轻、活力

进一步确定图标风格:多色、强趣味性、强造型感

但将图标直接应用于页面中发现两个问题：

1：图标过亮，与页面整体亮度不统一，导致会有一些刺眼的视觉呈现，因此我们通过对图标进行18%的黑色遮罩来降低其明度

2：页面偏扁平但图标质感过于强烈，于是便对图标进行了更扁平化的处理

该稿视觉呈现虽然没有第一稿强，但亮度、风格和页面整体更加的统一，因此选用该稿同样过亮的问题也出现了banner上，于是我们对banner进行了 0%黑色-30%黑色的渐变遮罩

四 提升体验

B站作为一个成熟的产品，其页面已经非常成熟，但是我们在做暗黑模式的适配时，发现在追番页面、详情页暗黑模式的快捷切换以及播放全屏页时还能做简单的优化。

4.1  追番页视觉线的优化

我的追番模块中，根据用户使用场景得知：在b站有追番的用户会持续关注番剧更新动态，所以在这里会将用户最近在追的番剧，前置在首屏重要位置，用户可快速查看番剧，实现交互减步长，达成转化。新集数在这个模块中作为相对重要的信息，根据尼尔森F型视觉模型，将更新集数区别于其他模块，放置在左边主视觉线上，使用户快速关注到重要信息，提高转化率。

在原版的基础上新增了不同样式角标，能快速拉开每个视频模块的亮点和差异化，让用户快速抓取到关键信息，提升转化。标签使用了吸顶的展示方式，节省了展示空间的同时，也更能体现出海报。海报上层叠加了#000000，透明度30%-40%的渐变蒙版，提高了海报在深色模式中的视觉舒适度。

4.2  详情页增加暗黑模式开关

根据4w用户场景分析后，视频详情页里调整了会员开通模块和视频信息之间的层级关系。提高了屏幕利用率和开通会员的转化率。同时新增了暗黑模式按钮，用户可在不同场合下快速切换不同模式，实现交互减步长和降低退出率，快速适配不同环境的视觉舒适度。

4.3  全屏页的优化

针对全屏页优化了暗黑模式下会员用户的弹幕的颜色、大小、亮度，更精准的凸显出会员用户发表的内容，提高用户之间的互动性。图标区域新增了语音输入功能，提高用户体验。右侧图标模块新增了背景底板，更好的区分开icon和视频内容，帮助用户快速做出选择。

五 总结

以上就是本次暗黑模式在b站改版中的应用全过程，其中包含b站追番页、播放页与全屏页。我们从1.产品分析（暗黑模式是否适用于b站）、2.用户调研（用户使用中的主要痛点）、3.视觉改版（暗黑模式的具体数据规范、icon精细化、视觉线优化）三个方向出发。提升用户体验、提高转化率。

此次改版也还有很多不足和待完善的地方，我们会在后续的学习中继续加油，感谢大家的观看，如果你觉得有帮助也不要吝啬你的赞啦。

Powered by Froala Editor