珠海市横琴建设局网站,顺德专业网站制作,南阳做网站价格,wordpress获取表前缀作为UI设计师#xff0c;在日常的工作中#xff0c;避免不了做图标规范。今天跟大家聊一聊#xff0c;UI设计中的图标设计。
规范的重要性不用多说了#xff0c;没有规范多个设计师绘制的图标会有很多差异#xff0c;描边粗细、角度、圆角度等等。今天的文章和大家聊一下…作为UI设计师在日常的工作中避免不了做图标规范。今天跟大家聊一聊UI设计中的图标设计。
规范的重要性不用多说了没有规范多个设计师绘制的图标会有很多差异描边粗细、角度、圆角度等等。今天的文章和大家聊一下图标的设计。 一、图标风格
UI设计中的图标风格类型有很多种设计表现手法也千千万大致上我们可以把我们常用的图标分为几大类面性图标、线性图标、渐变色图标、多色图标、线面混合图标、拟物图标、2.5D图标我们只针对常用的功能性图标线性图标和面性图标展开说一下。
⬇⬇⬇点击获取更多设计资源
https://js.design/community?categorydesignsourcecsdnplanbbqcsdn769 1.线性图标 2.面性图标
无论你是To C 还是To B 的产品无论是移动端还是PC端都离不开图标的应用而各种风格里最常用的就是以上2种风格的图标。二、图标设计原则1.表意的准确 在图形化的时代虽然图标一般都搭配文字使用。但是既然是传达信息含义就要准确。让人一看就能大概知道是什么含义。比如下面图标即便没有文字说明我们也能读懂图标表达的含义。绘制图标时候问自己几个问题这个图标应用在哪里要传达什么含义 这里需要注意的是不要创新某种固化含义的图标比如关闭、搜索这类的这不是创新这是错误。但是你可以运用不同表现手法去设计。
3.风格一致
很多新设计师对一致性有一定误解这里的一致性指的是一个产品中无论是移动端还是PC端某块功能区出现的图标要保持一致性的原则。比如APP中的金刚区、导航栏。 如滴滴的首页、整个页面采用了多种设计风格的图标、但是同一区域要保持一致性原则保证产品的一致性。
4.粗细一致
拿线性图标来说在绘制图标时候保证描边粗细一致、端点一致、倾斜度原角度一致的原则去绘制。 5.简洁
图标的设计尽量简洁为主一般图标区域都很小有时候为了保证可点击区域还要做一个虚拟的可点击区域来保证可用性。因此过于复杂的细节不适用功能性图标这里在设计的时候要求设计师去繁从简的同时还要确保图标的表意明确。 6.视觉大小一致
人的眼睛很神奇他会误导我们所以我们在绘制图标时候要保证图标的视觉大小一致这里尤其保证同时出现的图标视觉大小的一致。如下图物理大小完全一致的正方形和圆形我们会觉得圆形小了。当我们适当放大圆形图标物理尺寸在图标设计中同理我们要在视觉上调整图标大小。
在绘制图标时候我们要建立图标栅格来保证图标的视觉大小一致。确保不出现小数点、像素模糊的情况。 二、特殊情况特殊对待
在我们实际项目中绘制完图标规则不可能适用所有场景。这里一定不要被规范限制住规范是为了更好的服务我们的设计。不是为了限制大家。
在实际工作中有些页面图标就是需要很纤细、或者稍微粗一些再或者填充效果会更好。那么我们就根据实际的页面效果去绘制图标。最后在规范里增加一个特殊情况即可。
比如一些复选框的里的对勾多数情况下粗一点会更能方便我们去点击。如QQ音乐播放页面播放键就使用了填充效果。 图标就分享到这里希望对大家有所帮助有不严谨地方欢迎指正。
