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音乐播放页面，播放键就使用了填充效果。

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

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

纯干货 | UI界面中按钮设计可临摹编辑素材！
按钮是UI界面中最常见的交互元素之一,所以,如果要创建一个稳固的互动且积极有效的用户体验,需要设计好按钮元素.今天我们将搜集整理一些网页app上常见的按钮类型,了解这些不同的按钮设计方法. Viro媒 ...
MATLAB AppDesigner 设计UI界面中调用自定义函数
在MATLAB AppDesigner设计UI界面过程中,如果直接在APPDesigner代码编辑框中编写代码,如代码量较大,会导致代码混乱的问题.使用调用函数的方法能够解决该问题. 本文将介绍MAT ...
html5底部导航图标制作,如何做好UI底部导航栏图标设计
原标题:如何做好UI底部导航栏图标设计如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要,不同位置的图标有不同的设计思路.本文将从产品和设计两个角度对底部导航栏的图标进行分析.UI设计创新技 ...
Android开发-UI界面--类微信页面设计
Android开发-UI界面–类微信页面设计一.功能说明设计一个类似微信的主页面框架,UI布局为上中下结构,包含了四个tag页面二.开发技术本次用到了layout.xml.控件.监听.fr ...
超实用！移动端界面中的版式设计原理(下)
编者按:昨天分享了justinlam总结的移动版式设计原理前3条,今天继续下一篇,这篇聊聊留白的艺术和视觉心理学,同样的好顶赞,来收. 本文是下篇,上篇教程戳这里→<超实用!移动端界面中的版式设 ...
广义图标与界面中的图标
图标是具有明确指代含义的计算机图形桌面图标是软件标识,界面中的图标是功能标识. 广义--具有指代意义的图形符号,具有高度浓缩并快捷传达信息.便于记忆的特性.应用范围很广,软硬件网页社交场所公共场合无 ...
【游戏开发实战】Unity粒子在UI界面中的裁切、蒙版、层级问题的解决（ScrollView裁切、Mask蒙版、UI粒子层级关系）
文章目录一.前言二.最终效果三.使用方法 1.引入插件dll 2.制作粒子特效 3.粒子材质球使用UIAdditive.shader 4.将粒子摆放在UI节点下 5.挂UIParticle组件 ...
领域驱动设计之单元测试最佳实践(二)
领域驱动设计之单元测试最佳实践(一) 介绍完了DDD案例,我们终于可以进入主题了,本方案的测试代码基于Xunit编写,断言组件采用了FluentAssertions,类似的组件还有Shouldly.另 ...
App 后台架构设计方案设计思想与最佳实践
CSDN 2016博客之星评选结果公布 [系列直播]零基础学习微信小程序! "我的2016"主题征文活动博客的神秘功能 App 后台架构设计方案 ...

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

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

最新文章

热门文章