不太容易的深色主题设计

我们的研发同学最近这几天又给我们出了一个难题，2 天内完成深色主题设计的上线。从代码的角度上看，给所有的元素都加上了 Light 和 Dark，看上去好像挺简单的，但实际上这里没有想的那么简单，因为深色主题的设计，并不是说简单地替换下颜色，而是需要重新思考在深色的场景下同样完成信息传递和功能交互。

所以借着这次 YouMind 的急行军，我们来一起说说暗色设计的那些坑，哪些地方我们可以做一些工作，也让研发同学了解了解，有时候研发一张嘴，设计也能跑断腿。

深色主题不等于护眼

说深色主题之前，要先说一个大家很容易理解错的误区，深色设计的主题并不等于护眼。我们很多人打开了深色的主题，看着柔和舒服了很多，就理所当然地认为这是在保护眼睛，这个误会其实一直存在。

比如在发表在《International Journal of Environmental Research and Public Health》期刊上的一项实验研究，测试了30名用户在使用浅色和深色模式后的视疲劳程度，结果显示两种模式之间并没有统计学上的显著差异。

那为什么存在深色呢？深色主题的主要目的，其实是通过降低屏幕与环境的亮度对比，让用户更加专注于内容，更加沉浸在当前的创作或者阅读环境中。之所以让你感觉舒服，最主要的原因是深色减少了屏幕和周围环境的亮度对比。

浅色模式下，屏幕有时候很像一个"小太阳"，长期盯着屏幕，然后突然看向周围的暗环境，你会感受到强烈的反差，有时候你的瞳孔还要适应下这其中的变化，眼睛会觉得很累。而深色模式降低了屏幕的整体亮度输出，让屏幕亮度与周围环境更接近，眼睛就不用那么费力地调节了。

所以深色并不是为了护眼进行设计，只是在主题上带来了一种新的风格。当然很多用户喜欢深色模式，其中也包含了对美学偏好和氛围感的追求。

不就是两个变量？并不是反色，而是重新设计

对于许多开发人员，有时候也有一个心智上的误区，很多人觉得深色主题无非就是两个变量，但实际上，这不是变量的事情。当然也不是简单地做一些反色，而是在原来的功能和场景下，我们尝试用另一套配色进行重新设计。

这里最关键的地方在于，不同的颜色所表现出来的层级关系，实际上就是我们在软件上想去呈现的信息架构，在浅色下是一种模式，在深色上又是一种模式。

举一个非常简单的案例，来说明下如果在浅色和深色上只是做颜色的对应替换，会造成什么样的问题。

比如我们设计的 Chatbox，在浅色情况下，用阴影就能很好地做层级关系的区分，从而去突出这五个 Chatbox，但是到了深色模式下，传统的深色投影阴影效果会大幅减弱，因为深色阴影与深色背景之间的对比度不足。

如果我们还是在原来的基础上直接映射了下颜色，那还是很难去表达。这个时候需要改用浅色阴影或者通过提亮背景色来建立层级，从而去建立空间感。所以你会发现新的设计，我们去改动了 Chatbox 的背景色和边框色，从而加大 Chatbox 区域的空间感。

简而言之就是你在白色下看到的区分度的形式，可能在深色模式下不一定适用，这类的设计反而我们要根据现实的情况去做调整。

所以这个时候你就知道对于设计来说，一个新的主题配色，并不是简单地完成一次颜色的替换，而是设计工作的加量加倍。

所以看到这里，如果有小伙伴是设计师愿意给你出两套配色的，一定要好好珍惜，因为他值得被你爱。

色彩翻车

除了这些之外，对于深色主题来说，其实还有很多坑，这些坑都会在某种程度上给你增加很多工作量，比如最臭名昭著的就是不同色彩在两套主题下的运用。

我们一般接触到的文本、按钮这些的颜色，在大多数情况下不会出很大的问题，因为它的颜色属于比较平缓的颜色。但是在品牌颜色或者插画的运用上，我们很多情况下会使用高饱和度的。以 YouMind 为案例，我们的 YouTube 视频的 Pick 功能，在浅色的模式下，实际上看着还可以，因为白色配合淡雅的红色，还有些许俏皮。

但是如果在深色的主题下，再配合红色，那么这个地方大概率就翻车了。原因其实在于这两组颜色对应的明度对比差异：

明度差过大的时候，眼睛需要频繁调整，从而导致边界处产生强烈的视觉震动，用大白话就是很突兀，让你感觉到同样的颜色搭配，在白色上看着还可以接受，但是在黑色上就有点跳脱了。

当然不仅仅如此，在颜色设计中，我们很多时候人类的视觉是渴望"色彩平衡"的，这就是为啥有时候你就觉得看着很舒服，有时候就看着很别扭。但是对于很多品牌色的运用，如果在白色背景下，实际上因为白色背景作为无彩色，对暖色的包容度较高，不会产生强烈的色温冲突。但是如果是黑色，这个平衡就很容易被失衡了。

所以这里有一个很小的细节，如果你的品牌色本身是一个明度高、饱和度也很高的颜色，在搭配黑色的背景的时候，要尝试去调整整体的明度和饱和度，让整体风格更搭配。当然对于大多数人来说，可能也觉得这就是暗深色模式的特色，一切都很"暗黑"。不过这个地方一定要注意，品牌颜色也是有识别度的，别一味为了追求平衡，失去了品牌识别度，这个地方要找到比较平衡的方式。

深色点睛之笔

前面提到了很多深色的坑和误解，就是在设计的时候需要多付出很多时间来调整。当然深色并不是那么的罪恶，对于设计师来说，很多时候深色给了一个产品另一种味道，甚至焕发出新的生命。

为什么这样去说呢？因为对于大多数深色的设计，其实也可以进行一些巧思，从而在这个角度上增加对产品的认知传递，以及提升对产品的好感度。

方法有很多，今天分享一个设计案例，是我们当年在语雀上做的一个细节设计，然后这个设计就在深色上做了一点巧思。我们很多用户在打开的那一刻，都觉得那样的设计给产品带去了很多温度。

起因是我们要对 404 页面进行设计，就是当用户找不到页面的时候，会显示这样一幅插画。这个插画其实寓意非常简单，在通往知识的花园中，并不存在无路可走，只要你继续往前，就一定会有路。虽然网页暂时找不到了，但是我们希望你在知识的花园中，处处是生机，处处是罗马大道。

但是这个设计同样也会面临前面的问题，就是在色彩的运用上，如果直接内嵌到黑色背景中，当前的绿色和黄色，因为明度的关系，会特别突兀。

然后怎么办呢？我们不可能去调整整个版面的颜色，因为在白色下，绿色的小草、黄色的路径，已经搭配得非常平衡了。真的要去改任何一个配色，都会破坏掉原本白色下这种视觉的平衡。

所以我们就在深色上再往前走了一步，既然是黑色，那么我们就把它改成黑夜。黑夜里，我们为前进的道路打上了两束光，同时星空和萤火虫交相呼应。这个时候你就会发现，原来深色主题真的不是改个颜色而已。结合了黑夜、星空、萤火虫，就会让原本这幅在白色场景下非常平衡的画，在深色场景下也充满了平衡和趣味。

所以在深色主题上，其实很多时候它不仅仅是替换，更多可以发生的是你的创意设计的演化，尤其是在不同的场景中，可以给人不一样的感受。

当然，这样的设计还有很多，只是我今天这个案例想和大家分享的是，不一定要局限于颜色的变化，也有可能是赋予了场景和作品立意的变化。