《交互界面设计》课件-2.3 图标的设计规范

双击安装字体，安装后重启PPT请安装字体山东科技职业学院UI设计UIdesignUI设计UIdesign山东科技职业学院2.3图标的设计规范讲课人：张天娇导入本节主要讲解图标的设计规范，包括两部分内容：尺寸相关概念、图标尺寸规范。尺寸相关概念移动设备的更新速度很快，市场上的机型越来越多，这导致同一页面往往需要适配多个不同尺寸的机型。图标是页面中的重要元素，因此了解尺寸相关概念对于图标设计来说很有必要2.3.1尺寸相关概念一、屏幕尺寸屏幕尺寸是以屏幕的对角线长度为依据，以英寸（1英寸≈2.54cm）为单位来表示的。目前市场上的手机屏幕尺寸主要有3.5英寸、4.0英寸、4.7英寸、5.0英寸、5.5英寸、6.0英寸和7.0英寸等，其中4.7英寸（iPhone6/7/8）的手机是主流机型。2.3.1尺寸相关概念二、屏幕分辨率屏幕分辨率表示显示器所能显示的像素数量，分辨率越高，画面越精细，通常用屏宽像素×屏高像素来描述屏幕分辨率。以iPhone7的屏幕尺寸为例，其屏幕宽为750像素，高为1334像素，因此其屏幕分辨率为750×1334像素，页面中图标尺寸为120×120像素，包括标签栏的图标在内，一共可容纳28个图标（7排4列）。图标尺寸规范移动智能设备图标的设计要遵循一定的尺寸规范，分别从iOS系统尺寸规范、Android系统尺寸规范、网格规范三个方面讲解。2.3.2i0S系统图标设计规范每一个应用程序需要一个应用程序图标和启动图像。随着iOS的升级，一大堆新尺寸的应用程序图标规格又出来了。除了要兼容低版本的iOS，还要兼容高版本，一个App做下来，要生成十几种不同大小的App图标。iOS上的图标可以分为：在苹果应用商店下使用图标应用程序图标主屏幕图标Spotlight搜索结果图标标签栏图标工具栏和导航栏图标2.3.2i0S系统图标设计规范一、iPhone图标设计尺寸设备AppStore应用程序主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6-6S-7Plus(@3x)1024×1024180×180152×15287×8775×7566×66iPhone6-6S-7(@2x)1024×1024120×120152×15258×5875×7544×44iPhone5-5C-5S(@2x)1024×1024120×120152×15258×5875×7544×44iPhone4-4s(@2x)1024×1024120×120114×11458×5875×7544×44iPhone3G、3GS&iPodTouch第一代、第二代、第三代1024×1024120×12057×5729×2938×3830×30iPhone图标设计尺寸（单位：像素）2.3.2i0S系统图标设计规范一、iPhone图标设计尺寸iPhone图标设计图示（单位：像素）2.3.2i0S系统图标设计规范二、iPad图标设计尺寸设备AppStore应用程序主屏幕Spotlight搜索标签栏工具栏和导航栏iPad3-4-5-6-Air-Air2-mini21024×1024180×180144×144100×10050×5044×44iPad1-21024×102490×9072×7250×5025×2522×22iPadMini1024×102490×9072×7250×5025×2522×22iPad图标设计尺寸（单位：像素）2.3.2i0S系统图标设计规范二、iPad图标设计尺寸iPad图标设计图示（单位：像素）2.3.3安卓系统图标设计规范安卓系统中的图标：表示一个应用程序的功能、内容，为未操作状态和应用提供第一印象的小幅图片。在为应用程序设计图标时，设备是多种多样的，图标在屏幕中占用的面积非常小，通过图标可以为用户和APP之间提供快速且直观的表现形式。iOS上的图标可以分为：启动图标操作栏图标上下文图标系统通知图标2.3.3安卓系统图标设计规范屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画320×48048×4832×3216×1624×24不小于2480×800、480×854、540×96072×7248×4824×2436×36不小于3720×128048×4832×3216×1624×24不小于21080×1920144×14496×9648×4872×72不小于6安卓系统的屏幕图标尺寸规范如下图所示安卓系统的屏幕图标尺寸规范(单位:像素)2.3.4图标尺寸规范课程思政：没有规矩，不成方圆党章就是党的根本大法，是全党必须遵循的总规矩。——习近平《认真学习党章严格遵守党章》（2012年11月16日），《人民日报》2012年11月20日刊登。党章是我们党的根本大法，也是党内最大的规矩、管总的规矩。只有以此为根本遵循，才能画出党的事业最大的圆。同学们作为学生，有学生的规矩；作为老师也有老师的规矩，在规矩范围内办事才能画出我们最大的圆。不仅图标设计有其尺寸规范，我们的学习生活也有特定的尺寸规范。网格规范2.3.5网格规范图标的外观取决于其功能、用广和外任环境等多种因案，我们不可能要求每个图标的宽高比例都相同，即便比例尺寸相同，不同形状的视觉大小也会有所区别，如宽高相同的正方形和圆形，正方形的视觉比例就会大于圆形。为了保证每个图林的视觉大小统一，无论是iOS系统还是Android系统中的图标，都可以使用网格规范进行制作。2.3.5网格规范在网格规范中：网格外边线是图标的实际尺寸。网格内正方形、横向矩形、纵向矩形和圆形是图形尺寸。网格边线与蓝色区域之间为安全空间。为使一组图标的视觉尺寸统一，除特殊形状外，网格中绘制的图形都应顶边制作。实际尺寸安全空间制作图标时应注意图标的实际尺寸和安全空间。2.3.5网格规范实际尺寸实际尺寸是图标输出时的尺寸，以图中的“齿轮”图标为例，其主体图形是齿轮。但实际尺寸是外国圆角矩形尺寸。通过确定图标的实际尺寸，可以规范一组图标的视觉比例，从而