购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.1 图标的设计规范

图标又称为icon,是UI设计中非常重要的视觉元素,具有指代意义,能够美化UI设计并帮助用户快速识别。本节将对图标设计规范进行讲解。

2.1.1 图标的尺寸规范

根据系统的不同,图标尺寸规范也略有差异。本节将针对iOS系统和Android系统中的图标尺寸规范进行说明。

1.iOS系统中的图标尺寸规范

iOS系统中的图标具有非常具体的大小和分辨率要求,以保证图标在不同的设备上可以正确显示。其单位一般为px或pt,px即像素,是按照像素格计算的单位,即移动设备的实际像素,一般Photoshop软件的单位设置为px;pt即点,是根据内容尺寸计算的单位,一般Sketch软件的单位设置为pt。

iOS系统中的图标使用网格进行规范化设计,尺寸较为统一。一般可以将其分为应用图标和系统图标两种类型,如图2-1、图2-2所示。下面对这两种类型的图标进行介绍。

图2-1

图2-2

(1)应用图标

应用图标是应用程序的图标,主要用于主屏幕、App Store、Spotlight及设置中。在设计时,可以采用1024×1024px的尺寸设计,再通过现成尺寸模板资源生成数套尺寸文件导出。应用图标会以不同的分辨率出现在主屏幕、App Store、Spotlight及设置场景中,尺寸也根据不同设备的分辨率进行适配,如表2-1所示。

表2-1

注意事项|图标切图|

iOS应用图标由系统统一切圆角,设计时直接出方形图标即可。

(2)系统图标

系统图标是界面中的功能图标,主要用于导航栏、工具栏及标签栏,尺寸随不同设备的分辨率而变化,如表2-2所示。

表2-2

2.Android系统中的图标尺寸规范

Android系统中的图标分为应用图标和系统图标两种类型,单位为dp。dp是Android系统专用的长度单位,与px的转换公式为dp=px×dpi(dpi表示屏幕密度)/160。创建应用图标时应以320dpi分辨率中的48dp尺寸为基准;创建系统图标时应以320dpi分辨率中的24dp尺寸为基准。表2-3所示为不同设备的分辨率适配的图标尺寸。

表2-3

2.1.2 图标的视觉规范

Material Design语言提供4种不同的图标形状供设计师参考,设计图标时根据图标的形状在安全区域内绘制,可以保证视觉平衡,如图2-3所示。

图2-3

设计时为保证清晰度,需要将图标放置在像素点上,并避免出现小数点、奇数等数值,图2-4所示分别为正确示例及错误示例。

图2-4

为了保证视觉平衡,在设计图标时需要结合图像形状及视觉效果,选择合适的重心组合图形,以使图标看起来更稳。

系统图标应使用2dp的描边,以保持图标的一致性,如图2-5所示。留白区域的描边粗细也应该是2dp。倒角应保持外圆内方,外角半径默认为2dp,如图2-6所示。

图2-5

图2-6

描边末端应该是直线并带有角度,若描边倾斜45°,其末端也应倾斜45°结束,如图2-7、图2-8所示。

图2-7

图2-8

动手练 制作视频播放器图标

在学习图标设计规范的相关知识后,下面将利用该部分知识制作视频播放器图标。具体的操作步骤如下。

步骤01 打开Illustrator软件,新建一个192×192px大小的空白文档,如图2-9所示。

步骤02 选择“圆角矩形”工具 ,在画板中单击,打开如图2-10所示的“圆角矩形”对话框,设置参数。

图2-9

图2-10

步骤03 单击“确定”按钮创建圆角矩形,如图2-11所示。

步骤04 在工具栏中设置填充为紫色(#9A73E2),描边为无,效果如图2-12所示。

图2-11

图2-12

步骤05 选择“直线段工具” ,在画板中绘制直线段,在“属性”面板中调整其参数,如图2-13所示。

图2-13

步骤06 效果如图2-14所示。

图2-14

步骤07 选择画板中的对象,在“路径查找器”面板中单击“分割”按钮 ,将圆角矩形分割为两部分,如图2-15所示。

步骤08 选中分割后的圆角矩形,右击,在弹出的快捷菜单中执行“取消编组”命令,取消编组,并设置上半部分填充为绿色(#5BCB95),如图2-16所示。

图2-15

图2-16

步骤09 选择“椭圆工具” ,在绿色填充上方单击,打开如图2-17所示的“椭圆”对话框,设置参数。

步骤10 完成后,单击“确定”按钮创建圆形,如图2-18所示。

图2-17

图2-18

步骤11 选中圆形,在“属性”面板中调整参数,如图2-19所示。

步骤12 效果如图2-20所示。

图2-19

图2-20

步骤13 设置圆形的填充为黄色(#EBD91F),如图2-21所示。

步骤14 使用相同的方法绘制圆形,并调整位置及颜色,效果如图2-22所示。

图2-21

图2-22

步骤15 使用“直线段工具” 绘制一条直线段,在“属性”面板中设置参数,如图2-23所示。

步骤16 选中直线段,在工具栏中设置其填充为无,描边为浅紫色(#EBDBED),粗细为2pt,端点为圆头,效果如图2-24所示。

图2-23

图2-24

步骤17 使用“椭圆工具” 在直线段上绘制一个半径为4px的圆,设置其填充与顶部绿色一致,效果如图2-25所示。

步骤18 选择“多边形工具” ,在画板中单击,打开如图2-26所示的“多边形”对话框,设置参数。

图2-25

图2-26

步骤19 完成后单击“确定”按钮创建三角形,在“属性”面板中设置参数,如图2-27所示。效果如图2-28所示。

图2-27

图2-28

至此,完成视频播放器图标制作。 d9n83j21vPbtxjs2RbJuN1uvuiaMJzMp9dlRRNWS8NlN1D4EJyAIMAgcjHYm4k+W

点击中间区域
呼出菜单
上一章
目录
下一章
×