深色模式来啦!

前言

日志服务（Cloud Log Service，CLS）提供一站式的云原生观测数据（Log、Metric）解决方案，具备日志与指标的采集、存储、加工、检索分析、消费投递、生成仪表盘、告警等能力。

为持续优化用户使用体验，提升数据、图表的可阅读性以及数据分析运维效率，CLS 推出腾讯云首款深色模式。

为什么需要深色模式

CLS 作为一款日志与指标数据分析产品，用户在实际使用中，日志的检索分析以及仪表盘查看等环节，都会涉及长时间的文本浏览和图表查看行为。在亮色模式下，白色的背景光往往过于明亮，长时间使用会给使用者带来眼睛疲劳等不适。

从用户角度，CLS 收到用很多户反馈，期待 CLS 提供深色模式的界面，觉得暗色模式下查看文本更易专注，报表的展示效果也更炫酷。

从业界看，大名鼎鼎的 Grafana 从一开始就将深色模式作为自己的主基调，基于优秀的深色模式设计，美观高级的图表和布局展示成为用户选择它的重要标签。而 Kibana 深色模式也是社区史上极大的一个功能要求。

为此，经过团队内视觉、交互、产品、研发等各角色多次研讨及设计推导，CLS 深色模式上线了！

明暗模式切换效果如下

深色模式价值

深色模式巧妙地运用背景和低光元素，从而创造出更为出色的视觉体验。这种模式对于那些需要花费大量时间与屏幕进行交互的 IT 从业人员来说，特别具有实用价值。

以日志检索查询、仪表盘查看等用户使用 CLS 控制台的核心操作为例。

1. 日志检索场景

该场景下，用户需过滤出符合条件的日志原文并查看，文本量多且信息密度高，使用深色模式有以下好处：

减轻视觉疲劳：深色模式降低屏幕亮度，有效地减少了光线对眼睛的刺激。在长时间查看文本的情况下，深色模式可以显著减轻用户的眼睛疲劳感。

提升文本可读性：在深色背景下，屏幕上的文字呈现出的对比度使得文本更加清晰易读。对于需要长时间浏览文字的用户来说，深色模式无疑为他们提供了更好的条件，有助于提高工作效率和准确性。

2. 仪表盘查看场景

该场景下，用户需浏览可视化图表，并做统计分析，使用深色模式有以下好处：

更直观的视觉展示效果：从大众角度深色模式给人一种高级感，彩色图表在黑色背景下的对比度更高，视觉冲击力更强。

减轻视觉疲劳：深色模式降低屏幕亮度，减少光线对眼睛的刺激，同样有利于缓解用户查看可视化报表时的视觉疲劳。

CLS 深色模式的设计理念

深色模式不仅是简单的将颜色调整为暗色，还要结合产品应用场景、用户使用习惯、品牌设计理念等多方面整体考虑。那么如何从设计层面实现深色模式的优化？

1. 设计原则

遵循 3 条准则

- 升级：体现品牌基因

- 提效：设计决策，降低开发成本

- 可控：通用，一致

2. 设计过程

整个设计过程，从现状调研、色值分析、色值合并、统一色彩体系等逐步进行。其中 “统一 CLS 图表色彩体系” 是深色模式的关键。

目前日志服务支持 14 种图表类型，但其颜色的色阶各异，色彩搭配调整缺乏指导。

暗色适配需精准找到颜色基准，以确保不同显示模式下系统呈现协调、美观、易识别的视觉效果，统一色彩体系过程中，关键环节如下：

色彩体系基础准则

CLS 深色模式设计过程中，遵循【清晰】【和谐】【一致】【友好】四项准则，为色彩推导打好基础。

色彩体系推导

原则：识别度区分度高，搭配和谐，无障碍友好，涉及 2 个关键点。

1）基于主色的提取的色彩体系，保证舒适关系

结合品牌：根据腾讯云品牌色为色值原点，通过相似、邻近、中差、对比、邻近互补和互补这 6 种色彩关系进行组合搭配，去掉相似色与不和谐颜色，这样得到的色彩搭配起来辨识度更高，也更加和谐。

2）找寻更加和谐准确的色彩

色彩柔和，颜色合理，无障碍友好，单纯的通过对 H（色相)，改变得到的颜色过于死板，不同的颜色视觉有明暗差异，所以我们通过调节 S （饱和度） 和 B（亮度）的色值，对色彩进行调整矫正，得到搭配舒服的色彩组合。

在寻找更加和谐准确的颜色过程中，使用了两个方法：

a. 把颜色放进 CLE Lab 色彩空间模型进行校准

b. 根据工具二次校准

再思考下，如果出现颜色获取“障碍”的情况，当前的效果的辨识度高吗？

在生活中，我们每个人都有可能对颜色获取有“障碍”，比如电脑显色有色差时、近视忘戴眼镜时等等一些场景下，我们都会有一定的局限性，我们使用了颜色校准工具，在不改变原有色相的情况下对颜色进行微调，在色盲模式下，使颜色也能有识别度。

经过以上思考和实践，CLS 的设计团队按色轮顺序取色，颜色更加流畅和谐，并增大颜色与颜色之间的明暗度，经过以上方法调整得到的色彩搭配起来辨识度更高，也更佳和谐友好，最终效果如下：

如何启用 CLS 的深色模式

腾讯云控制台操作

1. 登录日志服务控制台。
2. 在顶部导航栏中，单击自定义设置，选择深色模式。

DataSight 控制台操作

1. 登录 DataSight 控制台。

2. 在顶部导航栏中，切换主题为深色模式。