iOS 图标图像 (官方翻译版)

图像尺寸和分辨率

iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量,它们映射到显示屏中的像素。在标准分辨率屏幕上,一点等于一个像素。高分辨率屏幕具有较高的像素密度。因为在相同量的物理空间中有更多像素,所以每点有更多像素。因此,高分辨率显示器需要具有更多像素的图像。

为您的应用程序的所有设备提供高分辨率图像,适用于您的应用程序支持的所有设备。根据设备,您可以通过将每个图像中的像素数乘以特定比例因子来实现。标准分辨率图像的比例因子为1.0,称为@ 1x图像。高分辨率图像的比例因子为2.0或3.0,被称为@2x和@3x图像。假设你有一个标准的分辨率@1x图像,例如100px×100px。该图像的@2x版本将为200px×200px。@3x版本是300px×300px。

image.png

设计高分辨率作品

使用8px×8px的网格。网格保持线条清晰,并确保内容在所有尺寸上尽可能清晰,需要较少的修饰和锐化。将图像边界捕捉到网格以最小化半像素,并缩小缩小时可能会出现的模糊细节。

以适当的格式制作艺术作品。一般来说,使用去隔行PNG文件进行位图/光栅图稿。PNG支持透明度,因为它是无损的,压缩伪像不会模糊重要的细节或改变颜色。对于复杂的艺术作品来说,这是一个很好的选择,它需要像阴影,纹理和亮点这样的效果。使用JPEG的照片。其压缩算法通常产生比无损格式更小的尺寸,并且在照片中难以辨别伪影。但是,逼真的应用程序图标最适合PNG。将PDF用于需要高分辨率缩放的字形和其他平面的矢量图稿。

使用不需要完整24位颜色的PNG图形的8位调色板。使用8位调色板可以减少文件大小,而不会降低图像质量。此调色板不适合照片。 优化JPEG文件以找到大小和质量之间的平衡。大多数JPEG文件可以被压缩,而不会明显降低所得到的图像。即使是少量的压缩也可以节省大量的磁盘空间。在每个图像上进行压缩设置,以找到可以获得可接受结果的最佳值。

提供图像和图标的替代文本标签。替代文字标签在屏幕上看不到,但是他们让VoiceOver听起来可以描述屏幕上的内容,使视觉障碍的人更方便导航。

应用图标

每个应用程序都需要一个美丽而难忘的图标,吸引App Store的关注,并在主屏幕上脱颖而出。您的图标是第一个与您的应用程序通信的机会,一目了然。它也出现在整个系统中,例如在设置和搜索结果中。

image.png

拥抱简约。找到一个单一的元素,捕捉您的应用程序的本质,并以简单,独特的形状表达该元素。谨慎地添加细节。如果图标的内容或形状过于复杂,则细节难以辨别,特别是较小的尺寸。

提供单个焦点。设计一个单一的中心点的图标,立即捕获注意力并清楚地识别您的应用程序。

设计一个可识别的图标。人们不应该分析图标来弄清楚它代表什么。例如,邮件应用程序图标使用与邮件通用关联的信封。花时间来设计一个美丽而引人入胜的抽象图标,从而艺术化地表达您的应用程序的目的

保持背景简单,避免透明度。确保你的图标是不透明的,不要杂乱的背景。给它一个简单的背景,所以它不会压倒附近的其他应用程序图标。您不需要填写整个图标的内容。

只有当它们是必需品或标志的一部分时才使用单词。应用程序的名称显示在主屏幕下方的图标下方。不要包含重复该名称的不重要的单词,或告诉人们如何处理您的应用程序,例如“观看”或“播放”。如果您的设计包含任何文本,请强调与您的应用程序提供的实际内容相关的单词。

不要包括照片,屏幕截图或界面元素。摄影细节在小尺寸上很难看出。屏幕截图对于应用图标来说太复杂了,通常不会帮助您传达应用的目的。图标中的界面元素具有误导性和混淆性。

不要使用苹果硬件产品的副本。苹果产品受版权保护,无法在您的图标或图像中复制。一般来说,避免显示设备的副本,因为硬件设计往往会频繁更改,并且可以使您的图标看起来过时。

不要在应用程序图标的整个界面。在整个应用程序中看到用于不同目的的图标可能会令人困惑。相反,请考虑使用您的图标的配色方案。见颜色

根据不同的壁纸测试你的图标。您无法预测哪些壁纸会为主屏幕选择,所以不要只是测试您的应用程序的光或暗的颜色。看看它如何看待不同的照片。尝试在具有动态背景的实际设备上,随设备移动而改变透视图。

保持图标角落正方形。系统应用一个自动轮回图标角的蒙版。

