创造超赞的图标的10条顶级小贴士

作者: 他的名字是ZhAo | 来源:发表于2016-01-25 21:56 被阅读1188次

本文翻译自Andrei Stefan，仅作爱好、学习参考之用。译：他的名字是ZhAo

这篇文章是顶级设计技巧系列里的一部分。

哈！我回来了，但这次我准备做一些不太一样的东西，希望你们能发现其中的乐趣。

今天，我会从之前的深入的技术教程或者小贴士中跳出来，从一个更加整体的视角来谈谈图标设计。并且会把我做了一些自己的他人的作品的相关研究之后，总结出来的10个秘诀分享给大家。

那么，，如果你也像我一样对图标设计十分着迷，快去准备一杯热咖啡（我已经准备好了我的hh），在椅子上坐好，因为在下面的文章里，我们所讲述的东西可能会改变或者提高你，创造这些小艺术品的过程。

同样，在开始之前，我想让你知道,所有的图标包，包括我现在用的这一块，和成千上万的图标，都是来自Envato Market，世界各地的设计师经常都会上传他们最新的作品。

1.知道图标的发展历程

我知道你们中肯定有人不同意这个观点，但事实上不管你在生活中在做着什么工作，不管你是设计师还是机械工程师或者什么其他的，你都应该不断地花些时间和精力去了解相关专业的信息，这不仅仅是职业需要，因为在这个过程中你也能发现一些有趣、有教育意义的东西。

虽然你也不用对其在每个点上狠抓细究，但你至少也要试着去发现下面这三个简单问题的答案。

· 谁？

· 什么时候？

· 为什么？

谁？

“谁”代表着，那些想出用图标作为数字符号的第一批充满创意的发明家，而这方面却往往为人们所忽略，这也令我十分困惑，因为没有这些前辈先驱，图标设计可能根本就不会有今天，这些人给我们现在所用的一切奠定了基础，所以，我们应该对打开的每一个标签，找到的任何相关的资料，都保持着敬意。只有这样你可能才会理解，为什么这些人对图标设计和用户界面的诞生和演化那么的重要。

什么时候？

“什么时候”，这个问题我想你可能已经猜到了，那个代表着特殊屏幕窗口兴起的时代，也真正需要图标作为数字化的视觉符号的出现，然而有些人不太清楚的是，图标设计早在1981年就伴随着Xerox 8010 Star的诞生而一同出现了，这基本上是第一台拥有GUI和图形用户界面电脑，这也就意味着其艺术形式本身决不是旧的可以相比。但它也不能算作“早”，因为那个时代图标设计已经发展非常迅速，它还远没有达到一个“顶峰”的势头。

为什么？

“为什么”可能是最三个里面最重要的一个，因为它会解释这里发生的一切，但是说实话，它们之间都有着高度的联系，因三个变量的相互影响而使图标设计达到了另一个高峰。

来让我们花一分钟想一下，如果GUI的诞生背后的原因是不同的，或着如果该项目的负责人从未出生，那么事情会有多大的反转。我们可能仍然在用着命令界面---恩，又或许不是，反正总会有一些不一样的地方，相信我！

当然，，我可不会那么轻易的给你所有的答案，因为我真的不想破坏你的这段旅程，但我也会给你留下一个交互非常漂亮的网站，在那里你可以得到一切相关的信息，而且那个网站显示的效果也是超级赞的！

在最后，虽然这只是一个帮助你接触图标设计来源的小练习，但我还是强烈建议你去做它，那时你就会知道，为什么这些东西是今天这个样子的。同样通过对比了解，图标设计发展到今天都发生了什么，你也应该能够看到，图标在风格和复杂性方面是如何演变的，继而把握其发展的方向，有人甚至会通过创作一些全新的富有创造性的东西，来改变这种趋势。

2.对于任何新项目都进行一些基本的研究

