UI界面设计与制作-UI中的图标设计.pptx

I界面设计与制作;

本章介绍：

图标设计是UI设计中重要的组成部分，可以帮助

用户更好地理解产品的功能，是营造产品用户

体验的关键一环。本意铺对UI设计中常用的线性图标、面性图标以及线面图标进行系统的知识讲解与实操演练。通过本章的学习，读者可以对图标设计有一个系统的认识，并快速掌握绘制图标的规范和方法，为接下来的UI设计打下基础。;

u掌握线性图标的制作

u掌握面性图标的制作u掌握线面图标的制作;

u基本概念

u使用场景

u设计要点

u课堂案例-制作旅游类App线性图标;

线性图标即通过统一的线条进行绘制，表达图标的功能。线性图标具

有形象简洁、设计轻盈的特点，会呈现出干净的视觉效果。同时由于线性图标中使用元素本身的简单性，亦会产生设计师创作空间降低等问题，并且在制作复杂线性图标会产生识别性减弱等现象。;

线性图标使用场景非常丰富，作为页面的功能图标常用于导航栏、金

刚区、列表流、分类区、局部操作、标签栏等。;

1.描边设置

(1)描边数值

进行线性图标设计时，描边的数值大小要保持一致，并尽量采用整

数，如果要用小数的话建议使用“0.5”递进。描边数值的不同设置会影响到图标的性格表现，因此需要根据产品气质选择合适的图标描边数值。如果将图标的描边设置为2px,则表现出纤细及品质的特点；如果设置为3px,则适用于大众，可以对产品进行通用；如果设置为4px及其以上，则表现出稳重及趣味的特点。;

(2)对齐方式

描边数值如果是奇数应该使用内或者外描边，因为居中的描边会容易模

糊。在做闭合路径的线性图标时，通常采用内描边的对齐方式，因为外描边的矢量图形视觉上其实是比实际数值要大，不利于控制图标大小。;

2.圆角设置

进行线性图标设计时，圆角的数值大小一致，建议为偶数，不能出现小

数。同时圆角的数值设置和描边的数值设置有着千丝万缕的联系。如果图标的描边为2px,圆角通常设置为2px;描边为3px,圆角通常设置为4px。描边

为4px以上通常设置无圆角。;

3.效果处理

(1)渐变：在线性图标的渐变效果中，渐变方向??般设置为45度或135

度，并且要保证渐变的方向和强弱关系是一致的。;

(2)叠加：在线性图标的叠加效果中，需要先将图标拆分成两个部

分，然后再调整透明度或调整“图层混合模式”来呈现出叠加效果。

不通制度;

使用“X”、“Y”、“宽”和“高”工具进行调整使图标符合设计

规范，运用AI变化工具进行快速复制，扩展外观变成真实图像。;

u基本概念

u使用场景

u设计要点

u课堂案例-制作旅游类App面性图标;

面性图标即填充图标。面性图标由于占用的视觉面积要比线性图

标多，所以具有整体饱满、视觉突出的特点，能够帮助用户快速进行图标的位置定位。但面性图标不宜在界面中大面积出现，这样会产生界面过于臃肿，用户视觉疲劳等问题。;

列表流;

X

F;

2.有无底板

同一个面性图标，通过底板的设计可以使其发生微妙的变化，产生不

同的性格特点。无底板的面性图标又称为单独型图标，这类图标视觉感知更直观；有底板的面性图标又称为组合型图标，这类图标具有层次，相对精致。越小的图标形体应该越简单，因此建议采用单独型图标，图标的尺寸足够大时可采用组合型的图标，并补充图标的细节。;

插件可以使图标的渐变效果变得更为细;

(2)透明度

面性图标透明度一般设置为60%。;

(3)弥散投影

在组合型图标中，针对底板可以运用弥散投影增加质感。弥散投

影又称为弥散阴影(DiffuseShadow),与软件中直接使用效果的普通阴影技术相比，这种投影的表现则更有深度、更富层次、更加精致。目前，弥散投影已经作为一种设计潮流并广泛应用于UI设计中。;

通过圆角矩形工具、属性面板和布尔运算绘制基础图形，运用渐变

工具为图标添加颜色，通过不透明度选项的设置调整图标不透明度。;

u基本概念

u使用场景

u设计要点

u课堂案例-制作旅游类App线面图标;

线面图标是线性图标和面性图标的结合。线面图标由于兼具

线性和面性两种图标的优势，所以具有生动趣味、俏皮可爱的特点。通过对线面比例的不同把控，线面图标能够呈现出不同的视觉感知。但线面图标由于自身特点，会有一定的局限性，通常适用于趣味类产品，并不能适用大部分产品。;

线面图标的使用场景比较独特，常用于趣味类产品、弹窗、

空页面、引导页。;

1.内部填充

进行线