iOS12界面设计指南之图标图像(Icons and Images)–自定义图标(Custom Icons)

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

如果你的应用含有不能用系统图标表示的任务或模式,又或是系统图标与你的应用风格不符,你可以设计你自己的图标。自定义图标通常被叫做模板,它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。

创作简单、辨识度高的设计(Create simple, recognizable designs. )太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。

设计一个纯色并带有透明度的、无锯齿、无阴影的图标(Design a solid color icon with transparency, anti-aliasing, and no drop shadow. )iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。允许用透明度来定义图标的形状。

保持图标之间一致连贯(Keep your icons consistent.)无论你只使用自定义图标或是混合使用自定义图标和系统图标,在应用中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。

提供两种自定义标签栏图标的版本(Provide two versions of custom tab bar icons.)为未选中和选中态提供两个图标。选中态的图标经常是未选中态图标的填充版本,但是某些设计会使用不同的方法。比如,苹果的原生应用经常会将内部细节反过来填充,增粗或减细描边,以及把图标放在譬如圆形的形状内。

不要在自定义标签栏图标内包含文本(Don’t use text in a tab bar icon. )如果你需要展示文本,请在标签下面直接加上标题并且适当调节位置。

不要复用Apple硬件产品的图形(Don’t use replicas of Apple hardware products. )Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

为图标提供可选的文本标签(Provide alternative text labels for icons. )可选文本标签在屏幕上是不可见的,但他们可以让VoiceOver来描述屏幕上的内容,使得导航可以为视听障碍的人更容易操作。

自定义标签尺寸

 导航栏与工具栏图标尺寸标签栏图标尺寸
推荐75px × 75px (25pt × 25pt @3x)75px × 75px (25pt × 25pt @3x)
50px × 50px (25pt × 25pt @2x)50px × 50px (25pt × 25pt @2x)
最大83px × 83px (27.67pt × 27.67pt @3x)144px × 96px (48pt × 32pt @3x)
56px × 56px (28pt × 28pt @2x)96px × 64px (48pt × 32pt @2x)