初学UI设计如何了解ICON图标的用处

本文由：“学设计上兔课网”原创，图片素材来自网络，仅供学习分享

1. 什么是图标

那到底什么是图标呢？用一句最简单的话来说，图标就是一个符号，一个代表某个对象的符号，一个象征性的符号。图标可以追溯到1565年，它源于拉丁语「eikn」，意思是「相像，形象」。

如果大家想要学习设计，可以去兔课网（百度搜兔课网）看一下，兔课网上面有很多的设计学习资源、教程、素材！

图标是世界上最通用的语言，不论国籍，种族，年龄或性别，它是每个人都可以理解的一种语言。

看似不起眼的一个小图标可以包含如此多的信息，人们从古至今一直在使用图标来表达自己以及传达信息，

洞穴绘画、埃及象形文字都可以看作图标。

2. 什么是ICON

ICON也就是咱们经常所说的图标，图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。它源自于生活中的各种图形标识，是计算机应用图形化的重要组成部分。

图标分为广义和狭义两种：

广义：

行人禁行标志

具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，

软硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等

狭义

应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关、

状态指示等。

3. 为什么图标很重要

随着人们工作越来越忙，图标已经成为了我们生活中的一部分。它们帮助我们快速定位，帮助我们快速的做出决定和行为，以及帮助我们找到需要的东西。

让我们近距离感受一下为什么说图标设计是如此的重要，以及它在未来的巨大作用。

图标连接着整个世界。不管你使用什么样的语言，作为视觉语言的图标都发挥着巨大的作用。

例如机场中的导航标识、商场中的指示标识等等。

图标能够快速的传达信息。随着信息技术的提升以及信息过剩，人们的注意力更加短暂和稀缺，

图标成为了这个充满噪音和过多无价值信息世界的救生员。通过简单快速的查看就可以知道图标

中携带的复杂信息。

优秀的图标成为我们生活中的救生员

无论你需要找到正确的应用程序或产品页面上的特定功能，又或者当你在外国城市搜索地铁时，

图标都可以节省你很多时间。

随着世界越来越忙，越来越嘈杂和全球化，它将在未来更加重要。

4.图标设计的基本知识

1.图标的两种类型

象形图标。最流行的图标类型，象形图标是通过其相似性或对物理对象的引用来传达含义的符号。例如，飞机图形意味着机场。

表意图标。这种类型的图标稍微有点复杂，通常，表意文字是基本的形状，但他们的含义需要一些学习成本。例如一个圆里包含着一条横线，意味着「否」，另一个好的例子是「加」、「减」、「等号」这些表意符号。

象形图标和表意图标的组合使用

通常情况下，象形图标会和表意图标组合使用

来传达正确的信息，比如「添加文档」图标会

通过象形图标「文档」和表意图标「加号」来展现。

2.图标的风格

图标可以分为许多不同的风格。其中最常见的是

6种常见的图标风格

5. ICON在APP里的应用

因为移动端有很多种不同的尺寸规格 所以当我们设计出ICON之后会应用到不同的尺寸之上

位图

位图图像（bitmap）, 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。常用的位图处理软件是Photoshop和Windows系统自带的画图。

矢量图

矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

位图会因为不断地扩大缩小 失真 而矢量图不会 所以我们在做ICON的时候一般会采用PS里的矢量工具（形状工具）或者直接采用AI来做

目前在主流App内，icon大多使用较为简洁的扁平化设计风格，这些icon有的由线构成，有的由面构成，还有的是线面结合而成的。

1.相同的功能要选择相同的元素

虽然在不同的页面和场景中，icon可以用不同的风格来表现，但当他们表示相同功能的时候，记得使用同样的视觉元素，再套上当前页面的风格。这样可以保持同App内图标元素的统一性，降低用户的学习成本。例如在不同页面出现的公积金相关图标，用的都是同样形状的小楼。

2.对于功能型icon来说，最好选择用户熟悉的icon元素

对于App中的操作功能，以上都是被无数产品反复利用的、已经约定俗成的icon，除此之外还有“放大镜=搜索”“小房子=首页”等等，用户已经潜移默化的接受这些icon的意思，并没有学习成本，所以使用这些熟悉的元素是十分必要的。

3.我们要选择主要的元素，表意要简洁，可以适当联想

在这些例子中，“信用卡分期”一定要画卡片吗？“附近银行”一定要画银行吗？“网贷评级”一定要画网贷吗？我们还是会具体情况具体分析，对关键词做一些取舍。

在这里作为一个工具的“附近银行”的功能点在于定位，而非强调银行本身，所以最后还是选择了定位符号来表达了这项功能。假设要设计的入口换成“附近银行”+“附近商场”+“附近加油站”等等，那么主要功能就变成了搜索附近不同的场所，这种情况下我们就会选择画银行、商场和加油站了。再比如“公积金查询”“社保查询”都是查询，“征信报告”“收支水平报告”都是报告，同理我们不可能给满屏的查询功能入口都画一个放大镜，也不能给所有的报告入口都画一份报告，为了表意简洁、突出重点，在这里我们选择合并同类项，着重表达每个功能不同于其他的点。很多时候我们要表达的内容并不具象，在这个时候就可以进行适当的联想，去画一个相关的物体。比如“公积金”就很很抽象，但是它与房子有关；“记账”是个动作，但是“账本”是个东西，这样表达起来就简单多了，也更亲切。

4.附上文案：表达足够准确，消除理解上的差异

一个很有意思的小树叶icon，当没有文案说明的时候，想必一千个用户心里有一千个哈姆雷特，大家都会有自己的理解。所以说icon是辅助的表达，文字才是标准答案，除了前面所说的大众完全熟知的icon，其他的最好附上相应文案，以免用户理解误差。

6. 布尔运算是什么？

布尔运算是数字符号化的逻辑推演法，包括联合、相交、相减。在图形处理操作中引用了这种逻辑运算方法以使简单的基本图形组合产生新的形体，并由二维布尔运算发展到三维图形的布尔运算。

简单来说就是形状经过联合 相交 相减等操作得到新的形状，这就叫做布尔运算

布尔运算会运用到什么地方？

布尔运算运用到了设计、生活的很多场景中。从的LOGO、轻质感的图标、再到三维空间图形都在使用布尔运算。总之布尔运算其实涉及到我们生活中的各种事物，所以这时我们应该知道在以后绘制布尔运算图形时要多从生活中的事物中提取有效信息