苹果sf字体_苹果 iOS 13 黑暗模式设计指南

苹果在 WWDC 大会上发布了黑暗模式，从 macOS Mojave 到 Google I/O 开发者大会来看，iOS 加入黑暗模式已经是一件可预期的事情了。

那么对于设计师来说，我们在设计黑暗模式的时候需要注意哪些问题呢？以下是我针对苹果 Human Interface Guidelines 和最新给出的 iOS 13 beta 源文件，总结的几个的重点。

主色

从苹果人机交互设计指南和官方给出的 iOS 13 beta 源文件来看，iOS 13 提供两种版本的色调，主色在黑暗模式下，会比浅色模式“更亮”，以此来增加文字与深色背景的对比度。

它可以自动适应一些系统设置的变化，比如增强对比度和降低透明度设置。

灰色

iOS 13 还引入了六种不同色阶的灰色。看参数显示，灰色是偏蓝的高级灰，并非像谷歌 MateriaDesign 那样，使用纯灰色 (#121212)来定义的。

背景色

黑暗模式中的 background color，包括较暗的背景颜色和较浅的前景色。可以看到的是，除了纯黑色外，其他三个颜色都是基于上面提到的灰色色阶来定义的。

文字色

使用系统提供的 label color 作为 label 。它有四种颜色的级别：初级，次级，三级和四级，并且会自动适应明和暗的外观。

SF Symbols

尽可能使用 SF Symbols 

SF Symbols 提供了一组超过1,500个图标，你可以在App中使用这些图标。Apple设计的SF Symbols 可与旧金山字体无缝集成，因此可以确保 Symbols 与所有字重和大小的文本进行光学垂直对齐。

SF Symbols 里的图标有多种重量和尺寸可供选择。

SF Symbols 有九种重量，从Ultralight 到 Black - 每种重量对应于旧金山系统字体的字重。这种对应关系可以在 Symbol 和相邻文本之间实现精确的权重匹配。 

SF Symbol 也有三种尺寸，包括：小型，中型和大型。比例是相对于旧金山系统字体的高度定义的。

设计资源下载

目前官方只出了Sketch版本的设计源文件，等Photoshop版本出来后再推送给大家。

SF Symbols

https://developer.apple.com/design/downloads/SF-Symbols.dmg

iOS 13 beta (28.2 MB)

https://developer.apple.com/design/downloads/iOS-13-Sketch.dmg

微信群

One more thing，还有个微信群，主要讨论交互、产品、设计相关内容。目前群已满100人，进不去的同学可以关注公众号，后台回复”入群“即可。

---

阿洋，网易资深设计师，不定期分享关于交互、产品、设计上的思考。