第2章图标设计.pptx

《第2章图标设计.pptx》由会员分享，可在线阅读，更多相关《第2章图标设计.pptx（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第2章 图标设计 认识图标 图标设计原则 UI 图标设计流程 图标设计技巧2 2 掌握图标设计的基本设计原则，能够独立完成图标的设计和制作。 掌握扁平化、微扁平、拟物三种设计风格的特点，能够设计不同风格的图标。 了解移动设备中图标的参数规范，能够独立制作符合规范的图标。学习目标 目录【任务1】：扁平化相机图标设计2.22.2【任务2】：微扁平相机图标设计2.32.3【任务3】：相机写实图标设计2.42.42.12.1图标设计基础知识 点击查看本案例相关知识点 2.1 图标设计基础知识2.1.12.1.2认识图标图标设计流程 知识架构2.1.32.1.4图标设计原则图标设计技巧2.1.5图标设计

2、规范 本章将通过“扁平化相机图标设计”、“微扁平相机图标设计”和“相机写实图标设计”三个对比案例，详细讲解图标的设计技巧。章节概要在UI设计中，图标作为核心设计内容之一，是界面中重要的信息传播载体。一枚精致的图标往往能够给用户一个良好的印象，从而提高点击率和推广效果。6 6 在进行图标设计之前，需要了解一下图标设计的基础知识，以便准确、高效的完成设计任务。本节将从图标的概述、设计流程、设计原则、设计技巧以及设计规范等五方面，对图标的基础知识进行详讲解。2.1 图标设计基础知识 7 7 图标是具有明确指代含义的计算机图形，一般源自于生活中的各种图形标识，是计算机应用图形化的重要组成部分。在APP

3、设计中，图标不仅包括程序启动图标，还包括状态栏、导航等位置出现的其他图标2.1.1 认识图标2.1 图标设计基础知识 8 8 1、定义主题2.1.2 图标设计流程2.1 图标设计基础知识 定义主题是指把要设计的图标所涉及的关键词罗列出来，重点词汇突出显示，确定这些图标是围绕一个什么样的主题展开设计，对整体的设计有一个把控。9 9 2、寻找隐喻2.1.2 图标设计流程2.1 图标设计基础知识 “隐喻”是指真实世界与虚拟世界之间的映射关系，“寻找隐喻”是指通过关键词进行头脑风暴，看看可以联想到哪些实物。如“休息”这个关键词，可以联想到下面的图形。1010 2、寻找隐喻2.1.2 图标设计流程2.1

4、 图标设计基础知识 从上图可以看出，通过“休息”这个关键词，联想到了沙发和床，因为它们都有休息的功能。每一个工作和学习的环境都不一样的，导致对于某个词的隐喻理解也有所不同。例如，经常喝咖啡的人，认为工作忙碌，来一杯香醇的咖啡就是休息。当然应用是为大多数人制作的，所以要挑选最被大多数人接受的事物来抽象图形。除非你的应用是为某个群体设计的个性应用。1111 3、抽象图形2.1.2 图标设计流程2.1 图标设计基础知识 抽象图形要求设计师将生活中的原素材进行归纳，提取素材的显著特点，明确设计的目的，这是创作图标的基础。在上图中，“飞机”和“拉杆箱”都进行了抽象化处理，汲取各自最显著的特点，形成了最终

5、的图标。1212 3、抽象图形2.1.2 图标设计流程2.1 图标设计基础知识 需要注意的是，图形的抽象必须控制，图形太复杂或者太简单，识别度都会降低。当“飞机”过于写实，甚至接近照片时，就会显的非常复杂且太过具象。当“飞机”过于简单，甚至只能看到圆形轮廓的时候，就已经看不出什么了，太过抽象。1313 4、绘制草图2.1.2 图标设计流程2.1 图标设计基础知识 经过对实物的抽象化汲取后，便可以进行草图的绘制。在这个过程中，主设计师需要将实物转化成视觉形象，即最初的草图。当然草稿可能有很多方案，这时需要筛选出若干满意的方案继续下面的流程。1414 5、确定风格2.1.2 图标设计流程2.1 图