如果说第一个小贴士是一个不错的小练习，并且能增加你对图标设计的相关知识，那么在我看来这个，就是一个你应该去努力和坚持的原则。因为它能帮你明确什么是视觉语言元素和它的风格，你尽可以把它们应用到你的每一件设计中。

有着社会科学背景的我，能够理解和欣赏发展进步带来的种种好处，并且在理论研究的早期就把他们应用到我做的所有的东西里了，尤其是在图标设计，因为它可以让我更好的理解设计的“主题”以及它是如何影响我和别人/最终用户的，就像一个交叉路口一样。

首先，在我们的经验中，“主题”实际上是一个数字化产品，用来维持和用户之间的视觉对话，并最终完成交互。这种交互必须要容易建立，并且更重要的是让用户感觉到十分自然，所以在这个意义上，那些象征符号必须要简洁明了，还要能触及到普通用户内心中某些特殊情感或文字，不管你是第一次还是第三十次看到他们。

所以伟大的图标必须是通用的，他们必须超越种种障碍,如性别、种族、年龄等，用同样的信息沟通，无论最终用户是谁。

现在，与任何其他产品一样，图标也通常会在人们心中创建一个特定的角色。不管他们会被用在一个网站中或显示在一个应用程序中，你在创作中都应该花一些时间考虑不同的变量，并且能够对他们每一个做出一定的说明，因为风格和“感觉”几乎肯定会受到这些因素的影响。

这可以很容易花几个小时就完成，但要保证在构思阶段你就必须找出这三个简短的问题的答案:

· 谁？

· 是什么？

· 如何？

谁？

谁代表着使用者，描述了所有的变量中的他或她。这个问题是至关重要的，因为根据不同的目标受众，你需要调整你的设计模式来满足一些条件，而且不同的项目情况也会不同。

另一方面，你需要建立一个详尽的特征清单，来尽可能的了解你的使用者，因为它们最终也会影响到他或她对图标使用的体验和UI本身。

通常来说，这些特征有以下几点

·年龄(年轻的使用者VS年长的使用者)

·性别（男性VS女性）

·种族（不同的文化差异）

·教育程度（受过教育VS未受过教育）

·技术技能（比较懂技术的人VS害怕科技的人）

让我们看一个简单的例子，来思考一下年龄作为人口变量之一，是如何影响年轻一代和年老一代用户界面交互方式的。

如果你的最终受众是年轻人，很可能他或她的眼睛更具备处理较小尺寸的图标的能力，但对于年长的用户，事情可能会有所不同，他们的视力会随着年龄的增长而不断恶化，而这时你创造的一个超小的界面，就会给他们带来很多的困扰。

现实中图标的风格在年老的用户的接收和感知下，也会有不同的感觉，尤其是当我们使用明亮的，高饱和的颜色的时候，可能也并不会那么吸引他们，因为和年轻人相比，他们的眼睛对那些刺激的反应不一样。

How to Create a Cool Icon Pack for Team Awesome in Adobe Illustrator

而现在，如果我们把“教育”作为第三变量，然后我们就会存在一个更大的分歧，因为这点在两个年龄段都会存在，有的用户有着基本的教育，而有的用户没有机会参加一个适当的学习机构。

虽然我不认为，关于教育水平和用户使用特定技术的能力有一个普遍的规则，但在一些特殊情况下，有的用户可能从来都没有遇到一个特定的符号，也就无法理解那个图标的含义，因为他们从来没有机会去概念化它们。

How to Create a Set of Graffiti-Inspired Line Icons Using Adobe Illustrator

此外，种族也是一件我们需要考虑的因素，因为一些符号被放到的环境，可能是在全世界的各个地区，不同地区的人对符号的解读可能也会不同。

一旦你开始发现这些答案，你就会发现你的“使用者”也在不断成型，因为你所发现的每一个特征，品质，并且在设计中把它们不断地实现和使用，你就会更加接近于创作一个明确的模式和视觉语言。

