Hi-Tech Mail.ru 进行了一项调查，了解用户在网站和服务设计中喜欢什么主题。事实证明，超过 34% 的人选择深色主题。
您正在阅读《Compass》杂志——高效、安全团队工作的信使。
了解有关指南针的更多信息
深色主题不仅时尚而且流行。一些用户更喜欢它，因为深色主题可以节省电池电量。在光线较差的情况下，此模式可以减轻眼睛疲劳。
企业通讯软件 Compass 将在 2024 年采用黑暗主题。在这篇文章中，我们分享了我们的团队如何开发新设计的经验。
第 1 阶段：创建颜色配置文件
一个庞大的团队参与了黑暗主题的创作：
公司负责人；
设计部部长；
项目经理和产品经理；
UI 和 UX 设计师；
桌面版和移动版工程师；
产品检测部。
每个人都一起寻找新的想法，测试布局并改进不同设备的黑暗主题。团队并没有选择最简单的路径：黑暗模式是从头开始创建的。
最简单的方法是将整个界面从深色反转为浅色。所以几乎不需要做任何事情。或者以 Apple 或 Google 指南为基础。但这些选项都有其自身的缺点。
如果打开反转，颜色会变得非常对比。指南一般可以作为示例，但不应盲目遵循。要创建深色主题，需要依赖产品的功能。重要的不是某人设定的规则和设置，而是一个好的结果。
Roman Morozov，Compass 设计部主管
设计部门负责人正在研究新的设计
首先，Roman 开始为新设计选择颜色配置文件。为此，除了收集信息外，还需要进行A/B测试并分析结果。
在开发深色设计时，我们使用了JTBD方法。它有助于了解产品对人们的价值。该团队分析了企业通讯用户在什么情况下使用深色主题。这使得准确确定如何构建新模式的界面成为可能。
得益于 JTBD 方法，Roman 开发了第一个界面选项。随后团队确定了影响最终结果的 5 个关键点：
1.设置深度规则
应用程序中的所有元素都有自己的层次，即所谓的“深度”。深度效果使您可以使界面更加真实，并将用户的注意力集中在某些元素上。
在光照模式下，阴影用于此目的。创建黑暗主题时很难获得深度感。要实现深色主题的深度，您需要调整颜色。 UI 元素越暗，显得越远。
由于深色主题中色调的正确选择，可以传达海拔高度系统。这使得界面更容易被用户感知。该规则对于应用程序、网站和电子邮件同样有效。
2. 降低黑白颜色的对比度
如果黑色背景上有亮白色字母，用户可能会发现很难阅读纯文本。这个解决方案看起来对比太强烈，给读者带来了额外的紧张感。因此，设计师降低了背景和文字的对比度，让用户的眼睛不那么疲劳。
对于许多人来说，深色主题似乎是一个简单的解决方案：在深色背景上制作白色字母，然后就完成了。但事情没那么简单
3.降低了部分元素的亮度
例如，信使中有一个绿色按钮。如果您使用与浅色主题相同的颜色，则深色模式会使绿色阴影显得太亮。这会导致人们的眼睛变得更加疲劳。
因此，一些元素使用了更平静的色调。为此，我们更改了 HSL 参数中的设置：亮度 L（亮度）。例如，对于其中一个按钮，我们将其值降低了 6 个。事情是这样的：
更改了设置，降低了 L（亮度）值。该图像显示了浅色和深色主题的按钮视图。
主要规则：当我们更改一个元素的颜色参数时，我们需要检查它如何反映在整个界面上。例如，当更改按钮的颜色时，对话框看起来不会更糟。开发网站时要考虑到这一点很重要。
4.选择底色
要创建具有“干净”界面的深色主题，您需要了解所有元素的色调如何相互结合。例如，帽子只有一种颜色，分隔条有 3 种颜色。您需要了解这些元素在不同组合中的外观。
Compass Messenger 中黑白深色主题颜色的基本调色板
5.规定两种色度无透明色
在创建深色主题时，设计师经常尝试元素的透明度。然后通过它们可以看到背景，并且元素本身以灰色突出显示。
在某些情况下，这非常有效。例如，按钮变为深灰色，其后面可见深色背景。有深度，看起来很漂亮。
但有时在布局过程中，当应用多个层时，会出现困难。例如，如果文本或其他界面元素在透明弹出窗口下可见。
这是窗口与界面元素重叠的地方。看起来比透明的更好看
为了让开发人员更轻松，设计师在 Figma 中添加了不透明的白色色调调色板。这样，在布局过程中，您无需每次使用移液器都找到正确的阴影。一切都已在手。
为了方便起见，深色主题的透明色调和白色彼此相邻放置。开发者可以选择想要的选项——很方便
在此过程中，我们更改了颜色设置，因为有时它们在布局上看起来与在布局上看起来完全不同。尽管如此，基本调色板仍然使界面上的操作变得更加容易。
Roman Morozov，Compass 设计部主管
在团队准备好新主题的基本概念后，设计师们开始开发布局。应用程序的深色主题非常耗时。总共大约需要更改 2500 个屏幕状态。
10 分钟内即可在您的服务器上建立企业通讯软件
10 分钟内即可在您的服务器上建立企业通讯软件
我们将提供一段免费的时间。我们将帮助您在服务器或云端设置 Compass。我们将简化球队的搬迁和适应工作。
订购咨询
第二阶段：为智能手机设计一个黑暗主题
企业通讯软件中有很多屏幕：
聊天和话题；
画廊和插图；
设置;
包含员工个人统计数据的部分；
来电；
笔记等等。
因此，首先，团队将应用程序分为几个部分。接下来，按天安排各个画面的开发，进行任务分解。
这只是为企业通讯软件 Compass 创建黑暗主题计划的一小部分
该团队进行了迭代工作：
设计师一直在开发几种深色主题布局。
然后团队互相打电话，在 Figma 网站上在线研究布局并进行调整。
当一切准备就绪后，原型就交给开发人员进行布局。设计师开始创造新的布局。
当开发人员完成布局后，团队开始进行测试。
根据他们的结果，界面和设置再次发生了变化。我们尝试选择深色主题和所有界面元素，让用户尽可能舒适。
真实世界测试
设计团队开始从企业信使的主屏幕开发一个黑色主题：聊天和侧面菜单。
iOS应用程序开发人员已经准备了多个深色主题的屏幕，并将它们添加到TestFlight网站进行Beta测试。之后，整个团队开始在真实条件下测试暗界面。
重点是启用深色模式并在不同场景中进行尝试。例如，了解深色主题在公园明亮的阳光下会是什么样子。在阴天、光线不足的情况下阅读、观看视频或文件时，您的眼睛会感到疲劳吗？
了解外部如何看待所选择的解决方案非常重要。您需要尝试将自己置于现代用户的立场上。
数据存储 使用民意调 查或问题鼓励人 们分享他们 数据商店 的所有地址，以便跟进参 加或主持在线课程 的情况。我们使用 行业特定来源收集联系方式。我们通过经过 验证的数据合 作伙伴网络验证了所 有这些联系人。如果您愿意，您可以与我们公 司合作，我们提供快速服务。
团队保留了有关新界面的开发和测试的此类报告
为了准确覆盖所有深色主题用例，我们在白天和晚上的不同时间测试了该应用程序。该设计在不同的照明条件和不同的房间中进行了评估。这帮助我们了解，如果一个人在交通、工作或街道上使用这款Messenger，深色模式有多么方便。
Veronica，指南针界面设计师
该团队在 Compass Messenger 中进行了整个开发过程。所有的想法都收集在一次特别的聊天中。之后，对它们进行了研究、测试并得出结论：应该实施什么，应该删除什么。
如果黑暗主题或其某些元素不成功，原型就会被重做。他们就这样工作，直到应用程序屏幕开始在任何房间和任何照明下看起来都很完美。
有必要找到一个平衡点，以便按钮和模具在不同条件下看起来都很完美。这很困难，但我们正在重新设计界面以改进深色主题。
Veronica，指南针界面设计师
例如，在测试过程中，我们决定使按钮的背景更亮。这些细微差别对于黑暗主题的感知非常重要。它们提高了眼睛界面的舒适度，这对于应用程序和网站来说都很重要。
正确放置重音非常重要，例如，更清楚地突出显示按钮。这将使用户在使用深色主题时更轻松地导航应用程序。
对 Android 进行了相同的测试。 Android 手机具有不同的显色性，因此更改界面而不是复制 iOS 版本非常重要。
设计者不仅考虑了设备版本，还考虑了屏幕矩阵，以便 商业中的品牌标识是什么 人们可以在任何小工具上使用深色主题。 IPS 和 OLED 显示器的背光技术不同，因此界面元素的显示方式有所不同。
在测试过程中，我们注意到在 OLED 显示屏上滚动时，许多元素会“晃动”。深色主题无法正常运行的原因与矩阵本身的特性有关。为了解决此类问题，设计师降低了某些元素的对比度。
通过测试，我们能够选择显示背景和内容的理想设置：
1. 为了避免消息文本对比度太高，设计师首先将不透明度设置为70%白色。但经过测试，我们发现这样的文字不太明显。因此，该数字增加至85%。
2. 最初我们计划减少用户名的色彩。但经过测试我们意识到需要100%的亮度。而这个数值依然不会让你的眼睛感到疲劳。
3. 对于侧面菜单中的文本，我们保留最初选择的相同参数。聊天或功能的标题 – 70%，辅助文本 – 30%。这将使界面更容易理解。
如果您在 Compass 应用程序中激活深色主题，您将看到这样的界面
文本的亮度是根据图层的层次结构选择的。聊天比侧面菜单更重要。因此，聊天中的文字亮度较高。
但除此之外，在选择亮度时还考虑了其他因素。例如，侧面菜单有许多相似的元素。为了防止它们合并，就必须降低强度。
4. 对于背景，我们选择了深黑色 – 1C1C1C。我们决定将侧面菜单和聊天设置为相同。
虽然颜色是黑色，但界面中色调略有扭曲。背景中似乎有一些棕色。这会降低对比度。
5. 对于移动版本，制定了以下规则：
为了突出显示文本的主要重点，我们选择了 70-100% 范围内的不透明度。
对于低重音（提示）的元素，使用 30-50% 范围内的不透明度。
对于非活动状态，我们选择 15-20% 范围内的最小不 透明度值。
6. 在Messenger中，作者可以编写消息并使用颜色突出显 列表提供者 示部分文本。浅色主题为此使用明亮的颜色，但它们不适合深色主题。
因此，我们单独为其选择了颜色。该解决方案有其优点。具有柔和色彩的深色主题对于人眼来说看起来更加和谐。
比较哪种格式看起来更顺眼，哪种格式会引起不适
滑动功能
在信使中，您可以通过滑动从聊天转到带有聊天列表的侧面菜单。在浅色模式下，这些屏幕具有不同的背景颜色。
当侧面菜单打开时，用户会在屏幕右侧看到一条光带 – 这是聊天背景。该图形设计解决方案有助于了解过渡需要做什么：将一个屏幕移动到另一个屏幕。
这是应用程序的浅色主题中侧面菜单的样子：
但在黑暗主题中，这些屏幕具有相同的背景。因此，有必要想出一种新的机制来从一个屏幕过渡到另一个屏幕。
以下是深色模式下滑动的工作原理：
侧面菜单中还有一个聊天栏。它并不亮，只是比菜单背景稍微亮一点。设计师使用不透明度设置为 3% 的条带实现了这一目标。我们在顶部添加了一条白色条纹并将不透明度设置为 2%。
如果用户从菜单转到聊天，白条就会消失。这样，聊天背景就会更改为默认背景，并与侧面菜单中的背景相同。此时，黑色逐渐变化，层次层次得以保留。
使用深色主题应该对人们来说很方便。因此，充分搞清楚所有的功能和小细节很重要
基本元素颜色
在浅色主题中，链接、通过@提及其他用户以及评论均以相同的蓝色突出显示。但这个解决方案不适合黑暗主题：违反了元素的层次结构。
因此，为每种乐器选择了不同深浅的颜色：
其中评论最为引人注目。这是信使的主要功能之一，它应该脱颖而出。
对于提及和链接，我们决定在界面中包含不太强烈的蓝色阴影。
不同的色调可让您正确放置重音
唯一不需要更改的黑暗主题元素类型是徽章。几乎所有浅色主题的颜色都被保留给深色主题。仅更改了 2 个徽章，在深色主题下显得不够明亮。
Messenger 的深色主题和浅色主题几乎没有共同点，只有徽章的颜色几乎相同
弹出窗口下变暗
当应用程序的浅色版本中出现弹出窗口时，界面的其余部分会变暗 50%。这允许用户将注意力集中在弹出窗口上。
这就是浅色主题中弹窗的实现方式
在深色主题中，文本颜色更亮，因此将界面变暗 50% 是不够的。如果您使用与浅色主题相同的方法，用户将被界面的其他部分分散注意力。
因此，设计者将调光提高到80%。这样可以正确强调，以便用户可以将注意力集中在弹出窗口上。
对于深色主题，我们决定增加调光百分比，而不仅仅是使用黑色
于是，团队逐渐改变了所有界面元素的参数。
最后，我们成功地为深色主题创建了一个调色板，并在其中包含了必要的颜色
花了一个月的时间为移动应用程序开发和测试了 1,200 个深色主题屏幕。但现在用户可以在 Android 和 iOS 设备上启用 Messenger 的深色主题。
第三阶段：考虑桌面的深色主题
对于桌面，该团队甚至开发了 2 个版本的深色主题：冷色调和暖色调。
起初，我们按照与为移动设备创建深色主题时相同的方案进行工作：
开发聊天屏幕和侧面菜单。
我们通过各种设备、在不同的房间和不同的灯光下测试了黑暗主题。在实验过程中，测试了各种监视器。
最初，设计是用暖色调完成的。然后设计师决定看看如果他们用冷色调制作深色主题会发生什么。
我们不会说深色主题比浅色主题更好。这是一个品味问题。但如果有两个选项并且用户可以选择合适的模式，那就太好了
当然，移动应用程序和桌面版本有很大不同。我们知道我们不能简单地复制用于 iOS 或 Android 的相同想法。因此，我们测试了各种设计方案。
Alexey，指南针界面设计师
对于桌面应用程序的深色版本，许多参数都已更改：背景、元素颜色和文本。
选择文本和阴影
在这两个选项中，我们选择了冷色的深色主题。然后我们开始进行文字设计：
1.降低聊天文字强度。对于iOS和Android，我们之前选择了85%的不透明度，但这个选项不适合桌面。由于屏幕面积更大，如此明亮的白色反差太大。因此，我们将不透明度值设置得稍低一些——70%。
2. 使用相同的原理更改名称的亮度。我们将白色不透明度设置为 80% – 用户名现在更容易阅读。
对比度较低的深色主题可减轻眼睛疲劳
3.我们决定更改聊天的名称。这里我们将不透明度增加到80%。文本其余部分的亮度保持 30% 不变。
有了新的参数，深色主题确实变得更加和谐
4. 我们决定为带有聊天列表的侧边菜单和聊天本身制作相同的背景。为了在视觉上区分它们，在这些部分之间添加了深色条纹。
当我们开发第一个黑暗主题窗口时，我们还决定在不同条件和不同设备上测试它们。此后，对原型进行了调整。
在测试过程中，一些员工开始注意到侧边菜单和主屏幕的相同背景会干扰感知。
因此，最终团队决定仍然开发暖色调的深色主题，但有一些细微差别：
侧面菜单的背景仍然比聊天背景更浅。这使得划分工作区域成为可能。这样用户就可以专注于聊天。
将聊天文本不透明度增加至 75%。有了新的背景，工作窗口看起来更好了。
将名称的不透明度降低至 75%。现在文本和名称同样明亮，但它们不会合并。
最终我们得出了这样的设计格式
弹出窗口和悬停窗口
与移动应用程序的情况一样，在桌面版本中，他们决定将弹出窗口的界面变暗。
这种变暗不会分散弹出窗口的注意力。开发网站时要考虑到这一点很重要。
即使在启动黑暗主题之前，也有必要考虑将鼠标悬停在对象上时的反应；这种效果称为悬停。例如，当用户将鼠标悬停在浅色主题中的按钮上时，按钮会变暗。
但这种情况不适合黑暗主题：它看起来很笨拙。因此，设计师们想出了另一种选择。当您将光标悬停在按钮上时，该按钮的图标和名称将以蓝色突出显示。
深色和浅色主题按钮背光对比
要在桌面应用程序中激活Messenger的深色主题，您需要单击您的个人资料。在底部的配置文件窗口中有一个“主题”字段。在这里您可以选择以下选项之一：浅色主题、深色主题或系统。
第四阶段：更改引导屏幕
在熟悉应用程序的阶段就可以使用深色主题。为了让用户在新设计中探索即时通讯工具的功能，设计师还为入门屏幕创建了深色主题。
如果您在进入应用程序时立即将浅色主题切换为深色主题，则可以在新设计中进行入职
第五阶段：添加最终调色板
为了更容易支持深色主题并在将来轻松更改某些参数，值得创建一个通用调色板。
当CompassMessenger有一个主题时，在代码中写入颜色就足够了。每种颜色都有一个特定的名称。当创建深色主题时，有必要以某种方式快速改变颜色。
然后，设计师提出了一种处理颜色的新格式：用符号替换名称。例如，有价金属包括 2 种颜色：
浅色主题 – 677380
适合黑暗 – #FFFFFF
现在调色板看起来像这样：
深色主题调色板
这使工作变得更容易，因为颜色会自动更改，并且数据位于单独的文档中，因此在必要时更容易更改它。
例如，我们为红色按钮的每个主题选择了不同的色调。同时，代码中的名称也是相同的——“红色按钮”。
Roman，Compass 设计部主管
不同主题中的相同按钮有不同的颜色。因此最好添加符号
使用变量简化了服务维护。您不需要不断更改所有主题的颜色，只需更改一个参数即可。
事实上，配置超过 2000 个屏幕以便当您更改主题时，颜色和阴影会自动更改是相当困难的。此外，移动和桌面版本的元素通常具有不同的颜色。
Alexey，指南针界面设计师
尽管开发新设计需要花费大量时间和精力，但对于某些用户来说，缺乏黑暗主题可能是该程序的一个关键缺点。因此值得考虑：您可能需要一个深色主题来吸引客户。不仅在创建应用程序时必须考虑这一点，而且在开发网站和其他项目时也必须考虑到这一点。
我们决定展示团队最后几个月的工作成果
底线
很多人喜欢深色主题。但是，创建一个在不同情况下用户友好的主题是一个相当复杂且耗费精力的过程。为此，有必要在实际条件下测试设计选项。
在实施项目时，您需要考虑许多细节：
如何启用深色主题 – 在哪个页面添加开关；
文本亮度和背景色调；
字体特征；
能够调暗弹出窗口的屏幕等等。
深色主题的优点之一：节省设备电量。这种夜间模式消耗的电池更少。因此，一些用户更喜欢这种特定风格的网站、Yandex 浏览器、邮件或计算机上的游戏。深色主题可能看起来更具视觉吸引力。
也有人说，深色主题有利于视力，对眼睛更安全，尽管这个问题还没有明确的研究。也就是说，科学家尚未证明深色主题比浅色主题更安全。
