Apps largely have a limited color palette which may already map well to dark mode. However, some colors produce optical vibrations when viewed on a dark background, straining the user’s eyes. So, certain apps need to map to a slightly desaturated palette for dark mode in order to maintain a good contrast ratio.

应用在很大程度上具有有限的调色板，可能已经很好地映射到黑暗模式。 但是，在深色背景上观看时，某些颜色会产生光学振动 ，使用户的眼睛疲劳。 因此，某些应用程序需要映射为暗度模式下略微饱和的调色板以保持良好的对比度。

A large part of preparing an interface for dark mode* is ensuring that your color system only contains meaningful and harmonious* colors.

为深色模式准备接口的很大一部分是确保您的色彩系统仅包含有意义和和谐的颜色。

色彩系统 (Color System)

The baseline color guide* for most use cases is to have a primary, secondary, and accent color. There are also other types i.e. alternative, accessible colors etc., but these should be use sparingly as implementing them in a cohesive way is tricky. These colors are mostly used to accentuate your brand.

在大多数情况下，基准颜色指南 *应具有原色 ， 副色和强调色。 还有其他类型，例如替代颜色，可访问颜色等，但是应谨慎使用，因为以内聚的方式实现它们很棘手。 这些颜色主要用于强调您的品牌。

Then there are the semantic colors for Error, Caution and Success which usually correspond to a variation of red, yellow and green. They’re used as signals to convey critical information within the context of your app, so as long as visual accessibility standards* are met, then that variation is up to you.

然后是Error ， Caution和Success的语义颜色，通常对应于红色，黄色和绿色的变体。 它们被用作在您的应用程序上下文中传达关键信息的信号，因此，只要满足视觉可访问性标准 *，那么这种变化就取决于您。

Color systems are just guides to help create visual harmony, and ensure that the user can distinguish between elements in your app more easily. You could think of a color palette as an interface’s alphabet for visual information. For the most part, designing a color system for a website/app can be a relatively straightforward task especially when considering the amount of tools that are available today. However, there are some interfaces that require a bit more planning.

色彩系统只是帮助建立视觉和谐的指南，并确保用户可以更轻松地区分应用程序中的元素。 您可以将调色板视为视觉信息的界面字母。 在大多数情况下，对于一个网站设计色彩系统/应用程序可以是一个相对简单的任务，考虑到特别是在量 的 工具， 这是可用的今天。 但是，有些接口需要更多的计划。

朱利奥 (Julio)

Julio is essentially a game within an app, and for cognitive clarity it makes sense to help the user differentiate between the two experiences. The same concept applies to every game really i.e. game menus, lobbies. Doing this properly is quite hard, which is why almost no games get it right. You’re essentially trying to demarcate two things while simultaneously trying to make them appear as a singular entity.

Julio本质上是一个应用程序中的游戏，为了清晰起见，可以帮助用户区分这两种体验。 相同的概念实际上适用于每个游戏，即游戏菜单，大厅。 正确地做到这一点非常困难，因此几乎没有游戏能做到这一点。 您实质上是在试图划分两件事，同时试图使它们表现为单个实体。

Every game that has this problem is going to need a different solution. This article just touches briefly on a step taken to solve one.

每个有此问题的游戏都需要一个不同的解决方案。 本文仅简要介绍了为解决这一问题而采取的步骤。

语义学 (Semantics)

For the remainder of this article, I will refer to the core UI elements of the app i.e. menus, screens, buttons etc., as app elements, and everything concerning the game experience as game elements. Now, let’s start building the UI

在本文的其余部分中，我将把应用程序的核心UI元素(即菜单，屏幕，按钮等)称为应用程序元素，并将与游戏体验有关的所有内容称为游戏元素。 现在，让我们开始构建UI

These are the semantic colors used in the app. In the game, these colors are also used to send signals; communicating how close the user is to completing a puzzle:

这些是应用程序中使用的语义颜色。 在游戏中，这些颜色还用于发送信号。 传达用户离完成拼图的距离：

Red - the user has made 0 progress towards completing a puzzle

红色 -用户完成拼图的进度为0

Amber - the user is in the final stages of completing a puzzle

琥珀色 -用户正处于完成拼图的最后阶段

Green - the puzzle has been sent and verified

绿色 -拼图已发送并验证

Grey - the puzzle couldn’t be sent, and is currently waiting in a queue.

灰色 -无法发送拼图，当前正在排队等候。

