UI设计基础知识：Dark Mode的设计要点有哪些

自iOS和Andriod相继推出Dark Mode後，Dark Mode成为了APP UI设计中的一个必备选项。从Light Mode过渡到Dark Mode，我们需抽离原来的惯性思考，从UX设计的视角出发，探讨用户到底想要怎样的Dark Mode效果。

UI设计基础知识

UI设计基础知识：Dark Mode需遵循哪些设计原则?

在进行APP UI设计之前，首先我们要建立对Dark Mode设计的正确思维，才能确定UI设计的出发点及落脚点。也就是说，在设计开始到结束这个过程，我们都需要遵循Dark Mode的设计原则来进行。

● Dark Mode设计原则一：保证操作上的熟悉性

UI设计基础知识

无论产品有多少Mode，我们都应该确保用户能通过相同操作而获得相对应的预期结果，而不是影响用户的惯性操作动线，否则会破坏用户对产品早已形成的心理模式。

● Dark Mode设计原则二：维持平台上的一致性

UI设计基础知识

Dark Mode的设计工作并不能仅针对某一终端设备来进行，而是针对所有终端设备。这就要求我们需要综合各个终端设备的特点，通过不断试验来保持产品UI设计在各终端设备的属性上，能保持一致性，包括颜色、外观以及模式切换等。

● Dark Mode设计原则三：清晰的信息层级

UI设计基础知识

无论用户正在使用哪种模式，他在相同界面所关注的内容都是一致。因此，我们在设计Dark Mode过程，需继续保持Light Mode的信息层级特性，确保用户能轻松地获取想要的信息以及完成主要的操作。

● Dark Mode设计原则四：无障碍操作

UI设计基础知识

关於「无障碍操作」这一设计原则，我们大致可分解为四个方面来分析：

1. 视觉无障碍设计：应遵循WCAG(Web内容无障碍指南)。

2. 听觉无障碍设计：应确保界面所有空间在没有声音时都能正常使用。

3. 行动无障碍设计：应给予辅助功能(如语音控制功能)，帮助用户完成操作。

4. 认知无障碍设计：应配备辅助理解工具(如翻译、释义、链接等)，帮助用户理解其含义，并保证信息的准确性。

● Dark Mode设计原则五：保持简单

UI设计基础知识

「简单交互」一直是用用户体验设计的核心，目的是让产品更容易被使用，甚至没有经验的用户都可通过简单的学习快速掌握产品的正确使用方法。在进行APP UI设计过程中，Dark Mode应延续Light Mode「简单交互」的原则，保证用户获取简单、掌握简单、操作简单。

UI设计基础知识：Dark Mode的设计要点有哪些?

简单来说，Dark Mode的设计原则主要是偏向「交互」而言，下面我们从「视觉设计」出发，探讨如何从视觉方面将Dark Mode更好地呈现出来。

● Dark Mode设计要点一：避免使用纯黑色

在我们的认知中，纯黑色往往被定义为「百搭色」，然而套入到UI设计中纯黑色却是一个极为尴尬的颜色。即使在Light Mode的界面中，我们很少会看到纯黑色的元素出现，而是大多会使用深灰色替代。

UI设计基础知识

纯白背景与纯黑文字搭配，我们的眼睛往往会因为这种巨大的颜色亮度落差而造成视觉刺激，需要一定时间去适应。另外，长时间观看这种光线对比悬殊的画面，眼睛也会明显感觉到疲劳。

UI设计基础知识

同样道理，纯黑背景与纯白文字组合所呈现视觉感受殊途同归，结论不言而喻。因此我们在设计Dark Mode界面时，尽量避免使用纯黑色。

● Dark Mode设计要点二：避免使用高纯色

在Light Mode下，纯度(饱和度)较高的颜色往往会带给我们激情、生动、活力的感受，同时纯色与浅色背景恰到好处的对比度，也会让我们的眼睛很好地适应且不会出现违和或刺眼的感觉。

UI设计基础知识

但个别纯色放到Dark Mode後会出现恍惚、震动的视觉感受，可读性差，容易造成视觉疲劳，影响界面整体的用户体验。面对这种情况，我们需要对颜色进行减低纯度的处理，使元素更容易被识别和阅读。

● Dark Mode设计要点三：规范使用颜色对比

在UI设计过程中，无论是文字、图标、图标，亦或是图像，都应该确保与背景颜色的对比度，以帮助有视力障碍或阅读困难人群能更好地使用产品，从而提升产品的价值。

UI设计基础知识

根据WCAG2.0(Web内容无障碍指南2.0)对比度的标准，界面元素和背景的对比度至少要满足AA级标准，即4.5：1的对比度。在iOS规范中，建议对比度至少满足7：1;在Andriod规范中，因涉及不同背景层级的概念，甚至要求主要文字与最深色背景的对比度达到15.5：1的标准。

UI设计基础知识

因此，我们可以根据产品特性建立属於自己的对比度规范标准，保证让用户看到且影响判断的元素，与背景颜色对比度不低於4.5：1。

● Dark Mode设计要点四：规范设置元素层级

界面内各元素都是用户获取信息的途径，规范设置界面内元素的层级，是提升产品用户体验的关键。从Light Mode 过渡到Dark Mode，保持各个元素层级一致的同时，Dark Mode也需要一套全新的设计理论方法：

UI设计基础知识

▶ 组件(包括区块、卡片等)：设置不同透明度，通过与背景色不同明度的对比，产生视觉效果差，让用户第一时间看到他们想要的内容，还可清晰地分辨距离自己更近的内容。

▶ 文字：不同优先级的文字，设置不同透明度，有效保证用户的阅读效率，同时还能帮助他们更好地区分清晰逻辑关系，从而提高该界面的用户留存率。

● Dark Mode设计要点五：自由切换

UI设计基础知识

当我们使用智慧型手机启动Dark Mode时，系统会弹出「是否支持根据时间自动切换两种模式」的问题，这种建议有点像「到了傍晚手机会自动切换到护眼模式」的设置。然而，护眼模式不会将手机界面进行翻天覆地的改变，而是适当地增加屏幕色温、减低颜色对比度，以缓解眼睛疲劳之感。

但Dark Mode明显不是这样的操作，而是改变我们对界面的视觉感受，价值Dark Mode并不能完全传达Light Mode相同的情感诉求，这种设置有可能会给用户提供更差的体验。因此，将选择权交给用户，在应用显眼的位置或设置界面提供选项，让用户根据喜好自由且主动地完成模式切换。

● Dark Mode设计要点六：场景测试

UI设计基础知识

Dark Mode并不适合所有场景使用，例如在日间白天或灯光环境下，Light Mode的白底黑字特性能让界面很好地适应光照环境下，但这种情景下反而会让Dark Mode处於劣势。

我们需要根据不同的使用後环境、场景的特性，针对Dark Mode中的元素进行反覆测试与调整，保证无论是白天还是夜间，都能清晰读取信息、舒适实用应用，最终达到理想效果。

了解有关Dark Mode的设计原则与要点後，我们需要将这些理论融入到实际的UI设计工作中，并验证这些理论是否符合公司的产品应用以及用户的使用场景。如果您还想了解更多关於Dark Mode的内容或正在找一间专业靠谱的网站制作公司为您打点一切，欢迎谘询我们!