文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

图标和矢量市场,如 Iconfinder (我的工作地点)正在制作 精心设计的矢量图标 这对网页和印刷设计师而言,是一种廉价现成的资源。 成千上万的高品质的溢价图标集和数百个伟大的免费图集都近在咫尺。

每一个图标集提交给Iconfinder,都会进行审查和评价,以得出对我们网站潜在用户的吸引力,和作为溢价图标潜在的商业价值。 我们审查提交给网站的图标集时, 要对我们的设计师和顾客负责,保证网站上所有的溢价图标品质已达到最好。 要做到这一点,我们一直认清“差强人意”和“优质”之间的区别。区别一般很小,通常只需要稍微的变化, 但它对图标集的设计和价值意义重大。 我们和许多其他市场不同, 不完全符合我们的质量要求的图集,我们也很少拒绝。 相反,我们将分享非常具体, 可操作的建议,告知设计人员如何改善图标。

第 1 段(可获 2.19 积分)

本文将分六步讨论一套设计指南。 步骤遵循合理图标设计的基本知识, 包括一致性、易读性和清晰度。 希克斯设计公司的图标设计师约翰·希克斯在他的著作《图标手册》中详细讨论了 有效图标设计的原则,谷歌在 系统图标的材料设计指南中也谈过这一问题。本文讨论的六个步骤 应该被看作是指南,不是教条的规则陈列。成为一个伟大的设计师的一部分,是学会什么时候打破规则,什么时候遵循他们, 我们将在这里为大家展示出来。

第 2 段(可获 1.31 积分)

在这篇文章的图像示例, 讨论的六步会应用于改造狗狗图标(说的准确点,是柯基犬),图标是名为开姆·巴德利的Iconfinder用户最近提交的。 该图标有潜力,但不够精致到能作为“优质。“我们为开姆提供了一些简单的操作步骤, 而且,稍加改造,他的图标就有望获批成为溢价图标集了。 下面的图片显示了开姆改造前后的图标版本。 在接下来的章节中,我们将解释怎样有条不紊地做到这样的改变。

第 3 段(可获 1.38 积分)

Corgi icon makeover before and after

上方左图显示的是原始图标。 右图像是重新设计后的图标, 采用了本文讲到的原则。 (图片: 开姆·巴德利)

请注意,虽然文中讨论的指南是面向网页图标的, 但也同样适用于印刷图标。 印刷材料典型的300点/英寸(DPI)使得完美像素毫无意义。 如果你是一个打印设计师, 所有涉及的原则也都适用, 但你可以大幅忽略完美像素(pixel-perfection)的部分。

有效图标设计的三个属性

第 4 段(可获 1.19 积分)

精心设计的图标展示出一个有条不紊的和深思熟虑的方法,指导我们注意构成所有图标设计的三个主要属性:形式, 审美统一与认同。 设计一个新图标集时,重复考虑其中每一个属性, 从一般(形式)到具体(辨认性)。 即使你只创建一个图标, 这三个属性仍然隐含其中,也可以从单个设计推断出来。

毫无疑问,有效图标设计需要多于三个属性。 但下面阐述的三个属性是很好的开始。 由于相对简短, 我们专注于我们认为的三大主要属性。

第 5 段(可获 1.45 积分)

形式

形式是一个图标的基础结构 或制作方法。如果你忽略了一个图标的细节,在主要形状外面画一条线, 他们是形成一个正方形,一个圆, 一个水平矩形,一个垂直矩形,一个 三角形还是一个更有机的形状呢? 基本几何形状--圆, 正方形和三角形--为图标设计创造一个视觉稳定的基础。 在开姆·巴德利的柯基犬一例中, 头部由两个三角形和两个椭圆构成。 就像一个人开始画画,就是先描出最大, 最简单的形状,然后精确到更具体的细节, 图标应该从最简单的形状开始,然后再添加更多细节--细节只要能够传达图标代表的概念即可, 无论传达的是物体,想法还是行动。

第 6 段(可获 1.76 积分)

Corgi icon underlying form

图像中的关键线条显示出基本的大致形状,确定了设计的形式。 (图片: 开姆·巴德利)

审美统一

在单一图标和图标集合中的共享元素,我们称之为审美统一。 这些元素包括,圆角或方角, 角的特定尺寸(2像素, 4像素等),有限一致的线条权重(2像素, 4像素等),风格(平面, 线条,填充线或字形),调色板等等。 图集的美学统一是设计元素和/或设计选择的集合,设计中你不断重复,最终形成一个视觉整体。 在下面的例子中,注意,开姆图集的三只狗狗包含了一些共同要素, 如2像素的圆角, 狗狗的脸和心形鼻都是2像素厚的笔触。

