图标在网页设计上的应用效果和作用

关键词：网页设计、图形设计、版式设计、平面设计

图标已经存在了好多年了，但它们似乎又回到了一种更简单、更直观的状态。在网页设计中，有很多使用图标的理由。图标的功能有很多种，例如打破长文本块，并将注意力吸引到网站的特定功能上。视觉交流和纸面文字的地位一样重要。与没有图片的帖子相比，拥有图片的帖子的参与度要高出650% 。

通过为网站添加这些可视化元素，使网站具有用户友好性，增加与用户的亲密度。虽然你可能想要使用不同类型的视觉效果，但有几种方法可以使图标特别有效并且功能强大。

1.直观的导航

在导航栏中使用图标，可以突出显示你希望用户访问的区域，并帮助他们顺利地浏览操作。81％网站访问者都是浏览他们阅读的内容。正因如此，图像的功能就是给读者留下快速而持久的影响。通过添加图标和导航细节，用户可以快速导航到想要浏览的内容。

看看这个网站案例，它使用了简单图标结合文字的方式，来引导用户浏览网站。一旦用户快速熟悉了导航，点击看到的小图标，就很好地从一个页面跳转到另一个页面。

2.提醒注意

图标也可用于吸引对页面上特定项目的关注。这很适合创建转化机会并帮助将用户引到到你希望他们访问你的网站的页面。你可以使用较大的、大胆的颜色或比上面的网站示例中较简单的图标、更详细内容的图标。

看一看这个优秀的简历案例，它使用图标将用户的注意力指向启动按钮(CTA)上。这些图标的全部目标是让用户采取行动。每个图标下面都有指向CTA按钮的箭头。

3.图标过滤器

另一种使用图标的方法，是为产品的不同版本创建过滤器。这会让用户一眼就能看出他是否选择了该产品的特定选项。因为图标很容易理解，所以基本不使用文字。但是图标上加上一两个字，会更准确地描述出用户正在筛选的内容。

观察图标在Sincerely Nuts网站上作为过滤器的使用案例。每当有人登陆网站时，他们会立即看到过滤器选项，使用图标突出显示了这些过滤器，因此可以以闪电般的速度找到物品，这对最快速度购买礼品或特殊物品的人很重要。这款图标过滤器的特点是：被划掉的糖果代表无糖，被划掉的小麦代表无麦麸，巧克力棒代表黑巧克力。

4.分解大块文本

另一种使用图标的方法是分解大的文本块。用户倾向于只阅读页面上的部分文字，但如果在重要的标题或文字旁边添加图标，带来一些视觉上的兴趣，就会吸引到用户的注意。 

查看Espresso App如何设置网站以吸引人们关注页面上的文字。它在文本的右侧使用app图标，使其与段落的高度相同。这在吸引读者的注意力和打破一大块文本上是相当有效的。

5.更适合移动设备

使用图标可以使移动设备的浏览效果更好。相比文本线索，我们的大脑会更快地处理视觉线索。视觉占了大脑约20%的空间。一旦学习的东西被存储在大脑中，你就能快速地回忆起那个东西。因此，书的图标可能表示阅读，铅笔图标表示笔记，信封图标表示电子邮件等等。

由于移动设备上的版面比电脑桌面设备上的版面要小很多，因此图标的应用，可以帮助减少这些用户处理页面所需的时间，从而使他们能够更专注于实际内容。除此之外，用户会记住你的网站体验还不错，因此很有可能会再次访问。

6.图标颜色的重要性

不要忽视了网站中的图标颜色的选择。即使信息本身非常有技巧性，但把文档添加颜色，对信息的回忆会提高82％。

为图标选择颜色时需要考虑很多因素。在不同的颜色选择上，有一个完整的心理学研究。同时，你需要确保图标与设计的整体色调一致，并且很好地互补。不同的图标可能需要不同的颜色，以避免混淆哪个图标对应着的选项。将所有这些都考虑在内，会使你的网站图标的设计更加完美。

图标是趋势

在2018年，图标比往年更流行。它们在许多站点上的导航栏中弹出，并被添加在标题旁，以吸引用户关注页面中的主要元素。它们丰富了页面的视觉兴趣和多样性。从一开始应用一两个图标到网站上，是很容易的，渐渐地你会爱上这样的样式和效果，以至于把它们添加到你网站中的更多页面上。

本文由海空设计（北京海空影视文化咨询有限公司）翻译整理，版权归本公司所有，如需转载到其他平台，请联系作者（微信ID：haikongdesign）。

原文地址：https://heydesign.com/2018/02/the-power-of-an-icon/