IOS 12设计规范(6-3)图标和图像:自定义图标(Custom Icons)

点击前往本读书笔记总目录

6.3      自定义图标(Custom Icons)

如果你的 App 含有不能用系统图标表示的任务或模式,⼜或是系统图标与你的 App 风格不符,你可以设计你⾃⼰的图标。

创作简单、辨识度的设计:    太多的细节会让图标看起来难以理解且不具可读性。努力实现一种简单的通用设计,⼤多数人都会快速识别,不会反感。最好    的图标设计,使用与 App 内容和作用直接相关的、广为人们知悉的视觉比喻。

IOS12设计规范

设计象形符号的图标:    象形符号,也称为模板图像,是具有透明度,抗锯齿功能的单⾊图像,并且图像边缘没有投影。符号外观根据 App 内容和用户交互来设计,包括着⾊,亮度和活力。各种标准界面元素支持符号,包括导航栏,标  签栏,工具栏和主屏幕快捷操作。

准备比例系数为 @2x 的符号切图,并保存为 PDF 格式: 因为 PDF 是一种支持高分辨率缩放的矢量格式,所以通常而⾔言,在你的 App 中提供一个 @2x 版本就足够了,并且这个版本支持扩展其他分辨率。

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

IOS12设计规范

确保图标清晰可辨: 一般来说,纯⾊图标往往比轮廓图标更清晰。如果图标 必须包含线条,请与其他图标和 App 的版式协调好比重。

IOS12设计规范

使用颜⾊来表示选中和取消的状态: 避免在两个不同的图标设计之间切换,如纯⾊版本和轮廓版本。

避免在图标中加入⽂字:    如果你需要展示文本,请在标签下面直接加上标题, 并且适当调节位置。

不要Apple 硬件产品的图形: Apple 产品受版权保护,不能在你的图标或是图片中被⼆次创作。一般来说,避免复用设备的图形,因为硬件设计 频繁地更新换代,这会导致你的图标看起来过时。

提供图标的替代文本标签: 替代文本标签在屏幕上看不到,但是它们帮助VoiceOver(APPLE公司推出的一种语⾳辅助程序)描述屏幕上的内容,便于视觉障碍的人“看到”屏幕上的内容。

 

自定义图标尺寸

首先,你的 App 的图标系列列应该在视觉上保持⼤小一致。如果个别图标设计的比重不同,则某些图标可能需要略⼤于其他图标才能看保持视觉一致。

IOS12设计规范

导航栏和工具栏图标尺寸

设计自定义导航栏和工具栏图标时,请参考以下尺⼨指导,如果为了保持平衡,可以进行适当调整。

⽬标尺⼨ 最⼤尺⼨
75px x 75px (25pt x 25pt @3x) 83px x 83px (27.67pt x 27.67pt @3x)
50px x 50px (25pt x 25pt @2x) 56px x 56px (28pt x 28pt @2x)

 

标签栏图标尺寸

在纵向上,底部栏图标显示在其标题上方。在横向上,图标和标题并排出现。根据设备和⽅向,系统会显示常规或紧凑的底部栏。你的 App 应该包含两  种尺⼨的自定义底部栏图标。

IOS12设计规范

属性 常规标签栏 紧凑型标签栏
⽬标宽度和⾼度(圆形符号) 75px x 75px (25pt x 25pt @3x) 54px x 54px (18pt x 18pt @3x)
50px x 50px (25pt x 25pt @2x) 36px x 36px (18pt x 18pt @2x)
⽬标宽度和⾼度(正⽅形符号) 69px x 69px (23pt x 23pt @3x) 51px x 51px (25pt x 25pt @3x)
46px x 46px (23pt x 23pt @2x) 34px x 34px (17pt x 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)

 

点击前往本读书笔记总目录

 

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(6-3)图标和图像:自定义图标(Custom Icons)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