应用程序图标属性

所有应用图标应符合以下规格。

image.png

1、颜色管理 2、图像大小和分辨率

应用图标大小

每个应用程序必须提供小图标,以便在应用程序安装后在主屏幕和整个系统中使用,还有一个更大的图标可在App Store中显示。

image.png

为不同的设备提供不同大小的图标。确保您的应用程序图标在您支持的所有设备上看起来都很棒。

使用App Store图标模拟您的小图标。虽然App Store图标的使用方式与小型图标不同,但它仍然是您的应用程序图标。它应该通常与较小版本的外观相匹配,尽管它可以更加丰富和更细致,因为它没有应用视觉效果。

Spotlight,设置和通知图标

每个应用程序还应提供一个小的图标,当应用程序名称与Spotlight搜索中的术语匹配时,iOS可以显示该图标。此外,具有设置的应用程序应提供一个小图标,以显示在内置的“设置”应用程序中,支持通知的应用程序应提供一个小图标,以在通知中显示。所有图标应该清楚地标识您的应用 - 理想情况下,它们应该符合您的应用图标。如果您不提供这些图标,iOS可能会缩小您的主要应用图标,以便在这些位置显示。

image.png

不要在“设置”图标上添加叠加层或边框。iOS会自动为所有图标添加1像素笔画,使其在“设置”的白色背景上看起来很好。

提示 如果您的应用程序创建自定义文档,则不需要设计文档图标,因为iOS会使用您的应用程序图标自动创建文档图标。

用户可选的应用程序图标

对于某些应用,定制是一个唤起个人连接并增强用户体验的功能。如果您在应用程式中提供价值,您可以让使用者从您应用程式中嵌入的一组预定义图示中选择其他应用程式图示。例如,运动应用程序可能会为不同的团队提供图标,或者具有明暗模式的应用程序可能会提供相应的明暗图标。请注意,您的应用图标只能根据用户的要求进行更改,系统始终向用户提供此类更改的确认。

提供所有必要尺寸的视觉一致的替代图标。像您的主要应用程式图示一样,每个替代应用程式图示均会传送成不同大小的相关图片的集合。当用户选择替代图标时,该图标的相应尺寸将替换主屏幕,Spotlight和系统其他位置的主应用程序图标。为了确保系统中的备用图标始终保持一致 - 用户不应该在主屏幕上看到图标的一个版本,而在“设置”中则看不到完全不同的版本,请以与您为主应用程序图标提供的尺寸相同的尺寸提供它们(App Store图标除外)。请参阅应用图标大小。 有关开发人员的指导,请参阅UIApplicationsetAlternateIconName方法。

注意 替代应用图标需要通过应用程序审核进行审核,并且必须遵守App Store评估指南

自定义图标

如果您的应用程序包含系统图标无法表示的任务或模式,或者系统图标与应用程序的风格不符,则可以创建自己的图标。

创建可识别,高度简化的设计。太多的细节可能会使图标变得混乱或不可读。努力实现一种简单的通用设计,大多数人都会快速识别,不会发现冒犯。最好的图标使用与他们发起的动作直接相关的熟悉的视觉隐喻或他们透露的内容。

image.png

设计图标为字形。字形,也称为模板图像,是具有透明度,抗锯齿功能的单色图像,并且没有使用掩模来定义其形状的阴影。字形根据上下文和用户交互自动收到适当的外观,包括着色,突出显示和活力。各种标准接口元素支持字形,包括导航栏,标签栏,工具栏和主屏幕快速操作。 准备比例因子为@ 2x的字形,并保存为PDF格式。因为PDF是一种允许高分辨率缩放的矢量格式,所以在您的应用程序中提供一个@ 2x版本通常就足够了,并允许其扩展其他分辨率。

保持你的图标一致。无论您仅使用自定义图标还是混合使用自定义和系统图标,应用程序中的所有图标在细节级别,光学重量,行程重量,位置和透视度方面都应相同。

确保图标清晰可辨。一般来说,固体图标往往比概述的图标更清晰。如果图标必须包含线条,请与其他图标和应用程序的排版协调权重。

使用颜色来传达选择和取消选择的状态。避免在两个不同的图标设计之间切换,如固体版本和概述版本。

避免在图标中加入文字。 如果您需要文字,请在图标下方显示标签,并相应调整其位置。

不要使用苹果硬件产品的副本。苹果产品受版权保护,无法在您的图标或图像中复制。一般来说,避免显示设备的副本,因为硬件设计往往会频繁更改,并且可以使您的图标看起来更加周到。