第 7 段(可获 1.86 积分)

Three dog icons showing aesthetic unity

这三个狗狗图标有着共同的设计和风格元素, 创造了审美统一。(图片: 开姆·巴德利)

可识别性

可识别性是一个图标的本质产物,或使图标独一无二的属性。 图标最终是否有用,取决于观众能否轻松理解图标描述的物体, 想法或行为。可识别性要求展现的特性能让观众普遍联系到图标的想法, 但它也可以包括独特的或意外的元素, 如柯基犬的鼻子以心形代替。 记住,可识别性不仅是指理解图标表示的物体, 想法或行为,也指你独一无二图标集的识别度。 在这方面,审美的统一和识别度可以, 而且经常是交叉存在的。在下方图片中, 我们可以认出,两只狗分别是柯基犬和西伯利亚哈士奇, 因为它们毛色不同, 头型和耳朵也不同。但我们仍认为,它们属于同一图标集,因为两者的共同设计和风格元素。

第 8 段(可获 2.08 积分)

orgi and Siberian Husky icons

每只狗的独特特点使他们能够被单独认出, 而共同的设计和风格的元素又使他们同属一个共同整体。 (图片: 开姆·巴德利)

至此,我们已经看过有效图标设计的三大属性了。 在下一节中,我们将分六步,深入研究如何妥善处理这三个关键属性。

六个步骤

总是从一个网格开始

大小不同的网格好处,最好是在其他的单独文章介绍。 为打到我们的目的,我们讨论的是32 × 32像素网格。 我们的网格还包含一些基本的指南,帮助我们为每个图标设计创建基本形式。

第 9 段(可获 1.45 积分)

Corgi icon makeover before and after

这里,我们看见一个32×32像素的网格, 有个2像素的边界(或“禁区”),是呼吸空间。

网格外部的2像素是我们所说的“禁区。“除非绝对必要,避免将图标的任何一部分放在该空间。 禁区的目的是在图标周围创建一些呼吸空间。

部分图标形式是一般形状和方向。 如果你在一个图标的外缘画一条线-包围盒, 如果你愿意-这个形状通常会是一个正方形, 圆,三角形,水平矩形, 垂直矩形或对角线矩形。

第 10 段(可获 1.33 积分)

圆形图标在网格中间,通常会触及内容区域的四个最外边缘, 但不会触及禁区。 请注意,打破禁区规则的一个共同理由是,某一突出元素或次要元素需要延伸超出圆圈,以保持设计的完整性, 如下图所示。

Round icon showing alignment with grid and key lines

网格圆形图标和主要线条的对齐排列(图像: 斯科特·刘易斯)

正方形图标也集中在网格中,但大多数情况下, 不会一直延伸到内容区域的最外缘。 为了保持圆形、三角形图标一致的视觉重量, 大多数矩形和方形图标要对齐到中间的关键行(下方图片中的橙色区域)。 对齐每个关键线条,是由图标本身的视觉重量决定的; 何时用哪种尺寸需要熟能生巧,练出感觉 看下面的方块布局图片。 上面提到的三个同心正方形是浅蓝色, 橙色和淡绿色。

第 11 段(可获 2.33 积分)

Round and square icons on a grid

相对于网格圆形或方形图标的对齐和大小(图片: 斯科特·刘易斯)

在32像素的正方形中,你会注意到20×28像素的垂直和水平矩形。 我们大致仿效这些矩形图标,来准备水平或垂直方向的图标,并尽力使任何图标的尺寸以此为导向, 来匹配这些矩形20×28像素的尺寸。

Vertical and horizontal icons on a grid

相对于网格垂直或水平方向的图标的对齐和大小(图片: 斯科特·刘易斯)

对角向的图标要对齐圆形内容区域的边缘, 如下图所示。注意,锯的最外面的点大致与圆的边缘对齐。 这是一个不需精确的区域; 接近就足够了。

第 12 段(可获 1.66 积分)

Diagonally oriented icon on a grid

相对于网格对角向图标的对齐方式和大小调整(图片: 斯科特·刘易斯)

请记住,你不需要每次都严格按照网格和指南。 网格帮你使图标一致, 但是,如果你必须在制作图标和遵循规则之间做出选择, 打破规则- 正如Hemmo de Jonge所说, (其实他的昵称“荷兰图标”更为有名)

个体图标的本质比设置衔接的重要性更有价值。

从简单的几何形状开始

