当前位置:首页 >  国内设计 > 正文


 


 

在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的方法,是入门 UI 设计的必备条件。

网上现存不少关于图标绘制的文章和教学,但不是太笼统,就是太片面。即使看了很多这种碎片化的知识,也很难在我们的认知中对它有比较全面、系统的认识,所以大多数初级的 UI 设计师,始终画不好图标。

针对这个问题,我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法,让所有设计新人更快的上手图标设计。

本文共分为以下5个部分:


 

1. 图标设计详解:先对图标有个整体的认识,了解图标总共有哪些类型和应用场景。

2. 工具图标设计:最常见的工具型图标的相关规范,以及对应的设计案例演示。

3. 装饰图标设计:近年来使用越来越广泛的视觉型图标设计认识,以及对应的讲解。

4. 启动图标设计:讲解启图标的相关规范,如何高效的进行设计。

5. 图标应用详解:介绍在一个UI项目中,要应用多少种图标规格,并如何设计出正确的图标


 


 


 


 

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

对于 UI 设计师而言,我们主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中,界面的实际视觉组成只有 4 种元素,图片、文字、几何图形、图标。

可以说,图片、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素,一涉及到这两件事,难度就直线上升了。

本来往界面里丢一些方方圆圆、贴几张图、填一些字,就可以把界面做出来了,比如下图中的 Clear APP,不仅工作量少,而且还符合极简原则,为什么还要吃力不讨好地设计图标?

这就涉及对图标作用的探讨了,为了节约篇幅,更快进入大家最想看的重点干货,我就不长篇大论从上古时期人类与图形符号的纠葛开始写了!就谈对于图形界面本身,为什么图标有这么重要的地位,没它不行。有两个原因,第一就是,文字虽然也是一种图形符号,但相对于图标而言,文字实在太复杂了,在识别效率上有先天的劣势!再者,不同的语言,文字的长度也不同,如果换成阿拉伯语或者俄罗斯语,或许一行还装不下所有文字。图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

第二点, 就是关于视觉的观赏性上。有些页面中,如果把图标去掉了,也丝毫不会影响我们的操作效率,以及对内容的理解。但没有图标,缺少这些点缀,我们就会觉得这个页面看起来总感觉太枯燥了,不得劲,最好的例子就是应用的设置页了,见下方案例。

既然知道了图标的作用和重要性,那么接下来,就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类:


 

    • 工具图标

    • 装饰图标

    • 启动图标


 

下面,我们将为对它们分别进行介绍,以及展示相关的设计类型,方便读者在开始学习具体设计前,对 UI 设计会创作的图标有更全面的认识。


 


 

1.1 工具图标


 

最新图文

相关文章

图1
图3

热门排行