6、标设计基础知识 在确定了图标的基准图形后，下一步就是确定标准色。我们可以根据图标的类型选择合适的颜色。当你不知道使用什么颜色的时候，蓝色是最稳妥的选择。目前图标设计主流是扁平化风格。1515 6、制作和调整2.1.2 图标设计流程2.1 图标设计基础知识 根据既定的风格，使用软件制作图标。在扁平化风格盛行的今天，单独的图形设计需要更多的设计考量，需要经过大量的推敲，设计调整，因此在图标的制作中，会修正一些草图中的不足，也可能增加一些新的设计灵感。1616 7、场景测试2.1.2 图标设计流程2.1 图标设计基础知识 图标的应用环境有很多种，有的在APP srore上使用，有的在手机上使用。手机

7、的背景色也各不相同，有深色系的，也有浅色系的。我们要保证图标在各个场景下都有良好的识别性，因此在图标上线前，设计师需要在多种图标的应用场景中进行测试。1717 1、可识别性原则2.1.3 图标设计原则2.1 图标设计基础知识 可识别性原则，指的是图标要能准确表达相应的操作，即我们看到一个图标，就要明白它所代表的含义，这是图标设计的灵魂。1818 2、差异性原则2.1.3 图标设计原则2.1 图标设计基础知识 差异性原则是指图标要有差异化，以便于用户辨认和操作。因为图标设计的目标是提高效率，如果用户真的很难区分它们，反而降低了工作效率。因此，一些优秀的图标，往往能够知图达意，堪称设计典范。191

8、9 3、风格统一性原则2.1.3 图标设计原则2.1 图标设计基础知识 一套设计非常协调统一图标不仅看上去美观，同时也会增强用户的满意度。通常设计风格统一的图标可以从以下几点考虑：1）图标造型上的统一。例如，是选择扁平化图标还是选择拟物图标。2）图标色调的统一。3）图标细节元素要统一。例如是选择无边框图标，还是选择有边框图标。2020 1、正负形组合2.1.4 图标设计技巧2.1 图标设计基础知识 正负形组合是一种最常见的设计方法，我们可以根据应用抽象出两到三个重要的功能点，或者产品特质，然后提炼相应的图形，通过图形相互组合、叠加，或者抠除，组成新的图形。2121 2、折叠图形2.1.4 图标

9、设计技巧2.1 图标设计基础知识 当一个完整的平面图形设计完成后，可以分析图形的轮廓走向，在图形的结尾或者转角处做局部折叠处理。2222 3、线形图标2.1.4 图标设计技巧2.1 图标设计基础知识 线形图标是一种独特的绘制图形手法，可通过提炼图形的轮廓设计，各式线性图形，应用的形象简练、完整，更具吸引力。2323 4、透明渐变2.1.4 图标设计技巧2.1 图标设计基础知识 通过对图形放大或缩小叠加不同透明度的图形，形成一个层次丰富，形态饱满的图形组合。2424 5、色块拼接2.1.4 图标设计技巧2.1 图标设计基础知识 色块拼接是指把图形分割成有规律的块状，并填充颜色。2525 6、图形

10、复用2.1.4 图标设计技巧2.1 图标设计基础知识 对已经设计好的主图形，进行复制，通过透明度、颜色或者大小的变化，创造出一种图形阵列之美。2626 7、背景组合2.1.4 图标设计技巧2.1 图标设计基础知识 运用不同的底板背景更能使图标汇聚聚焦点、富有活力。背景可以选择纯色、渐变色、放射或规律的集合线条以及和主题相关的元素。 图标形状+背景组合。 文字+背景组合。 图文组合+背景组合。 吉祥物（或卡通形象）+背景组合。2727 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 Android系统是一个开放的系统，可以由开发者自行定义，所以屏幕尺寸规格比较

