UI图标设计制作教程（Figma UI3）课件 第一单元-图标制作入门

UI图标图形设计FIGMAUI3版单元1图标制作入门李炳琰教师xx学校xx学院xxx专业概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件图标常被用作指代某个功能，它可以让观看者快速识别其所指示的功能。相较于文字形式的信息指示，图标以更加简洁的图形，增大了信息识别和传递的效率。图标是一种几何化的、简约的图形，如图所示。在手机软件界面中，图标非常常见；在日常生活中，图标也随处可见，例如道路上的交通安全标识、卫生间的男女标识。这些图标不仅直接、简洁，而且容易记忆和识别，所以常用于指示信息。在UI领域中，图标也被称作“ICON”1.1.1

什么是图标单元1图标制作入门1.1

图标的基础知识左侧使用了图标代表密码的可见性和选择日期的按钮，相同的含义，则需要使用4或5个文字才能表达出来，这样增加了用户认知成本。从这个案例可以看出，图标在传达含义上的简洁和高效。在UI界面中，图标已经形成了一种界面中的新型“文字”，图标图形已经能够代替许多功能信息，并且比直接使用文字更加简洁。图标按钮与文字按钮的对比1.1.1

什么是图标1.1

图标的基础知识左侧使用了向下和向上两个图标，代表菜单的展开和收回，图标在点击后上下翻转，同时菜单出现或隐藏，这种操作方式让用户很容易理解，几乎没有学习成本。如果替换成图中右侧的文字，这种直观性就消失了。图标的出现不仅让信息的传递简洁而高效，有时也让信息的指示更加直观。适时地使用图标，能够达到文字所没有的直观和高效。图标按钮与文字按钮的对比1.1.1

什么是图标1.1

图标的基础知识左侧未使用图标，而右侧使用了图标。图标的使用丰富了UI界面的视觉感受。除指代信息和功能以外，图标有时候也用于装饰。将与文字含义接近的图标与文字组合，一起形成界面中表述的内容，这样比纯文字的内容更有视觉吸引力。图标的装饰作用1.1.1

什么是图标1.1

图标的基础知识图象字符是基础的图标图形，像文字一样，一个字符是一套图标集的基本单元；装饰图标（Icon）则是带有装饰的图标图形，可以用来代表应用程序、功能、文件等概念，也可以用来装饰。1.

从功能上划分从功能上可以将图标图形划分：图象字符（Glyph）装饰图标（Icon）1.1.2图标的分类单元1图标制作入门1.1

图标的基础知识图象字符（Glyph）：试着找一找左图中的10个图象字符吧。单元1图标制作入门1.1

图标的基础知识装饰图标（Icon）试着找一找图中的6个图标吧。单元1图标制作入门1.1

图标的基础知识小贴士单元1图标制作入门1.1

图标的基础知识2图标与插图的区分图标和插图在设计上有着明确的区分，图标注重简洁性和功能性，而插图则更侧重于细节和艺术表现。1图标与文字的配合：图标和图像字符可以独立使用，也可以与文字结合。结合文字使用时，图标的含义更加清晰。若单独使用，应选择用户熟悉的图标以避免混淆。2.

从图形上划分分为三种主要类型：线性图标面性图标线面结合图标1.1.2图标的分类单元1图标制作入门1.1

图标的基础知识线性图标：线性图标由线条组成，在界面设计中特别常见。线性图标的线条粗细对于图标的识别度和美观度至关重要。在界面设计中，1.5像素粗细的线条是线性图标的标准选择，因其与常规字体的粗细相匹配，使得图标与文字组合时既协调又美观。单元1图标制作入门1.1

图标的基础知识面性图标：面性图标由色块组成，面性图标的色块一般由多个图形色块加减得到。面性图标因其较大的视觉面积和重量感，即使在图标尺寸较小的情况下也能保持相对清晰。单元1图标制作入门1.1

图标的基础知识线面结合图标：线面结合图标也可称为混合图标，结合和了填充色块和描边线条的特点；可以是整个图形同时使用填充和描边，也可以是部分图形使用填充而部分图形使用描边。线面结合图标通过线条和色块不同方式的结合，可以在保持视觉简洁的同时，增加图标的层次感和识别度，可以制作出卡通、复古、现代等风格的图标。单元1图标制作入门1.1

