图标基础知识整理

图标有广义和狭义之分。广义是指现实中所有具有明确参考意义的图形符号，狭义主要是指计算机设备界面中的图像符号，覆盖面非常大。

图标大致可以分为四类。

一般是指具有明确功能和提示的图标，用于导航和导流，但不同页面的导航图标出于信息层次和操作的需要，对视觉风格的要求是不同的。

导航图标可分为tabbar图标、金刚区图标、个人中心等功能图标。

标签栏图标通常是线性的、综合的、线和面结合的等等。，但有些会侧重于品牌、个性化或运营活动，风格会贴近品牌或与近期时事相关。

金刚区的图标风格会更加多样化。一般来说视觉层次会更重，设计感会更强。通常情况下，多色渐变风格将是主要风格。音乐类app会以单色线性风格强调品牌调性，部分电商也会直接以实物展示。

个人中心和其他页面上的图标主要是装饰性和说明性的。移除图标不会影响整体导航，图标设计风格通常不会太复杂，多以线性风格显示。

主要是装饰性和注释性的，主要作用是让视觉整洁，更过瘾，品牌感和氛围感更强。一般用于描述性和解释性界面，如运营活动和VIP权限，视觉风格遵循页面调性。

启动图标作为品牌识别的功能，相当于产品的logo设计，需要融入品牌调性。由于使用场景的限制，还要求启动图标遵循设计规范，保证最小尺寸和小识别状态。大多数图标以下列形式显示。

大多数启动图标都不会设计得太复杂，因为太复杂的图标会增加用户的认知成本，尤其是在互联网信息爆炸的时代。使用平面图标可以有效降低用户的认知成本，通过加强色彩感知占领用户心智。

活动操作图标具有时效性，设计主题和风格多与节日相关，主要用于增加节日气氛，提高点击率。

设计风格不是一成不变的。需要根据不同的场景和用户群使用不同风格的图标。如果有操作活动，需要根据操作做出相关的调性风格。

图标设计风格大致可以分为以下几类。

这里只列出了常见的设计形式，具体用途和是否需要创新要看具体的使用场景。

区域图标还可以分为非彩色、单色、多色、渐变色等。，视使用场景而定。

这种设计风格在一些小游戏或H5活动中很常见。

3d扁平化风格逐渐进入视线。随着操作要求和设计师技能的提高，相信在不久的将来会有越来越多的人看到这种风格。

在设计图标之前，我们应该对图标的规格有一个清楚的了解。

图标设计规范应遵循的几个原则

图标多用于导航和解释，所以把意思表达清楚是图标的基本功能。对于一些不常见类型的图标，制作时需要通过brain storm合理筛选关键词，然后开始设计。设计完成后，需要进行一些简单的测试。你可以问问你的同事这个图标是否能表达相关的意思。如果答案是否定的，那就要问清原因，多设计一些方案，或者和同事一起头脑风暴。

图标的一致性可以分为很多情况。

同一功能区的图标需要保持设计风格的统一。如果用的是线性图标，都是线性图标。如果它们是真实的图标，应该统一使用。

在视觉设计中，我们会遇到一些视错觉。下面是一些常见的情况和解决方法。保持视觉一致性的方法不是让图像的长度和宽度一致，即使图形的物理尺寸一致，视觉重量感也是不一样的。下面左图中，长方形的视觉重量明显更大，没有留白。从模糊的图中可以看出，三角形的视觉权重明显更小。右下图调整后，可以看出视觉重量接近相同，但视觉重量的判断需要设计师多观察，多尝试。

程序默认的居中对齐往往视觉上不平衡，所以我们一般需要调整一下，使其视觉上平衡。另外，如果图形的一个部分的面积远大于另一个部分的面积，会使图形的中心廉价，必须向较小部分的方向移动才能产生平衡。

在areal图标中，要考虑正形和负形的比例，如下图所示，白色区域在所有图纸中要一致。

透视不均匀会造成空间混乱感，在画图标时要考虑从什么角度观察图标。

有些图标会增加亮点或特色。在图标设计的过程中，需要保证图片的整体特征一致，比如折线风格。

在构图的时候，图标也要整体一致，这样才能保证图标整体节奏和韵律一致。

像素对齐是老生常谈。个人认为是一种匠心或者是对细节的极致追求，因为在一些项目中也会用到svg格式，或者图片适配不同屏幕尺寸后，抠图尺寸不一定能保持像素准确，但至少在设计稿中要保持像素对齐。

与开发人员最常见的交流是注释和剪辑。为了方便开发和使用，剪贴通常是长宽相等的矩形剪贴。另外，要给图标留一些出血的空间。一方面可以保证裁剪的热区设置能够达到有效点击范围，另一方面可以为图标预留调整空间。

网格系统的使用可以有效地解决上述问题，包括视觉重量的平衡，绘图的出血等。借助草图的符号功能，排版可以更加方便。使用blue lagoon插件可以直接以符号尺寸作为绘图尺寸，更方便绘图。

随后，越来越多的产品开始同质化，品牌越来越被重视。通过将品牌基因融入图标，品牌知名度得到了加强。

提取品牌基因有两种方式。

摘录自徽标

从品牌气质中提取，通过提取品牌气质来改变图标的个性。

比如网易YEATION icon通过提取品牌气质来设计图标个性。

综上，整理一下图标自检手册。

1.清除功能

2.清晰的表达

3.一致性

4.品牌调性

文章参考:

1.“身材小，影响大！设计师应该知道的图标基础知识(/detail/436051.html)。

3.大白菜图标自检手册-大白菜(/p/67239eef3d43)

声明:

图片资料来源于网络，侵删。