This article has been written by Redmadrobot Design Lab. Translated and reposted with permission by Alconost Inc., professional translation and localization company.

本文由 Redmadrobot设计实验室 撰写 。 经过 专业翻译和本地化公司 Alconost Inc.的 许可 ，翻译和重新发布。

Late last year iOS and Android 10 were released with support for automatic dark theme switching. We decided to add a dark mode to the Rostelecom Key app we were then working on. The process was not without its hiccups. Here we share our experience to save you time and frustration, should you find yourself in our shoes.

去年末，iOS和Android 10发布，支持自动暗主题切换。 我们决定将深色模式添加到当时正在研究的Rostelecom Key应用程序中。 这个过程并非没有障碍。 在这里，我们分享我们的经验，以节省您的时间和沮丧感，如果您发现自己喜欢我们的鞋子。

为什么要创建深色主题？ (Why create a dark theme?)

You might be inclined to think that this is just another fad. But there’s more to it than that.

您可能倾向于认为这只是另一种时尚。 除此之外，还有更多。

A dark theme is a functional improvement. It is necessary for apps that are used in low-light conditions. To understand why let’s take a closer look at how our vision works.

黑暗主题是功能上的改进。 对于在弱光条件下使用的应用程序来说是必要的。 为了理解为什么让我们仔细看一下我们的愿景是如何工作的。

If we leave a dark room and enter a brightly lighted one, we are momentarily blinded, but within 4–6 minutes, our eyes acclimate to the new lighting. When we go from a brightly lighted place to a dark one, however, that process takes more time — 30–45 minutes on average.

如果我们离开黑暗的房间进入明亮的房间，我们会暂时失明，但是在4-6分钟内，我们的眼睛会适应新的光照。 但是，当我们从明亮的地方转到黑暗的地方时，该过程将花费更多的时间-平均30-45分钟。

If a person has to constantly shift his gaze from a bright app to dark surroundings, he will swiftly acclimate to the bright display, but acclimating back to the darkness will take longer.

如果一个人必须不断将视线从明亮的应用程序转移到黑暗的环境中，他将Swift适应明亮的显示，但是适应黑暗将需要更长的时间。

For this reason, certain apps, such as a GPS, launched dark themes even before operating systems did, with support for automatic switching. When a person is driving at night, it’s important that the GPS screen does not distract them from what’s happening on the road.

因此，某些应用程序(例如GPS)甚至在操作系统发布之前就发布了黑暗主题，并支持自动切换。 当一个人在夜间开车时，重要的是GPS屏幕不要分散他们在路上发生的事情。

In our case, the RT Key app is a cross-platform service for smart home device control — apartment buzzers, driveway gates, outdoor, and entryway security cameras. Residents employ it both in the daytime and at night.

在我们的案例中，RT Key应用程序是一种用于智能家居设备控制的跨平台服务，包括公寓蜂鸣器，车道门，室外和入口安全摄像头。 居民在白天和晚上都使用它。

It’s worth noting that the dark theme also helps conserve battery (for certain types of screens — OLED/AMOLED, but not LCD). And in the long term, it may even delay the onset of nearsightedness.

值得注意的是，深色主题还有助于节省电池电量(对于某些类型的屏幕-OLED / AMOLED，但不适用于LCD)。 从长远来看，它甚至可能会延迟近视的发作。

走到黑暗的一面：循序渐进的指南 (Coming over to the dark side: a step-by-step guide)

If you are just hearing about dark themes for the first time, you can start out by reading the articles in the Human Interface Guidelines for iOS and in the Material Design guide for Android. The articles break down in detail on how colors and layers interact with each other in night mode. Now let’s take a look at our tips:

如果您是第一次听说暗主题，可以先阅读iOS的《 人机界面指南》和Android的《 材料设计》指南中的文章。 文章详细介绍了颜色和图层在夜间模式下如何相互作用。 现在让我们看看我们的技巧：

1.准备样机并组装一个UI套件 (1. Prepare your mockups and put together a UI kit)

A UI kit significantly speeds up the work of the designer and developers. Ordinarily, we put one together immediately after approval of the visual concept, using the example of several primary app screens. The UI kit includes:

UI套件极大地加快了设计人员和开发人员的工作。 通常，我们会在视觉概念获得批准后立即将几个主要应用程序屏幕的示例放在一起。 UI工具包包括：

