深色模式与浅色模式的区别研究

最近在做 Power Yuque，并研究了下深色模式，在这里记一些结论。

首先深色模式不是简单的对浅色模式进行一下反色（直接反色效果如下）。

可以看到左侧的导航栏和文章主体区域之间几乎就看不到区别了，也就是信息层级直接丢失掉了。

元素区分的差异

浅色模式的 3 种区分手段

在浅色模式下，最亮的颜色只有白色（将其作为背景基色吧）。因此如果在白色背景下，将一组件与背景进行区分的方式有三种：

1. 加描边；
2. 背景稍微加深；
3. 加阴影。

前两种方式在如下：

第三种如下：

一般加阴影是用于区分大的信息层级才会使用的，比如 Header 和 Body 区域的区分。在同层级元素间，主要采用加描边和变暗背景。
但是很多时候，可能无法去修改组件的背景颜色，那这种情况下，只有加描边这一种手段了。（如果还有别的方法记得评论留言🧐 ，可能是我才疏学浅）
因此，浅色模式下，如果按钮背景也是白色，区分背景一般是采用加描边的手段。无论是 Material Design 、Ant Design 都是如此。

深色模式的 4 种区分手段

深色模式与浅色模式的最大区别之一，就是基色一般不会设成纯黑色，这就使可以有比基色更深的颜色，也可以有比基色更浅的颜色。所以深色模式会比浅色模式多一种区分元素的手段。

1. 加描边；
2. 背景稍微加深；
3. 加阴影；
4. 提亮组件背景色；

Github 的深色模式下，按钮颜色就是采用提亮组件背景色 + 加描边的手段。

我自己尝试的方案是提亮背景色，然后不加描边，视觉感受是下面这样的：

对比总结

背景色类型如下：

:::info 你可能会问，为什么不把比纯白色暗一点点的颜色作为基色呢？如果有这问题的话，不妨自己试试，会感觉特别的别扭来着。 :::

区分元素的手段如下：

强调方法的抉择

在上一部分可以看到，深色模式的 4 种区分手段，其中 2 和 4 特别容易在选择上产生冲突。加深背景 和 提亮背景 在功能上都可以实现元素的区分。
例如我之前就很纠结，针对下图这个部分的内容，在深色模式下我应该是采用深色背景还是浅色背景呢？

如果按照直觉来看，既然在纯白色背景下这些内容用了比基色暗的背景色，那么暗色模式下是不是也应该采用比基色暗的颜色呢？
实践出真知，在深色模式下做出的两种效果对比如下：

就我个人而言，我会更加倾向亮色的版本。
因为深色背景色在视觉语义上给人的感觉是后退的，浅色背景色的视觉语义是前进的，会给人感觉这是需要被突出的。
而在信息流里面，我认为每一条 feed 的内容都是相对重要的部分，且需要被强调，那么在视觉语义上应该采用前进的感受。因此亮色的效果会更加理想。
那为啥语雀的浅色设计不采用描边的方式呢？我自己试着改了改，如下图。我自己的感受是在强调意义上，描边的强调效果会略不及色块（实际是否是这样，可能需要做严谨的对比实验才可以给出确切的判定）。

从这个小 case 中得到的一些结果，可以作为对背景抉择的启发和参考：

1. 浅色模式下，由于缺少比基色更亮的颜色，所以在区分元素上，强调信息块的手段，整块背景色变暗会比加描边更吸引人注意；
2. 深色模式下，区分元素上，提亮基色应该是突出强调信息的最优手段。

所以在给浅色模式适配深色模式时，不能一股脑儿直接映射颜色关系，而是需要根据信息重要性做判断，然后做出有效的调整。