提供图标的替代文字标签。替代文字标签在屏幕上看不到,但是他们让VoiceOver听起来可以描述屏幕上的内容,使视觉障碍的人更方便导航。

自定义图标大小

最重要的是,您的应用程序的图标系列应在大小上视觉上保持一致。如果个别图标设计的重量不同,则某些图标可能需要略大于其他图标才能实现此效果。

导航栏和工具栏图标大小

准备自定义导航栏和工具栏图标时,请使用以下尺寸进行指导,但是根据需要进行调整以创建余额。

image.png

标签栏图标大小

在纵向方向,标签栏图标显示在标题标题上方。在横向上,图标和标题并排出现。根据设备和方向,系统会显示常规或紧凑的标签栏。您的应用程式应包含两种尺寸的自订标签栏图示。

启动屏幕

启动应用程序时,即会立即显示启动屏幕。您的应用程序的第一个屏幕快速替换启动屏幕,给人的印象是您的应用程序快速响应。发射屏幕不是艺术表现的机会。它只是为了提高您的应用程序的感觉,快速启动并立即准备使用。每个应用程序都必须提供启动屏幕。

启动屏幕

第一屏

由于设备屏幕大小不同,启动屏幕大小也不尽相同。为了适应这个需要,您可以为您的应用程序支持的设备提供启动屏幕作为Xcode故事板或一组静态图像。使用Xcode故事板是推荐的方法,因为故事板是灵活和适应性强。您可以使用单个故事板来管理所有的启动屏幕。要了解如何实现适应性界面,请参阅自动布局指南

设计一个几乎与应用程序的第一个屏幕相同的启动屏幕。如果您在应用程序完成启动时包含看起来不同的元素,则可能会在启动屏幕和应用程序的第一个屏幕之间遇到不愉快的闪光。

避免在启动屏幕上包含文本。因为启动屏幕是静态的,任何显示的文本都不会被本地化。

低调发射。人们很可能会频繁切换应用,因此设计一个不会引起对应用程序启动体验的启发屏幕。

不要做广告 发射屏幕不是品牌的机会。不要设计一个看起来像闪屏或“关于”窗口的入门体验。不要包含徽标或其他品牌元素,除非它们是应用程序的第一个屏幕的静态部分。

静态启动屏幕图像

最好在启动屏幕上使用Xcode故事板,但如果需要,您可以提供一组静态图像。为不同的设备创建不同大小的静态图像,并确保包含状态栏区域。

image.png

系统图标

该系统提供内置的图标,代表各种用例中常见任务和内容类型。 导航栏和工具栏图标 标签栏图标 主屏幕快速操作图标

这是一个好主意,尽可能使用这些内置的图标,因为他们是熟悉的人。 按照预期使用系统图标。每个系统提供的图像具有特定的,众所周知的意义。为了避免混淆用户,必须根据其含义和推荐用法使用每张图像。 提供图标的替代文字标签。替代文字标签在屏幕上看不到,但是他们让VoiceOver听起来可以描述屏幕上的内容,使视觉障碍的人更方便导航。 如果您找不到符合您需求的系统提供的设计,请设计自定义图标。设计自己比使用系统提供的图像更好。查看自定义图标

导航栏和工具栏图标

导航栏工具栏中使用以下图标。有关开发人员的指导,请参阅UIBarButtonSystemItem

提示 您可以使用文本而不是图标来表示导航栏或工具栏中的项目。例如,日历在工具栏中使用“今天”,“日历”和“收件箱”。您还可以使用固定的空格元素来提供导航和工具栏图标之间的填充。

显示包含在当前上下文中有用的共享扩展,操作扩展和任务(如“复制”,“收藏夹”或“查找”)的模态视图。行动

添加导航栏和标签栏图标

书签导航栏和标签栏图标

显示应用专用书签。书签

相机导航栏和标签栏图标

拍摄照片或视频,或显示照片库。相机取消

取消

关闭当前视图或结束编辑模式,而不保存更改。取消

撰写导航栏和标签栏图标

在编辑模式下打开新视图。撰写

完成

保存状态并关闭当前视图,或退出编辑模式。DONE

编辑

在当前上下文中进入编辑模式。编辑

快进导航栏和标签栏图标

通过媒体播放或幻灯片快进。快进

组织导航栏和标签栏图标

将项目移动到新的目的地,如文件夹。组织

暂停导航栏和标签栏图标

暂停媒体播放或幻灯片。暂停时始终存储当前位置,以便播放可以在以后恢复。暂停

播放导航栏和标签栏图标

开始或恢复媒体播放或幻灯片。开始

重做

重做已撤销的最后一个操作。重做

刷新导航栏和标签栏图标

