免费的一体化
产品设计协作平台
免费开始
首页 设计协作文章 功能设计图标的风格有哪些

功能设计图标的风格有哪些

晓庄
2021-09-15 09:55:43
分享到:

图标是UI设计中除了文字之外最不可或缺的视觉元素,图标在我们的生活中可以说是随处可见,不论是出口入口,还是我们手机上使用的app,它们都是图标的应用。那么你知道设计图标的风格都有哪些吗?下面我来分享一些关于设计图标风格的相关经验。

功能图标在图标设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页、或个人中心页,都随处可见功能图标的身影。图标最大的功能还是进行意思的表达,图标设计就会比文字来的更直观,并且给用户带来视觉上的愉悦感。常见的功能性图标大致分为线性图标和面性图标,而二者的组合是扁平化图标,所以我们只需要关注线性图标和面性图标的设计。

设计图标

线性图标就是由线条来勾勒出物体的轮廓,在图标设计中很常见

设计图标图片

如上图所示就是一个很好的例子。线性图标设计更加优美,并且整套的线性图标可以给人一种整体感,所以在选择绘制线性图标的时候尽量选择同粗细的线条。线性图标需要注意一定要设计简约,因为这是由线条的性质决定的。线性图标具有辨识度高,清晰的特点,所以设计简约是非常重要的。当然线性图标也可以分类为双色线性图标、线面填充图标、线性渐变图标。

网页设计图标

像线性图标的使用很广泛,譬如说我们常见的导航栏,就是线性图标。

接下来要说的是面性图标的设计。

品牌设计图标

在我们的生活中,面性图标也很多,例如说我们在微信的主页面,下方会有功能栏,当选中时它就变成了面性图标,不选中时就是线性图标。如上图所示,这种图标设计可以应用在生活中的方方面面。面形图标是以面为主要表现形式的图标,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。所以面性图标和线性图标很明显的一点不同就是面性图标更加的明显。面形图标具有表意能力强,细节丰富,情绪感强,视觉突出,创作空间大等优点。面性图标的设计通常在某个界面中是处于隐藏状态的,一般来说都是线性图标是展示在页面中的,因为面性图标如果太多的话,整个页面会显得很拥挤。面性图标根据不同的配色样式可以分为:单色饱和度填充图标,纯色渐变图标和多色渐变图标。

设计图标

这也和线性图标的配的一样。面性图标也是常用在导航栏或者功能图标中,一般作为点击后显示的图标存在。可以根据实际情况来选择是线性图标或是面性图标,当然也可以选择组合使用。

在这里我想为大家推荐一款图标设计的必备软件——墨刀设计工具,这款设计工具上手难度低,学习成本低。墨刀工具库,具备快速构建移动应用原型与线框图、实时手机预览、多种手势动画特效、一键导出工作流等诸多功能,除此之外墨刀还有内置的的素材库、模板库,绝对是您图标设计路上的好帮手!强大的素材库加上多种一键式的操作功能,可以说是把便捷发挥到了极致,如果您有创作设计方面的需要,那么不妨来体验一下墨刀设计工具。

墨刀 - 在线一体化产品设计协作平台

原型、设计、流程图、思维导图......享受创造的乐趣,成就团队和个人

以上就是我要为大家分享的关于功能图标设计风格方面的内容,因为每一份设计都是由简入繁,正是通过这简单的线性图标和面性图标的设计,才组成了我们现在多层次化的生活,所以想要设计出一款好的标志,线性标志和面性标志的设计是十分重要的。

晓庄
2021-09-15 09:55:43
分享到: