UI图标设计制作教程（Figma UI3）课件 第六单元-风格化图标

UI图标图形设计FIGMAUI3版单元6风格化图标xx学校xx学院xxx专业李炳琰教师6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.1图标风格影响因素基础图标单元6

风格化图标6.1.1风格要素——描边描边粗细：当图标中含有描边时，例如线性图标或线面结合图标，描边粗细影响图标风格。较粗的描边使图标醒目、粗犷，较细的描边让图标显得精致、优雅。单元6

风格化图标6.1.1风格要素——描边当图标中包含描边时，例如线性图标或线面结合图标，断开闭合图形的路径是一种常见的设计风格。通过断开打破原有图形的封闭区域，图标产生透气、轻松的视觉感受。图中的图标就采用了这种断线风格，通过断开图形的一部分，图标呈现出一种开放式的感觉，同时保持了整体的清晰度和辨识度。在断开的同时，也可以通过路径的重新连接来保持图标的完整性，比如图中第一个“铃铛”图形中的红点标记处，既打破了封闭的图形，又确保了图标的整体性。断线单元6

风格化图标6.1.1风格要素——描边需要注意的是，断开的位置应该避免出现在图形的转折点或连接处，如图所示。若断开位置设置在图形转折或连接处，容易导致图形的结构不稳定，造成视觉上的不协调或不完整，从而影响图标的识别度和美感。因此，在设计中，注意断开的位置的选择，并适当进行连接，以保证断线风格图标线条的流畅。断线单元6

风格化图标6.1.2风格要素——填充填充容器仅包含填充属性的图标被称为面性图标。图中的第一行展示了常见的面性图标——这些图标的图形仅包含填充属性。此外，还可以将图标图形放置在统一的‘容器’内。图中的第二行和第三行中，图标的整体形状使用填充属性的圆角矩形和圆形，内部放置填充图形。单元6

风格化图标6.1.2风格要素——填充填充容器除了上述情况，包含填充和描边两种属性的图标被称为线面结合图标。在这种类型的图标中，填充和描边的关系会影响图标的整体风格。图中的第一行展示了常见的线面结合图标——这些图标的图形同时包含填充和描边属性。此外，还可以让图形分别包含描边和填充属性，并通过错位来实现不同的效果。图中的第二行图标，填充图形与图形本身对齐，但与描边有一定的错位；第三行中，填充图形是圆形，并位于描边图形的右上角。单元6

风格化图标6.1.3风格要素——图形造型圆角半径图形的圆角半径数值影响图标的风格，圆角半径数值越大，图标的风格越可爱、友好；圆角半径数值越小、甚至不设置圆角，图标的风格越精致、严谨。不过，目前纯直角的图形使用很少，图标图形倾向于带有一定的圆角，并根据风格需要设置或大或小的圆角半径数值。如图，图标增加了圆角半径后，图标图形变得圆润可爱，风格产生了变化。注意，一套图标内的图形圆角尽量一致。直角带圆角单元6

风格化图标6.1.3风格要素——图形造型圆角半径差异圆角半径可以根据图形大小略微调整，以保证视觉上的一致。图形尺寸越大，圆角半径越大。注意图标本身较小，所以数值差异不会太大。图中的图标中，含有大小两个矩形，为了保持其圆角效果接近，外部大矩形圆角半径数值为6，内部小矩形的数值为4。单元6

风格化图标6.1.3风格要素——图形造型色彩搭配图标可以由一种或者多种颜色组成，一套图标应该使用同一套色彩搭配。图中展示了线性和面形两类图标的双色搭配效果。单元6

风格化图标6.1.3风格要素——图形造型特征元素在图标的基础图形上，增加一致的特征元素可以创造出独特风格的图标。图中的第一行面性图标，在左上角统一增加了代表高光的短线，丰富了图标的细节并增强了立体感。第二行的线性图标统一增加了人物脸部元素，使图标拟人化，从而让图标显得更加生动。单元6

风格化图标6.1.3风格要素——图形造型模版占比模板占比不同的图标，不仅在风格上有所差异，使用时的尺寸也会有所不同，以实现所需的视觉效果。因此，一套图标的模板占比应该在视觉上保持一致单元6

风格化图标6.1.3风格要素——图形造型复杂度通过增加或减少图标图形的细节，可以使图标变得更加繁复或简洁。例如，图中的图标在原有基础上增加了许多细节，使得图标更加复杂。而图中的‘铃铛’图形，则简化了原有图标，使其更加简洁。单元6

风格化图标6.1.3风格要素——图形造型视角与透视常见的图标视角为图形的正视图，不展示透视的立体效果。当图标使用某种视角或者透视时，整套图标要统一。不同的视角单元6

风格化图标6.1.3风格要素——图形造型视角与透视图中展示了一种2.5D图标风格，图标统一使用了2.5D透视。2.5D风格图标单元6