图标设计开始,用简单的圆,矩形,三角形大致勾勒出主要形状。 即使图标快要完成时,大部分是有机性质, 也可以从Adobe Illustrator的形状工具开始。 当谈到制作图标时,特别是在屏幕上较小尺寸的图标, 手工绘制造成边缘的细微变化会让一个图标看起来不那么精致。 从基本的几何形状开始会使边缘更加精确(特别是沿曲线的时候),还可以让你在设计图标内部快速调整元素的相对大小, 也确保你能遵循网格和形式。

第 13 段(可获 2.51 积分)

Basic geometric shapes of the corgi icon

这是基本的几何形状, 两个三角形和两个椭圆, 构成了柯基犬图标。

按多少来说:边缘,线条,角落, 曲线和角度 连接

设计中尽量多用,但是不要看起来过于机械和无聊, 角落,曲线和角度应该算得十分精确。 换言之,遵循数字,涉及细节的时候,不要两眼紧盯或徒手描绘。 元素中的不一致会降低图标质量。

角度

大多数情况下,坚持45度角, 或其倍数。 在45度角上进行的边缘柔化,会呈现均匀的阶梯状(有源像素是两端对齐), 因此结果很清晰,这个角的完美对角线是一个容易识别的图案, 非常符合人眼审美。 这个可识别的图案,使得图标集合保持一致,也让单一图标内部统一。 如果你的设计决定了必须打破这个规则, 尝试一半度数(22.5度, 11.25度等)或15度的倍数。 每种情况都有不同,所以具体情况具体分析。 使用45度的一半的好处是,进行边缘柔化仍然是相当均匀的。

第 14 段(可获 2.53 积分)

Close-up of 45-degree angle anti-aliasing

45度角常规边缘柔化特写

曲线

降低图标质量,区别专业、业余图标最引人注目的一处是不够完美的曲线。 而人眼可以精确检测到极其细微的变化, 手眼协调不可能总达到高水平的精确度。 依靠形状工具和数字创造尽可能多的曲线, 而不是手绘。 当你确实需要手绘曲线, 使用Adobe Illustrator的(或你矢量软件的)约束修饰键(Shift键)或, 更好的话,使用 Vectorscribe 和 Astute Graphics的InkScribe对贝塞尔曲线进行更精细的控制。

第 15 段(可获 1.45 积分)

Hand-drawing corners yields inferior results

手绘角落造成拙劣后果。 (图片: 开姆·巴德利)

如上图中我们看到的“修改前”图标, 手绘线条产生不规则曲线,降低设计质量。

Mathematically-precise curves

这些非常精确的曲线是用Illustrator的贝塞尔曲面工具创建, 而不是手工绘制。

角落

一个常见的圆角(或半径)值为2像素。 在32×32像素的图标中,2像素的半径足够大看清圆润的特点,但又不过分软化,以至于改变设计的个性(呈现出“泡沫”图标)。 你选择的价值取决于希望赋予设计的个性。 是否使用圆角是一个审美决定,要考虑到图集的整体美学。

第 16 段(可获 1.56 积分)

精确的圆角

精确的圆角

我们从几何形状开始, 现在已经添加了一个2像素的轮廓, 演示了形状工具, 和细节的一致性,如圆角, 是如何改进设计的。

Corgi icon, progress so far

迄今,我们重新设计的柯基犬图标的改进

这个显著改进版本显示了新设计的要点, 均匀的圆角, 平滑的曲线,耳朵周围线条权重的基础。

完美像素

小尺寸设计中,像素完美的对齐排列是很重要的。 小尺寸图标的边缘上柔化边缘,可能使图标失真。 没有对齐像素网格的线条之间的空白看起来模糊不清,要进行锯齿消除。 图标对齐到像素网格,使直线外缘完全清晰可见,也使精确的角度和曲线边缘更加清晰。

第 17 段(可获 1.74 积分)

如前所述,45度角是最好的选择(仅次于直线),因为用于定义角度的像素是堆叠的, 或倾斜的,两端完全对角。 角落和曲线同理:他们算得越精确, 抗锯齿效果越好。 但请注意,在更大尺寸和更高分辨率的屏幕上, 至少在抗锯齿方面,像素完善并没有那么重要, 如“Retina”所示。

线条权重

当涉及到线条权重,两条是理想状态, 但有时三条也是必要的。 目标是提供视觉层次和视觉变化, 但不要变化太多,以免破坏图集的一致性。 超过三条,图集可能会失去凝聚力。 2、4像素线条权重的好处是,它们都是2的倍数, 因此可以轻松地以函数倍增大或减小。 大多数情况下,不要极细线条, 尤其是在字形和平面图标中。 除非你就是要创建一个“线条式”图标, 依靠光影,而不是线条来确定形状。

