上一章 动效展示

深色模式

UX百科编辑部2024-02-01 发布
533人在学·1条笔记
收藏

深色模式是一种系统范围的外观设置,使用深色配色表为低光环境提供舒适的浏览体验。

在 iOS、iPadOS、macOS 和 tvOS 中,人们通常会选择暗色模式作为默认界面风格,他们通常希望所有应用程序和游戏都能尊重他们的偏好。在深色模式下,系统会对所有屏幕、视图、菜单和控件使用深色调,还可能使用更大的感知对比度,使前景内容在深色背景中更显眼。


应用指南

  • 避免提供 App 自定的外观设置,在最糟糕的情况下,用户可能会认为你的 App故障了,因为它不响应他们的全局系统外观设置。
  • 确保 App 在深色和浅色两种外观模式下都能很好地呈现。
  • 测试你的内容以确保在深色和浅色两种外观模式下都能保持舒适易读。
  • 在极少数情况下,可以考虑在界面中只使用深色模式。例如,支持沉浸式观看媒体的影视 App 始终使用深色外观可能更有意义,因为这种外观可以弱化用户界面并帮助用户专注于媒体本身。

深色模式的颜色

深色模式下的配色表包括较暗的背景色和较亮的前景色。需要注意的是,这些颜色并不一定是浅色模式下的反转——虽然许多颜色是反转的——但有些颜色并不是。更多信息请参阅 色彩-规格。

  • 接受适应当前外观的颜色。语义颜色(如 macOS 中的 labelColor 和 controlColor 或 iOS 和 iPadOS 中的 separator)会自动适应当前外观。需要自定义颜色时,可在 Xcode 的 App Asset 目录中添加颜色集资产,并指定颜色在浅色和深色模式下的变体。避免使用固定色值的颜色或不适应两种模式的颜色。
  • 力求在所有外观中都有足够的色彩对比。至少要确保颜色之间的对比度不低于 4.5:1,而对于自定义前景色和背景色,对比度应力求达到 7:1,尤其是在小文本中。这一比例可确保前景内容从背景中脱颖而出,并帮助您的内容符合建议的可访问性准则。
  • 柔化白色背景的颜色。如果显示的内容图像包含白色背景,应考虑略微调暗图像,以防止背景在周围的深色模式环境中刺眼。

图标和图像

系统使用可自动适应深色模式的 SF Symbols 以及针对浅色和深色外观优化的全彩图像。

  • 尽可能使用 SF symbols。当您使用动态颜色对符号进行着色或添加鲜明色时,两种外观模式下的符号都能很好地发挥作用。有关指导请参阅色彩。
  • 必要时,为浅色和深色外观设计不同的界面图标。
  • 确保全彩图像和图标在两种外观模式下都很美观。

文本

系统利用鲜明的色彩和增强的对比度来保持深色背景上文字的可读性。

  • 为文本使用系统提供的文本颜色。一级、二级、三级和四级文本颜色会自动适应浅色和深色外观。
  • 使用系统视图绘制文本字段和文本视图,而不是自己绘制文本。系统视图和控件能让应用程序的文本在所有背景上都看起来效果良好,并能根据是否存在鲜明色背景自动进行调整。

系统适配

iOS、iPadOS

在深色模式下,当一个深色界面叠加在另一个深色界面之上时,系统会使用两组背景颜色——称为基色和提升色——来增强深度感。基色较暗,使背景界面看起来像是在后退,而提升色较亮,使前景界面看起来像是在前进。

首选系统背景颜色。深色模式是动态的,这意味着当界面(如弹出窗口或模态表单)位于前台时,背景色会自动从基色变为提升色。在多任务环境中,系统还会使用提升色在应用程序之间,或多窗口环境中的窗口之间提供视觉分隔。使用自定义背景色会使人们更难感知系统提供的这些视觉区分。

533人在学·1条笔记
收藏
已学会
5人已学会
下一篇品牌化设计
App和游戏在表达其独特的品牌形象时,既要让人一眼就能认出,又要让人感觉在平台上宾至如归,给人带来始终如一的体验。 应用指南 在所有展示的书面表达中使用品牌独特的声音和语气。例如,你的品牌可能会通过使用平实的文字、偶尔使用感叹号和表情符号以及简单的句子结构来传达鼓励和乐观的情绪。 考虑选择一种强调色...
本章笔记
仅看自己
logo
发布于 2024-05-14
深色模式下大块的白色会显得刺眼,可以调低白色的明度;深色模式下的色彩选择不是越亮越突出越好,需要格外注意视觉舒适度
柔化白色背景的颜色。如果显示的内容图像包含白色背景,应考虑略微调暗图像,以防止背景在周围的深色模式环境中刺眼。
回复