icon啥意思(icon网格使用规范详解)

一、图标的历史和它的目的

开始之前,你必须先清楚要了解什么是图标设计以及它的来历,下面我会简要介绍图标设计的历史, 了解它在当今世界的重要性,以及未来的发展趋势。

1.1 什么是图标

如果我们在字典中查“icon”这个词,会发现很多同的含义,从“ 一个神圣的人物”到“计算机命令常用的象征性符号”。

“icon”最简洁准确的定义是,用相似的或者类比的方式来表现它所代表的对象。

1.2 图标设计历史

正如我之前提到的,图标设计的历史可以追溯到史前时代。然而在这个特定的部分我想关注近代图标的发展史,就对图标理解更深刻了,我这个网站写的图标历史非常的棒:
https://historyoficons.com/

1.3 为什么图标很重要

随着人们越来越忙,图标成了我们生活的基本组成部分。它们帮助我们定位、迅速决策、发现要找的东西。

让我们仔细看看为什么图标在今天如此重要,以及在未来将会产生何种影响。图标统一整个世界,无论你说何种语言,一个图标胜过千言万语。当你要在机场导航,在繁华的商场找一个厕所或者只是要在软件中做一个特定的操作,图标都是至关重要的。

1.4 图标传递信息非常迅速

为什么图标如此重要?

因为人们的平均注意力比金鱼还短。,是的你没听错,根据美国国家生物中心的调查:

人们的平均注意 从2000年的12秒下降到 2013年的8秒,比金鱼的注意力还短1秒。

你能想象金鱼的注意力比人类还长吗?事实就是如此。

在这个充满信息噪音的世界 ,图标是一个救星。你只需要快速浏览一下图标所代表的复杂信息,用这种方法,你可以用剩下的7秒关注真正重要的信息。无论你是需要在产品的页面上找到某个特定的功能,或是在国外的城市找地铁。图标节省了你很多时间,加快了进度。

随着人们日益繁忙,信息噪声越来越多,越来越全球化,图标在未来会更加重要。

二、图标的基础知识

如果你不了解图标的基础知识想取得进步非常困难, 这章就是在你设计图标之前指导你每一个技术细节。学习图标的类型、不同风格、不同尺寸之间的差异, 如何使用网格以及让一套图标看起来视觉统 。

2.1 图标的类型

象形符号:最流行的图标类型,象形符号代表了意义相似的对象,或者引用了物理世界的对象。 如:飞机这个象形符号可以表示飞机场。

表意符号:这种图标更复杂点,不代表一个简单的对象,而且还代表抽象的想法,通常表意符号所代表的意思需要学习才能明白。举例来说:一个圆和一条穿过它的线代表“禁止”;另一个很好的例子就是:+- =这些表意符号。

备注:象形符号和表意符号经常结合在一起表达一个意思, 如:“ 文件”这个象形符号结合“+”这个表意符号就是“添加件”的意思。

2.2 图标的风格

图标被划分为很多不同的风格以及很多风格的变异。

下面这些是最常见的:

线性图标 (作者:AnyOldTime )

面性图标 (作者:AnyOldTime )

拟物图标(作者:Atom_neo )

手绘图标(作者:mike )

扁平风 (作者:Evgeniy Dolgov )

三、图标的尺寸和比例

在设计图标时的一个主要规则就是:你的图标必须放个合适的方框里,不管它们现实生活中是否是不用的,比如:一个回形针和一个相机。

图标必须放到一个特定大小的画板中,确保它们的尺寸在视觉上是一致的,然而这意味着你的图标需要挨着画板的四个边。为了让整个图标集看起来一样,有些图标可以小一点,在接下来的章节中我们将继续讨论这个。

之前有新手就一直纠结视觉上怎么统一,这个还是需要自己去多练习,文章末尾我会分享网格,确保在90%的图标都是统一的,个别视觉需要自己另行调整。

为特定的项目选择特定的尺寸, 如果你为iOS或是Android设计图标,在决定尺寸之前,你应该查看图标规范。不过我们一般移动端是sketch 里面用的是24×24,在ai里面是用的是24×24或48×48。

如果是为网页项目创建图标,或是练习,可以使用以下这些默认尺 16×16, 24×24,32×32, 48×48, 64×64, 96×96, 128×128,256×256, 512×512;

备注:如果你是一个初级图标设计师,我建议避免使用较小的尺寸,因为小尺寸更有难度,64 或 96 px 的网格是不错的选择。

四、使用网格

