项目二UI图标设计与制作

HSUCLEARLogin账号密码UI设计HSUCLEARLogin账号密码项目二UI图标设计与制作目标TARGET教学目标

通过本项目的学习让学生掌握常用UI图标的设计、制作方法。目标TARGET知识目标认识图标设计的相关概念。了解图标的风格分类。了解图标的设计思路。掌握扁平化和拟物化图标的制作方法。目标TARGET技能目标能够按照设计思路设计图标。学会扁平化和拟物化图标的制作。目标TARGET素质目标培养学生工匠精神和创新意识。建立学生技能强己，技能爱国理念。培养学生勤于思考，善于探索的意识。

图标作为用户界面中不可或缺的重要元素，广泛应用于各类软件、网站、移动应用等场景。合理且出色的图标设计，能够显著提升用户体验，提高信息传达效率，增强产品的品牌辨识度。在当今数字化时代，无论是追求简洁高效的办公软件，还是注重视觉吸引力的游戏应用，对图标设计的要求都日益严苛。通过本项目的学习，读者将深入了解图标设计的丰富知识，包括各类图标的分类、设计原则与规范，熟练掌握多种风格图标的设计技巧，并通过一系列实践任务提升实际操作能力。项目引入HSUCLEARLogin账号密码PART01相关知识相关知识1

图标设计基础2扁平化风格图标3

拟物化风格图标

4

其它风格图标5

动效图标

图标定义

图标（ICON）是具有明确指代性含义的计算机图形，通过抽象化的视觉符号向用户传递信息。它具有高度浓缩并快速传达信息和便于记忆的特点，是计算机应用图形化的重要组成部分。

图标在广义上是具有指代意义的图形符号，应用范围很广，如交通指示牌、男女厕所标志等；狭义上通常是指启动图标，应用于计算机软件方面，如程序标识、数据标识等。图标设计基础

图标分类

应用型图标指的是在手机主屏幕上看到的图标，点击它可以进入到应用中。应用型图标表现形式有多种多样的视觉图形，设计风格也可以有多种形式，类似于品牌logo，具有唯一性。

功能型图标是存在于应用界面内的图标，是简单明了的图形，起表意功能和辅助文字的作用。而功能型图标类似于公共指示标志，具有通用性。它从外观形状上划分，通常分为线形图标、面形图标和扁平线形图标。图标设计基础

应用型图标设计原则可识别性：是图标设计的首要原则，是指设计的图标能准确地表达出所代表的隐喻。能让用户第一眼识别出它所代表的含义，从中获得相关信息。差异性：设计图标时要在突出产品核心功能的同时表现出差异性，避免同质化，力求给用户留下深刻的印象。使用栅格线：在设计图标时，使用栅格线作为设计依据，可让图标与系统保持和谐统一，更好地彼此匹配。图标设计基础

功能型图标设计原则表意准确：功能型图标设计的第一原则是表意准确，要让用户看到一个图标的第一时间理解它所代表的含义。功能型图标在应用界面起到指示、提醒、概括和表述的作用。轮廓清晰：轮廓清晰是指形状边缘棱角分明，没有发虚的像素。在Photoshop软件中，设置常规选项中选择“将矢量工具和像素网格对齐”复选框。使用图标网格：绘制图标时应随时使用48像素*48像素的图标网格作为绘制依据，它能有效帮助设计师掌握构图布局。一致性：一致性指的是造型规则、圆角尺寸、线框粗细、样式、细节特征等的统一，让图标的外观整体一致。图标设计基础

iOS系统图标设计规范

由于图标的应用场合不同，制作图标时的尺寸也有差异。在手机里图标主要有出现在桌面的启动图标、标签栏中的栏图标、菜单栏中的小图标。

设计应用图标时，优先从1024像素*1024像素开始设计（圆角半径180像素）。虽然iOS系统中的应用图标呈现出来的外观是圆角矩形的，但在提交设计稿时，圆角部分是不需要进行设计的，也就是说提交的设计稿是正方形的，圆角这部分是通过程序来实现的。图标设计基础