刷新内容 请谨慎使用此图标,因为您的应用程式应尽可能自动刷新内容。刷新

回复导航栏和标签栏图标

发送或路由一个项目到另一个人或位置。回复

回滚导航栏和标签栏图标

通过媒体播放或幻灯片向后移动。倒带

保存

保存当前状态。保存

搜索导航栏和标签栏图标

显示搜索字段。搜索

停止导航栏和标签栏图标

停止媒体播放或幻灯片。停止

垃圾导航栏和标签栏图标

删除当前或所选项目。垃圾

image.png

撤消上一个操作。撤消

标签栏图标

标签栏中使用以下图标。有关开发人员的指导,请参阅UITabBarSystemItem

书签标签栏图标

显示应用专用书签。书签

联系人标签栏图标

显示该人的联系人。往来

下载标签栏图标

显示活动或最近的下载。下载

收藏夹标签栏图标

显示该人最喜欢的项目。最爱

精选标签栏图标

显示应用程式特色的内容精选

历史选项卡栏图标

显示最近的行动或活动。历史

更多标签栏图标

显示额外的标签栏项目。更多

最近的标签栏图标

显示在特定时间段内最近访问的内容或项目。mostRecent

最常浏览的标签栏图标

显示最受欢迎的项目。最受关注

搜索标签栏图标

进入搜索模式。搜索

最高评分标签栏图标

显示最高评分的项目。topRated

主屏幕快速操作图标

主屏幕快速操作菜单中使用以下图标。有关开发人员的指导,请参阅UIApplicationShortcutIconType

添加快速动作图标

创建一个新项目。

报警快速动作图标

设置或显示报警。报警

音频快速动作图标

表示或调整音频。音频

书签快速动作图标

创建书签或显示书签。书签

拍摄照片快速动作图标

拍摄照片capturePhoto

捕获视频快速动作图标

捕获视频、拍摄视频captureVideo

云快速动作图标

表示,显示或启动基于云的服务。

撰写快速动作图标

组合新的可编辑内容。撰写

确认快速动作图标

表示一个动作完成。确认

联系快速图标

选择或显示联系人。联系

日期快速动作图标

显示日历或事件,或执行相关操作。日期

喜欢的快速动作图标

表示或标记最喜欢的项目。喜爱

家庭快速动作图标

指示或显示主屏幕。指示,显示或路由到实体家庭。

邀请快速动作图标

表示或显示邀请。请帖

位置快速动作图标

表示位置的概念或访问当前的地理位置。位置

爱快速动作图标

表示或标记一个被爱的物品。喜欢

邮件快速动作图标

创建邮件消息。邮件

标记位置快速动作图标

标记位置、表示,显示或保存地理位置。markLocation

消息快速动作图标

创建新消息或表示使用消息传递。信息

暂停快速动作图标

暂停媒体播放。暂停时始终存储当前位置,以便播放可以在以后恢复。暂停

播放快速动作图标

开始或恢复媒体播放。开始

禁止快速动作图标

表示某事是不允许的。禁止

搜索快速动作图标

进入搜索模式。搜索

分享快速动作图标

与他人或社交媒体分享内容。分享

随机播放快速动作图标

指示或启动随机播放模式。拖曳

任务快速动作图标

表示未完成的任务或将任务标记为完成。任务

任务完成快速动作图标

表示完成的任务或将任务标记为不完整。taskCompleted

时间快动作图标

表示或显示时钟或定时器。时间

更新快速动作图标

更新内容。更新

原文链接 https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

26012
来自专栏阮一峰的网络日志

最佳网页宽度及其实现

以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;...

1123
来自专栏Golang语言社区

【Go 语言社区】算法课程 第一季 第5节 回文检查

回文概念:大致就是把这个数倒过来念数字还是和原来的一样. 运行结果: 代码: package main import ( "fmt" ) //...

3254
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

4907
来自专栏Web 开发

2014年CSS报告

国外有人把Alex的TOP1000的CSS给爬了一遍,然后做了一些统计,蛮有意思的。

1060
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

3429
来自专栏九彩拼盘的叨叨叨

学习纲要:常用样式

ps: 学习目标看着很少,但学习目标的第一点有很多要学的。目前写的比较粗,以后我会细化。

662
来自专栏前端小作坊

CSS动画的性能优化

在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子,Stripe Checkout小组通过UI动画效果来...

792
来自专栏Java技术分享圈

杨老师课堂之网页制作HTML的学习入门-含有案例

l HTML的标记通常是由开始标签和结束标签组成:<b>内容</b> <br/>

1382
来自专栏前端知识分享

第132天:移动web端-rem布局(进阶)

      该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注...

1493

扫码关注云+社区