最新iOS设计规范八|3大图标和图像规范(Icons and Images)

最新iOS计划标准八|3大图标和图像标准(Icons and Images)

编纂导语:了解iOS利用体系对互联网使用开发者来说十分紧张,对其有所了解,将有助于产物事情的推进,并进一步确保用户体验的优化。上篇文章里,作者对iOS体系中的视觉标准作了先容。本篇文章作者持续对图标和图像标准举行先容,一同来看一下。

iOS是运转于iPhone、iPad和iPod touch装备上、最常用的挪动利用体系之一。作为互联网使用的开发者、产物司理、体验计划师,都应当了解并熟习平台的计划标准。这有利于提高我们的事情听从,确保用户精良的体验。

iOS计划标准系列共10篇。本文是第8篇,先容图标和图像(Icons and Images)。

一、图片尺寸和区分率(Image Size and Resolution)

iOS屏幕上安排内容的坐标体系,是基于以点为单位的丈量值,该丈量值是映射到体现器的像素。

标准区分率体现器的像素密度为1:1(或@1X),此中一个像素即是一个点。高区分率体现屏具有更高的像素密度,提供2.0或3.0的比例因子(称为@2x和@3x)。因此,高区分率体现必要更多像素的图像。

比如:假定你有一个100px×100px的标准区分率(@ 1x)图像。该图像的@ 2x版本为200px×200px,@ 3x版本为300px×300px。为一切支持的装备,提供一切图标/图片的高区分率图像。

依据装备的不同,你可以将每个图片中的像素数乘以特定的比例因子来完成这个目标。

计划高区分率作品

1)使用8像素 x 8像素的网格。

网格可以使线条坚持明晰,并确保一切尺寸的内容都尽约莫明晰,变小修饰和锐化。将图像界限对齐到网格以最小化变小时约莫显现的半像素和含糊细节。

2)以得当的格式制造图稿。

通常,对位图/栅格图稿使用逐行扫描的PNG文件。

PNG支持纯透性,并且由于它是无损的,因此紧缩伪像不会含糊紧张的细节或变动颜色。关于必要诸如暗影,纹理和高光之类的后果的繁复艺术品,这是一个不错的选择。

比力片使用JPEG。它的紧缩算法通常会产生比无损格式小的尺寸,并且伪像很难在照片中区分。但是,传神的使用步骤图标看起来最好是PNG。将PDF用于必要高区分率缩放的字形和其他平面矢量插图。

3)将8位调色板用于不必要全24位颜色的PNG图形。

使用8位调色板可以减小文件轻重,而不会低落图像质量。此调色板不实用于照片。

4)优化JPEG文件以在轻重和质量之间找到均衡。

可以紧缩大大多JPEG文件,而不会分明低落所得图像的质量。即使少数紧缩也可以节流多量磁盘空间。在每张图像上举行紧缩设置实行,以找到可以承受的最佳值。

5)提供图像和图标的交换文本标签。

交换文本标签在屏幕上不偏见,但是它们使VoiceOver可以以听觉办法形貌屏幕上的内容,从而使视力停滞者的导航愈加轻松。

二、使用图标(App Icon)

每个使用步骤都必要一个斑斓而令人难忘的图标,该图标在App Store中惹起人们的注意,并在主屏幕上崭露头角。您的图标是交换您的使用目标的第一时间。它也显如今整个体系中,比如在“设置”和“搜刮后果”中。

1)拥抱简便。

找到一个可以捕捉使用步骤实质的元素,并以简便、共同的外形表达该元素。审慎添加具体信息。假如图标的内容或外形过于繁复,则约莫难以区分细节,尤其是在较小尺寸的情况下。

2)提供一个核心。

计划带有单此中央点的图标,该图标可以立刻惹起注意并清晰地标识您的使用步骤。

3)计划一个可识别的图标。

人们不必分析图标就可以看出它所代表的涵义。比如,“邮件”使用步骤图标使用一个信封,该信封通常与邮件干系联。花时间计划一个雅观且引人入胜的笼统图标,以艺术办法代表您的使用步骤的目标。

4)坚持背景简便,制止纯透。

确保您的图标不纯透,并且不要弄乱背景。给它一个简便的背景,以免影响四周的其他使用步骤图标。您无需在整个图标中添补内容。

5)仅在必不成少的徽标或徽标的一局部时使用单词。

使用步骤的称呼表如今主屏幕上其图标下方。请勿使用不必要的词来反复称呼或报告他人怎样处理您的使用,比如“观看”或“播放”。假如您的计划包含任何文本,请重申与使用步骤提供的实践内容干系的词。

6)不要包含照片,屏幕截图或界面元素。

小尺寸的照片细浪费莫很丢脸清。屏幕截图关于使用步骤图标而言过于繁复,通常无法协助转达使用步骤的用处。图标中的界面元素具有误导性和杂乱性。

7)不要使用Apple硬件产物的抄本。