Android系统图标设计规范Android系统相对比较开放，没有对启动图标在风格和外形上有过多的硬性要求，没有强求使用圆角矩形作为启动图标背景。但在设计时一定要保证启动图标在任何背景上都能清晰可见。Android系统应用图标的外形虽然没有限制，但在设计时可以大致分为圆角矩形、圆形、垂直长方形、水平长方形四种。图标设计基础

图标设计流程

定义主题是指把要设计的图标所涉及的关键词罗列出来，重点词汇突出显示，确定这些图标是围绕一个什么样的主题展开设计，对整体的设计有一个把控。图标设计基础

图标设计流程

寻找隐喻,“隐喻”是指真实世界与虚拟世界之间的映射关系，“寻找隐喻”是指通过关键词进行头脑风暴，在彼类事物的暗示之下感知、体验、想象此类事物的心理行为。图标设计基础

图标设计流程

抽象图形要求设计师将生活中的原素材进行归纳，提取素材的显著特点，明确设计的目的，这是创作图标的基础。

经过对实物的抽象化汲取后，便可以进行草图的绘制。在这个过程中，主设计师需要将实物转化成视觉形象，即最初的草图。图标设计基础

图标设计流程

竞品分析,APP应用图标的图形由于需要符合大多数人的心理隐喻，因此有可能出现雷同现象。为了避免设计撞车，我们应该先去看看同类产品的图标设计是什么样子的，通过筛选分析，调整图形的设计细节，做到与同类其他产品有所区别。图标设计基础

图标设计流程

确定风格,在确定了图标的基准图形后，下一步就是确定标准色。我们可以根据图标的类型选择合适的颜色。当不知道使用什么颜色的时候，蓝色是最稳妥的选择。目前图标设计主流是扁平化风格。图标设计基础

图标设计流程

制作和调整,根据既定的风格，使用软件制作图标。在扁平化风格盛行的今天，单独的图形设计需要更多的设计考量，需要经过大量的推敲，设计调整。因此在图标的制作中，会修正一些草图中的不足，也可能增加一些新的设计灵感。

场景测试,图标的应用环境有很多种，有的在AppStore上使用，有的在手机上使用。手机的背景色也各不相同，有深色系的，也有浅色系的。我们要保证图标在各个场景下都有良好的识别性，因此在图标上线前，设计师需要在多种图标的应用场景中进行测试。图标设计基础

扁平化风格图标

线性图标

线性图标也可以称为功能性图标，大多数用于APP应用的某些具体功能展示。在Photoshop中，路径描边是绘制线性图标的最佳选择，因为它在处理形状时更为开放和灵活。

线性图标分为闭合描边、内部细节、开放描边和单纯描边四种类型。闭合描边图标是一个闭合的线框，内部没有细节，填充方法简单；内部细节图标除了闭合线框外，内部还有细节，填充方法是先填充背景再填充细节。

扁平化风格图标

扁平化风格图标

面性/剪影图标

面性图标也称为剪影图标，形态是由实心的色块组成的，类似于剪影。功能性的面性图标可以用于UI界面中线性图标被选中的状态。

常规扁平化图标特点是完全平面，无渐变、投影等效果，简洁清新，视觉识别度高；投影渐变式图标特点是轻渐变、层次简单、轻投影，简洁干净且有精致感。扁平化风格图标

扁平化风格图标

厚度感风格图标，厚度感风格的图标特点是有明显的厚度，这种风格可以制作成纯平面或微质感的。厚度感可以通过渐变和阴影效果来实现，使图标更具立体感。扁平化风格图标

扁平化风格图标

折纸风格/轻折叠风格图标，折纸风格图标的特点是在图标上融入折痕、折叠元素，让图标看起来具有轻微视觉空间感。折痕的体现主要是靠制作渐变和轻投影。扁平化风格图标

