赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
3.5K 0 0

大好,我是 Clippp。看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时清楚到该参考或哪种格最合适。来看看如何解决这些问题!

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

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

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

图片定义图标类型

对图标进行分类时,普遍遇到的问题是一个图标有种风。例下面个水滴图标,样式很简单,但以划分到个类别中。

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

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

  • 首先将图标按尺寸大小分为两类;
  • 继续细分对应的面、、面结合、扁平、拟物化等类型;
  • 最后选择标准、容器、渐变、3D、绘、阴等风格。

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

利这种结构层级,可明确定义图标类别。

图标尺寸

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

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

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

  • 尺寸图标通常指标志性图标,例如 App 启动图标或表品牌形象;
  • 小尺寸图标作 UI 控件,起到引导功或目的。

图标类型

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

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

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

每类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide

利这种简单的分类方式就避免图标发生重叠。另外拟物这种细腻的格适于小尺寸图标中,在小图标分类中没有展示。

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

图标组成

图标尺寸越小,展示的细节越限。相比于图标,小图标的尺寸一局限性,图标组包括标准器两种。

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

图标利用尺寸的优势能展示多内,分多种组形式。

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

小尺寸图标样式

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

1. 面性图标

标准面性图标

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

面图标易识别,适合应用在小尺寸图标中。

关键点:

  • 确图标有清晰的边缘,避免羽化;
  • 图标复杂程度随着尺寸变而灵活调整。

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

背景色的面性图标

彩色背景简约设了多可能。通过这技巧使面性图标友好,具吸引力。

键点:

  • 背景选择 4-12 种颜色。
  • 考虑图标是浅色还是深色,是否适于有背景色。
  • 在彩背上使用白图标比黑效果更。

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

2. 线性图标

标准线性图标

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

图标因为简洁和现代而受到用户的欢迎。随着屏显越来越清晰,我们以更加大胆地使用图标。

关键点:

  • 确轮廓像素清晰。
  • 越简越好。
  • 追求更简单细节。

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

双色线性图标

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

设小尺寸图标时,必须弃细节并强调简单的形状。但当使用一种颜色效果不太理时,可以考虑添加一些颜色。

键点:

  • 使用两种搭配谐的颜色。
  • 考虑将一种颜色于要形状,另一种颜色于细节。
  • 少即是。
  • 使用粗线条。

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

3. 线面结合图标

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

线结合拥有更多细节,提升用户愉悦感。

关键点:

  • 最好使用深色而不是纯黑色描边。
  • 限制图标的颜色种类。
  • 避免过多细节。

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

4. 扁平化图标

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

扁平化图标既简单又巧妙,表达品牌形象的同时具有富的内涵。

关键点:

  • 避免在<20px 的尺寸中使用此图标样式。
  • 选择 2-3 种颜色,可以一起使用。
  • 颜色为主色,另颜色应为高/细节色。

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

大尺寸图标样式

大尺寸图标在界面中使较,更多于产标识或牌宣传。

1. 线性图标

标准线性图标

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

在设计任何图标前,都可以先创个线性轮廓,确保形状看起来足够美观后再添加颜色。

关键点:

  • 这类图标最容易制作。
  • 避免出轮廓羽化。
  • 线条粗细要一致。
  • 不要害怕添加细节。

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

渐变线性图标

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

添加一些渐变能让本一的线性图标赋予更多的个性。

关键:

  • 在尺寸图标中添加渐变会降低图标的可视性。
  • 选择渐变时,首先考虑邻近色。
  • 线条越粗,渐变越明显。
  • 线条细节越多,渐变越明显。

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

等距线性图标

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

2.5D 图标做来花费很时间,但效果往往很。在设计汽车、房屋、家具等产品时,建议优先使用 2.5D 图标。

关键点:

  • 同一组图标要使用相同的等轴测网。
  • 2.5D 等轴图标复杂,在较的尺寸下会失去作用。
  • 如可以,让所有图标都朝个。

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

手绘线性图标

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

随设趋势向简约化、扁平化发展,很多设师丧失了手绘图标的能力。实际手绘图标让品牌真实甚至趣。

