图标设计刘腾刘燕江34课件.pptxVIP

图/标/设/计教师：刘腾、刘燕江AE2022

项目1基础图标设计

CONTENTS目录常用面形图标03.从APP界面认识图标01.常用线性图标02.微信标签栏图标04.标签栏图标情感设计05.

学习成果010203掌握图标的常见形式学会绘制常见线性图标学会绘制常见线性图标面形图标从APP界面认识图标常用线性图标常用面形图标完成微信标签栏图标绘制标签栏图标情感设计

01.项目概述AE

面性风格图标的设计只要熟悉了线性图标的绘制方式，操作就没有难点了吗？设计背景面性风格的实际操作难度比线性图标更低吗？

任务三常用面形图标

01特点02分类03决定面性图标精致度的因素04面性图标设计小技巧05任务实施任务三常用面形图标内容目录

相比前面所讲的线性图标，面的辨识性让面性图标可以更快得被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。知识点概述1.特点常用面形图标

知识点概述面性图标主要通过剪影的形式来制作抽象的形体，相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感，以达到多种视觉表现的效果。相比较线性图标应用场景更加丰富，视觉表现力更强、更突出，常用于主要功能图标，细分“单色、多色、渐变色、透明度/叠加”四种类型。2.分类常用面形图标

单色常用面形图标2.分类

多色常用面形图标2.分类

渐变色常用面形图标2.分类

透明度/叠加常用面形图标2.分类

面性图标的设计构成分为底托+图形块。那么图标好不好看、精不精致主要取决于以下2个维度：色彩（底托）3.1造型（图形块）3.2常用面形图标3.决定面性图标精致度的因素

但是我们经常看到一些设计作品颜色选择得很土、一套图标色彩很乱没有体系，或者整体色彩很平没有变化…这些图标的色彩都是不耐看、没有亮点的。色彩常用面形图标3.决定面性图标精致度的因素

配色三步曲应该让色彩发生变化，产生对比，这样色彩会更加具有吸引力。面性图标的配色三步曲：选耐看的原色色相发生变化4.14.24.3加强对比常用面形图标4.面性图标设计小技巧

第一步：选耐看的原色选取的色彩一定要耐看，不要一来就选择一个饱和度特别高、或者特别灰的颜色，要温和一些。常用面形图标4.面性图标设计小技巧配色三步曲

第二步：渐变色相发生变化不要用软件自动变化的渐变颜色，需要对色相进行细微的调整，不要让渐变色的色相都是同一个色相值。这个色相变化多大呢？在界面设计中还是建议大家以邻近色为主。第三步：加强对比在原色彩的饱和度或明度上，让两种渐变色的饱和度或者明度发生微变化，从而加强对比，让色彩更耐看。比如荧光绿，通常都需要降低它的明度，让它看起来不那么炸眼。常用面形图标4.面性图标设计小技巧配色三步曲

面性图标的造型相对线性图标的造型来说会更简单一些，注意以下这3个点，面性图标看起来就会比较精致。一定要让我们的这一组图标看起来是一个整体，这一套图标要遵循统一的视觉语言。不要一些图标很圆润，一些图标很支棱；也不要一些线粗，一些线很细；也不要一组图标里出现多种风格，别人一看连最基本的统一规范都没有达到，就会觉得不专业。常用面形图标造型小技巧4.面性图标设计小技巧整体性

图形块在底托上面一定要有足够的留白，不然看上去就会觉得憋得慌，觉得很别扭。常用面形图标透气感造型小技巧4.面性图标设计小技巧

要想一组面性图标更加出彩，造型的差异感也是特别重要的！如果一组图标看上去都是圆形，或者都是矩形，那么这一组图标看上去就显得重复、单调，不具有吸引力。常用面形图标造型小技巧差异感4.面性图标设计小技巧

5.任务实施知识点概述步骤1创建画布步骤2确定图标的尺寸和规范步骤3图标绘制（线转面的操作）步骤4操作软件中需要注意的地方步骤5步骤6命名、导出、展示常用面形图标

5.任务实施知识点概述步骤1创建画布常用面形图标创建800X800px的画布大小

5.任务实施知识点概述步骤2确定图标的尺寸和规范常用面形图标2.1粘贴任务二完成的常见线性图标2.2完成新图形参考线的绘制

5.任务实施知识点概述步骤3图标绘制（线转面的操作）常用面形图标3.1分别绘制三个矩形：3.2使用吸管工具（i）完成8个图形的面形转换蓝色描边无填充矩形白色描边蓝色填充矩形蓝色描边和填充矩形

5.任务实施知识点概述步骤4操作软件中需要注意的地方常用面形图标4.1搜索图标只