This means that at least one of these colors is always visible if the user is engaged and interacting with the game.

这意味着，如果用户参与游戏并与游戏互动，则这些颜色中的至少一种总是可见的。

So far no new concepts have been introduced to the user, which is a benefit of using semantic colors. Also, no colors have been added to the main palette, so as far as cognitive load on the user, the game segment of the app stays at 0.

到目前为止，尚未向用户介绍新概念，这是使用语义颜色的好处。 另外，没有向主调色板添加任何颜色，因此就用户的认知负荷而言，应用程序的游戏细分始终为0。

Using semantic colors for the game in this way also allows them to function as reliable anchors between the app and game experience.

以这种方式为游戏使用语义颜色还可以使它们充当应用程序和游戏体验之间的可靠锚点 。

Semantic colors are usually quite bright because they are used to send critical signals to the user. As a result, they’re quite low on the color hierarchy for most interfaces. If your app is showing them often, that infers that it’s sending your user signals often. Users already receive a lot of signals every day from different apps, and they constantly regulate what they take in. One way they could do that with your app is by uninstalling it, so these colors should be used sparingly.

语义颜色通常很亮，因为它们用于向用户发送关键信号。 结果，对于大多数界面，它们在颜色层次结构上都非常低。 如果您的应用经常显示它们，则表明它经常发送用户信号。 用户每天已经收到来自不同应用程序的大量信号，并且他们不断调节自己的应用。可以通过卸载应用程序来做到这一点，因此应谨慎使用这些颜色。

However, these colors are essential to the core game experience within Julio, which raises them high enough in the color hierarchy that the overall vibrance of the app is significantly increased.

但是，这些颜色对于Julio的核心游戏体验是必不可少的，这使它们在颜色层次结构中足够高，从而显着提高了应用程序的整体活力。

锚定 (Anchoring)

As you can imagine, having bright colors for the rest of the apps palette i.e. the primary, secondary and accent colors would make the app’s vibrancy quite high, resulting in a jarring experience for the average user. On the other hand, having dull colors can cause the rest of the app to look quite dull and flat considering that the semantic colors revert to being very low on the color hierarchy for every other screen. Also, dull colors usually have poor vibration against dark backgrounds.

可以想象，为其余应用程序调色板提供明亮的颜色(即原色，辅助色和强调色)会使该应用程序具有很高的活力，从而给普通用户带来震撼的体验。 另一方面，考虑到语义颜色在每个其他屏幕的颜色层次上都会恢复为非常低的颜色，因此具有沉闷的颜色可能会使应用程序的其余部分看起来非常沉闷平坦。 而且，暗色通常在深色背景下的振动较差。

Let’s continue building the UI.

让我们继续构建UI。

动态工具栏 (Dynamic Toolbar)

It’s worth mentioning that the app makes use of a collapsing toolbar. I’ll explain the mechanics of the game in another article but, the toolbar is one of the ways users are able to easily know if a puzzle they’re about to complete will be sent or queued.

值得一提的是，该应用程序利用了折叠式工具栏。 我将在另一篇文章中解释游戏的机制，但是工具栏是用户能够轻松知道他们即将完成的难题是否将被发送或排队的一种方式。

The toolbar gradient changes six times over the course of the day, and although the sky is a concept that everyone should be familiar with, using the wrong hues would alienate the toolbar from the rest of the app, and actually increase cognitive load on the user; turning it into more of an eye sore than a feature.

工具栏的梯度在一天中会发生六次变化，尽管天空是每个人都应该熟悉的概念，但是使用错误的颜色会使工具栏与应用程序的其余部分疏远，并实际上增加了用户的认知负担; 使它变得比功能更让人眼花so乱。

Now, six might seem like a lot of colors but, there is an interesting dynamic. Lets take a look at even more UI elements:

现在，六种颜色看起来似乎很多，但是有一种有趣的动态。 让我们看一下更多的UI元素：

As you can imagine, the overall app theme is largely governed by the toolbar, and unfortunately it can be quite vibrant at some points in the day i.e morning, noon. Even though the sun is at its highest point, and users are more likely to be in a lit environment, there is no way to guarantee that, so by making this element collapsable users are given a means of regulating this visual signal.

可以想象，整个应用程序主题主要由工具栏控制，但是不幸的是，它在一天中的某些时间点(例如，早晨，中午)可能非常活跃。 即使太阳处于最高点，并且用户更可能处于光照环境中，也无法保证这一点，所以通过使此元素可折叠，可以为用户提供调节此视觉信号的方法。

