您正在阅读《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测试。之后，整个团队开始在真实条件下测试暗界面。
重点是启用深色模式并在不同场景中进行尝试。例如，了解深色主题在公园的明亮阳光下会是什么样子。在阴天、光线不足的情况下阅读、观看视频或文件时，您的眼睛会感到疲劳吗？
了解外部如何看待所选择的解决方案非常重要。您需要尝试将自己置于现代用户的立场上。
