设计深色模式UI的八个技巧。

介绍

首先什么是深色模式？

深色模式是一种适合夜间使用的颜色主题，主要侧重于将暗色/灰色用于表面和 UI 元素。较深的颜色反射较少的光线，同时仍提供出色的阅读体验。这一切都归功于锐利元素和微妙表面之间的高对比度。

作为一种设计模式，深色模式通常作为切换存在于用户界面中。深色模式旨在补充系统的默认（或浅色）主题。

深色模式特权

深色主题是一个很好的营销举措，可以让您的 UI 在类似品牌或产品中脱颖而出。深沉、厚重的背景可以成为您品牌视觉效果的完美补充。

深色模式作为一项功能可以帮助减少操作产品时的眼睛疲劳。特别是如果您的产品包含大量文本，则深色模式可以帮助提高用户的保留率和注意力。

深色模式可能会节省您的手机电量。事实证明，深色模式通过发出更少的光，在屏幕上消耗的电量减少了六倍，因此可以延长您的应用程序生命周期和使用时间。

请注意，能源消耗主要取决于您的手机类型，而不是颜色。因此，如果您想衡量暗模式的节电效率，请查看开发人员针对特定手机类型和屏幕的指南。

深色模式专家表示，在深色表面阅读更健康，而其他研究则得出相反的结论。但在我看来，深色模式只是一种看起来很时尚的趋势，理论上可以让你的品牌更舒服。

因此，事不宜迟，以下是帮助构建深色模式UI的最佳实践。

1、规范颜色使用

避免或限制纯黑色上的白色。您可以使用纯黑色 (#000) 作为深色模式的背景，但请确保将文本稍微调暗。恰到好处不会导致眼睛因尖端对比度而流血。

纯白色使我们的眼睛需要吸收更多的光。发生这种情况时，字体会随着背景渗出并导致文本模糊，尤其是在较旧的显示器型号上。

2、使用品牌深色

为了使您的深色模式更加独特，请使用更深版本的主品牌颜色作为表面。

与彩色字体相结合，使其看起来更加特别。✨

将您的表面颜色与彩色字体相结合是创建品牌深色模式体验的绝佳选择。只使用黑色和白色的渐变也可以。只要确保你的文本易于阅读，而不是无缘无故地花哨。

3、降低色彩饱和度

避免在深色模式下使用完全饱和的颜色。

在较暗的表面上观看时，高饱和度会产生视觉上的“抖动”效果。相反，请使用低饱和度或略微柔和的原色版本以获得最佳性能。

4、避免使用阴影传达深度关系

使用较浅颜色的比例来转换页面深度，避免在深色模式下使用阴影。相反，使用边框属性为UI元素发出深度级别。与较近的元素相比，较远的元素仍应具有较低的高度。

避免在深色模式下使用阴影。为了更好地传达深度——确保靠近用户的物体更亮。这将有助于建立更好的视觉层次结构。

5、确保深色模式对比度

深色模式，就像灯光应该满足最低要求的 WCAG 标准一样，以确保所有文本都清晰易读并具有足够的对比度。您可以使用插件来检查您的对比设计。

以下是我们最喜欢的工具，可帮助您在不离开您选择的工具的情况下仔细检查对比度：

• Stark（Figma、Sketch 和 XD 插件）。
• Contrast（Figma 插件）。
• A11y（Figma 插件）。

6、先设计浅色模式

在将你的设计从浅色模式转变为深色模式的同时，保持所有视觉提示到位。不要为了深色主题而忽略或删除某些颜色，以免混淆用户。

相反，准备一个颜色板，专注于反转现有颜色而不会降低 UI 效率。

有很多插件可以帮助你解决这个问题。这是我的最爱：

• Appearance （Figma 插件）。
• Dark mode magic（Figma 插件）。
• Camilo（草图插件）。

7、使用“中性”设计深色模式

为了让切换可以预测，将您的浅色主题UI转向深色面。从项目一开始就使用一组具有相同透明度值的基本或“中性”颜色。

一套透明的颜色可以让你的生活轻松很多。您可以使用一组透明颜色将您的设计转换为可预测的暗模式，而不是不断选择不同的灰色阴影。

8、不要过度使用暗模式

在大多数情况下使用深色模式是个好主意。然而，使用明亮、醒目的背景也可以很好地传达您的设计。深色模式非常适合帮助专注于一项任务，但在凌晨 2:00 浏览 eBay 或亚马逊时，没有什么能比得上最后的闪光了。

浅色模式非常适合吸引您的注意力。它会弹出，唤醒用户，并立即将他的注意力转移到焦点之一，例如号召性用语标题、按钮或表单。

提示：如果您正在制作用于 Mac/Windows 的产品。最好调整您的产品主题以自动与用户当前的主题同步。这可以帮助用户有宾至如归的感觉，给人留下很好的第一印象。

结论

在为你的数字产品规划深色模式时，请遵循列出的提示。

请记住，将其实施到现有且完美运行的产品中应该有充分的理由。考虑内容、使用环境和设计将出现的设备。

但无论如何。深色模式可以使您的产品受益，尤其是在夜间使用手机、节省电池或在深色的气氛中查看模因时。

原文：https://blog.prototypr.io/dark-mode-ui-best-practices-8101782de93f

作者：Buninux

译者：Talon

Powered by Froala Editor