个人总结：icon网格使用规范.doc

个人总结：icon网格使用规范我们的追波team链接，文中部分作品来自team成员。/nullest一、图标的历史和它的目的 开始之前，你必须先清楚要了解什么是图标设计以及它的来历，下面我会简要介绍图标设计的历史， 了解它在当今世界的重要性，以及未来的发展趋势。1.1 什么是图标 如果我们在字典中查“icon”这个词，会发现很多同的含义，从“ 一个神圣的人物”到“计算机命令常用的象征性符号”。“icon”最简洁准确的定义是，用相似的或者类比的方式来表现它所代表的对象。1.2 图标设计历史 正如我之前提到的，图标设计的历史可以追溯到史前时代。然而在这个特定的部分我想关注近代图标的发展史，就对图标理解更深刻了，我这个网站写的图标历史非常的棒：/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 里面用的是2424，在ai里面是用的是2424或4848。如果是为网页项目创建图标，或是练习，可以使用以下这些默认尺 1616, 2424,3232, 4848, 6464, 9696, 128128,256256, 512512;备注：如果你是一个初级图标设计师，我建议避免使用较小的尺寸，因为小尺寸更有难度，64 或 96 px 的网格是不错的选择。四、使用网格 其实，写这篇文章是因为我的一个学弟问了我很多如何绘制图标的问题，我给了他网格，但是他却思想陷入其中，不知道如何视觉统一。其实，在你真正理解网格的时候，你要画很多图标才能理解网格的意义。4.1 究竟什么是图标网格? 把图标网格当成一种约束，让你的图标集保持规范统一，网格是一个框架，让你的图标保持统一。下面我分享2种常用的网格：链接: /s/1fEz33qHOzPxkYAmejU8T5A 密码: mutt4.2 什么时候使用网格？ 首先，如果你要创建超过50个图标的图标集时我认为网格很有必要。 你要使用同一种风格创建很多图标，网格有助于保持视觉网格统一 。另一个情况就是当你要给现有的平台设计图标，而这个平台有自己的图标网格。 如给 iOS或Android 设计图标，你最好使用它们各自的网格，这些网格确保它们在各个平台上保持网格统一，你应该遵循这些规则，确保和平台的风格保持一致。这是一个框架结构，你的图标集将会在这个基础一致。如果将来这些网格会被其他人维护，网格也能派上用场。比如：你要创建一个通用样式，其他人会在这基础上构建其他图标集。网格很像需要遵循的规则，让其他设计师在最开始就明白图标的尺寸。就像上面所说，网格被高