自定义图标

如果你的应用程序包括无法用系统图标表示的任务或状态时,或者如果系统图标与App的样式不匹配时,你可以创建自己的图标。

创建易识别、高度简化的设计。 太多的细节会使图标混乱或不易读。争取一个简单的,通用的设计,大多数人会迅速识别,并且不会发现不舒服。最好的图标使用熟悉的视觉隐喻,它们与它们发起的动作或内容直接相关。

自定义图标_第1张图片

把图标设计为符号。符号,也被称为模板图形,是具有透明性、反走样性和不使用遮罩来定义其形状阴影的单色图像。基于上下文和用户交互,符号自动接收适当的外观(包括着色、高亮显示和亮度)。很多标准的交互接口支持符号,包括导航栏、标签栏、工具栏和主屏幕快捷操作。

准备@2x的缩放比例的符号并保存为PDF格式。 因为PDF是允许高分辨率缩放的矢量格式, 通常情况下,在你的App中提供单独一个 @2x版本的PDF并让它可以缩放到其他分辨率,就足够了。

保持图标的一致。 不管你只使用自定义图标,还是混合使用自定义和系统图标,在你的App里的所有的图标应该在视觉层次,亮度,字体粗细,位置和透视上一样。

确保图标清晰易懂。 一般来说,实心图标往往比空心图标更清晰。 如果图标必须包含线条,则与其他图标和App的排版之间协调权重。

自定义图标_第2张图片

使用颜色来表达选择和取消选择的状态。 避免在两个不同的图标设计之间切换,比如一个实心版本和一个空心版本。

避免在图标中包含文本。 如果需要文本,在图标的下面显示文本标签,并调整相应的位置。

不用使用Apple硬件产品的复制图。 苹果产品受版权保护,不能在你的图标或图像中复制。一般来说,要避免显示硬件图标,因为硬件设计往往频繁改变,这会让你的图标看起来过时了。

为图像和图标提供替代的文本标签。 替代的文本标签在屏幕上是不可见的,但是它们让语音转换可以直观地描述屏幕上的内容,从而更容易的为视觉障碍的人导航。

自定义图标尺寸

最重要的是,你的App图标组在尺寸上应该是视觉一致的。如果个别图标设计在权重上有差异,一些图标也许需要比其他图标大一点,以达到想要的效果。

导航栏和工具栏图标的尺寸

在准备自定义导航栏和工具栏图标时使用以下的指导尺寸创建,但根据需要调整以到达平衡。

目标尺寸 最大尺寸
72px × 72px (24pt × 24pt @3x) 84px × 84px (28pt × 28pt @3x)
48px × 48px (24pt × 24pt @2x) 56px × 56px (28pt × 28pt @2x)

标签栏图标尺寸

在纵向方向上,标签栏图标显示在标签标题的上面。在横向方向上,图标和标题并排显示。根据设备和方向,系统展示标准的或紧凑的标签栏。你的App应该包含这两种尺寸的自定义标签栏图标。

属性 常规标签栏 紧凑标签栏
目标宽和高(圆形符号) 75px × 75px (25pt × 25pt @3x) 54px × 54px (18pt × 18pt @3x)
50px × 50px (25pt × 25pt @2x) 36px × 36px (18pt × 18pt @2x)
目标宽和高(方形符号) 69px × 69px (23pt × 23pt @3x) 51px × 51px (17pt × 17pt @3x)
46px × 46px (23pt × 23pt @2x) 34px × 34px (17pt × 17pt @2x)
目标宽度(宽符号) 93px (31pt @3x) 69px (23pt @3x)
62px (31pt @2x) 46px (23pt @2x)
目标高度(高符号) 84px (28pt @3x) 60px (20pt @3x)
56px (28pt @2x) 40px (20pt @2x)

你可能感兴趣的:(自定义图标)