其实,写这篇文章是因为我的一个学弟问了我很多如何绘制图标的问题,我给了他网格,但是他却思想陷入其中,不知道如何视觉统一。其实,在你真正理解网格的时候,你要画很多图标才能理解网格的意义。

4.1 究竟什么是图标网格?

把图标网格当成一种约束,让你的图标集保持规范统一,网格是一个框架,让你的图标保持统一。

下面我分享2种常用的网格:

链接:
https://pan.baidu.com/s/1fEz33qHOzPxkYAmejU8T5A 密码: mutt

4.2 什么时候使用网格?

首先,如果你要创建超过50个图标的图标集时我认为网格很有必要。 你要使用同一种风格创建很多图标,网格有助于保持视觉网格统一 。

另一个情况就是当你要给现有的平台设计图标,而这个平台有自己的图标网格。 如给 iOS或Android 设计图标,你最好使用它们各自的网格,这些网格确保它们在各个平台上保持网格统一,你应该遵循这些规则,确保和平台的风格保持一致。

这是一个框架结构,你的图标集将会在这个基础一致。如果将来这些网格会被其他人维护,网格也能派上用场。比如:你要创建一个通用样式,其他人会在这基础上构建其他图标集。网格很像需要遵循的规则,让其他设计师在最开始就明白图标的尺寸。

就像上面所说,网格被高估了它的作用,但是在有些场合仍然至关重要。

4.3 如何使网格?

大多数时候我使用最简单的网格,就是上面网盘里面ai 文件的网格。

如下图:

这是我经常使用的网格

五、图标视觉统一

这个网格背后理念就是把你的图标放到框内,尽量保持图标的在在里面框里面,不要超过第二个框,当然如果为了视觉需要也可以出来。这个就是新手把握不准的地方了,因为如何判断是否需要根据视觉需要,这个他们很难理解。这个需要在你的后面练习中去自己体会,这里我会分析几种常见的视觉需要。

,这是解释视觉统一的一些原理,如果还是看不懂,就要多加练习,才能领悟。让你的图标保持统一,那它们就会说话哦。

使用统一风格;

保持设计语言一致:这个不难解释,就是如果都是圆角,请都保持圆角,如果粗细是2px,请都保持一样的粗细;

尺寸很重要,保持大小一致:这个就是上文提到的网格,最好在网格里面画,就能避免90%的图标不一致;

在一个图标集中使用相同元素:这些说的不是绝对的,比如:这个图标里面有一个元是10px,另一个地方也需要用到类似大小的圆,请尽量用一样大小的圆。不要用9px,这样保持元素一致,才能整体统一;

使用同一套配色方案:这点如果你看很多图标就会发现,图标的统一性比识别性更重要,一眼看去,颜色一样,个别的粗细不一样,或许你要花一点时间才能找出来,如果是颜色不一样,一眼就看出来了。

六、软件的使用

我一般使用的是ai :

设置,注意要选像素

建立好以后的样子显示/隐藏参考线command+;

显示/隐藏参考线command+;

准备工作,建立网格

设置参数

设置好网格以后,你可能会发现,依然没有网格,显示/隐藏网格 command + “

选中所有的辅助线,command+2 将辅助线锁定住,这样你在操作的时候,就不会选中辅助线了

随时预览图标是否视觉上统一,快捷键 command +shift + H

知识点,画好基础图形的时候,一定要查看属性,保证宽和高,X、Y,没有小数点,要保证是整数。

常用的功能将路径变为形状

另一个方法将路径变为形状是扩展功能,在稍微复杂一点的里面会用到

这个小的知识点,这个可以选择图标对其画板,还是2形状的对其,形状编组快捷键是command +G

切换描边和线性的快捷键是 shift + X,像上图描述一样,我们可以快速的将线性图标变为面性图标。

这里有一个知识点,形状生成器,是一个比布尔运算好用100倍的工具。快捷键是shift + M 选中以后,按住option 就是减掉形状,不按就是让2个形状合并,记住,用这个工具之前,要全选整个图标。

七、图标灵感网站推荐

部分网站需要自备梯子

7.1 图标绘画技巧网站

八、图标收集整理软件推荐

NUCLEO,这个软件的好处是里面有自带的icon,拖到界面就能用

eagle,图片和icon收集软件,缺点是不会更新icon,不过收集灵感很好用

这么长的文章,我也是码字一天了,基本这些掌握了就可以了。稍加练习,就可以完成很好的图标集。

补充:

有评论说sketch半像素问题,再次列出解决方案:

基本上面2个步骤就能解决了,还有一个方法是通过插件的方法,那个插件我很久没有用了。名字叫:Pixel Cleanup For Sketch