返回

从零开始学图标

#设计知识
#知识库
40%
进度
0/8
知识点
0
笔记
概述
图标是什么
图标的基本介绍
图标的使用场景
图标的基本分类
图标设计的基础知识
矢量图和位图
布尔运算和钢笔
图标的设计工具
图标的设计规范
表意的准确
图标的一致性
图形的视觉差
图标的栅格
像素对齐
图标设计实例
工具图标的设计实例
操作总结和线面转换
装饰图标的设计实例
启动图标的设计实例
工具图标的进阶
进阶线性图标
多种粗细风格
多色描边风格
描边缺口风格
装饰图标的进阶
轻拟物风格
玻璃拟态风格
实物贴图风格
首页知识库设计知识从零开始学图标

图标的一致性

UX百科编辑部 编辑于 2024-01-1228人正在学
20

第二个规范,叫图标的一致性。即一个或一套图标中,应该保持一致的细节。首先看看下面的反面案例。

在上面的案例中,不同图标间有很大的割裂感,完全不像处于同一套设计体系之下,这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点,要让所有图标保持视觉细节上的一致。

下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。

Ⅰ. 类型一致

前面说过,工具图标有线性的、填充的类型,在正常的情况中,同一套图标应该在类型中保持相同,如果使用了线性图标那么后续就不要设计填充以及混合的类型。

Ⅱ. 风格一致

每一套图标都有自己的设计风格,不同风格在细节中都有不同的表现,需要让这些风格特征保持高度的统一,看看下面这些案例。

第二,在设计一套偏圆润可爱的设计风格中,外轮廓使用了较大的圆角,那么我们尽可能保证圆角的大小是一致的,而不是有的用 4pt,有的用 2pt 或者直接使用直角。

第三,采用了填充色偏移的设计风格中,首先要保证填充色的一致,并且偏移的距离和方向也要保持固定的规律,不能随喜好任意制定。

Ⅲ. 透视一致

透视关系是在平面中对物体空间性质的表现方式,当我们应用了透视时,物体就有了一定的 “立体感”。

透视的表现不是绘制图标时必须使用的风格,但是如果我们在图标中应用了透视,就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。

Ⅳ. 粗细一致

图标中我们会应用到矩形线段或是描边,我们要尽可能保证它们的粗细是一致的。

比如,在线性的设计中,路径的描边尺寸要保持一致,不能这个图标用 2pt,那个图标用 1pt。

在填充图标中,我们会在一个矩形或是圆形中增加矩形的镂空,比如下图的几个图标,在这种情况下也要保证它们的粗细是一致的,而不是各不相同。

Ⅴ. 大小一致

大小一致,就是让图标的视觉大小保持一致,而不是它们字面上的长宽属性保持一致。

因为这是一个比较复杂的知识点,需要我们对几何图形的视觉差有比较完整的认识,我会在下一节做出完整的介绍。

这些和一致性有关的特征,是一套图标看起来专业、有整体感的必要条件。但是,在真实的设计场景中需要灵活变通。

如果有一些特定的图标,在保证了一致性的所有要求后却极难被人理解,且找不到更好的设计方式,就可以差别对待。

比如在一套线性的图标中,播放、快进等图标往往都是填充类型的,这并不会造成视觉或是使用上的困扰。

点赞
收藏
学会
10952028
下一篇: 图形的视觉差
几何图形的视觉差,是对于工具图标来说最重要的细节,在上一节图标一致性中已经提及,它也是平面基础理论中不可忽视的内容,这个理论要解决一个核心的问题,即 怎么让不同的图形看上去一样大? 可能有的读者看到这里会轻蔑一笑,这有什么难的,通过软件的参考线或者属性设置,把它们的长宽设置成一样不就完事了,比如下图...
笔记 (1)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