对于设计师来说,制作能引起共鸣的图标,需要了解图标设计的基本要素,包括形式、功能、情感唤起和一致性。专业UI设计师可以通过创建图标符号来传达重要信息,同时保持简单、优雅和适合上下文。但是,对于新手UI设计来说,除非你了解创建有效图标的基本原理,否则设计图标可能是一项重大挑战。

下面,Pixso将分享设计图标的内容,以及如何创建经得起时间考验的图标,你将了解到有效图标的10个基本要素,让你在设计图标时更加得心应手。

1. 什么是有效图标设计

“图标”一词可以具有不同的含义,但就我们的目的而言,图标是一种图形符号或印章,旨在表示信息、想法或对象。

我们每天都被图标包围。在物理世界中,有效的图标在使用多种语言或没有足够空间用于书写文字的情况下提供象征性的视觉交流。考虑指示行人何时可以安全过马路的步行符号,让我们知道附近有机场的飞机图标,或者我们用来声明公共交通站或停靠站的简单公共汽车和火车表示等,都是生活中无处不在的图标。

生活中随处可见的图标

 即使技术进步,图标仍然保持其重要性。今天,在有效的界面设计中,它们通常优先于字母或单词。计算机和智能手机操作系统严重依赖精心设计的图标来引导用户使用正确的应用程序和产品。回收箱、记事本和保存符号自个人计算开始以来就以各种形式存在,并且仍在各种数字产品和程序中使用。在营销中,公司经常使用数字图标来明确他们的服务范围并有效地传达他们的品牌。在网页设计方面,图标可以增加视觉趣味、指定重要信息、使网站菜单更易于导航,并且偶尔为用户与网页本身交互创造新的方式。

一些图标只在短期内有用,但许多最成功的设计可以持续十几年或更长时间而无需更新——有时比它们的原始参考点寿命更长,就像软盘上的保存按钮一样。那么是什么让一个好的图标既美观又有效呢? 

2. 有效图标设计的十个要素

2.1 形状

形状是图标的基本形状,即使是详细的代表性设计也应该能够分成基本的正方形、圆形、椭圆形、三角形和其他几何形状,这些构建块确保设计具有坚实的基础。在设计图标时,从基本形状开始构建细节。不同的形状代表不同的含义,下面是常见的形状含义。

  • 矩形和正方形

矩形和正方形给人一种稳定、力量和坚实的感觉。它们意味着可靠性、忠诚度、安全性和形式性,并且可以表示构建块、表格、网格和其他结构。

  • 圆圈

圆圈经常在自然界中发现,并且众所周知,它可以传达完整性、健康、活力、社区、关系、永恒和重复运动。  

  • 三角形

三角形意味着稳定、力量、科学、高峰或顶峰,以及运动或动力。三角形的尖端还可以将用户引向某物,从而为另一个对象提供额外的重要性。

2.2 精度

因为即使在很小的规模上也必须有效地理解图标,所以图标设计必须在视觉上整洁且完全一致。即使是角度、线宽或边缘的最小误差也会使一个伟大的概念显得粗糙和不可靠。建议在Pixso中制作图标,Pixso独特的矢量网格能让形状和表格保持一致。

 网格通过保持形状和线条以平衡的方式排列,使得图标更加美观。有四种基本类型的网格:

  • 点网格提供没有视觉干扰的结构。    

  • 方形网格允许设计师使用以90度角相交的垂直线。

  • 带有对角线的方形网格可以帮助设计师简化任何几何形式。

  • 30度角网格具有三角形/六边形,可以为设计提供三维质量。

2.3 独创性

伟大的图标具有交流性和令人难忘的特点,实现这种平衡的最简单和最有效的方法是将易于理解的视觉隐喻融入你的设计中。然后,你可以以独特且令人难忘的方式重新加工它们。

几十年来,心、齿轮、灯泡、头骨、波峰、徽章、拼图和其他常见图标一直被用来代表相同的想法。它们很容易且经常被复制,这意味着用户会理解它们。在设计你的图标时,批判性地思考如何以符合观众期望的方式调整简单、陈词滥调的形状,这是一种在脱颖而出的同时保持交流的简单方法。

2.4 情感唤起

任何成功的图标都会唤起它所代表的主题、想法或行动的想法。但有一些图标也会引起观众的情绪反应。根据使用场景,使用能够吓倒、恐吓、兴奋、愉悦或吸引观众的设计元素,能让你的图标尽可能地唤起情感。

