IOS 12设计规范(6-2)图标和图像:应用图标(App Icon)

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

6.2   应用图标(App Icon)

每个 App 都需要一个美观的,令人印象深刻的图标,能在苹果商店和主屏 幕夺人眼球。用户轻撇图标的瞬间,是你的第一个机会,用来传达你的 App  的用途。图标也贯穿于整个系统中,例如在设置和搜索结果中。

IOS12设计规范

拥抱简约: 寻找个单一的元素能够表现你的 App 的精髓,然后通过一个简单并且独特的形状表达该元素。谨慎地添加细节部分。如果图标的内容或形状过于复杂,则细节难以辨别,特别是在较⼩的尺⼨中。

设计一个可识别的图标:  用户不应该只有通过分析图标才能弄弄清楚它代表什么。例如,邮件 App 的图标使用了一个信封,因为它普遍与邮件联系在一 起。花时间来设计一个美观迷人且精炼的抽象图标,从⽽艺术化地传达你的 App 的目的。

保持背景简单,避免透明度: 确保你的图标是不透明的,不要杂乱的背景。 使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。

只有当 logo 全部或部分由⽂字组成时,才在图标使用⽂字: 在主屏幕时,一个App 的名称会在图标之下显示。不要包含没有意义的⽂字重复说明名称或是告诉用户该如何使用你的 App,比如“Watch”或“Play”。如果你的设计包含了一些⽂字,那么请强调⽂字与你的 App 提供的实际内容相关。

图标中不要包括照片,屏幕截图或界面元素:   摄影细节在⼩小尺⼨上很难看出。屏幕截图对于 App 图标来说太复杂了,通常不利利于传达 App 的目的。图标中的界面元素会令人误解和困惑。

不要使用苹果硬件产品的副本:  苹果产品受版权保护,无法在你的图标或图像中被⼆次创作。一般来说,避免复用设备的图形,因为硬件设计往往会频繁更      新迭代,而且会使你的图标看起来过时。

不要在界面到处放置 App 图标: 在 App 里发现一个图标被用于多种目的会让人困惑。反之,考虑使用图标的⾊彩方案。请参阅 Color 。

在不同的壁纸环境下测试你的图标: 你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深⾊和一种浅⾊的背景上测试你的图标。而是观察它在不同的背景上如何表现。在有动态背景的真实设备上试用它, 因为背景会随着设备移动而改变视⻆角。

保持图标的四⻆角是方形的: 系统会⾃动覆盖一个遮罩层让图标变成圆⻆角。

App 图标属性

所有App图标应符合以下规格标准:

属性
格式 PNG
颜⾊空间 sRGB 或者 P3(参阅颜⾊管理)
图层 扁平⽆透明度
分辨率 不同的分辨率,参阅图像⼤⼩和分辨率
形状 正⽅形且⽆圆⾓

 

App 图标⼤小

 每个 App 必须提供一⼤一小两个图标,小图标会出现在主屏幕,并且当你的App 被安装后会被系统使用,⼤图标会被用在苹果商店中。

IOS12设计规范

设备或环境 图标⼤⼩
iPhone 180px x 180px(60pt x 60pt @3x)
120px x 120px(60pt x 60pt @2x)
iPad Pro 167px x 167px(83.5pt x 83.5pt @2x)
iPad,iPad mini 152px x 152px(76pt x 76pt @2x)
App Store 1024px x 1024px(1024pt x 1024pt @1x)

 

为不同的设备提供不同⼤小的图标: 确保你的 App 图标在你支持的所有设备上,看起来都很棒。

使用 App Store 图标模拟您的⼩小图标: 虽然 App Store 图标的使用方式与⼩小型图标不同,但它仍然是你的 App 图标。⼤图标一般都和⼩小图标外观相匹配,但是可以稍微丰富一些,更有细节,因为不会有任何视觉效果叠加在它上面。

Spotlight、设置和通知图标

每个 App 都应提供一个⼩小图标,在 Spotlight(快速索引的功能)搜索,如果关键词与 App 名称相符,iOS 会展示该图标。同时,需要设置的 App 同样应该提供一个⼩小图标用于在系统内置的设置 App 中展示。两个图标都应该清晰标识你的 App——理想情况下,它们应该与 App 图标相符。如果你不能提供这些图标,iOS 可能会缩⼩小你的主图标,以便在这些场景中显示。

IOS12设计规范

设备 Spotlight图标⼤⼩
iPhone 120px x 120px (40pt x 40pt @3x)
80px x 80px (40pt x 40pt @2x)
iPad Pro,iPad,iPad mini 80px x 80px (40pt x 40pt @2x)

 

设备 设置图标⼤⼩
iPhone 87px x 87px (29pt x 29pt @3x)
58px x 58px (29pt x 29pt @2x)
iPad Pro,iPad,iPad mini 58px x 58px (29pt x 29pt @2x)

 

设备 通知图标⼤⼩
iPhone 60px x 60px (20pt x 20pt @3x)
40px x 40px (20pt x 20pt @2x)
iPad Pro,iPad,iPad mini 40px x 40px (20pt x 20pt @2x)

 

不要在“设置”图标上添加叠加层或边框: iOS 会⾃动为所有图标添加1像素描边,以确保它们很好地呈现在白⾊的背景上。

提示: 如果你的 App 能创建自定义⽂档,则不需要设计⽂档图标,因为 iOS 会使用你的 App 图标⾃动创建⽂档图标。

 

用户可选的 App 图标

 对于某些 App,定制功能可以产⽣用户黏性并增强用户体验:  如果定制功能可 以为你的 App 提供价值,你可以在 App 中嵌入的一组预设的图标,用户可以从中选择一个备用App 图标。例如,运动 App 可能会为不同的球队提供图标, 或者具有明暗模式的 App 可能会提供相应的明暗图标。请注意, 你的 App 图标只能根据用户的要求进行更改,系统始终向用户提供此类更改的确认信息

为所有需要的尺⼨,提供视觉一致的替代图标: 就像你的 App 主图标一样,每个备用图标均要提供不同尺⼨的图像集合。当用户选择备用图标时,相应尺⼨的图标将替代原先主图标,Spotlight 和系统其他位置的主图标。比如说,为了确保系统中的备用图标始终保持一致  ,用户不应该在主屏幕上看到图标的一个版本,而在“设置”中则看到完全不同的版本。请按照  App  主图标的尺⼨⼤小, 为备用 App 图标提供相同的尺⼨(App Store图标除外)。 请参阅 App Icon Sizes 。

开发者指南,请参阅 UIApplication 中的 setAlternateIconName 方法 。 注意: 替代应用图标需要通过 App Review 进行审核,并且必须遵守 App Store评估指南 。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(6-2)图标和图像:应用图标(App Icon)

赞 (0) 打赏

评论 0

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

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

支付宝扫一扫打赏

微信扫一扫打赏