扁平化风格图标

MBE风格图标，MBE风格图标由法国设计师MBE于2015年底在Dribbble网站上发布，采用更粗的描边，去除了里面不必要的色块区分，凸显内容、活泼清晰、化繁为简。MBE风格图标的特点是带有描边线条和溢出色块，线条圆滑且有断点，溢出通过色块表达物体的阴影。扁平化风格图标

扁平化风格图标

像素风格图标，像素风格图标由肉眼可见的小方块组成，代表着复古风格。像素风格图标又可以制作成纯平面或微质感两种风格。扁平化风格图标

拟物化风格图标

拟物化设计是模拟现实物品的造型和质感，通过高光、纹理、材质、阴影等效果对现实物品进行适当程度地变形、夸张的描绘再现。

拟物化设计的优点是外观与现实事物相似，用户认知和学习成本低，交互一致，动态效果高度统一；缺点是开发成本高，审美疲劳，适配困难。拟物化风格图标

其他风格图标

矢量插画风格图标就是将矢量插画直接作为图标，设计时需注意图标要有视觉中心，插画不宜元素过多或过于复杂。适合使用的软件是Illustrator。2.5D风格图标，在Illustrator中制作2.5D图标，通常会使用3D效果。先绘制好基本形状，再利用3D的凸出与斜角，扩展外观后再根据需要进行调整制作。其他风格图标

动效图标

动效设计是未来UI设计师必备的技能之一，而图标动效是执行难度不高但效果立竿见影的一个模块。动效可以给用户带来愉悦的交互体验，提升产品的差异化和整体使用体验。

常见的动效设计方法有属性转换法、路径重组法、点线面降级法、遮罩法、分裂融合法和图标个性特征法。

动效图标

动效图标

运用Photoshop软件时间轴制作简单的gif动态小图标

想要通过Photoshop软件制作动态图标，就必须学会使用“时间轴”面板。时间轴面板中可创建“视频时间轴”和“帧动画”两种不同的模式的动画。

动效图标HSUCLEARLogin账号密码PART02任务实操任务实操1扁平化开关图标绘制

2绘制厚度感图标3写实计算器图标的制作4信号发射图标制作5标签栏导航图标的制作任务实操6wifi图标的制作

7电池电量图标的制作8手机系统-拨号图标制作9谷歌浏览器图标的绘制

本任务要求利用Photoshop软件轻松打造多种效果的扁平化开关图标。任务1-1扁平化开关图标绘制任务描述

本任务要求利用Photoshop绘制厚度感AI图标。任务1-2绘制厚度感图标任务描述

本任务要求模拟现实计算器的造型，从配色到造型打造出一款写实风格的计算器图标。任务1-3写实计算器图标的制作任务描述

本任务要求绘制动态信号发射图标。任务1-4

信号发射图标制作

任务描述

本任务要求设计购物类APP的导航栏。任务1-5

标签栏导航图标的制作

任务描述

本任务要求使用Photoshop制作App中wifi的图标。任务1-6

wifi图标的制作任务描述

本人要求使用Photoshop制作不同尺寸App中电池电量的图标。任务1-7

电池电量图标的制作任务描述

本任务要求绘制手机系统中的拔号图标。任务1-8

手机系统-拨号图标制作任务描述

本任务要求绘制Android操作系统中的谷歌浏览器图标。这款图标为Android中的浏览器图标，它以谷歌浏览器为基础，将扁平化运用到图标中。此外，三色的不规则图形对“钢笔工具”的操作技巧略有要求。任务1-9

谷歌浏览器图标的绘制任务描述HSUCLEARLogin账号密码PART03拓展迁移

本任务要求完成环保标志—循环再生图标的绘制。循环再生标志由三个箭头首尾相连形成一个三角形；图案一般为绿色（本案例中使用黑色绘制），代表着环保。主要使用钢笔工具进行绘制，整体图标属于扁