• A color guide of styles for the usual state of elements, hovers, and color for inactive elements, inputs in focus, and so on样式的颜色指南，用于元素的通常状态，悬停以及非活动元素的颜色，焦点输入等
• Text styles文字样式
• All interface elements (buttons, text fields, list elements, header blocks, etc.) in various states and situations in the form of master components以主组件的形式处于各种状态和情况的所有界面元素(按钮，文本字段，列表元素，标题块等)
• A black icon set黑色图标集
• Illustrations插图

You can view the UI kit for our app on Figma.

您可以在Figma上查看我们的应用程序的UI套件 。

All subsequent screens are then compiled using ready-made components. But when exporting drafts from Sketch to Figma our UI kit took a serious hit: we ended up having to update it, re-specify the color style for each element, and recompile the screens from the components.

然后使用现成的组件编译所有后续屏幕。 但是，当将草图从Sketch导出到Figma时，我们的UI套件受到了严重的打击：我们最终不得不对其进行更新，为每个元素重新指定颜色样式，并从组件重新编译屏幕。

2.同意颜色名称 (2. Agree on the names of colors)

To make it easier for designers and iOS and Android developers to communicate, we decided to have universal color names for both platforms. In the previous version of the UI kit, we used no-frills naming conventions for the color styles, numbering them C1, C2, C3, etc. This proved less than convenient: in discussions, everyone referred to the colors not by number, but by hue: purple, orange, black, etc.

为了使设计人员以及iOS和Android开发人员更容易进行交流，我们决定在两个平台上使用通用的颜色名称。 在UI工具包的先前版本中，我们为颜色样式使用了简洁的命名约定，将它们编号为C1，C2，C3等。事实证明，这样做并不方便：在讨论中，每个人都没有按数字来指代颜色，而是指代颜色。按色相：紫色，橙色，黑色等

With the advent of the dark theme, however, it became impossible to use hues in the color names. For example, white background color in the light theme would be replaced with a dark one. A new naming convention, therefore, had to be adopted.

但是，随着深色主题的出现，就不可能在颜色名称中使用色相。 例如，浅色主题中的白色背景颜色将替换为深色。 因此，必须采用新的命名约定。

After several meetings involving the whole team we determined that the color name had to depend on its purpose, and should consist of the following parts:

经过整个团队的几次会议之后，我们确定颜色名称必须取决于其用途，并且应包括以下部分：

• Purpose of the color, or of the element in which it is used颜色或使用颜色的元素的目的
• Degree of priority of use (optional)使用优先级(可选)
• State of the element, if applicable (optional)元素的状态(如果适用)(可选)

At left are the names of button colors in their normal state, when pressed in iOS, the ripple color in Android, and for inactive buttons on both platforms. At right are the names for texts on various surfaces.

左侧是正常状态下按钮的颜色名称，在iOS中按下时，在Android中为波纹颜色，在两个平台上均处于非活动状态。 右边是各种表面上的文本的名称。

Basically, if your project does not yet have a UI kit, and ordinary colors are specified instead of color styles, it’s time to tidy up your drafts.

基本上，如果您的项目还没有UI工具包，并且指定了普通颜色而不是颜色样式，那么该整理一下草稿了。

3.选择深色主题的颜色 (3. Select colors for the dark theme)

To avoid wasting precious time, we did not work through all the drafts with the dark theme, instead selecting only a few screens with fundamentally different components. Using them we selected suitable colors and added them to the palette.

为了避免浪费宝贵的时间，我们并未处理所有具有深色主题的草稿，而是只选择了一些具有根本不同组成部分的屏幕。 我们使用它们选择合适的颜色并将其添加到调色板中。

Then the developers updated the colors in the app code and created a test build for us, and we examined how the theme looked when live. If errors were discovered, the drafts and palette were adjusted.

然后，开发人员更新了应用程序代码中的颜色，并为我们创建了一个测试版本，我们检查了主题在直播时的外观。 如果发现错误，则调整草稿和调色板。

Katya Rokityan, Redmadrobot designerю

Katya Rokityan，Redmadrobot设计师ю

3.1。 背景颜色 (3.1. Background color)

