写给大家看的建站图标方案

须知

前言

Iconography图标的作用

图标是营销中图片家族的一部分，但它们的用途却截然不同。通常情况下，图标更具文字性，旨在使其主题更加清晰。因此，它们应该始终简单易懂。当区分几个点排列时，图标可能特别有用，每个点都需要图形表示。他们可以通过使信息易于扫描和分层，来极大地帮助分解信息。图标应用最多的地方时手机屏幕，思考下原因，就会明白图表使用的场景和意义。

图标与插图（Illustration）

图标和插图的风格和功能不同。虽然插图将用户带入叙述，捕捉几个想法并讲述故事，但图标更具功能性。图标代表内容而非补充它。通常，插图使用隐喻和叙述来描绘大型主题概念。另一方面，图标更简单，更适合描绘非常具体的概念。将插图视为段落和图标作为要点。与插图不同，图标可以存在于一组其他图标中，因为它们在结构上不太复杂并且不需要那么多空间。另外，图标和插图可以在同一页面上使用，可以在图表或技术图纸中使用，有时可以用作插图上的徽章。

将伟大的图标整合到网站并不总是容易的。

一个案例

图标规格

图标大小

图标设计为36px，但可以24px用于表格和图表。它们的网站设计为36px，技术图表设计为48px或带插图的徽章。在组中一起使用多个图标时，所有图标的大小应相同。另请注意，并非所有图标的垂直和水平尺寸都相同。因此，如果您需要调整大小，请使用最长边的长度。

由于某些图标具有比其他图标更多的视觉权重，因此有时需要对组中的一些图标进行光学调整以与其他图标匹配。

图标清除

空白区域对所有元素都至关重要，包括图标。根据经验，使用图标大小的一半来确定围绕它的适当数量的空白区域。

图标颜色和样式

所有图标均使用三种颜色创建：N700，N80和白色。选择图标颜色时，请始终考虑颜色对比度可访问性 N700是白色或浅色背景上图标的主要颜色，N80是微妙或禁用状态的外观，白色是在深色背景上使用。除了颜色选项外，还有一组圆形背景中的图标。

如何使用图标

有几种方法可以有效地使用图标。对于大多数用例，图标伴随文本，可以单独使用，也可以与带有其他几个图标的网格一起使用。引用Web模式以在Web属性上显示图标的正确方法。

网格与文本

使用指南

正确的使用图标（ICON）可以让网站更简洁，现代，美观，以及提高转化率。

1. 尽可能使用图标字体
2. 标记描述您的图标
3. 将图标用于指示和链接
4. 所用图标应该是可被大众识别的
5. 使用图标列出功能/步骤

图表库和图表下载网站推荐

https://www.flaticon.com

https://www.iconfont.cn

制作图标

当图标库不能满足需求，或者VI需要等，可以重新设计制作图表。一般要求大小，颜色，样式，粗细，圆角等。好处：设计感，动画，以及制作成字体库后大小和加载速度。坏处就是成本较高。

• 使用SVG格式
• 小数点后1位小数
• 大小，风格，线条粗细，圆角一致
• 借助图标素材库
• 注意品牌VI要求