火星网校
UI设计移动端图标全攻略！
在界面设计中，图标在某些场景中可以取代文本，丰富界面中的视觉效果，有研究表明大多数人理解图像比文字的速度快，清晰易懂的图标对于用户理解界面中的信息是非常好的助力，但如果是一个容易让用户理解错误的图标会导致很不好的用户体验，因此，理解图标的类型以及细节是界面设计中不可或缺的一部分。今天小编特意为大家整理了一篇移动端图标的全攻略！
图标的历史
最早的计算机图标，是出现在施乐公司在20世纪70年代研发的Xerox Alto中，当时它运用的文件夹和垃圾箱的图标被沿用至今。
1991年苹果公司推出了一组MacOS X彩色图标，是图标发展历程中的一个里程碑式的进步，这些交互图标集美观与传达信息为一体，代表着拟物化风格的形成。
在现在的UI设计中，各式各样的图标非常丰富，网络上也有非常多现成的设计包，各个图标库的图标也不断创新，那么，主流的交互图标可以分为几类呢？
按功能分类
1、分类图标
分类图标的目的是为了解释某种功能或者是内容的种类。有些情况下，它们会同时带有文本信息以确保信息传达准确，比起单文本的分类，视觉效果更丰富，提升了可识别性，可以立即理解图标的用户就不用再关注文字。
2、功能图标
功能图标是具有指代意义且具有功能标识的图标，它们是可点击的，可操作的，主要目的是告知用户按钮、控件或其它交互元素所代表的功能或特性
3、装饰图标
除了表达功能，界面中也会有一些装饰性为主，表达一些信息为辅的装饰性图标，常见于各个产品的节日主题等
4、应用图标
应用图标是产品的Logo，适用于不同的平台，要保证带有鲜明的产品特征，在手机界面中可以清晰的被识别。
按风格分类
1、填充图标
填充图标视觉占比大，具有更高的视觉冲击力，更容易被用户识别
（1）半透明填充图标
图标的部分用透明度来增加图标的层次感，视觉效果更丰富
（2）弥散投影填充图标
图标内带有同色系的深色弥散投影，增加图标的微质感
（3）撞色填充图标
吸引用户目光，在APP内谨慎使用，需保持和整体界面风格一致
2、线性图标
线性图标需要使用粗细一致的线条绘制，通常使用2px的线条绘制，根据风格不同也有3-5px不同的粗细程度，可以降低界面图形太多对用户的视觉干扰，让整个界面留白合理，视觉上更加简洁
（1）圆角线性图标
适用于表现女性、母婴、年轻活力的产品，给人以亲和力、可爱的感觉
（2）直角线性图标
直角图标偏向商务、金融等产品，给人以干净利落的感觉
（3）断点线性图标
通过图标的断点丰富图标的视觉效果，增加特色
（4）双色线性图标
双色图标可以使用黑白灰色+彩色的结合，也可以用主体色+点缀色的结合，和撞色图标一样，配色需要谨慎使用，保持界面整体风格一致，不要过乱过花。
3、线面结合图标
现在APP设计中最常用也是最流行的风格，，线是概括产品的图形，面通常充当装饰点缀的作用，这里的面可以是单色的，也可以是渐变的，适应多种产品，表现形式丰富
（1）半透明结合图标
半透明结合图标通常使用同色系的半透明部分填充和线性图标结合以增加图标的层次感，通常用于列表、标签栏选中状态等
（2）撞色结合图标
撞色图标风格大胆，层次感更加丰富，也增加了图标的趣味性，通常运用于标签栏、列表、快捷入口等地
（3）渐变结合图标
使用渐变填充和线条结合的图标质感更加丰富，在保持图标一致性的同时，更加吸引用户的注意力，识别性较强，通常用于图标的选中状态
（4）MBE风格
使用较粗的深色描边，圆润的线条，鲜明的配色，填充颜色略有错开，简洁有趣，用于界面上很有活力，通常用于卡片装饰、功能入口等
总结
1、先考虑应用的场景，再考虑APP的整体风格。
2、填充图标、线性图标、线面结合图标各有优点，填充图标更吸引用户注意力，视觉冲击力强，线性图标更加简洁干净，降低太多色块对用户造成的视觉干扰，而线面结合图标非常百搭，可以表现图标的各种状态。
3、图标的统一性很重要，图标的视觉大小、圆角弧度、线条粗细、质感参数都要保持一致
以上就是移动端图标的常见分类与风格啦，不知道今天的你是不是有所收获呢～
原创： 曹雅舒 UI设计师之家
上一篇 手把手教你设计多变的四方连续图案
下一篇 干货来袭！H5动效制作方法大揭秘
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
了解如何提升你的游戏特效设计技能？本文将介绍火星时代教育的温馨教学环境及优秀师资力量，以帮助你塑造高效能及专注的学习过程。
-
一篇全面的关于游戏开发应该学习哪些内容的文章。涵盖了一切从游戏编程到游戏设计的相关主题，并展示了如何在火星时代教育上找到相关的......
-
由经验丰富的专家指导，探索UED设计的奥秘，并提升设计技能至新的高度。
-
一个对UE5虚拟现实学习的深入理解和实用策略的详细解析。
-
了解和掌握UE5设计的各个主要学习部分，提升你的游戏设计和开发能力，在游戏产业中脱颖而出。
-
这篇文章介绍了各种影视美术培训班的信息，为那些希望进入影视美术行业的人提供了有用的资源。