Redrafting should begin with the background color, as it takes up most of the screen. The Material Design guide recommends selecting a neutral dark gray (#121212) as the base for the background color. Unlike black, it leaves space for creating screen depth.

重新起草应该从背景色开始，因为它占据了屏幕的大部分。 《材料设计指南》建议选择中性深灰色(＃121212)作为背景色的基础。 与黑色不同，它留出了创建屏幕深度的空间。

The neutral dark grey did not look good with the purple brand color, so we followed the Material Design guidelines. The authors recommend overlaying the grey #121212 background with the brand color at 8% transparency.

中性深灰色与紫色品牌色搭配看起来不太好，因此我们遵循了“材料设计”准则。 作者建议使用8％透明度的品牌颜色覆盖灰色的＃121212背景。

Neutral and branded background colors in the dark theme

黑暗主题中的中性品牌背景色

In addition to the primary background, we have cards that are slightly “raised” above the surface. For dark themes the Material Design recommends creating the effect of elevated elements by lightening the background: the closer the card to the user, the lighter.

除了主要背景外，我们还有一些卡片在表面上方略微“凸起”。 对于深色主题，“材质设计”建议通过使背景变亮来创建高架元素的效果：离用户越近，卡片越亮。

Suitable colors can be selected by overlaying a semitransparent white layer on the background color. We did just that.

可以通过在背景色上覆盖半透明的白色层来选择合适的颜色。 我们就是这样做的。

3.2。 创建一个基本的调色板 (3.2. Creating a basic palette)

When creating a branded dark theme, Material design recommends replacing colors with less saturated ones of a similar hue. For RT Key we use purple as the trademark color.

当创建品牌深色主题时，Material design建议使用类似色相的饱和度较低的颜色替换颜色。 对于RT键，我们使用紫色作为商标颜色。

When we attempted to lighten it following the Material Design formula, the hue was rendered pinkish. The original trademark color appeared “bluer,” so we altered its hue manually.

当我们尝试按照“材料设计”公式对其进行减轻时，其色相将变成粉红色。 原始商标颜色显示为“蓝色”，因此我们手动更改了其色相。

The hue that resulted when we applied a white overlay was too pink, shifting the overall effect toward blue.

当我们应用白色覆盖层时产生的色调太粉红色，从而使整体效果偏向蓝色。

In the light theme, we used a single purple color for large buttons, line icons, and the navbar. When selecting the colors for the dark theme we were unable to find a purple hue that looked equally pleasing in all these forms.

在浅色主题中，我们将紫色用于大型按钮，线形图标和导航栏。 在选择深色主题的颜色时，我们无法找到在所有这些形式下都同样令人愉悦的紫色色调。

The navbar and large buttons in the lightened purple version proved especially distracting from the content. But if we decreased the brightness, the line icons were lost against the dark background.

事实证明，浅紫色版本中的导航栏和大按钮特别分散了内容的注意力。 但是，如果我们降低亮度，则线条图标会在深色背景下丢失。

In the initial light theme, the saturated purple color looked equally pleasing on large blocks with white text and on subtle line icons against a light background. But with the dark background, everything is thrown off.

在最初的灯光主题中，饱和的紫色看起来同样令人愉悦，它在带有白色文本的大块上以及在浅色背景下的细线图标上都令人愉悦。 但是在黑暗的背景下，一切都被抛弃了。

In both dark and light themes, we ended up having to replace the initial color with three colors: one for contour icons, a second for large icons with background, and a third for the “corner space” on the home screen and the navbar on the others.

在深色和浅色主题中，我们最终都不得不用三种颜色替换初始颜色：一种用于轮廓图标，另一种用于带有背景的大图标，第三种用于主屏幕上的“角落空间”，导航栏上的其他。

We replaced one purple hue with three different ones — a major improvement.

我们用三种不同的紫色代替了一种紫色，这是一个重大改进。

In addition to purple, we also used orange, yellow, turquoise, and red: orange for call-to-action elements, yellow for notifications, turquoise for operation confirmations, and red for errors.

除了紫色以外，我们还使用了橙色，黄色，绿松石和红色：橙色用于号召性用语，黄色用于通知，黄色用于操作确认，红色用于错误。

When we lightened these four colors, following the Material Design advice, the app’s contrast changed radically compared to the light theme. We had to diverge from the guidelines: instead of lightening the orange, turquoise, and red we darkened them. The yellow was left unchanged, as it took on a “dirty” look when darkened.

当我们按照材料设计建议对这四种颜色进行加亮处理时，与灯光主题相比，该应用程序的对比度发生了根本变化。 我们不得不偏离准则：不是使橙色，绿松石和红色变亮，而是使它们变暗。 黄色保持不变，因为变黑时变黑了。

3.3。 iOS面板的特点 (3.3. Peculiarities of the iOS palette)

In iOS, you can set a tint that is applied to all interactive elements: buttons, icons, switches, etc. For example, the iPhone settings are blue, while the Clock app is orange.

在iOS中，您可以设置应用于所有交互式元素的色彩 ：按钮，图标，开关等。例如，iPhone设置为蓝色，而“时钟”应用程序为橙色。

In our light theme, the tint coincides with the large button color, but in the dark theme, we made it slightly lighter so that the line icons would be easily distinguishable against the dark background.

在我们的浅色主题中，色泽与大按钮颜色一致，但在黑暗主题中，我们使其色泽稍浅，以便可以轻松区分深色背景上的线条图标。

A tint in the dark theme

黑暗主题的色彩

iOS includes the ability to change the color of interactive elements when pressed. This is useful, as it is immediately clear to the user whether or not the app has reacted to his or her action.

iOS包含在按下时更改交互式元素的颜色的功能。 这很有用，因为用户可以立即清楚该应用程序是否对其行为做出了React。

By default, when pressed the color becomes semitransparent. It occurred to us that it would look more interesting if the button appeared to recede — that is, grew darker — when pressed.

默认情况下，当按下时，颜色变为半透明。 在我们看来，如果按下按钮后退按钮(即变暗)看起来会更有趣。

3.4。 Android面板的特色 (3.4. Peculiarities of the Android palette)

In Android, when an interactive element is pressed, a ripple effect is produced, starting at the point of contact. By default, the ripple slightly darkens the initial element; we however wanted to make it lighter.

在Android中，当按下交互式元素时，会从接触点开始产生波纹效果。 默认情况下，纹波会使初始元素稍微变暗； 但是，我们想减轻它的重量。

The ripple effect in the Android app.

Android应用中的涟漪效应。

Android also has its own way of rendering the status bar and navbar. The status bar is where notifications, signal strength, remaining battery life, and the time are displayed. The navbar is a panel where the buttons for “back,” “home,” and “recent apps” are located.

Android还具有自己的呈现状态栏和导航栏的方式。 在状态栏上显示通知，信号强度，剩余电池寿命和时间。 导航栏是一个面板，用于放置“后退”，“家庭”和“最近的应用程序”按钮。

Since the advent of smartphones with large displays stretching to the borders of the device, containing camera notches and pinholes, Material Design has introduced the “edge to edge” concept. The basic idea is that design service elements should not encroach on useful screen real estate and that as much of the screen as possible should be allotted to useful content.

自从大尺寸显示屏延伸到设备边界(包含摄像头缺口和针Kong)的智能手机问世以来，Material Design引入了“边缘到边缘”的概念。 基本思想是，设计服务元素不应侵占有用的屏幕空间，而应将尽可能多的屏幕分配给有用的内容。

For this purpose, Android has developed support for a transparent status bar and navigation bar. The reason is that these small panels are of different heights on different phones. Before edge-to-edge support was a thing, if we assigned them a transparent background they would end up unattractively overlapping the screen content on certain devices.

为此，Android开发了对透明状态栏和导航栏的支持。 原因是这些小面板在不同的手机上具有不同的高度。 在提供边缘到边缘支持之前，如果我们给它们分配透明的背景，它们最终将在某些设备上与屏幕内容重叠，从而失去吸引力。

Today material components contain system-defined offsets: developers can designate the size of the status bar and navigation bar and set a corresponding offset for the content. This is why Material Design formerly recommended selecting a non-transparent background for the status bar and navbar, but now recommends the reverse.

今天，材料组件包含系统定义的偏移量：开发人员可以指定状态栏和导航栏的大小，并为内容设置相应的偏移量。 这就是为什么Material Design以前建议为状态栏和导航栏选择非透明背景，而现在建议相反的选择。

It’s important to bear in mind, however, that not all supported versions of Android allow you to set icon colors in system components:

不过请务必牢记，并非所有受支持的Android版本都允许您在系统组件中设置图标颜色：

• Prior to 6.0, icons in the status bar and nav bar are always white.在6.0之前的版本中，状态栏和导航栏中的图标始终为白色。
• 6.0 and above allow you to set whether status bar icons are white or black, but the navbar will behave as in earlier versions.6.0及更高版本允许您设置状态栏图标是白色还是黑色，但是导航栏的行为与早期版本相同。
• From version 8.1 and on you can select icon colors for both the status bar and the navbar.从版本8.1开始，您可以为状态栏和导航栏选择图标颜色。

To avoid odd-looking overlapping onto content in the Key, we did the following:

为了避免在Key内容上出现奇怪的外观重叠，我们执行了以下操作：

• In older versions of Android prior to 6.0, for both panels we set a black background with 50% transparency — white icons look good against it.在6.0之前的旧版Android中，对于两个面板，我们都设置了具有50％透明度的黑色背景-白色图标看起来不错。
• In 6.0 through 8.1 the navbar retains the semitransparent black background, while the status bar is completely transparent.在6.0到8.1中，导航栏保留半透明的黑色背景，而状态栏则完全透明。
• From version 8.1 on the background of both panels is completely transparent.从版本8.1开始，两个面板的背景都是完全透明的。

If for some reason you’re not prepared for this kind of edge-to-edge support, it’s best to make the status bar and navbar universal. With edge-to-edge support:

如果由于某种原因您不准备使用这种边缘到边缘的支持，最好使状态栏和导航栏通用。 借助边缘到边缘的支持：

3.5。 检查元素对比 (3.5. Check element contrast)

Before confirming the dark mode color scheme and moving on, check whether there is sufficient contrast. The fact is, many people, especially those with less than ideal vision or a poor screen, or if they’re using the app in bright sunlight, will have a hard time making out elements that only weakly contrast with the background. This is especially true if these elements consist of thin lines, such as text and line icons.

在确认暗模式配色方案并继续之前，请检查对比度是否足够。 事实是，许多人，尤其是那些视力不佳或屏幕不佳的人，或者如果他们在明亮的阳光下使用该应用程序，将很难辨别与背景形成微弱对比的元素。 如果这些元素由细线组成，例如文本和线图标，则尤其如此。

It is best to check contrast by testing: open the interface on a smartphone, using Figma Mirror or similar software, and go out into bright sunlight (the dark theme is intended to be used in the dark, but there’s nothing to prevent people from using it in bright light).

最好通过测试来检查对比度：使用Figma Mirror或类似软件打开智能手机上的界面，然后进入明亮的阳光下( 黑暗主题旨在在黑暗中使用，但是没有什么可以阻止人们使用它在明亮的光线下 )。

It is also helpful to have your app checked by people with vision problems (nearsightedness, farsightedness, color blindness). If this is not possible, you can test the contrast on the website contrast-ratio.com or using a Figma plugin.

让视力障碍( 近视，远视，色盲 )的人检查您的应用也很有帮助。 如果无法做到这一点，您可以在网站contrast-ratio.com上或使用Figma插件来测试对比度。

3.6。 插图和动画 (3.6. Illustrations and animation)

If your app employs illustrations, for the dark theme they will need to be re-colored. Saturated colors that look great on light surfaces can appear jarring on dark ones, making them hard to interpret. Use less saturated hues.

如果您的应用使用插图，则深色主题将需要重新着色。 在明亮的表面上看起来很好的饱和色在黑暗的表面上看起来会有些刺耳，使它们难以解释。 使用较少的饱和色调。

The dark theme needs its own versions of illustrations and animations, using dark colors.

深色主题需要使用深色的插图和动画版本。

如何提交发展 (How to submit for development)

In our work, we employed a combination of Figma + Zeplin. This may seem strange, but our whole company had switched to Figma from Sketch in late summer of 2019, just before starting to work on the dark theme. To speed up the developers’ adaptation to the new tool, we continued using Zeplin, which resulted in several surprises.

在我们的工作中，我们采用了Figma + Zeplin的组合。 这可能看起来很奇怪，但是在开始研究黑暗主题之前，我们的整个公司在2019年夏末从Sketch转到了Figma。 为了加快开发人员对新工具的适应，我们继续使用Zeplin，这带来了一些惊喜。

Zeplin’s palette does not allow you to create color styles with identical HEX values. This meant that we had to slightly, almost imperceptibly, alter the purple HEX value for the light theme.

Zeplin的调色板不允许您创建具有相同十六进制值的颜色样式。 这意味着我们必须略微，几乎不可察觉地更改浅色主题的紫色十六进制值。

It turned out that not a single designer tool, including Zeplin, supports dark themes, meaning that they do not allow using multiple color palettes in a single project. So we had to find a workaround. For example, we created two projects: one with a light palette, the other with a dark one.

事实证明，没有一个设计器工具(包括Zeplin)支持深色主题，这意味着它们不允许在单个项目中使用多个调色板。 因此，我们必须找到一种解决方法。 例如，我们创建了两个项目：一个项目带有浅色调色板，另一个项目具有深色调色板。

Daniil Subbotin, Redmadrobot iOS developer.

Redmadrobot iOS开发人员Daniil Subbotin。

1. iOS开发的特点 (1. Peculiarities of iOS dev)

The next surprise Zeplin had in store for us was this: it only allows you to export a single palette to an Xcode project. It’s either light or dark — not both. When attempting to export colors from the dark palette, Zeplin simply replaced all the light colors with them. We began importing colors by hand, copying the HEX values, and did the same for images.

Zeplin为我们带来的下一个惊喜是：它仅允许您将单个调色板导出到Xcode项目。 它是亮的还是暗的-两者都不是。 尝试从深色调色板中导出颜色时，Zeplin只是用它们替换了所有浅色。 我们开始手工导入颜色，复制十六进制值，并对图像进行相同操作。

After considerable headaches I finally wrote a utility that uploads both color palettes directly to the Xcode project, using the Zeplin API. This vastly simplified things. The designer notifies that a new color has been added or an old one modified, I launch the script, and all the changes are automatically pulled into the project.

经过许多头痛之后，我终于编写了一个实用程序，该实用程序使用Zeplin API将两个调色板直接上传到Xcode项目。 这大大简化了事情。 设计人员通知我添加了新颜色或修改了旧颜色，我启动了脚本，所有更改都自动引入到项目中。

Daniil Subbotin, Redmadrobot iOS developer.

Redmadrobot iOS开发人员Daniil Subbotin。

2. Android开发人员的特点 (2. Peculiarities of Android dev)

In Android, the dark theme is accessible on all OS versions (we tested them starting with version 5). But switching to it in the system is possible only in Android 10, so it makes sense to add the ability to switch to it manually in the app.

在Android中，所有操作系统版本都可以访问深色主题(我们从版本5开始对其进行了测试)。 但是只有在Android 10中才可以在系统中切换到它，因此添加在应用程序中手动切换到它的功能是有意义的。

We added the following theme options: always light, always dark, auto-select depending on power saving settings (Android 9 and below), and auto-switch depending on system settings (Android 10 and above).

我们添加了以下主题选项：始终亮，始终暗，根据节电设置(Android 9及更低版本)自动选择以及根据系统设置(Android 10及更高版本)自动切换。

It’s important to bear in mind that the app theme selected by the user will not be saved in the system. It must be remembered internally and activated each time the app is launched.

请记住，用户选择的应用程序主题不会保存在系统中，这一点很重要。 必须在内部记住它，并在每次启动该应用程序时将其激活。

Vladislav Shipugin, Redmadrobot Android developer.

Vladislav Shipugin，Redmadrobot Android开发人员。

Android has its own system of colors for material components (buttons, app bar, text fields, etc.). Material Design color guidelines.

Android为材料组件(按钮，应用程序栏，文本字段等)拥有自己的颜色系统。 材料设计颜色准则 。

It’s important to compile your palette from the Material using the app theme description. Here is an article that will help your Android developers figure out how to do this. But even after this, the problem of incorrect colors may remain. To fix this you can describe the style of a specific component.

使用应用程序主题描述从“材质”编译调色板非常重要。 这篇文章将帮助您的Android开发人员弄清楚如何做到这一点。 但是即使在此之后，色彩错误的问题仍然存在。 要解决此问题，您可以描述特定组件的样式。

维护和持续发展 (Maintenance and continuing development)

Since we developed the dark theme we’ve added several new features, the app has acquired tablet users, and Rostelecom’s product office has started thinking about releasing the RT Key app as a white label for developers — using the trademark colors.

自从我们开发深色主题以来，我们已经添加了几个新功能，该应用程序已经吸引了平板电脑用户，Rostelecom的产品办公室已经开始考虑将RT Key应用程序发布为开发人员的白色标签-使用商标颜色。

We realized that the current design version developed for the MVP launch needed to be reconceived both structurally and visually. We completely reworked the app structure with an eye to the features set to appear over the next two years, added a dashboard for quick access to the most popular functions, and got rid of eye-catching trademark visual elements (such as the home screen corner and the colored navbar).

我们意识到，为发布MVP而开发的当前设计版本需要在结构和视觉上进行重新构思。 我们着眼于未来两年内将要出现的功能集，对应用程序结构进行了全面的重新设计，添加了可快速访问最受欢迎功能的仪表板，并消除了醒目的商标视觉元素(例如主屏幕角落)和彩色导航栏)。

