[译]《iOS Human Interface Guidelines》——Template Icons

模板图标

你为栏或者主屏幕快捷操作创建的自定义图标也称为模板图标或者图像,因为iOS将其用于产生当你app运行时你看到的图标。

iOS定义了很多标准的小图标,比如刷新、动作、添加和喜欢。你应该尽可能地使用这些按钮和图标来代表你app中的标准任务。(查看Toolbar and Navigation Bar Buttons和Tab Bar Icons来学习更多关于你可以在栏中使用的标准按钮和图标的内容。)

如果你的app包含了不能被标准图标代表的任务或模式——或者如果标准图标与你的app风格不协调——你可以设计你自己的小图标。在高层面上,你应该以这样的图标为目标:

  • 简单合理。太多的细节会让图标显得草率或者难以辨认。
  • 不会很容易被误认为系统提供的图标之一。用户应该能够一眼区分你的自定义图标和标准图标。
  • 易于理解并且广泛接受。尽量创建一个大部分用户都能正确理解且没有用户会觉得被冒犯的符号。

IMPORTANT
确保不要在你的设计中使用复制苹果产品的图像。这些符号是有版权的,并且产品的设计可能会频繁地更改。

无论你只使用自定义的图标还是混合自定义和标准的,你的app中所有的图标应该在感知尺寸、细节等级和视觉分量上看起来属于同一个系列。

比如说,看一看iOS栏图标系列,注意它们在尺寸、细节和分量上是如何相似来产生一种和谐统一的感觉的。

[译]《iOS Human Interface Guidelines》——Template Icons_第1张图片
image

为了创建连贯的系列图标,一致性是关键:每个图标都应该尽可能地使用相同的透视和笔画粗细。为了确保所有的图标都有一只的感知尺寸,你可能需要创建一些不同实际尺寸的图标。比如说,下面显示的系统提供的图标集合都有相同的感知尺寸,机智喜欢和语音信箱比其他三个图标实际上要大一点点。

image

如果你设计一个自定义的标签栏图标,你应该提供两个版本——一个未选中的外观和一个选中后的外观。选中后的外观往往是未选中外观的填充版本,但是一些设计需要改变这一方式。

[译]《iOS Human Interface Guidelines》——Template Icons_第2张图片
image

创建一个与未选中图标内部细节反转的填充版本的图标(例如收音机图标),这样它们就会在选中版中维持特征。键盘图标也有内部细节,但是如果把背景填充并将圆形变成白线,这样的选中版会变得迷惑并且难以识别。

[译]《iOS Human Interface Guidelines》——Template Icons_第3张图片
image

有时候,设计需要轻微的修改来使选中时好看。比如说,因为计时器和广播图标包含开放区域,所以选中版浓缩了一点笔触来融入圆形外壳。

image

如果一个图标填充后变得不好辨认,一个好的替代是使用粗一点的笔触来绘制选中版。比如说,语音邮箱和阅读清单图标就使用了2 point的笔触,而不是用来绘制未选中版的1point笔触。

[译]《iOS Human Interface Guidelines》——Template Icons_第4张图片
image

有时候,在笔触描绘轮廓时图标的形状有些细节不太好看。当这种情况时——比如音乐和艺术家图标——你可以为图标的两个版本都使用填充外观。对用户来说区分选中和未选中的外观很容易,因为选中的外观颜色深并且有配色。

要设计一个自定义的小图标,要遵循下面的规则:

  • 使用透明来定义图标的形状。iOS忽略所有的颜色信息,所以不必要使用超过一个以上的填充色。
  • 不要包含阴影。
  • 使用反锯齿。

如果你想要设计一个看起来与iOS图标系列相关的小图标,那就使用非常细的笔触来绘制它。特别是1point的笔触(即@2x分辨率用2 pixel笔触)对大部分图标都会非常好。

不管图标的视觉风格是什么,都要使用Icon and Image Sizes中的尺寸来创建自定义工具栏、导航栏和标签栏的图标。如果你为主屏幕快捷操作设计自定义图标,查看Home Screen Quick Actions获取细节。

不要在自定义的标签栏图标中包含文本。用标签栏元素API来设置每个标签的标题(查看initWithTitle:image:tag:获取示例)。如果你需要调整标题的自动布局,你可以使用标题调整的API,比如setTitlePositionAdjustment:。

本文翻译自苹果官方开发文档

查看完整合集


查看作者首页

你可能感兴趣的:([译]《iOS Human Interface Guidelines》——Template Icons)