您现在的位置:   首页 >> 优客智库 >> 产品设计

如何选择合适的图标?来看这份图标类型和风格汇总

发布人:www.yunke.ai 发布时间:2021-01-01 130 次浏览

编辑导语:设计师在日常工作中经常会用到一些图标,图标也可以传递信息,在一定程度上可以取代文字;设计师对于图标的运用很频繁也非常重视,图标的风格也很多;本文是作者分享了关于图标的类型和风格的汇总,我们一起来看参考一下。

看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!

图标是基本但重要的表达元素,在UI设计中有着不可替代的作用。

常见的分类是简单的线性分类,缺少立体化的图标分类思维,文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

一、定义图标类型

对图标进行分类时,普遍会遇到的问题是一个图标有多种风格;例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

面对这样的问题,推荐使用系统性的结构来划分图标类别:

  • 首先将图标按尺寸大小分为两类;
  • 细分对应的面性、线性、线面结合、扁平、拟物化等类型;
  • **选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这样的结构层级,可以明确定义图标的类别。

二、图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到16px,这些酷炫的效果都无法呈现出来。

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸,这里将图标分为两大类:

  • 大尺寸图标通常指标志性图标,例如App启动图标或代表品牌形象;
  • 小尺寸图标用作UI控件,起到引导功能或装饰目的。

三、图标类型

确定图标的尺寸后,进一步细分图标类型:

  • 面性图标
  • 线性图标
  • 线面结合图标
  • 扁平化图标
  • 拟物化图标

利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不太适用于小尺寸图标中,所以在小图标分类中没有展示拟物化。

四、图标组成

图标尺寸越小,展示的细节越有限;相比于大图标,小图标的尺寸有一定局限性,图标组成包括标准和容器两种。

大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

五、小尺寸图标样式

简单的图像可以更具包容性,图标的尺寸越小,越考验设计师传达信息的能力。

本页面均来此互联网页面如有触犯其他或者第三方利益请联系站长删除 137865155@qq.com