图标的基础知识概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件图中这些图标在UI界面中已经有了约定俗成的含义，所以即使单独使用也不会产生歧义。对于那些用户不熟悉或未广泛认知的图标，建议配合文字使用，以确保用户能够正确理解其含义。随着时间的推移，某些图标已经形成了固定用法，因此即使没有文字说明，这些图标也能准确代表特定功能。1.2.1约定俗成的图形单元1图标制作入门1.2图标设计的原则主页图标普遍被认可为房子形状，我们可以在这个基础上，通过调整图标线条粗细、圆角、线条连接、繁简度等细节，创造出用户识别的且有一定风格感的图标。这样既能保持图标的普遍认知，又能加入不同的设计风格。总而言之，图标具有良好的识别性有助于提高界面设计的易用性，也是图标设计需要考虑的首要因素。在用户界面设计中，对于那些已经深入人心、具有“约定俗成”含义的图标，不建议为追求创新而大幅度改变其图形。最好的做法是沿用这些图标的原有图形，或者在不改变其基本识别性的前提下，对细节进行适度的调整。不同风格的主页图标单元1图标制作入门1.2图标设计的原则图中尽管每个图标的高度相同，但由于形状不同使它们的面积并不相同，从而在视觉上产生了大小不一的效果。在设计图标时，视觉大小平衡是一个重要的考量因素，它影响用户对图标的感知和整体界面的协调性。我们的目标是确保一套图标中的每个图标在视觉上大小一致，而不是简单地使它们的宽度或高度相同。1.2.2均衡的视觉大小单元1图标制作入门1.2图标设计的原则面积是衡量图形元素视觉“重量”的关键因素。以正方形和圆形为例，当它们的宽度和高度相同时，正方形在视觉上看起来比圆形更大。这是因为在相同的宽高条件下，正方形的面积大于圆形，因此对视觉的影响也更大。所以为了使不同形状的图形在视觉上具有相同的大小，我们应该基于它们的面积而非单纯的宽高来调整。高度相同与视觉大小相同确保图标视觉大小一致的正确方法是让它们的面积接近。单元1图标制作入门1.2图标设计的原则根据这个原理，我们把不同图形叠加，比较它们在同一个宽高的外框下面积的大小，也就是它们视觉上的大小。相同外框下的面积大小比较正方形>圆形>三角形=菱形。单元1图标制作入门1.2图标设计的原则对于一套图标，尤其是当图标数量非常多的时候，仅凭肉眼调整图形以保证图标视觉大小均衡是不够准确的。因此，引入图标模板是必要的，它可以帮助统一图标的视觉大小。为了保证一套图标在视觉上大小一致，需要根据每个图标的具体形状特点来调整其宽度和高度。对于视觉重量较轻的图形，如三角形，使用较大的尺寸；而对于视觉重量较重的图形，如正方形，则使用较小的尺寸。相同外框下的面积大小比较单元1图标制作入门1.2图标设计的原则在设计图标时，除了形状本身对视觉大小的影响，图形的镂空程度也对面性图标的视觉重量有显著影响，因为镂空区域会直接减少视觉面积。镂空减少了面积第一个图标的镂空较少。第二个图标中间的镂空较多，所以增加了其整体的宽高以平衡视觉重量。第三个图标的基础正方形大小与第一个图形相同，上方增加了两个小矩形，一定程度上也缓解了中间镂空导致的视觉重量的降低。第四个图标由一个正方形和一个矩形组成，且镂空较小，所以它在设计时，正方形部分的边长要小于第一个图标。单元1图标制作入门1.2图标设计的原则图中左侧图标三角形与圆形水平居中对齐，二者左右内间距均为7像素，此时三角形看起来偏左；右侧图标中三角形右移1像素后，其重心与圆形重心重合，图标视觉上平衡了，此时三角形距左8像素、距右6像素。图标设计需关注视觉重心的平衡。视觉重心是在视觉感受上图形重量平衡的点，有时和图形的物理中心不重合，不同图形形状视觉重心可能不同。视觉重心可以被理解为图形重量分布的平衡点。想象一下，如果你将一张三角形的纸片放在指尖上，使其保持平衡，那么纸片平衡的位置就是这个三角形的重心，也是三角形的视觉重心1.2.3平衡的视觉重心单元1图标制作入门1.2图标设计的原则圆形的视觉重心在圆心，三角形视觉上左重右轻，重心偏左。三角形的视觉重心不同单元1图标制作入门1.2图标设计的原则图中上方的三个图标虽然在物理中心上与外框中心对齐，但由于它们都包含三角形元素，这导致它们在视觉上出现了偏移：第一个图标看起来偏下，第二个图标偏左，第三个图标也偏下。图中下方三个图标为调整后的结果：第一个图标向上移动，第二个图标向右移动，第三个图标也向上移动。通过这些调整，图标在模板中的位置得到了优化，使得它们在视觉上居中，考虑图标与图标模版的视觉重心重合单元1图标制作入门1.2图标设计的原则平衡视觉重心的本质是在物理中心的基础上，将图形向视觉上“较轻”的一侧微移，以补充该区域的视觉重量。以三角形为例，其“尖角”部分在视觉上显得“较轻”，因此需向尖角方向微移，以达到视觉平衡。第一个图标的上半部分在视觉上“较重”，因此它在图标框中的位置相对偏下；第二个图标的下半部分“较重”，所以它在框中偏上；第三个图标的上半部分“较重”，导致它在框中偏下。平衡视觉重心——复杂组合图形单元1图标制作入门1.2图标设计的原则Figma中创建的三角形的外框比其实际形状稍大，并且在左侧预留了空白区域。这个设计补偿了三角形视觉重量不均匀的分布，使新建的三角形可以直接与其他图形进行水平对齐，而不会引起视觉重心的偏移。三角形与圆形居中对齐后，无需调整位置，就能得到视觉上均衡的播放图标。图形工具考虑了视觉重心的平衡问题单元1图标制作入门1.2图标设计的原则不同字体的字面率在图标设计中，也需要考虑图形在外框中的占比，确保同一套图标中所有图形的占比在视觉上接近，从而保持整体设计的统一性和视觉上的协调性。1.2.4相近的图形占比单元1图标制作入门1.2图标设计的原则与字体设计中的字面率类似，这些图标的图形占比存在差异，大小不一。然而，在同一套图标中，各个图形的占比是相对一致的，使得整套图标在视觉上看起来大小协调，保持了一致性。。任务：对比iconfont中不同图标的占比单元1图标制作入门1.2图标设计的原则一套APP或网站通常需要几十到上百个图标，这些图标分布在界面的各个角落，共同构成用户对界面的视觉印象。因此，保持图标风格的一致性至关重要。以下3点是基本的设计原则:图标的类型图标的细节处理图标的色彩1.2.5一致的图标风格单元1图标制作入门1.2图标设计的原则概览Overview单元1图标制作入门1.1