图标能带来情感唤起

 表情包封面

首先,考虑一下你要传达的内容。也许这是对前方危险的警告,你希望人们感到谨慎。或者,也许你想传达一种友好的氛围,并鼓励受众在公园里停下来玩耍。无论你的目标是什么,请考虑利用以下一种或多种视觉元素来帮助激发观众的正确反应。

  • 角度和边缘

通常,直线和锐角用于表示强度和危险,愤怒和消极情绪。比如闪电、三角形危险标志和字母“X”等图标。当你遇到这些符号时,会让人产生恐惧、谨慎和恐吓的感觉。另一方面,圆形边缘和软化角度的威胁要小得多。它们可以传达友好、轻松、舒适、相关性和其他更柔和的情感。

  • 颜色

颜色会对观众的情绪状态产生强烈影响。例如,红色和黑色在组合使用时,它们可以暗示鲜血、死亡、愤怒和毒药。尽管在其他情况下,红色也可以表达激情或爱,黑色可以象征优雅或形式。粉红色、橙色和黄色等较浅的暖色可能会让人联想到童年、兴奋、愚蠢、创造力和快乐的感觉。同时,紫色、蓝色和绿色可能象征着宁静、和平、健康和精致,或与自然世界建立联系。

  • 线宽

粗线表示稳定性、重要性、紧迫性、持久性或大胆的行动。细线可以看起来友好、精致、优雅、简单或弱,这取决于上下文。相应地调整线宽以反映你的信息并使你的图标在情感上更具共鸣。

2.5 一致性和统一性

图标设计师通常被要求创建“图标系列”,即一个代表个人主题、想法或行为的符号菜单,并且在视觉和审美层面上相互关联。

由于图标系列因其视觉凝聚力而受到重视,因此每个图标既要能够独立运行,同时还与其他符号保持一致。你可以通过确保集合中的每个图标具有相同的视角、照明和阴影来实现这一点。同时,你还可以使用一致的线宽、形状和颜色。

2.6 简单

图标在非常小的范围内应该和在大格式环境中一样有效,因此,图标设计要讲究简单原则,如果太复杂的话会让它失去可读性。

2.7 文化和语境相关性

适合包含在图标中的内容会随着每个新项目的变化而变化,因此在保持文化和上下文相关性方面没有通用规则。通常,你需要确保你的设计易于理解并能引起大多数人的共鸣,避免包含基于过时技术或日益过时的参考的符号。

2.8 可扩展性

一个有效图标最重要的品质之一是它能够产生影响,无论它是如何呈现的,无论它是非常小还是非常大,都不会改变观众的理解。因此,确保你的设计适用于各种尺寸的关键是从较小的方面开始。

同时,确保你使用矢量进行图标设计,可以防止图标在调整大小时变得像素化。Pixso具备矢量网格功能,自动布局、组件变体、多色矢量网格等智能化设计可有效解决设计师在日常工作中存在的界面排版调整痛苦、组件复用与修改困难,样式元素修改工序多、矢量图形绘制慢等问题,大大提升图标设计的效率。

2.9 构图与平衡

图标可能很小,但学习如何构图、融合对称或动态不对称以及实现平衡的外观至关重要。为了在视觉上令人愉悦,你创建的符号必须包含成比例的正空间(视觉元素)和负空间(视觉元素周围的空白部分)。

如果一个设计没有喘息的空间,或者没有足够的视觉冲击力设计,都很难吸引用户的注意。因此,了解构图的基本原则,尤其是如何在你的设计中实现平衡,将更容易创造出有效且美观的图标作品。

2.10 可识别性

最重要的是,一个有效的图标必须既可识别又易于理解。这些小图像可以产生巨大的影响,有目的的创建象形图可以比文字更快地传达信息。 图标的全部目的是传达它所代表的一切,如果你的图标可以首先满足该标准,那么你已经走上了设计有效图标的道路。

3. 结论

以上就是关于绘制有效图标的十个要素分享,图标的绘制并不是一个繁重的任务,只要你找对方法或了解背后图形原理,你也能设计出优质的、易于传播的有效图标。当然,参考优质图标设计案例能让你快速上手。建议打开Pixso资源社区,里面有海量不同风格、效果的图标设计资源,通过简单一键调用即可应用到你的设计中,赶快来试试吧!