11、多元化。为了简化设计并且兼容更多手机屏幕，Android系统平台按照像素密度将手机屏幕划分为：低密度屏幕（LDPI）、中密度屏幕（MDPI）、高密度屏幕（HDPI）、X高密度屏幕（XHDPI）、XX高密度屏幕（XXHDPI）、XXX高密度屏幕（XXXHDPI）6类2828 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 像素密度比例关系分辨率(像素)屏幕尺寸（inch）LDPI0.752403202.7MDPI13204803.2HDPI1.54808003.4XHDPI272012804.65XXHDPI3108019205.2 XXXHDPI414402

12、5605.962929 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 主菜单图标是指用图形在设备主屏幕和主菜单窗口展示功能的一种应用方式。主菜单图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素）3636484872729696144144192192主菜单图标尺寸3030 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 状态栏图标是在状态栏上用来表达各种应用提醒的图标，通常具有较高的对比度。状态栏图标状态栏图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素

13、）242432324848646496961281283131 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 通知图标是指应用程序产生通知时，显示在左侧或右侧，标示显示状态的图标。通知图标通知图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素）1818242436364848727296963232 1、Android系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 Android系统并不提供统一的圆角切换功能，因此设计产出图片必须是带圆角的。3333 2、iOS系统图标设计规范2.1.5 图标设计规范2.1

14、 图标设计基础知识 iOS系统对于图标尺寸有着严格的规范要求，在不同分辨率的屏幕中，图标的显示尺寸也各不相同。3434 2、iOS系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 类型分辨率（像素）PPIiPhone3GS320480163iPhone4/4s640960326iPhone5/5s6401136326iPhone67501134326iPhone6Plus12422208401iPhone77501134326iPhone屏幕参数表3535 2、iOS系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 iPhone图标尺寸参数表图标/机型iPhon

15、e3GSiPhone4/4siPhone5/5S/6/7iPhone6PlusAPP5757114114120120180180APP Store5125125125121024102410241024标签栏导航2525505050507575导航栏/工具栏2222444444446666设置/搜索29295858585887873636 2、iOS系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 指的是应用图标。在设计时，可以直接设计为方形，通过iOS系统切出圆角。APP图标iPhone图标圆角参数图标尺寸（像素）圆角（像素）5757101141142012012022180

16、1803451251290102410241803737 2、iOS系统图标设计规范2.1.5 图标设计规范2.1 图标设计基础知识 是指应用商店的应用图标，一般与APP图标保持一致。APP Store图标标签栏导航图标：指底部标签导航栏上的图标。导航栏图标：指分布导航栏上的功能图标。工具栏图标：指底部工具栏上的功能图标。设置/搜索图标：在列表式的表格视图中左侧功能图标。3838 2.2 【任务1】：扁平化相机图标设计扁平化以其大胆的用色，简洁明快的设计风格让大家耳目一新。尤其是在移动端应用中表现的更为明显。例如，在图标设计中，扁平化设计图标减少了图形和效果（渐变、阴影等）的运用，使得界面变得

17、更加干净整齐，带给用户更加良好的操作体验。3939 相机图标是手机界面中最常见的图标，也是UI设计师入门级的基础图标。本次任务是设计一枚扁平化风格的相机图标，要求图标具备醒目、简洁、易辨识等图标基本特点。最终效果任务描述通过本任务的学习，读者可以掌握扁平化图标的基本设计技巧。2.2 【任务1】：扁平化相机图标设计4040 1.图标设计尺寸：图标的设计尺寸通常按照做大不做小的原则。本次任务按照iPhpne7中APP Store 图标尺寸规范进行设计任务分析图标尺寸（像素）圆角（像素）分辨率（像素）10241024180722.2 【任务1】：扁平化相机图标设计4141 2.设计风格：任务分析1）

