小白必看的那些UI图标设计规范分享！

在UI页面设计中，UI图标是一个不可或缺的元素。虽然UI图标通常来说都很小，好像不怎么引人注目，但是有何没有的区别可大了去了。UI图标在整个设计及用户使用过程中起着非常重要的作用，可以帮助用户处理许多问题，同时也是提高登录注册页用户转化率的重要因素。如果屏幕前的你想了解UI图标设计的方法，并巩固UI图标设计的基础，请跟随即时设计的脚步一起来学习UI图标设计规范，小白必看呦。

1.什么是UI图标？

UI图标是一种图形标志，是一种具有高度概括性和视觉传达性的超小图像。UI图标可以传达丰富的信息，这是界面文案无法实现的。例如，天气预报应用程序中的图标，3D太阳、云和雨滴可以在没有太多文字的情况下向用户传达未来的天气数据。

点击即可体验更多UI图标资源：即时设计 - 可实时协作的专业 UI 设计工具

在UI设计中，图标设计具有界面导航和可用性的作用，有点类似于购物中心的导游标志。由于UI图标的作用很大，任何轻微的误读都会对整体体验造成很大的伤害。因此，图标的选择应谨慎，经过仔细的用户测试，以实现良好的平衡，并得到目标群体的认可。

2.UI设计中的图标类型有哪些？

UI图标有多种表现形式，包括纯图形、图形文本等，UI图标设计方向不局限于图形表达，以下即时设计的设计师带您梳理下图标的应用类型。

2.1图形图标

图形图标方法是最常用的方法之一，给用户一种简单而清晰的感觉。图标设计的风格包括线性图标、表面图标、线面组合、微纹理等。图标设计结合业务或功能模块的关键词是最简单的图标设计之一。如何用简单的图形表达最准确的信息，充满设计感，是测试设计师图标设计能力的关键。

2.2拟物化图标

拟物化图标是一种模仿物理效果的图像图标设计方法。拟物化图标具有色彩丰富、画面层次分明、表达清晰等优点。缺陷也很明显，具体图标细节太多，应用范围有限，图标太大，无法缩小等。但只要应用得当，它仍然可以有很好的效果。

案例中的分类页面采用拟物化图标设计。原本枯燥的文字分类增加了拟物化图标，瞬间丰富了页面，增加了文字介绍，让用户对每一个分类都有了清晰的印象，方便用户检索。

2.3混和组合

混合匹配是图形、图像和拟物图标同时出现的情况。在连接业务需求时，单一方式不能满足多样化的业务需求，图标将混合组合。为了尽可能统一视觉效果，将选择基本图形作为统一的外部轮廓，以便与其他图标设计风格相对结合。

除上述三种形式外，图标还以人物照片、文字、节日元素等为图标。这些大多出现在界面的金钢区域，以满足不同的个性化定制需求。

3.如何设计UI图标？

在了解了图标的定义和类型后，如何在项目中制作出优秀的图标，以下是五个图标设计要点的总结。

3.1学习图标设规范规范

图标设计规范需要满足：类型一致、风格一致、透视一致、线条厚度一致、尺寸一致。图标规范是页面中最重要、最无聊、最难控制的阶段，需要不断的实践来实现，没有捷径。在即时设计的资源广场中，有大量免费的优秀图标，感兴趣的朋友可以打开模仿训练，可以快速提高图标的标准意识。

3.2在设计工具中使用栅格系统

图标的栅格系统非常重要，这是框定图标尺寸的标准。因为人眼经常在视觉上欺骗我们，深色会缩小，浅色会膨胀，瘦高圆方等，所以我们需要栅格来规范我们的图标，使其在视觉、重心、尺寸上，几乎是一样的，不可能完全一样。然后用不同的网格绘制不同大小的图标，并应用于不同的地方。

3.3注意图标排版

图标排版一般采用等分法，主要是让画面更有秩序感。以导航栏为例，我们来谈谈图标排列的方式:

总宽等分原则：界面总宽按布局图标数量等分，每个图标在等分内部布局；

边距固定原则：左右边距设置在同一款式，然后根据图标数量自然平分；

固定间隔原则：一般适用于左右滑动，固定图标间距不变，根据图标数量自然显示或屏蔽。

3.4选择合理的图标配色

除了灰橙色和灰红色，还有许多丰富的颜色匹配方法。例如，目前流行的3D图标，色彩丰富，使页面显得更年轻、更有活力。但图标颜色不要太多，太亮，尽量保持使用类似的颜色或类似的颜色系统，这是一个容易掌握的方向。如果你想选择不同的颜色，你需要控制颜色之间的亮度和饱和度，尽量不要太引人注目。虽然下图中的3D图标颜色丰富，但饱和度较低，整体感觉自然和谐。

3.5选用高质量的图标设计资源

图标资源是UI设计师常用的设计方法之一。这样可以节省很多时间，但是要求材料质量高，图标成套。以前常用的阿里巴巴图标库的图标质量很好，但是成套的很少。在即时设计的资源广场中搜索图标，就会出现很多高质量的成套图标。这里不仅有图形图标和拟物图标，还有最流行的玻璃拟态图标，特别适合想快速提升设计能力的UI新手和朋友。