服务时间:8:30-18:00

首页 >UI设计网

iOS系统图标设计规则

发布时间:2022-02-15 00:49 字数:2469字 阅读:110

iOS系统图标设计规则,iOS系统中所有的程序都需要图标来为用户传达应用程序的基础信息的重要使命。按照应用领域的不同可以分为程序图标、小图标、文档图标、Web快捷方式图标和导航栏、工具栏和Tab栏上用的图标。

iOS系统图标设计规则

在绘制图标之前,要考虑图标想要表达的内容。

■ 简单而富有流线感:太多的细节会让图标显得笨拙,难以辨认。

■ 不容易和系统提供的图标搞混:用户应该能一眼把绘制的图标和系统提供的标准图标分开。

■ 易懂,容易被接受:要绘制的图标能够被大多数用户理解,不会被用户抵触。

■ 避免使用和苹果产品重复的图片:苹果产品图片都有产权保护,并且会经常变动。

思考图标外观时依照如下指南。

■ 要有合适的透明度。

■ 不包含投影效果。

■ 使用抗锯齿效果。

■ 如果要添加斜面效果,确保光源放在最上方。

■ 让所有图标看起来一样重。

■ 要在所有图标间平衡尺寸、细节丰富度以及实心部分。

程序图标

用户通常会把程序图标放在桌面上,点击图标就可以启动相应的程序。程序图标是每一个程序中必不可少的一部分,图标是完美的品牌宣传和视觉设计的结合,同时也形成紧密结合、高度可辨、颇具吸引力的画作。

图标也会被用在Game Center中。针对不同的设备要创建与其相应的程序图标。如果程序要适用于所有设备,提供以下3种尺寸的图标。

·为iPhone和iTouch设计的图标。

■ 57像素×57像素。

■ 114像素×114像素(高分辨率)。

·为iPad设计的图标。

■ 72像素×72像素。

·当在桌面上显示图标时,会自动添加以下效果。

■ 有90°角。

■ 没有高光效果。

■ 不使用透明层。

·为确保设计好的图标与iOS桌面提供的加强效果相配,制作时图标应符合以下3点。

■ 没有90°角。

■ 没有高光效果。

■ 不使用透明图层。

程序图标的背景要清晰可见。iOS系统自动为图标添加了圆角,在桌面上有清晰可见的背景的图标才好看。iOS系统添加的效果可以保证桌面上的图标有统一整齐的外观,以其好看的外表吸引用户点击。

提示:为了使图标与其他桌面图标一致,iOS系统会自动为图标添加圆角、投影和反射高光视觉特效。因此在制作时图标应该没有90°尖角和高光效果,方可确保制作的图标与iOS系统为其添加的效果相得益彰。

小图标

iOS程序还需要一个小版本的图标,用于在Spotlight搜索结果里展示某个程序。

如果需要设置的话,程序还需要在设置里放一个可与其他内置程序相区分的、在一列搜索结果里具有足够的可辨识性的图标。

在iPhone和iPod Touch中,iOS在Spotlight搜索结果和Settings里用的是同一个图标。如果没有提供这个版本,iOS会把程序图标压缩做程序展示图标。

·对于iPhone,应用图标尺寸如下所示。

■ 29像素×29像素。

■ 58像素×58像素(高分辨率)。

·对于iPad,要为Settings和Spotlight搜索结果提供专门的尺寸。

■ 50像素×50像素(为Spotlight)。

■ 39像素×39像素(为Settings)。

文档图标

如果iOS程序定义了自己的文档类型,也要定制一款图标来识别。如果没有提供定制文档图标,iOS就会把程序图标改一下用作默认的文档图标。

若要自己为程序定制文档图标,最好将其设计得容易记忆,与程序图标联系紧密,因为用户会在不同的地方看到文档图标。文档图标要漂亮、表意清晰、细节丰富。

根据程序运行平台的不同,创建不同尺寸的图标。

·对于iPhone版iOS图标,创建两种尺寸的文档图标。

■ 22像素×29像素。

■ 44像素×58像素。

可以将制作的图标居中或缩放填充在规定的格子里。

·对于iPad版iOS图标,创建两种尺寸的文档图标。

■ 64像素×64像素

■ 320像素×320像素

提示:为了便于在任何环境中都能找到合适的尺寸,建议将两种尺寸的图标都准备好。iOS会为图标添加卷角效果,因此即便是画作大小完全适合安全区的尺寸,右上角也总是会被遮掉一部分。另外,从上到下的渐变也会被iOS所覆盖。

因此,为了创建一个完整的文档图标,在制作时针对不同的尺寸有不同的解决方法。

·创建完整的64像素×64像素的图标。

■ 创建64像素×64像素的PNG格式图像。

■ 加入Margin,创建安全区。

·创建完整的320像素×320像素的图标。

■ 创建320像素×320像素的PNG格式图像。

■ 加入Margin,创建安全区。

Web快捷方式图标

若制作的程序中带有Web小程序或者网站,可以为其定制一款图标,用户可以将其直接放在桌面上,点击图标直接访问网页内容。定制的图标可以代表整个网站或者某个网页。

最好将网页中有特色的图片或者可识别的颜色主题应用到图标里。

为了确保图标在设备上看起来更完美,制作时应遵照以下指南。

·为iPhone和iPod Touch创建下列尺寸的图标。

■ 57像素×57像素。

■ 114像素×114像素。

·为iPad创建如下尺寸的图标。

■ 72像素×72像素。

导航栏、工具栏和Tab栏上用的图标

尽可能使用系统提供的按钮和图标来代表标准任务。

创建用于导航栏和工具栏的定制图标来代表程序中用户经常要执行的任务。如果程序用Tab栏在不同的定制内容和定制模式间切换,就需要为Tab栏定制图标。

工具栏和导航栏上的图标尺寸如下。

·对于iPhone和iPod

■ 约20像素×20像素。

■ 约40像素×40像素(高分辨率版本)。

·对于iPad

■ 20像素×20像素。

Tab栏上的图标尺寸如下。

·对于iPhone和iPod

■ 约30像素×30像素。

■ 约60像素×60像素(高分辨率版本)。

·对于iPad

■ 约30像素×30像素。

·不要为图标提供选中态或按压态。

图标效果是自动叠加的,所以无法定制。因此即使图标提供选中态或按压态,iOS也不会为导航栏、工具栏和Tab栏的图标自动生成这些状态。