另一方面，这个“谁”还要能发现，你所要开始对话的是一个人还是一个公司，因为一旦知道了来源和接受者，我们就可以更轻易的去在图标和UI对话中添加一些设计亮点，来反应了公司的个性。

这最后一部分通常是对已有的符号创建自定义的变化，赋予其一定独特的风格，使人们可以很容易地把它链接到一个品牌上。

是什么

这个“什么”代表着“信息”，或者更精确的说，就是我作为一个视觉化创造者必须要和我的受众去交流的东西，它可能是一个简单的文字，或者一个表情，不管我想要告诉我们使用者的是什么，我们都必须要确定它实现的方式，而且对用户的交互来说都要足够简单、容易理解。

首先，很明显，那就是我们的“信息”就是用来直接联系到我们的观众，所以这取决于在最终用户上我们已经确定了哪些变量，我们必须让他们能够简单解释和理解。

所以，如果我们的受众主要由有着高教育水平年轻人组成，这就会给我们很大的权力，去创作一些更加复杂的图标，而如果我们的受众是没有很高教育水平而且年老的人，那么我们就要对我们的视觉语言做出一些调整，以便于我们的图标可以很轻易的就把想法告诉他们。

“什么”还代表着“任务”，或者地说更确切的是产品的核心业务，在某些情况下，用户实际上是经常会需要有一个基础的视觉认知，以便于他们能参与到交互中。

Media Player Icons

当然，你还是努力去创作一个，对你的核心用户足够简单好用的语言，但有时候你有时候也不得不强迫他们去学一些新的东西，因为最终他们最大的兴趣就是这些

一个完美的例子就是使用Adobe Illustrator、AutoCad或其他任何一个新的创意型/技术型软件。即使图标创建得很简单而且容易记住，但用户还需要阔宽他或她的视觉知识基础，不断熟悉可用的特定功能和按钮图标。

Example of Illustrator Icons

如何

如何”代表着很多东西，从“我的用户如何与我的UI进行交互“到具体不同的方法，来帮我们不断的改进视觉语言，促进一个更简单的交互。一旦我们知道了前面两个问题的答案，“如何”也将显示我们接下来要走的路。他像是我们的导游，引导我们构建和完善我们的视觉语言，让我们维持一个清晰的联系与我们的目标受众、我们的最终用户，在这一点上他们就应该比谁都清楚。

“如何”还让我们准定了图标的风格和方向，因为现在我们知道了使用的图标应该是小一点的还是大一点，复杂的还是简约的

一旦你知道了这些问题的答案，你就可以开始动工，并专注于图标本身了，因为你已经有了一个坚实的基础了

3.确定主题

主题通常是创建一个图标的下一个合乎逻辑的步骤，并且这个和图标在哪用也是有着很深层次的联系，你尽可以把“主题”当成一个故事，而他里面的各种元素、图标组合起来共同演绎这个故事。

当然作为一个故事，里面发生的事也一定要同步，因为你不能给你的故事起名叫“老人与海”，然后开始说宇宙飞船和火箭的事，那样就会造成很大的混乱。所以将反映“主题”的精美图标，必须联系背后的想法和概念

Christmas Icon Pack

这取决于你为谁创造图标，不管是为自己还是为客户/公司，你会发现选择合适的主题的方式有很大的不同，因为现实环境往往和你想要的不同

通常来说，如果你给自己做了一组图标包，来用作素材包的一部分或者直接在网上卖，一旦你想要做一个主题，你会有着充足的创意自由，因为没有其他人参与到产品的制作销售中，而问题是，有时候这却被证实是一个很艰难的挑战，因为你不可能每时每刻都能确切地发现自己想要做什么

我经常的做法是，当我发现自己思维陷入困顿的时候，赶快拿起一张纸，然后把我想要转化成图标的5个不同的关键词写下来，一旦我做了我的选择，我就会开始思考有哪些不同的对象可以添进我的素材包里的，把它们也写下来，确保收集至少20个元素这样我就有一个万全的开始了。然后我会花些时间来修正清单，因为这往往会带来更多的元素，也都是原来忽略掉的。当数量累计到一个差不多的情况的时候，我就会开始下一个阶段

