字形

字形是一个简单的,图形图像,表示的想法。在所有平台上,系统定义了大量的字形来表示按钮、分段控件、侧边栏、导航栏、标签栏和工具栏等界面元素中的常见项目、动作和模式。

【苹果/字体图标本地化】字形- 人机界面指南 - 图1

图标也表示一个想法的图形图像,但图标通常包括视觉细节字形没有的,如阴影,纹理,并突出。一种常见的图标设计技术是从字形开始并添加微妙的视觉增强。

【苹果/字体图标本地化】字形- 人机界面指南 - 图2

钱包字形

【苹果/字体图标本地化】字形- 人机界面指南 - 图3

钱包应用程序图标

从 iOS 13、macOS 11、watchOS 6 和 tvOS 13 开始,系统使用SF 符号来提供它定义的字形;该系统的早期版本使用模板图像作为掩码来定义字形形状。SF 符号是可缩放的、基于矢量的图像,其权重与系统字体的权重相对应。使用符号可以控制字形的强调和强调色,同时保持其与相邻文本的权重匹配和对齐。尽管您可以为模板图像着色并修改其相对于文本的比例和对齐方式,但使用 SF 符号可以简化该过程并支持动态类型文本大小更改。

无论您的应用程序在哪个系统中运行,如果您找不到满足您需求的系统定义的字形,请考虑使用不同的 SF 符号,或设计一个自定义字形来准确传达您想要的内容。无论您是创建自定义符号还是模板图像,以下指南都可以帮助您设计一个在您的应用程序中运行良好并在系统中看起来像家一样的字形。

创建一个可识别的、高度简化的设计。太多的细节会使字形混乱或不可读。争取大多数人都能快速识别的简单、通用的设计。一般来说,当字形使用与它们发起的动作或它们所代表的内容直接相关的熟悉的视觉隐喻时,字形效果最好。

保持应用中所有字形的视觉一致性。无论您只使用自定义字形还是混合使用自定义和系统提供的字形,您应用中的所有字形都应使用一致的大小、细节级别、笔触粗细和透视。有时,对每个字形使用相同的尺寸不足以使一组字形在视觉上看起来一致。例如,实心正方形和实心三角形可以具有相同的宽度和高度,但人们通常认为正方形比三角形大。在这种情况下,您可以通过稍微增加三角形的尺寸来为两个字形赋予一致的光学权重。

【苹果/字体图标本地化】字形- 人机界面指南 - 图4

为了帮助实现视觉一致性,请根据需要调整各个字形大小…

【苹果/字体图标本地化】字形- 人机界面指南 - 图5

… 并在每个字形中使用相同的笔画粗细。

一般来说,匹配字形和相邻文本的权重。除非您想强调字形或文本,否则对两者使用相同的权重可使您的内容具有一致的外观和强调程度。如果您正在创建自定义符号,您可以调整其权重以匹配附近的文本;有关指导,请参阅仔细查看 SF 符号

如有必要,向自定义字形添加填充以实现光学对齐。某些字形(尤其是不对称字形)在您以几何方式而不是光学方式居中时可能看起来不平衡。例如,下面显示的下载字形底部的视觉权重比顶部大,如果它以几何为中心,这可能会使其看起来太低。

【苹果/字体图标本地化】字形- 人机界面指南 - 图6

非对称下载字形可能看起来偏离中心,即使它不是。

在这种情况下,您可以稍微调整字形的位置,直到它在光学上居中。当您创建的资产包含您的调整作为字形周围的填充(如下图右侧所示)时,您可以通过几何居中资产来使字形光学居中。

【苹果/字体图标本地化】字形- 人机界面指南 - 图7

将字形移高几个像素使其光学居中;在填充中包含像素可简化居中。

对光学居中的调整通常很小,但它们会对您的应用程序的外观产生很大的影响。

【苹果/字体图标本地化】字形- 人机界面指南 - 图8

光学定心前(左)和光学定心后(右)。

仅在必要时提供您的字形的选定状态版本。避免为自动指示选择的控件和区域中使用的字形提供选中和未选中的外观。例如,侧边栏、iOS 标签栏和 macOS 工具栏可以通过应用应用的强调色或添加背景外观来传达选择状态。

【苹果/字体图标本地化】字形- 人机界面指南 - 图9

在 iOS 中,选定的标签栏字形接收应用程序的强调色。

【苹果/字体图标本地化】字形- 人机界面指南 - 图10

在 macOS 中,选定的工具栏字形接收较暗的笔触和背景外观。

相比之下,iOS 工具栏和导航栏不提供选择外观,因此您应该为这些区域提供的每个字形创建填充和未填充版本。

【苹果/字体图标本地化】字形- 人机界面指南 - 图11

仅当文字对于传达字形的含义必不可少时,才在您的设计中包含文字。例如,在表示文本格式的字形中使用字符可能是传达概念的最直接方式。如果您需要在字形中显示单个字符,请务必对其进行本地化。如果您需要建议一段文本,请设计它的抽象表示,并包括在上下文从右到左时使用的字形的翻转版本。

【苹果/字体图标本地化】字形- 人机界面指南 - 图12

创建显示单个字符的字形的本地化版本。

【苹果/字体图标本地化】字形- 人机界面指南 - 图13

创建指示阅读方向的字形的翻转版本。

为字形提供替代文本标签。替代文本标签(或辅助功能描述)不可见,但它们可以让 VoiceOver 有声地描述屏幕上的内容,为视障人士简化导航。有关指导,请参阅辅助功能 > 复制和图像

不要创建描绘 Apple 硬件产品的自定义字形。Apple 产品受版权保护,您不能在自定义字形或图像中复制它们。SF Symbols 应用程序提供了许多您可以使用的特定于设备的符号。(您不能自定义代表 Apple 技术的符号。)

如果您提供模板图像,请考虑以 PDF 格式创建它。系统会自动为高分辨率显示缩放基于 PDF 的模板图像,因此您无需提供高分辨率版本。相比之下,PNG 格式(用于应用程序图标和其他包含阴影、纹理和突出显示等效果的图像)不支持缩放,因此您必须为每个模板图像提供多个版本。或者,您可以创建自定义 SF 符号并指定比例以确保符号的强调与相邻文本匹配(有关指导,请参阅仔细查看 SF 符号)。
https://developer.apple.com/design/human-interface-guidelines/glyphs/overview/