An image to describe post

Dark Mode 深色模式

原文地址:

https://developer.apple.com/design/human-interface-guidelines/foundations/dark-mode

An image to describe post

Ensure that your app looks good in both appearance modes.

确保你的App在两种外观模式(浅色、深色)下都看起来不错。在iOS中,系统可按照一定规则自动切换深浅色(比如日出日落),所以,app的深浅色设计中,也可以跟随系统一样,提供自动切换深浅色的选项。

In rare cases, consider using only a dark appearance in the interface.

在少数情况下,考虑在界面中只使用深色的外观。这样做的话,可以让内容主体在UI界面中突出,引起用户对内容的注意力;因此,如果只考虑使用深色模式的话,需要有一个给用户提供沉浸式内容体验的前提,例如我常用的 playstation app 就只提供深色外观,以大量的媒体封面吸引用户。

An image to describe post

At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines.

至少要确保颜色之间(前景色和背景色)的对比度不低于4.5:1。对于自定义的前景和背景色,争取达到7:1的对比度,特别是在小文本中。这个对比度确保你的前景内容从背景中能够突出,并帮助你的内容满足推荐的无障碍规范。

Soften the color of white backgrounds.

使白色背景的颜色变得柔和。在深色模式下,可以尝试降低在浅色模式中的图像内容的亮度,防止刺眼,我觉得也包括纯白色 #ffffff 的应用,在黑暗环境中,纯白色看着也会刺眼,可以适量调灰一点。


Icons 图标

原文地址:

https://developer.apple.com/design/human-interface-guidelines/foundations/icons

An image to describe post

图标设计在这一节中没有太多可补充的地方,可以看看官方提供的图标调整示例。

An image to describe post

图标的本地化

在进行图标设计时,考虑本地化的问题。例如,在官方提供的左侧的示例中,文字图标虽然显示了英文的“A”,但是考虑到有的国家对“A”的写法不同,因此需要额外设计多个文字图标样式;而在右侧的示例中,考虑到有的文字阅读顺序并非从左往右(印象中日本的书信就不是从左往右),需要考虑从右往左的情况,设计一个新的图标。

An image to describe post

macOS中的文档图标如何设计?

**macOS 的图标默认由三部分组成:背景图、中心图和文本,三者有其一即可。**这些元素被放在一个右上角带有折痕的纸张上。最低可至 16*16 px @1x,但需要精简图标的元素轮廓,以便用户在低像素的情况下也能准确识别出图标的示意。

An image to describe post

官方建议在设计文档图标的中心图像时,在四周留出10%左右的出血位,但也只是“左右”,没有严格定义到像素。

An image to describe post

提供用于增强理解的文本。如图所示,「SCENE」是描述这个文档的类型而不是格式,而且需要足够精简,以便能够在图标小尺寸情况下依然能够阅读;在默认情况下,这个文本将会在系统中显示为全大写。

An image to describe post

感谢你的阅读。