如果为客户创作一个主题，最终的决定权往往在合作方，或者有时候很多人都想告诉你他们的想法，然后等着你去实现它们。大多数时候，你会发现他们其实蛮有帮助的，因为客户总是比你更了解他们的产品或者服务，所以那也就意味着，实际上他们就是可以帮你完成工作的一个巨大的资源。

其他时间，客户基本上是全无头绪的，他们只是希望你做一个和其他人作品相类似的东西，如果你也曾陷入这个情景，记得永远要提醒你的客户，做原创要比做模仿重要得多，在这种情境下，你就要能控制和引导你的客户到一个公有区域，让他们也不会感觉被左右了决策，然后向他们展示为什么你的想法更好一点。

4.确定图标的风格

一旦你有了一个主题，下一步你就要开始思考要赋予你的图标以什么样的风格，就好像说“主题”是一个故事，那么“风格”就是你如何去讲述这个故事，这非常重要，因为它会给你机会让你的作品独一无二，从众多作品中脱颖而出

而图标设计发展到今天，我们有两大发展方向，他们彼此不同却又有一定相似，一个是扁平化，一个是线状图标。

4.1扁平化图标

首先一个就是“扁平”，这可能是叫他最直观的方式了，因为它没有像拟物化那么多珠光宝气的雕饰，取而代之的是一种更加简约化的风格，用图标对现实生活中的事物和功能，以一种趣味化进行描述。

如果要我简单描述一下这种风格的特点，我会说它会很容易理解，你也不必刻意去研究和掌握任何夸张的渐变技巧，而且做这种图标很有趣，因为你可以通多很多形状和颜色的组合，得到一些很有意思的东西。

Universal Flat Icons

4.2. 线状图标

第二个风格是“线状”，这有一点融合了扁平和旧学院派的线状作业的感觉，通过添加一些粗细不等的线条和轮廓将不同的部分彼此分割开来，相比于之前的风格，线状图标不管是填满整个形状还是轮廓来表示，都可以。

Christmas Icon Pack

或者你直接用线就行。

Christmas Line Icon Pack

这个风格的又一大不同点，因为不像是扁平化图标，基于一些基础的形状，像三角形和圆形那样，线状风格它会要求你更多的使用钢笔工具，要求你习惯于把路径面板和其他工具相结合

然而要知道，不管是线状图标还是扁平化图标，其实并不重要，只要你能在作品中加入自己的创意，自己的元素，以至于足够鲜明的时候，人们一眼就会立刻知道作者是谁

我发现了一些这些风格总共可以分成三个不同的方面

· 颜色

· 形状

· 表达

颜色

颜色绝对是这些里面可以帮助你确定个人风格的一点，但它并不容易掌握，因为在这个后面有着一整套的理论体系，一旦你掌握了他们，肯定让你受益匪浅。你可以认为颜色，就是你讲述故事的语气。明亮的，温暖的颜色，就会使你的故事也变得欢快、温暖。

Warm Colored Icons

而一旦改变了色调，那种“语气”也会从有些友好，转而变得有些距离

Cold Colored Icons

当然，这只是一个小栗子，因为颜色其实代表着很多意思，这这方面我就不逾越了，因为这里已经有了一个写的非常好的文章，深入解释了你们应该知道的一切

形状

如果说颜色是故事的“语气”，那么形状就是故事讲演者的技巧，因为那些设计师往往都可以创造高度细节的艺术品，而他们却用简单的形状，就达到了同样的表现效果

此外，形状还有助于建立故事的情绪，或者更具体地说，你的用户如何的感受这些图标。比如说可以从柔软的圆角感觉到更加富有趣味性，从直角和线条而感觉到更加正式