图标的基础知识1.2图标设计的原则1.3图标设计软件①在浏览器中输入网址：，打开Figma官网。②点击右上角注册按钮③在弹窗中输入邮箱和密码④登录刚才输入的邮箱，找到Figma发送的确认邮件⑤点击邮件中的链接，跳转至Figma网站，注册成功注册账户1.3.1

软件注册与安装单元1图标制作入门1.3图标设计软件网页版：使用Figma的浏览器版本时，需要下载并安装字体安装器。安装后，要先刷新Figma设计界面，字体安装器才会生效注意浏览器兼容性文件管理界面1.3.2文件管理桌面版软件主页

网页版返回文件管理界面（主页）单元1图标制作入门1.3图标设计软件文件类型选择“设计文件”的格式单元1图标制作入门1.3图标设计软件文件管理逻辑：草稿中的文件，可以邀请他人查看草稿中的文件，但无法邀请他人共同编辑。单元1图标制作入门1.3图标设计软件1.3.3

设计界面与视图控制左侧边栏：包含“图层”和“组件”两个标签。其中“图层”内有页面和图层列表。当前页面内的，画布中的所有元素都有对应的图层，不同页面有不同的画布。画布区域：

是设计工作的主要区域，用户使用鼠标和快捷键编辑画布内容。右侧边栏：

修改选中元素的属性，例如位置、尺寸、填充和描边等。右上角展示正在查看或编辑文件的用户，同时设置了分享按钮。单元1图标制作入门1.3图标设计软件1.3.3

设计界面与视图控制缩放视图：将鼠标指针放置在画布区域，按住

Ctrl

键的同时滚动鼠标滚轮。拖动视图：将鼠标指针放置在画布区域，按住空格键，鼠标指针临时变成“抓手”工具，此时可以拖动视图。松开空格键后，鼠标指针会恢复为原来的工具。我们在设计界面进行图标绘制时，需要不断地缩放或移动视图。当前视图缩放比例显示在右上角（“分享”按钮下方），默认为“100%”，点击可以修改这个比例。在频繁调整视图时，我们常临时调用快捷键调整视图，以免打断正在进行的操作，以下是两个视图控制的快捷键：单元1图标制作入门1.3图标设计软件1.3.4本书快捷键说明按住和按下：“按住”表示按住不放，“按下”则表示只需按下一次即可。Ctrl和Cmd：本书中的快捷键为Windows系统对应的快捷键。如果您使用的是MacOS系统，请将书中的

Ctrl

键替换为

Cmd键。Alt和Option：本书中的快捷键为Windows系统对应的快捷键。如果您使用的是MacOS系统，请将书中的

Alt

键替换为

Optio