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.

  鏈接僅作為研究提出的主題/概念的起點。