你也可以从形状和线条之中挑选，这样就会有一个更直观的感觉，哪些看起来更自然，哪些看起来更像人造物，当然，最终都取决你的项目要求

How to Create a Set of Productivity Icons in Adobe Illustrator

表达

表达可以被看做是一种“情绪”，就是你的图标可以勾起人们内心的某些情绪，正如你可能已经猜到的，这主要是通过结合智能配色方案和合适的形状。没有情感，你的风格将必然受困，因为你没有独特的“东西”能够打动观者

然而关于风格有一个困难，就是它不容易找到。因为人们的创造性的思维都很不同，这也就意味着可能有一些特殊的设计师能比较快的发展出自己的风格，有些就可能会比较困难。

通常来说，这才是人们关于图标设计问的最主要的问题，但事实却是，并没有一个普遍的公式，可以帮你来做出一个让人侧目的风格。这完全是每个人的主观感受，而唯一影响他的，就是我们投入了多少的时间和精力去完善自己的作品。而只有到被大家认可，你才算真正的创作出了这个风格，但相信我，如果这真的发生了，你会笑好几天的。

但你要尝试一些新的风格总是没什么错的，因为这实际上也是一个好方法，可以让自己发现自己究竟擅长什么，并且也能知道怎样去提高。不相信我？这样，你随便挑几个自己喜欢的设计师，然后回头看看他们早期的作品，你就可以知道这些年他们的风格都发生了哪些变化。

而今天，图标设计的趋势大概就在“线性作品”上，就是用填充色块做内容，用粗线条做不同部分的边界，以此来组成一个完整的图标。它的流行背后的原因主要是相比以前的拟物化图标设计，会在技术上尽可能的与现实中对应的东西很像来说，这种线状的作品，可以让你通过使用的形状和颜色，就很轻易的表达出一个想法或情感

How to Create a Set of Mini Pirate Icons in Adobe Illustrator

设计的风格一直在改变着，因为设计师们对原有的东西也总是能做一些新的提升，这些提升最终会导致转化成一些新的风格，这些“新鲜”的东西，也会强大到足以让其他人追随它。同样的，像是某种时尚，图标趋势的发展也总是能找到一种方法复兴自己，同样也总是有着某个机会，我们将会看到一个垂死的趋势重新回到生活在一个遥远的时间点

5.在心里创造不同的尺寸

尺寸——或者更确切的说那些尺寸——可能是你需要决定的最重要的东西了。不管你正在做着什么，因为你的图标可能会被用到各种不同尺寸和像素的屏幕上。这也就意味着，他们必须要首先确定尺寸大小，而不是界面或者系统本身。

情况通常是，移动操作系统的公司负责创建和发展公开这些规范，并要求开发人员遵守他们保持一致。

所以，当你准备做一套手机app的图标的时候，不管是谷歌的Android还是苹果的IOS，你都可以很轻易找到合适的尺寸。

而当你将工作在一个网站或者软件上某一块的时候，他们往往会给你更大的自由空间，但那样就意味，你必须要花些时间来研究一下，哪一个尺寸的综合效果会更好一些

现在今天，虽然你不需要记住哪个设备或者系统需要怎样的尺寸，但你必须知道,根据项目的需求，往往你将不得不适应和使用预定义的值，而不是自己想出的。

另一方面，如果你做了一个图标包放到网上去售卖，那里也同样有着种种规则，因为那些图标包也通常要使用预定的大小，从16x16 px一直到256 x 256 px都有.

E-commerce Business and Finance Icons

一旦知道了你作品做的确切的尺寸，这也将会帮你更容易地管理任何项目，因为你不需要拔推翻一切然后再开始花时间研究在创作之前应该做的东西。

一个一般性的规则是，不管你的图标最终会被用在哪里，一定要从最小的尺寸入手，把他作为一个做更大图标的一个基础，因为在处理像素完美的物体时，把他放大往往会比把他缩小简单，而稍有闪失，就可能整个毁了你设计。

