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

须知

  • 我为设计初学者和非技术WordPress用户编写了本指南
  • 您可以免费使用本指南
  • 禁止销售本指南
  • 禁止复制(部分)本指南并将其做为您自己的指南
  • 未经我的许可,禁止在商业学习环境(商业培训)中使用本指南。
  • 不对任何内容错误和失误,任何利润损失或任何其他商业损害承担责任。

如有问题,不要犹豫,通过imaiko.com上的联系表单与我联系。

WordPress 外贸建站后台截图 指导

前言

Iconography图标的作用

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

图标与插图(Illustration)

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

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

提纲如下:

  • 一个图标案例
  • 使用指南
  • 图标库和图标下载
  • 制作图标的建议

一个案例

图标规格

图标大小

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

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

图标清除

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

图标空间

图标颜色和样式

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

图标颜色N700图标颜色N80图标颜色N0图标颜色N700包含

如何使用图标

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

网格与文本

图标示例文本

使用指南

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

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

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

https://www.flaticon.com

https://www.iconfont.cn

制作图标

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

  • 使用SVG格式
  • 小数点后1位小数
  • 大小,风格,线条粗细,圆角一致
  • 借助图标素材库

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Fill out this field
Fill out this field
请输入正确的电子邮件地址。

菜单