×

个人总结:icon网格使用规范

96
cherri二哈
2018.05.31 21:04* 字数 3150

前言:本文非常全面并且很长,建议收藏以备日后所需,看完本文基本就能了解图标的一切,如果没有耐心,可以拉倒底部,查看技巧

我们的追波team链接,文中部分作品来自team成员。https://dribbble.com/nullest

特别感谢 Justas Galaburda


1. 图标的历史和它的目的

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

1.1    什么是图标

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

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

1.2    图标设计历史

正如我之前提到的,图标设计的历史可以追溯到史前时代。然而在这个特定的部分我想关注近代图标的发展史,就对图标理解更深刻了 我

这个网站写的图标历史非常的棒:https://historyoficons.com/

1.3    为什么图标很重要

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

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

1.4    图标传递信息非常迅速

为什么图标如此重要?因为人们的平均注意力比金鱼还短。 是的你没听错,根据美国国家生物中心的调查,人们的平均注意 从2000年的12秒下降到 2013年的8秒,比金鱼的注意力还短1秒。

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

在这个充满信息噪音的世界 ,图标是一个救星。你只需要快速浏览一下图标所代表的复杂信息,用这种方法,你可以用剩下的7秒关注真正重要的信息。

无论你是需要在产品的页面上找到某个特定的功能,或是在国外的城市找地铁。图标节省了你很多时间,加快了进度。

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

2.    图标的基础知识

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

2.1    图标的类型

象形符号

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

表意符号

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

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

2.2    图标的风格

图标被划分为很多不同的风格以及很多风格的变异。下面这些是最常见的:

线性图标 (作者:AnyOldTime )


面性图标 (作者:AnyOldTime )
拟物图标(作者:Atom_neo )


手绘图标(作者:mike )
扁平风 (作者:Evgeniy Dolgov )

3.    图标的尺寸和比例

在设计图标时的一个主要规则就是你的图标必须放个合适的方框里。不管它们现实生活中是否是不用的,比如一个回形针和一个相机。 图标必须放到一个特定大小的画板中,确保它们的尺寸在视觉上是一致的。 然而这意味着你的图标需要挨着画板的四个边。 为了让整个图标集看起来一样  ,有些图标可以小一点,在接下来的章节中我们将继续讨论这个。之前有新手就一直纠结视觉上怎么统一,这个还是需要自己去多练习,文章末尾我会分享网格。确保在90%的图标都是统一的。个别视觉需要自己另行调整。

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

如果是为网页项目创建图标,或是练习,可以使用以下这些默认尺 16x16, 24x24,32x32, 48x48, 64x64, 96x96, 128x128,256x256, 512x512;

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

4.使用网格

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

4.1    究竟什么是图标网格?

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

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

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

4.2    什么时候使用网格?

首先,如果你要创建超过50个图标的图标集时我认为网格很有必要。 你要使用同一种风格创建很多图标,网格有助于保持视觉网格统一 。另一个情况就是当你要给现有的平台设计图标,而这个平台有自己的图标网格。 如给 iOS或Android 设计图标, 你最好使用它们各自的网格。这些网格确保它们在各个平台上保持网格统一,你应该遵循这些规则,确保和平台的风格保持一致。

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

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

4.3    如何使网格?

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


这是我经常使用的网格

5.    图标视觉统一

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

国外有一个文章解释过这个原理,原文链接https://link.jianshu.com/?t=https://medium.muz.li/optical-effects-9fca82b4cd9a

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

1    使用统一风格

2    保持设计语言一致

这个不难解释,就是如果都是圆角,请都保持圆角,如果粗细是2px,请都保持一样的粗细。

3.    尺寸很重要,保持大小一致

这个就是上文提到的网格,最好在网格里面画,就能避免90%的图标不一致。

4.    在一个图标集中使用相同元素

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

5.    使用同一套配色方案

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

6.    软件的使用

我一般使用的是ai

设置,注意要选像素
建立好以后的样子显示/隐藏参考线command+;
显示/隐藏参考线command+;
准备工作,建立网格
设置参数
设置好网格以后,你可能会发现,依然没有网格,显示/隐藏网格 command + “

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


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

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


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

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

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

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

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

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

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

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

这里有一个知识点

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

7.    图标灵感网站推荐

http://www.iconfont.cn/

http://www.iconlet.com/

https://icons8.com/web-app/new-icons/ios7

http://linea.io/

部分网站需要自备梯子

7.1    图标绘画技巧网站

http://m.zcool.com.cn/article/ZNjgzOTky.html?from=groupmessage&isappinstalled=0

8.    图标收集整理软件推荐


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


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

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

备注:我会定期把不错的教程链接贴进来,如果你们觉得有很好的网站,也可以在评论里面添加,争取一文搞定icon。

希望你也受用,

祝开心!



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


第一步


第二步

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

笨懒胖的二傻
Web note ad 1