在我最近写的在这个小教程里，你可以阅读更多关于正确缩放图标的过程。

6.使用参考网格实现一致性和连贯性

一个基本规则，如果你在设计一组图标包，那么也就是说这个作品不只一个，作品直接的相关性也就成了必须，否则，“风格”最终将不复存在，因为你的图标没有一种视觉的和谐。

也就是说，接下来，你应该开始学习和应用在整个工作中的，就是参考网格。根据定义，一个网格是一个“结构，由一系列直的(垂直、水平和有角的)或弯曲的引导线彼此交叉，作用于结构内容。网格像电枢一样工作着，让设计师可以用一种容易去理解的方式，合理地组织各种图形元素(维基百科)。”

在图标设计中，参考网格通常是操作的必须，因为它能让你创作出一些彼此间有联系的图标包，这点必不可少，因为你不可能在商店中，售卖一个风格混乱的产品

7.避免在图标中使用文本

让我们来坦诚一点吧，如果你的图标无法让人一眼看到就明白它的意思，那就是你有什么地方可能出了错，因为图标背后所代表的意义，就是要克服人们对于使用文字的需求的

想一想，如果你有了一个时钟的图标，却还要在他下面写上文字“图标”，这会是一件多么奇怪的事啊，我是说，它即使没有文字的描述也应该很明显，你做的，就是一个时钟

除此之外，想一想，要创造一个超小的图标（24 x 24 px）然后把一个6 px的字放到它旁边，会是一件多么困难的事，事实上，还得希望用户能够阅读它

是的，当然有一些情况下，你是可以使用字母或数字的，例如文本文档图标或日历，这些符号可能会增加图标的风格和意义，但这些通常是非常罕见的情况。

Icons that Use Text to Add to their Value

而一般来说，你应该离使用文本越远越好，你应该去想些办法来让你的图标有着一个明确的声音和感情，这才算入门，而不是靠什么外界的帮助。

而关于图片，是有些情况下有图片仍在使用，但是我必须说实话，我从来没想过使用照片作为一个图标的一部分。我的意思是，就是有点奇怪，因为使用图标的首要的原因就是把现实的功能或部分现实转化为一个UI。

8.目标是像素级的完美

对于那些已经读过我的一些其他教程的人，你们可能知道，在创作完美像素的作品上，我是一个真正的狂热分子，因为我强烈相信，这才叫好作品。

不管你在做什么，不管是图标设计还是机械钟，对于那些想创造高质量作品的人和纯粹就是图快的人，他们之间有一条明显的界线。所以，相信我，除非你一直想着争做一流，否则你很快就会被淘汰。

举个图标设计的栗子，为了要变得更好，你就会学习怎样为数字媒体而创作，你需要确定每一个小的形状和线都是完美对齐像素格子的，来让其中的图标尽可能的锐利清晰

我见过很多制作糟糕的图标，一放到高像素的设备上看起来就是一团模糊，当然我也总是会问自己，为什么他们不用正确的方法去做。最后，它也同样激励我在这个问题上尽可能的研究，并且创建一个“如何”教学教程，说明创建完美像素的作品的过程

如果光看不太符合你的习惯，这里同样还有一个我几个月前做的视频课程，可以一步一步的带你来做一个完美像素图标

Creating Pixel-Perfect Icons in Adobe Illustrator

9.学着去掌握简单的艺术

这一点也是遵循着“少即是多”的原则，因为图标设计目的就是创建一个视觉符号，本身就说明了整体建构上应该尽可能的简单。

而这背后的愿意是，往往图标都是一些小尺寸的图标包，这也就意味着，你作为一个设计师和视觉工程师，一方面在尽可能消减不必要的“视觉重量”的时候，另一方面也要保证图标有着足够的细节来表达出想表达的信息。只有这样，你才可以让用户更加有自信他们在理解和使用图标，或者整合在其中的不同功能的能力，带来更有效的交互。