18、图形设计：可以选取相机最显著的特征，运用抽象化的图形去表现。2.2 【任务1】：扁平化相机图标设计4242 2.设计风格：任务分析2）颜色搭配：在确定图标颜色时，如果不清楚要选用什么颜色，那么蓝色是最稳妥的选择。本次任务我们选用蓝色、浅蓝色和白色搭配制作一款相机图标。2.2 【任务1】：扁平化相机图标设计4343 2.2 【任务1】：扁平化相机图标设计4444 2.3 【任务2】：微扁平相机图标设计扁平化设计虽然简洁明快，但因其交互不够明显，按钮难以找到等一直被用户诟病。为了避免纯粹的扁平化设计，一些细微的效果逐渐被运用其中，例如，内阴影、投影等。扁平化设计正在向微扁平设计演变。4545 2.

19、3 【任务2】：微扁平相机图标设计扁平化设计虽然简洁明快，但因其交互不够明显，按钮难以找到等一直被用户诟病。为了避免纯粹的扁平化设计，一些细微的效果逐渐被运用其中，例如，内阴影、投影等。扁平化设计正在向微扁平设计演变。最终效果任务描述通过本任务的学习，读者可以了解扁平化和微扁平的差异，掌握微扁平图标的设计技巧。4646 2.3 【任务2】：微扁平相机图标设计1.图标设计尺寸：微扁平的图标尺寸并不会变化，因此可以参照扁平化图标的设计尺寸进行制作。任务分析图标尺寸（像素）圆角（像素）分辨率（像素）10241024180724747 2.3 【任务2】：微扁平相机图标设计2.设计风格：微扁平的图标尺

20、寸并不会变化，因此可以参照扁平化图标的设计尺寸进行制作。任务分析1）图形和配色：在图形设计和配色上仍然可以遵循扁平化的设计方法，选取实物最显著的特征，进行抽象化处理。2）底图效果：可以运用蓝色到深蓝色渐变填充的圆角正方形，作为底图。通过微渐变增强背景的颜色氛围。4848 2.3 【任务2】：微扁平相机图标设计2.设计风格：任务分析3）镜头和闪光灯效果：可以通过淡色的投影，增加元素的深度，使其从背景中脱颖而出，引起用户的注意。4949 2.3 【任务2】：微扁平相机图标设计5050 2.4【任务3】：相机写实图标设计虽然扁平化和微扁平的设计风格趋势盛行，但效果逼真的写实图标仍然是一个设计师功底的

21、体现。写实图标设计以其逼真的效果、较高的辨识度为广大用户带来愉悦的视觉享受。5151 相机写实图标最能考验设计者的综合实力，它包含了镜头色彩、金属、皮革、板材等各类质感设计。练习写实图标的设计师，往往会先从相机写实图标着手。本次任务是设计一枚相机写实图标，要求通过叠加高光、纹理、材质、阴影等效果对相机实物进行再现。最终效果任务描述通过本任务的学习，读者可以掌握写实图标的设计技巧、了解简单的光影关系原理。2.4【任务3】：相机写实图标设计5252 1.图标设计尺寸：可以参照扁平化图标的设计尺寸进行制作。任务分析图标尺寸（像素）圆角（像素）分辨率（像素）10241024180722.4【任务3】：

22、相机写实图标设计5353 2.设计风格：本次任务是制作写实图标。因此在设计中要注意光影效果的关系。在图形设计上仍然可以遵循扁平化的设计方法，选取实物最显著的特征，运用细腻的光影效果，突出各部分的层次感。任务分析1）机身：可以运用“圆角矩形工具”配合“内阴影”、“投影”等图层样式效果，运用微渐变的颜色进行制作。2）快门、闪光灯和按钮效果：可以运用“椭圆工具”配合“内阴影”、“投影”等图层样式效果进行制作。其中金属光泽的按钮可以运用角度渐变进行制作。2.4【任务3】：相机写实图标设计5454 2.设计风格：任务分析3）镜头： 镜头旋钮：可以运用“多边形工具”制作锯齿，多层次线性渐变制作凹凸的螺纹。 镜头：可以运用“内阴影”、“投影”制作镜头的多层次效果，利用角度渐变、纤维滤镜和径向模糊滤镜制作绚丽的镜头光效。2.4【任务3】：相机写实图标设计5555 2.4【任务3】：相机写实图标设计