图标设计与制作（全彩慕课版）-PPT4

第4章面性图标设计本章介绍：面性图标作为扁平化图标中的一种，具有醒目突出的特点，同时伴随着扁平化设计的发展，面性图标也演变出了更多设计风格，需要UI设计师们进行系统的学习和了解。本章对面性图标的基础知识、基础设计以及创意设计进行系统讲解。通过本章的学习，读者可以对面性图标有一个全面深入的认识，并快速掌握绘制常用面性图标的规范和方法。掌握面性图标的基础知识掌握面性图标的基础设计掌握面性图标的创意设计学习目标面性图标即填充图标。面性图标由于占用的视觉面积要比线性图标多，所以具有整体饱满、视觉突出的特点，能够帮助用户快速进行图标的位置定位。但面性图标不宜在界面中大面积出现，这样会产生界面过于臃肿，用户视觉疲劳等问题。面性图标的使用场景与线性图标同样丰富，常用于页面的核心业务，如金刚区、内容装饰、标签栏、列表流等。4.1面性图标的基础知识面性图标示意图1.轮廓外形•造型繁简：流畅的外形可以让面性图标的整体变得简洁规整。同时在保持简约设计的同时，设计关键的特征细节也有利于提高图标的识别度，比如使用相机元素制作的图标，在简约外形的基础之上添加闪光灯的细节特征，会使图标的设计更加生动。4.2面性图标的基础设计简约外形的相机图标增加细节的相机图标复杂外形的相机图标•圆角弧度：圆角弧度的差异会让图标展现出不同的气质，如无圆角图标比较直接硬朗；小圆角普遍使用，圆角通常设置为2px；大圆角图标比较柔美可爱，圆角通常设置为4px及以上。4.2面性图标的基础设计无圆角面性图标小圆角面性图标大圆角面性图标2.挖空比例进行面性图标设计时，内部图形的挖空比例需要占20%～30%。这样设计出的图标才会使整体视觉效果较为和谐，能够呈现最佳状态。4.2面性图标的基础设计面性图标挖空比例示意图3.底板设计•有无底板：同一个面性图标，通过底板的设计可以使其发生微妙的变化，产生不同的性格特点。无底板的面性图标又称为单独型图标，这类图标视觉感知更直观；有底板的面性图标又称为组合型图标，这类图标具有层次，相对精致。越小的图标形体应该越简单，因此建议采用单独型图标，图标的尺寸足够大时可采用组合型的图标，并补充图标的细节。4.2面性图标的基础设计图标有无底板对比图•底板效果：在组合型图标中，针对底板可以运用弥散投影增加质感。弥散投影又称为弥散阴影（DiffuseShadow），与软件中直接使用效果的普通阴影技术相比，这种投影的表现则更有深度、更富层次、更加精致。目前，弥散投影已经作为一种设计潮流并广泛应用于UI设计中。4.2面性图标的基础设计制作图标底板的弥散投影基础面性课堂案例-制作单色面性图标基础面性延伸面性多色面性渐变面性叠加课堂案例-制作面性叠加图标设计面性微质感课堂案例-制作面性微质感图标4.3面性图标的创意设计基础单色面性图标简约基础。4.3.1基础面性基础单色面性图标示意图使用矩形工具、圆角矩形工具、添加锚点工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用渐变工具实现制作单色面性图标。4.3.2课堂案例-制作单色面性图标图标最终效果图1.不透明度面性不透明色块图标富有层次。4.3.3基础面性延伸面性不透明色块图标示意图2.高斯模糊面性高斯模糊图标空间感强。4.3.3基础面性延伸面性高斯模糊图标设计示意图3.光影效果面性光影效果图标带微拟物。4.3.3基础面性延伸面性光影效果图标示意图面性多色图标活泼丰富。在制作时，根据颜色的数量，可以细分为双色图标、三色图标以及多色图标。4.3.4面性多色面性多色图标示意图面性渐变图标丰富可爱。在制作时，根据渐变的形式，可以细分为单色渐变、炫彩渐变、柔和多色渐变以及YOGA多色渐变设计风格。单色渐变4.3.4面性渐变面性叠加图标层次感强。线性叠加图标示意图4.3.5面性叠加使用椭圆工具、矩形工具和圆角矩形工具绘制图形，使用快捷键变换图形，使用路径选择工具和减去顶层形状命令实现布尔运算，使用渐变叠加命令和添加图层蒙版命令制作面性叠加图标，使用横排文字工具输入文字。图标最终效果图4.3.6课堂案例-制作面性叠加图标设计面性微质感图标层次极强。面性微质感图标示意图4.3.7面性微质感使用矩形工具、圆角矩形工具、椭圆工具、钢笔工具、路径选择工具和减去顶层形状命令绘制基础图形，使用变换-透视命令变换图形，使用图层样式命令中的渐变叠加命令、投影命令和内发光命令添加图层样式，实现面性微质感图标。图标效果图4.3.8课堂案例-制作面性微质感图标使用属性面板中的不透明度选项，实现面性透明度变化图标。贝壳找房