Here the thorough work invested in the color system made it possible to preserve it almost entirely during this total redesign of the app.

在此，对色彩系统进行的全面工作使在应用程序的整个重新设计过程中几乎可以完全保留它。

Olya Sartakova, Redmadrobot art director

Redmadrobot艺术总监Olya Sartakova

Second app design version using the same color palette:

使用相同调色板的第二个应用程序设计版本：

By the time the second version was launched, we had painlessly switched to Figma. The utility I had originally written for Zeplin I adapted to Figma. We now update the colors, icons, and pictures in Xcode and Android Studio in a single click. You can download our utility here.

到第二版发布时，我们已经轻松地切换到了Figma。 我最初为Zeplin I编写的实用程序适应了Figma。 现在，我们只需单击一次即可更新Xcode和Android Studio中的颜色，图标和图片。 您可以 在此处 下载我们的实用程序 。

Daniil Subbotin, Redmadrobot iOS developer

Redmadrobot iOS开发人员Daniil Subbotin

结论：像我们一样，只有更好 (Conclusion: like us, only better)

If your app needs a dark theme, it’s best to incorporate it from the start, immediately after approval of the visual concept. This will help you avoid nearly all the problems we encountered. Here’s how:

如果您的应用需要深色主题，则最好在视觉概念获得批准后立即将其合并。 这将帮助您避免我们遇到的几乎所有问题。 这是如何做：