键点:

  • 手绘图标扫描后,再用数字方式重新绘制,这样可以保证线条粗细一致。
  • 尽量有的线条保持相同的颜色,这会使件更小。

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

断线图标

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

标准的图标看来能很单,而简单灵活的断处理能为图标增加更个。

关键点:

  • 断粗细应该相同。
  • 图标的中断次数尽可能保持一致。

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

色线性图标

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

关键:

确保两种颜色具相同的对比度,否则可能会导致用户看不清其中一种颜色,因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户就很不友好。

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

2. 线面结合图标

线结合图标可以看作是添加颜色后线性图标。线结合具有很强轮廓,让图标能够晰可见。

标准线结合图标

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

关键点:

  • 使用有的颜和统一的条风,使图标具有品牌。
  • 使用线条和点来添加更多细节。
  • 避免使用纯黑色描边。

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

带有背景色的线面结合图标

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

关键点:

  • 描边断开时,图标效很更好。
  • 避免小尺寸时使用。
  • 使有限的调色。
  • 考虑使用浅的描边/背。
  • 考虑在图标下方添加一条水线,使图形有相同的位置(中间的图标示例)

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

错线面结合图标

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

填充色与描边位时,颜色移到右边图标左上留出高,带来新感觉。

关键点:

  • 考虑使用断线描边。
  • 使用限的调色板。
  • 确保描边和填充色简单且一致。

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

色块图标

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

种风的图标的特点在并不依赖颜,仅将其用装饰。

关键点:

  • 选择有的板。
  • 先关注轮廓再关注颜色,颜色仅用于装饰。
  • 避免形状色和背景色过于相似,降低可见度。

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

单色线面结合图标

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

关键点:

  • 避免使用暖色调尤其是红色,会让用户感到压抑。
  • 首先确合的描颜色,再考虑填充色。

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

3. 扁平化图标

扁平化图标通常没有描边,主要使用形状和颜来完成组合搭。简洁、和适当的细节,让类图标非常具有吸引力。

标准扁平化图标

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

键点:

  • 使用柔的调色板,避免明亮的颜色。
  • 分清简和添细节之间的界限。

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

带有容器的扁化图标

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

尝试让图形打破容器,带来动态的感。

关键点:

  • 尝试让图形从容器中凸出来,以增加深度。
  • 因为在容器中,可以添加更多的细节而不用担心图形变得混乱。
  • 尝试使用正形、椭圆形或与品相关容形状。

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

等距图标

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

关键点:

  • 保持所有图标朝。
  • 选择恰当的调色板能让图标看起一致。
  • 避免小尺寸使。

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

半阴扁图标

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

半阴影图标是在扁平图标的基础上添加半阴影,得到更具个的图标。

关键点:

  • 小尺寸图标不用。
  • 使用有限的调色板。
  • 确保所有图标色调相似。

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

长阴影扁平图标

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

当图标于器中时,可以考虑添加阴影,主包括纯色阴影渐变阴影两种类型。

键点:

  • 使器具相同的颜色或类似的色调。
  • 只在大尺寸图标中使。
  • 将半阴影与长阴影组合使用效果更。

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

4. 拟物化图标

拟物化图标实上已经含了大部分样,例如它们是立体,有丰富渐变和阴影。

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

这风格图标看起来与现实生活图标尽可能类似,让用户感到更舒适。

关键点:

  • 考虑添加底部阴影。
  • 使光源自同一方向。
  • 确保图标都向相同的方向。

目绝多数界面不再这种风格的图标,可以考虑使用 3D 建模实这种效果。

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

总结

希望大家能图标分类及设计有更全深入认识,从而构套完图标思维体系。

欢迎关注作者微信公众:「Clip设夹」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章...
ICON
在上篇文章《基础科普!超全面的 UI 元素尺寸设置指南(上)》中介绍了设置 UI 元素尺寸的基础规范,及控件尺寸的定义。 这...
图标设计
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计
编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条...
ICON
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪。今天分享的是几个常见小问题,看看大家有没有遇到过。 1. 为什么你做的投...
ui设计
这几天设计界的大事情就是 Office 图标更新了。 微软前几天发布了 Office 的一套全新图标设计,整体色彩更加丰富。每种图标...
Office 2019
本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计