第 18 段(可获 2.16 积分)

iPhone icon demonstrating line weights

这个iPhone图标显示了一致的线条权重。 (图片: 斯科特·刘易斯)

跨图标设计时,使用一致的元素和特征

“荷兰图标”Hemmo de Jonge在2015年图标沙龙上 发表过才华横溢的演说, 他详细谈到了图标设计的这方面内容。 他有两年多都在忙荷兰政府的图标系统项目, Hemmo和设计伙伴合并了每个图标上的一个缺口。 不是所有图标都有缺口,但大多数都有。 这种特征,运用适当,始终在图集中保持一致, 能够真正将图集结合在一起。

第 19 段(可获 1.18 积分)

iPhone icon demonstrating line weights

常见设计元素的使用(图像: 荷兰图标)

在狗狗的例子中,我们采用了一个常见风格元素:心形鼻。 这一视觉技巧不仅将图标连在一起, 还添加了奇思妙想的元素,传达出我们对狗狗这个四条腿朋友的喜爱。

Three dog icons showing common design elements

狗狗图标中常见设计元素的使用(图像: 开姆·巴德利)

在许多情况下,即使图集的主要方面都改变了-比如说风格, -构建审美统一的元素仍然可以把图集结合起来, 如下所示。我们按照字形风格新建了三只相同的狗狗图标, 而没有采用扁平风格,它们在审美上仍然一致。

第 20 段(可获 1.53 积分)

Three dog icons in glyph style showing common design elements

以不同风格使用狗狗图标常见设计元素(图像:开姆·巴德利)

减少细节和装饰

图标应该快速传达一个物体、想法或行动。太多小细节会显得复杂, 让图标难以识别, 特别是图标尺寸较小时。单一图标或图标集合的详细程度,也是审美统一和可识别性的一个重要方面。 确定图标细节度是否合适的一个好经验是,只包括使图标意义明确的最少细节。

第 21 段(可获 1.31 积分)

Corgi icon showing minimal details

最小细节传达图标事物。 (图片: 开姆·巴德利)

在上面的版本中,我们很接近改进完成后的设计。 耳朵周围的黑色轮廓已经变成毛皮覆盖的棕色区域了。 脸上的黑色线条去掉了,但脸上白色标记上面2像素的空间仍然可以看到。 但是注意,我们仍然有些元素来自于“重新设计前”版本, 如简洁的鼻子。我们会在下一步处理。

使其独一无二

创作高质量图集的天才设计师的人数 似乎与日俱增, 许多人无酬工作。不幸的是, 这些设计师很多过于依赖潮流,过分在意最受欢迎的设计师的风格。 作为创意专业人士,我们应该看向图标行业以外, 看看建筑,印刷,工业设计, 心理学,自然和任何其他领域,只要我们可以找到灵感。 因为如今,诸多图标集大同小异, 使你的设计独一无二尤为重要。

第 22 段(可获 2.24 积分)

Corgi icon with a heart-shaped nose

柯基犬的心形鼻使图标独树一帜。 (图片: 开姆·巴德利)

在最终版“重新设计后”的图片中,我们对心形鼻感触独特, 这为设计增加了新奇和风趣的气息。

这些简单的步骤应该看作是一个起点, 而不是一个明确的指南。设计图标没有必由之路。 在这篇文章中,我们介绍了设计一致的基本方法, 但其他设计师肯定有自己的意见和技巧。 成为一个更好设计师的最好方法是,看尽可能多的视觉参考, 广泛阅读各种材料,定期素描(去任何地方都带着素描本), 并要实践,实践,实践。

第 23 段(可获 1.56 积分)

Corgi icon makeover before and after

上方左图是原始图标。 右图是重新设计的图标, 采用了本文阐述的原则。 (图片: 开姆·巴德利)

结论

我们已经分享了如何创建优质图标的基本原则。 这些基本原则是技术技能; 任何人都可以通过练习学习和掌握。 记住,要想创建更好的图标, 从一般开始(形式),向具体努力(可识别性)。 保持图标内部的一致, 和整个图集的一致, 方法是关注图标或集合的共享元素(审美统一)。 一旦你掌握了技术基础, 你可以集中精力研究,什么能让一个图标真正脱颖而出:你独特的创意视觉。

你有自己想要分享的技巧, 方法或原则吗? 在下方评论区留言吧。

第 24 段(可获 1.81 积分)

文章评论