• Put together a UI kit.组装一个UI工具包。
• Work out a color naming system or use ours.制定一种颜色命名系统或使用我们的颜色命名系统。
• Select a branded background color.选择品牌的背景色。
• Select hues for the primary and secondary trademark colors.选择颜色作为主要和辅助商标颜色。
• If yours is a cross-platform app, compile a list of differences between the iOS and Android color schemes. Also, check whether manual dark theme settings will need to be added to the Android app.如果您是跨平台应用程序，请编译iOS和Android配色方案之间的差异列表。 另外，检查是否需要将手动深色主题设置添加到Android应用中。
• Check the contrast of the colors selected.检查所选颜色的对比度。
• Prepare illustrations and animations for the dark theme.准备用于深色主题的插图和动画。
• Update the UI kit.更新UI工具包。
• Use our utility to submit elements for development.使用我们的实用程序提交开发元素。

有用的资源 (Useful resources)

To learn more about dark themes:

要了解有关黑暗主题的更多信息：

• For more on the theory of color: Johannes Itten, The Art of Color

  有关色彩理论的更多信息： Johannes Itten， 色彩艺术

• For more on how different colors interact: Josef Albers, Interaction of Color

  欲了解更多关于如何不同颜色的交互： 约瑟夫·阿尔伯斯， 色彩的互动

• A quick introduction for those with no time to read up on theory: Material Design guidelines for creating dark themes

  那些没有时间阅读理论的人的快速入门：创造黑暗主题的材料设计准则

• The same guidelines for iOS

  适用于iOS的相同准则

• Session with WWDC 2019 on dark theme design for iOS

  与WWDC 2019的iOS深色主题设计会议

And a few useful tidbits for developers:

还有一些对开发人员有用的提示：

• Session with WWDC 2019 on dark themes for iOS

  与WWDC 2019的iOS暗主题对话

• Working with material components in Android

  在Android中使用材料组件

Alconost is a global provider of localization services for apps, games, videos, and websites into 70+ languages. We also make advertising and educational videos.

Alconost 是为70多种语言的应用程序，游戏，视频和网站提供本地化服务的全球提供商。 我们还制作广告和教育视频。