UI界面中的图标设计趋势与最佳实践

作为UI设计师，在日常的工作中，避免不了做图标规范。今天跟大家聊一聊，UI设计中的图标设计。

规范的重要性不用多说了，没有规范多个设计师绘制的图标会有很多差异，描边粗细、角度、圆角度等等。今天的文章和大家聊一下图标的设计。

一、图标风格

UI设计中的图标风格类型有很多种，设计表现手法也千千万，大致上我们可以把我们常用的图标分为几大类：面性图标、线性图标、渐变色图标、多色图标、线面混合图标、拟物图标、2.5D图标，我们只针对常用的功能性图标，线性图标和面性图标展开说一下。

⬇⬇⬇点击获取更多设计资源

https://js.design/community?category=design&source=csdn&plan=bbqcsdn769

1.线性图标

 

2.面性图标

无论你是To C 还是To B 的产品，无论是移动端还是PC端，都离不开图标的应用，而各种风格里最常用的就是以上2种风格的图标。二、图标设计原则1.表意的准确 在图形化的时代，虽然图标一般都搭配文字使用。但是既然是传达信息，含义就要准确。让人一看就能大概知道是什么含义。比如下面图标即便没有文字说明，我们也能读懂图标表达的含义。绘制图标时候，问自己几个问题，这个图标应用在哪里？要传达什么含义？

 

这里需要注意的是，不要创新某种固化含义的图标，比如关闭、搜索这类的，这不是创新，这是错误。但是你可以运用不同表现手法去设计。

3.风格一致

很多新设计师，对一致性有一定误解，这里的一致性指的是一个产品中无论是移动端还是PC端，某块功能区出现的图标要保持一致性的原则。比如APP中的金刚区、导航栏。

 

如滴滴的首页、整个页面采用了多种设计风格的图标、但是同一区域要保持一致性原则，保证产品的一致性。

4.粗细一致

拿线性图标来说，在绘制图标时候，保证描边粗细一致、端点一致、倾斜度，原角度一致的原则去绘制。

 

5.简洁

图标的设计尽量简洁为主，一般图标区域都很小，有时候为了保证可点击区域还要做一个虚拟的可点击区域，来保证可用性。因此过于复杂的细节不适用功能性图标，这里在设计的时候要求设计师去繁从简的同时，还要确保图标的表意明确。

 

6.视觉大小一致

人的眼睛很神奇，他会误导我们，所以我们在绘制图标时候，要保证图标的视觉大小一致，这里尤其保证同时出现的图标视觉大小的一致。如下图物理大小完全一致的正方形和圆形，我们会觉得圆形小了。当我们适当放大圆形图标物理尺寸，在图标设计中同理我们要在视觉上调整图标大小。

在绘制图标时候，我们要建立图标栅格，来保证图标的视觉大小一致。确保不出现小数点、像素模糊的情况。

二、特殊情况特殊对待

在我们实际项目中，绘制完图标，规则不可能适用所有场景。这里一定不要被规范限制住，规范是为了更好的服务我们的设计。不是为了限制大家。

在实际工作中有些页面图标就是需要很纤细、或者稍微粗一些，再或者填充效果会更好。那么我们就根据实际的页面效果去绘制图标。最后在规范里增加一个特殊情况即可。

比如一些复选框的里的对勾，多数情况下粗一点会更能方便我们去点击。如QQ音乐播放页面，播放键就使用了填充效果。

图标就分享到这里，希望对大家有所帮助，有不严谨地方欢迎指正。