Obviously, taking away that much color offsets the app’s overall visual harmony, so I defined four anchor colors for the toolbar gradients that would also be used as the colors for the rest of the apps palette.

显然，消除这么多的颜色会抵消应用程序的整体视觉和谐感，因此我为工具栏渐变定义了四种锚点颜色，这些锚点颜色也将用作其余应用程序调色板的颜色。

Doing this helps increase the harmony between the app and game experience. The toolbar is a prominent game element, and having its key colors used through out the rest of the app ensures visual continuity even if the app is in a state where no game elements are visible.

这样做有助于提高应用程序和游戏体验之间的协调。 工具栏是一个突出的游戏元素，并且在应用程序的其余部分中使用其键色来确保视觉连续性，即使该应用程序处于看不见游戏元素的状态。

Apart from a shade of purple used for the gradients shown during dusk and dawn, these are the only other colors that have been added to the app’s palette.

除了用于黄昏和黎明期间显示的渐变的紫色阴影外，这些是添加到应用程序调色板中的唯一其他颜色。

Every other color is just a different shade of either the primary, or secondary color e.g.

每种其他颜色只是原色或次要颜色的不同阴影，例如

..covering up the alternative color leaves you with the palette used for interactive app elements, and covering up the secondary and accent color leaves you with the palette used for interactive game elements.

..找到替代颜色后，您将获得用于交互式应用程序元素的调色板，而覆盖次要色和强调色将使您获得用于交互式游戏元素的调色板。

I mentioned earlier that alternative colors should be used sparingly. In this case, the alternate color is actually complementary to the secondary color, so it serves as a nice anchor for balancing the overall hue of the app.

我之前提到过，应谨慎使用替代颜色。 在这种情况下，替代颜色实际上是辅助颜色的补充，因此它是平衡应用程序总体色调的理想锚点。

This game is majorly about communicating with a satelite — a cycle of it sending you puzzles, and you completing and sending them back, so that it can send you more, and so on. So, I used this alternative color to represent communication.

该游戏的主要目的是与卫星通信-一个周期向您发送难题，然后您完成并发送回难题，以便它可以向您发送更多消息，依此类推。 因此，我使用这种替代颜色来表示交流。

Taking a look at the UI Elements image above, you’ll see that this color is used by a “network” feature in the app which just allows the user to send any puzzles that are queued to the satelite with a choice of instant, fast(10 min), or slow(30 min) speeds. The only other way the color is used is as an unread message indicator.

查看上面的UI元素图像，您将看到该颜色由应用程序中的“网络”功能使用，该功能仅允许用户将排队的任何拼图发送给卫星，并选择即时，快速(10分钟)或慢速(30分钟)的速度。 颜色的唯一其他使用方法是用作未读消息指示器。

I will talk about the steps taken to properly onboard users to, and increase user engagement for this feature in another article but, a major issue with the network feature in previous versions of Julio was that users didn’t know/forgot the feature was there. If you take another look at the app palette above, you’ll see that covering up the alternative colors leaves you with the palette used for interactive app elements, and covering up the secondary and accent color leaves you with the palette used for interactive game elements. So, having this color on the Floating Action Button allows this element to serve as a great anchor for the game experience — keeping the user grounded in it regardless of what screen that they’re on.

我将在另一篇文章中讨论为使用户正常使用并增加用户对该功能的使用而采取的步骤，但是，在Julio早期版本中，网络功能的一个主要问题是用户不知道/忘记了该功能。 。 如果您再看一下上面的应用程序调色板，您会发现覆盖其他颜色会使您留下用于交互式应用程序元素的调色板，而覆盖次要和重点颜色会使您留下用于交互游戏元素的调色板。 。 因此，在“ 浮动动作按钮”上使用这种颜色可以使该元素成为游戏体验的绝佳锚点-不管用户在哪个屏幕上，都可以使用户保持在地面上。

Now that a meaningful color palette has been introduced, all that’s left to do is ensure that the white swatch maps to a black version.

现在已经引入了有意义的调色板，剩下要做的就是确保白色色板映射到黑色版本。

If you’d like to implement dark mode in your Android app, this is a good place to start.

如果您想在Android应用中实现暗模式，那么这是一个不错的起点。

• links only serve as starting points for research into the topics/concepts raised.

  链接仅作为研究提出的主题/概念的起点。