风格化图标6.1.4知识巩固图中是某社区商场的海报，海报上展示了该商场提供的12个服务图标。然而，这12个图标的风格不尽相同。请找出其中的3个不一致之处，并指出哪些图标的风格是相同的。6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.2.1颜色面板介绍①色相：色相指的是具体的颜色种类，例如‘红、橙、黄、绿、青、蓝、紫’等，代表颜色的不同色相。通过左右拖动色相滑块，可以更改色相，调色板中的颜色也会随之变化。②透明度：通过左右拖动透明度滑块或输入数值来调整透明度。当滑块位于最左侧时，透明度为0%，即完全透明；当滑块位于最右侧时，透明度为100%，即完全不透明。③颜色模式：默认的颜色模式是HEX，它是一种常见的网页和数字设计中使用的颜色模式，表示颜色的数值为十六进制。除了常用的HEX模式外，还有RGB和HSB等模式。在不同的颜色模式下，颜色值的输入框有所不同。④颜色值：当颜色模式为HEX时，颜色值由‘#’和6个字符组成。这6个字符可能包括数字0到9和字母A到F，共16种字符。每一种颜色都有一个特定的HEX颜色值，就像颜色的‘身份证号’，通过这组数值可以精准定位到特定的颜色。与其他颜色模式需要多个数值来表示颜色值不同，HEX模式只使用一个数值，简便易用，因此应用较为广泛。⑤吸管：吸管工具可以直接修改选中元素的颜色。使用吸管工具点击画布中的任意位置后，当前的颜色将被替换为吸管工具点击位置的颜色。吸管工具的快捷键是

i

，在任意状态下点击该快捷键，均可直接调用吸管工具。如当前有选中的图形，则吸管工具将吸取的颜色赋予该图形的填充或描边色。⑥纯色模式：纯色模式表示使用单一颜色填充。纯色模式的右侧为渐变模式、图片和视频填充。在后续制作立体图标时，会涉及到渐变模式的使用。目前使用默认的纯色模式即可。⑦调色板：在调色板中点击，修改调色板上的颜色滑钮位置，从而调整颜色的饱和度和明度。颜色的饱和度和明度的变化见下一小节。单元6

风格化图标6.2.2颜色的基本属性与HSB颜色模式HSB模式与颜色三种属性HSB模式后，可以查看颜色面板中不同位置的三种属性。在HSB模式中，H代表色相（Hue），S代表饱和度（Saturation），B代表明度（Brightness）。紫红色箭头下的彩色滑动条用于修改色相（H），其数值范围为0到360的整数，每个数值对应一种颜色，且0和360同为红色；蓝色箭头表示饱和度（S）数值在水平方向的变化，饱和度的数值范围为0到100，数值越大，颜色越鲜艳——0表示无色（即白、黑或灰色）；绿色箭头代表明度（B）数值在垂直方向的变化，明度的数值范围也是0到100，数值越大，颜色越亮——0为纯黑色。图中，HSB数值分别为0、100和100，颜色滑钮位于调色盘的右上角。请读者自行切换到HSB模式，并修改色相、饱和度或明度的数值，观察颜色滑钮的位置以及颜色的变化，从而更好地理解色相、饱和度和明度的含义。单元6

风格化图标6.2.3RGB与HEX颜色模式RGB三原色叠加图单元6

风格化图标6.2.3RGB与HEX颜色模式HEX模式使用一个十六进制数表示RGB中的每个颜色，而RGB模式则采用3个十进制数分别表示三原色的数值。具体来说，HEX颜色中的6个字符，每两个字符按顺序代表红、绿、蓝中的一个颜色数值，且这两个字符的范围在十六进制数00到FF之间（即0到255的十进制值）。图中，RGB（255,0,0）表示纯红色，而在HEX模式中，纯红色则表示为#FF0000。6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.3.1区域显示两种区域显示图中左侧介绍了画板作为显示区域，画板勾选上“裁剪内容（clipcontent）后”，凡包含在画板内的元素，均只显示画板区域上的内容。图中右侧介绍了蒙版显示区域，在蒙版组（Maskgroup）内的元素，均只显示蒙版区域上的内容。蒙版可以是任意图形，且将图层变为蒙版后，图层本身的样式将不被显示。单元6

风格化图标6.3.2描边——虚线与单边在图标绘制中，有时需要用到虚线，Figma自带虚线功能，打开“描边”中的设置“”按钮，在弹窗中将默认的“实线”（Solid）改为“虚线”（Dashed）。虚线有三个属性设置——虚线长度、缝隙长度和线段端点的样式，这三个属性简单易懂，读者可以自行尝试。单元6

风格化图标6.3.3平滑圆角“平滑圆角（CornerSmoothing）”旨在通过调整图形元素的圆角转角，实现更加自然和柔和的过渡。具体而言，就是在转角处应用一定程度的曲率，减缓角的变化，使直边到圆角的过渡更为自然，从而提升视觉舒适度，让图形显得更加友好。滑动条还显示了iOS的平滑圆角，数值为60%。图中的三个正方形圆角半径相同，平滑度分别为0%、60%和100%，随着平滑度的增加，圆角由逐渐变得圆润。当平滑度达到60%时，圆角与直边的过渡不仅平滑自然，还不容易让观看者察觉。进一步提高平滑度数值到100%，图形会变得更加圆润，形似鹅卵石，但是能够明显看出图形有一定变形。所以在图标中使用平滑圆角时，数值并非越大越好，而是需要选取适当大小且统一的平滑圆角数值。6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概览Overview单元6

风格化图标单元6

风格化图标6.4

综合练习——绘制飞行器图标单元6

风格化图标6.4

综合练习——绘制飞行器图标合并运算后的图形路径，仍为原图形的各个路径。所以在合并运算之后，使用快捷键

Alt+Shift+F

拼合图形，能够得到合并后图形外轮廓的路径。此处需要注意，要先合并四个矩形，再进行拼合，得到路径才是四个矩形整体的外轮廓。如果跳过合并步骤，直接拼合图形，得到的路径则为四个矩形各自路径的组合。单元6

风格化图标6.4

综合练习——绘制飞行器图标检查间距，保证对称单元6

风格化图标6.4

综合练习——绘制飞行器图标对齐编组，保证对称6.1图标风格影响因素6.2风格化图标的色彩设计6.3风格化常用功能6.4综合练习——绘制飞行器图标6.5综合练习——绘制文件夹图标概