Apple产物受版权保护,不克不及在您的图标或图像中复制。通常,制止体现装备的抄本,由于硬件计划会常常变动,并且会使图标显得过时。

8)不要在整个界面中安排您的使用步骤图标。

在整个使用步骤中看到用于不同目标的图标约莫会形成殽杂。相反,请思索兼并图标的配色方案。参见颜色。

9)针对不同的墙纸测试您的图标。

您无法猜测人们会为他们的主屏幕选择哪些壁纸,因此,不要仅仅针对淡色或深色测试您的使用。查察不同照片的外表。在具有动态背景的实践装备上实验使用该装备,该动态背景会随着装备的挪动而改动视角。

10)坚持图标四角方形。

体系使用一个主动将图标角变圆的蒙版。

1. 使用步骤图标属性

一切使用步骤图标都应切合以下标准:

2. 使用步骤图标轻重

一旦安装了使用步骤,每个使用步骤都必需提供小图标以供在主屏幕和整个体系中使用,以及一个大图标以在App Store中体现。

  1. 为不同的装备提供不同轻重的图标。确保您的使用图标在您支持的一切装备上看起来都不错。
  2. 让App Store图标与小图标相婚配。只管App Store图标的使用办法不同于小型图标,但它仍旧是您的使用步骤图标。它通常应与较小版本的外表婚配,只管由于没有视觉后果使用于它,因此它可以更丰厚、更过细。

3. Spotlight搜刮、设置和关照图标

每个APP还应提供一个小图标,当APP称呼与Spotlight搜刮中的紧张词婚配时,iOS可以体现该图标。

别的,提供可以表如今体系内置的“设置”APP中的小图标,支持关照功效的APP也应提供一个小图标以表如今关照中。确保一切图标都能清晰地识别出你的APP,抱负情况下,它们都应与你的APP图标相婚配。

假如你不提供这些图标,iOS约莫会变小你的主使用步骤图标表如今这些地点上。

不要在“设置”图标上添加叠加层或边框。iOS会主动为一切图标添加1像素描边,以便它们在“设置”的白色背景上看起来更友好。

4. 用户可选的使用步骤图标

关于某些APP来说,定制是一项可以唤起用户共鸣并加强用户体验的功效。假如它能在你的APP中提供代价,你可以从APP中嵌入的一组预界说图标让用户来选择一个作为备用使用图标。

比如:一一局部育APP约莫为不同的球队提供图标,大概一个有明暗形式的APP约莫会提供相应的明暗图标。

请注意,APP图标只能依据用户的哀求举行变动,并且体系一直会向用户提供此类变动的确认。

提供一切尺寸并且视觉上一律的备用图标。与主使用步骤图标一样,每个备用图标都作为一组轻重不同的干系图像提供。当用户选择备用图标时,该图标的相应轻重将交换主屏幕、Spotlight和体系等其他地点的图标。

为了确保备用图标在整个体系中一致体现,制止让用户在主屏幕上看到一个版本的图标,又在设置中的看到完全不同的版本的图标,比如:提供与主使用步骤图标相反尺寸的图标(App Store图标除外)。

三、体系图标(System Icons)iOS12及更早版本

在iOS 13或更高版本中,更习气使用SF标记来表现APP中的职责和形式。当你的APP在iOS 12或更早版本中运转时,请依照以下指南利用。体系提供内置图标,表现种种用例中的稀有职责和内容典范。

在运转iOS12及更早版本的APP中,尽约莫使用这些内置图标是个好办法,由于它们对用户来说以前很熟习了。

  1. 按预期使用体系图标。每个体系提供的图像都有特定的、通用的涵义。为了制止殽杂用户,每个图像必需依照其涵义和保举的用法使用。
  2. 为图标提供文本标签。备选笔墨标签在屏幕上不偏见,但它们让教学者可以直观地形貌屏幕上的内容,使视力停滞人士更容易导航。
  3. 假如在体系提供的图标里找不到切合你要求的图标,请计划自界说图标。计划本人的装备比滥用体系提供的图标要好。

1. 导航栏和东西栏图标

在导航栏和东西栏中使用以下图标。

注:可以使用文本代替图标来表现导航栏或东西栏中的项目。比如:日历在东西栏中使用“今天”、“日历”和“收件箱”。

还可以使用安稳空间元素在导航图标和东西栏图标之间提供添补。

2. 标签栏图标

在标签栏中使用以下图标。

3. 主屏幕快速举动图标

在主屏幕快速利用菜单中使用以下图标。

本文先容了iOS的图标和图像(Icons and Images),参考材料Apple Developer-Human Interface Guidelines。下一篇先容体系才能(System Capabilities)。

#专栏作家#

晓吾,微信群众号:体验主义,各位都是产物司理专栏作家。腾讯高等交互计划师,前创新工场、新浪微博交互计划师。专注交际创新与文娱产物计划。

本文由 @晓吾 原创公布于各位都是产物司理。未经允许,克制转载

题图来自Unsplash,基于CC0协议

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享