UI界面设计 课件 重大 1.1 图标设计、1.2 图标设计.pptx

UI界面设计

USERINTERFACE;

网页图标

WEBDESIGN;

5.色彩

6.文字;

1.创意

2.视觉流程

3.网页版式

4.标志与形象栏

5.色彩

6.文字

7.网页图标;

■什么是图标?

具指代意义的图形符号，具有高度浓

缩并快捷传达信息、便于记忆的特性。;

展示图标——不可点击尺寸：24×24、28×28、32×32

按钮图标——可点击尺寸：44×44、48×48、56×56、64×64;

和*oKG

我的痰身方法

去选用瘦身方法帮助…

回智能体脂秤

②智能手环

届有氧运动机;

②

家

○

+

○○

中

田

县母母;

■icon的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成

半像素的情况。例如48×48的icon,缩小2倍的时候24×24;而34×34的icon,缩小2倍的时候是17×17。

■在图标中应尽量避免出现单数。;

更具识别性

图标本身的功能便是第一时间传递信息。因而我们需要使用更加具象的视觉语言，

使得信息传达更为准确。

更具一致性

使图标一致性是一套图标系统成功的关键之一。在这里的统一性不是指所有的图

标里面都要用一模一样的元素，而是图标的线粗细、断点的距离、元素的大小、

切割的距离、同样的色调、风格的一致。当所有的图标都用一样的元素在里面时，

会造成辨认困难。

适度的情感化体现

作为一个金融产品，在用户使用界面时，我们想更改从前用户对金融产品严肃气质

的认知，采用更为丰富的造型与颜色使页面更具亲和力。;

保持相同的大小与间距；方圆处理;

图标的风格时下流行的图标可以归纳为：线性图标、面性图标、线面结合图标。

至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格

等等，都是基于以上三种来进行风格设计。

下图为在dribbble上看到一些比较好看的icon设计，作者ID均备注在右下角，

在此仅供参考。

除了在dribbble、站酷、花瓣、优设、iconfont等找好看的图标以外，还可以

参考市面上主流的那些app中的图标。;

dribbble:HyH;

手绘风格图标;

彩绘风格图标;

网页图标

;

拟物化与扁平化;

扁平化图标

扁平化中的色块;;

网页图标;

谢谢;

UI界面设计

USERINTERFACE;

网页图标-2

WEBDESIGN;

5.色彩

6.文字;

1.创意

2.视觉流程

3.网页版式

4.标志与形象栏

5.色彩

6.文字

7.网页图标;

■常用的画图标软件有三个：AI、PS、sketch。

口AI的好处是矢量，网格比较规范，容易处理图标的线面转换，其中直角一键转

圆角功能非常好用，缺点就是调色非常的难用，只能处理普通色块，复杂的色彩会耗费很多时间。

口PS的好处是调色功能强大，形状剪切中规中矩，缺点是做线性图标的时候需

要用布尔运算，描边功能操作起来没有AI方便。;

□Sketch的好处是矢量，调色十分智能，并且现在做界面多数用sketch,应

用起来十分便捷，缺点是它的造型没有A和PS严谨，一些转角的位置不够流畅，小图的时候不易察觉，放大后就能看到不流畅的线条。

我可以三署结合来画图标：首先用AI构造基本的形状。如果是要发作品做

展示，就拉到ps里面进行调色和展示；如果是放在界面中使用，就拉到sketch调色使用。;

步骤(1)

(1)点击首选项-参考线和网格，如左图参数设置。;

步骤(2)

(2)画布框内点击鼠标右键，选择“显示网格”,就会看到界面显示很多个像素

格子。;

步骤(3)

(3)点击视图，勾选对齐网格、对齐像

素、对齐点。;

图标可以归纳为：线性图标、面性图标、线面结合图标。

至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。;

图标复杂规范参考线;

参考线的使用;;

外框为44x44px

内框为42x42px

最内框为38x38px(约占内框90%);