ICON设计的7个实用原则

一篇关于图标设计很实用的文章，我翻译了一下，希望对图标设计爱好者有所帮助，错误在所难免，若发现请指正。

Before approaching icon design there are some guidelines and principles that are worth studying. If you want to create effective icon designs, then you should take a holistic approach to issues such as: audience, size, simplicity, lighting, perspective, and style. This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.
在从事标志设计之前，有一些基本原则是需要掌握的。如果您想设计的图标更加实用，应该对一些问题有整体考虑，例如：图标的使用者、尺寸、简易性、光影、透视和风格。本篇文章会为您“设计出既统一又优秀的图标”指引方向。

1. Approach Icon Design Holistically
1. 整体设计图标

Icons fit within graphic systems. Whether they are designed for desktop applications or websites, an icon is one of many graphic elements that need to work together harmoniously. Carry this logic across icon sets as well. Icons can be appreciated for their esthetic solutions individually, but they don't function alone. Evaluate your icon designs relative to the graphic system you're using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.
图标需要适合图像系统。无论是在软件还是网页中，每一个图标都是由许多统一的图形元素组成的，而对于一套图标也是同样道理。从审美角度来说，图标可以单独欣赏，但在功能上它们却是一个整体。评估您设计的图标，使它们与所在的图像系统相协调，并确保每一个图标在具有个性的同时，与其他图标能够统一。

In the article Designing an iconic language over at Turbo Milk the author Yegor Gilyov states, "If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities." This is one of two major points made in this article on icon design. He goes on to explain how failing to plan how the whole set of icons will work together from the beginning will ensure a huge waste of time, as redesign will be inevitable.
TurboMilk 上的Yegor Gilyov 在他《设计一种标志语言》中说道：“如果需要画一些图标，在绘制前就要构思好整套图标的风格。”这篇文章阐述了图标设计两个关键，这是其中之一。接着他说，如果起初没有定好整套图标的风格，之后不可避免的再设计一定会浪费您许多时间。

2. Consider Your Audience
2. 考虑您的用户

You will have different considerations if you're designing an intranet for a small company, rather than for a product that may be sold internationally. When creating icons cultural considerations are important. Symbols may differ for common elements you may use for your designs.
给一家小公司设计内部网页，会与设计“畅销世界的产品”考虑不同的东西。设计图标时，文化是需要着重考虑的。在不同文化中，就算是常见元素，含义也可能会有所不同。

Turbo Milk has another great article; this one is called 10 Mistakes in Icon Design. In it, they point out some clear examples of where many icon designs go wrong. They discuss national and social characteristics in point seven of the article. "It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country." They go on to give an example of how mailboxes differ greatly between countries. Apple uses the same example in its Human Interface Guidelines.
        TurboMilk上还有一篇精彩的文章《图标设计的10种错误》，里边例举了一些图标设计中的常见错误。文章在介绍第7种错误时，谈到了国家和社会特点的影响：“设计的图标在哪使用是需要提前考虑的，其中一个重要方面，就是要符合当地的民族特色。不同国家从文化传统到环境甚至手势，都会有很大区别。”接着文章又例举了“各国独自特色的邮箱”，巧的是Apple在它人性化界面指南中也使用了这个例子。

        So, designing an international icon based on one country's rural mailbox design is a bad idea. Really specific example of what not to do. They point out how Apple's Mail icon is more recognizable as stamps have more cultural universality.
        以某国农村里的邮箱为蓝本设计的图标，是无法在全球使用的，这是一个典型的反面例子。而像Apple以“邮票”图案象征“邮件”，在各国文化上都很普遍，就更容易被人接受了。

3. Design for the Size the Icon will be Used At
3. 为尺寸量身设计

If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn't work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.
如果用Illustrator画矢量图，由于支持任意拉伸，您在尺寸方面可以不受约束。但是在图标设计中这些却是不适用的，一个512像素下精美的图标，缩小到16像素便会变得一片模糊。图标在设计时都有一个初始尺寸，如果输出其他尺寸，之前都要优化一下。

Icon design is not a one design equals scalable solution medium though. This is one reason that Photoshop is just as good a solution as other programs. For designers that make icons in Illustrator they are still going to clean them up in Photoshop, or jump through some hoops to get their icons to look good at small sizes when being output directly from Illustrator. So, don't buy into the myth that icon design is a purely Vector based medium. We are outputting pixels here after all.
图标并不支持任意拉伸。设计师在Illustrator中完成设计后，需要在Photoshop中处理一下，否则在直接输出小尺寸时会出现模糊，这也是为什么Photoshop是一款出色软件的原因之一了。因此，不要误以为只在矢量软件中设计“中等尺寸”的图标就行了，毕竟最后我们输出的都是像素图。

There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs. If you're equally versed with Illustrator and Photoshop you may find a workflow that goes well between the two programs. Consider using Smart Objects. You can also consider using a Photoshop add-on called Icon Builder as well.
Photoshop中的矢量工具和遮罩，能实现其他矢量软件具有的缩放功能。如果您同时精通Illustrator和Photoshop，就会发现它们前后配合默契。您还可以考虑使用一些智能化的软件，或者使用Photoshop的插件Icon Builder来设计图标。

The approach taken for small icons and large icon design is immensely different. Firewheel has a good article that covers the scaling subject called Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes.
设计大图标和小图标的方法是截然不同的。Firewheel上有一篇出色的文章《图标设计：位图与矢量图》，详细介绍了图形的缩放。而Mezzoblue的《图标设计尺寸》则阐述了设计小图标时会遇到的固有问题。

4. Keep Icons Simple and Iconic
4. 保持图标的简洁和象征性

With operating systems now having icons that scale to large sizes (512px by 512px is gigantic for an icon) the temptation grows to get illustrative with your icon designs. While a level of realism can add interest to an icon design, it should not supersede its ability to function simply and effectively.
如今采用大图标（512*512像素对于一个图标来说就很大了）的操作系统下，大家都想把图标设计得很真实。诚然，某种程度的真实感可以增加图标的趣味性，但不应以“抛弃简洁有效”为前提。

Smashing Magazine has a great summary of the Apple Human Interface guidelines on Icon Design. The section on Realism in Aqua makes some good points about the limitations of realism in icon design and points out when symbolism is necessary. This section discusses the issues at odds between realism and simplicity in icon design.
        SmashingMagazine上有一篇很精彩的文章《Apple人性化界面方针在图标设计中的体现》。文中《Aqua图标的真实感》这一章节指出了写实性图标的局限性，并告诉我们什么时候象征性是必需的，同时还探讨了写实性图标和简洁图标的差别。

        Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. I'm sure everyone is familiar with the common symbol for RSS icons. View the example below from Smashing Magazine. These icons border on illustrations while still maintaining the strong symbolic qualities of the icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.
        请不要将图标过度复杂化。注意不要将过多的元素放到一个图标内，也不要过度修饰一个图标。我敢肯定大家都对RSS图标都象征什么很熟悉。看看下面Smashing Magazine 中的一个例子，这些图标偏向写实风格的同时，还保留着明显的象征性。过度的修饰图标反而使它难以识别，尤其是在很小的时候，所以请大家注意不要在一个图标内放入过多元素了。

There are times when the aesthetic interest of the icon may be worth loosing some of its iconic impact; it's always a judgement call, and needs will vary with each design. Compare one of the icon sets below to a simpler RSS icon design, like the one here on PSDTUTS. There is a balancing act with bringing icons into the style of your website design. You want to add interest, and compliment the design, but not loose the iconic impact of the icon.
“为了使图标更具有审美感，有时候可以适当降低象征性”的说法是需要具体分析的，这是因为图标的设计需求各不相同。将下边的一个图标，和PSDTUTS上那种简单的RSS图标对比，就会看到它配合网站做出的一些调整。当您想给图标添加趣味性时，请不要降低它的象征性。

The icons below look really cool. It requires a judgement though as to whether the loss of some of the quick recognition of the symbol is worth the added design around the symbol. At a large size it works just fine, as they function similar to illustrations. At smaller sizes though, a less dressed solution may be preferable.
下边的图标的确很酷，但是这些“使图标失去快速识别功能”的元素是否值得添加，却是值得讨论的。在大尺寸下，它们像插图那样摆着没什么问题，但小尺寸时，较少的修饰会更好些。

5. Cast Consistent Lighting, Reflections, and Shadows
5. 采用一致的灯光、反射和阴影

It's important that the realism you add to your designs all function coherently. If you utilize a light source coming from one direction then stick with it. Or else you risk loosing the integrated design of your icons. Also, consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the website or application design your using them in then the design will appear amateurish.
您对图标的真实化处理一定要统一。如果您使用了某个方向的光源，其他图标也要使用这个光源，否则就会降低整套图标的统一性。同时也要考虑图标所处的光源，如果它和网站或软件设计风格不协调，则会显得整个设计很业余。

In the Windows Vista User Experience Guide there is a section on icon lighting and shading. The guidebook gives really specific rules for the Vista Icon set. This gives more exacting standards for icon designers and insures a unified icon system. Following is a specific rule to see an example, "Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space." There are many more rules in this guide.
《Windows Vista 用户体验指南》中有一段写的是图标的光影，它给Vista图标下了明确的定义。图标设计师需要遵守严格的设计标准，从而确保了整套图标的统一。从下边的例子，您可以看到其中的一条：“通过阴影使3D图标能够立在起来，而不是傻傻的飘在屏幕上。”指南中还有更多这样的标准。

6. Utilize a Limited Perspective
6. 使用一致的透视角度

The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.
整套图标应采用统一的透视角度。有的图标是正视角度，那么其他图标也应如此。如果一个图标具有特殊角度，要将所有图标都统一成这样。想象一下将摄像机摆在一个特殊的位置，透过镜头会看到相同透视的物体。这有助于使您的图标保持一致。

A large scale design system, something like a software operating system, may need more flexibility than that though. Apple covers Icon Perspective in its Human Interface Guidelines. They have a more flexible use of perspective. "The various perspectives are achieved by changing the position of an imaginary camera capturing the icon." The image below shows the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).
大规模的设计系统，比如软件操作系统，图标设计需要更具灵活性。Apple的《人性化界面指南》涵盖了图标透视问题，他们使用了更灵活的透视方法。“通过改变想象中的摄像机的位置，来获得图标的各种透视角度。”从下图可以看出应用程序图标（上排）和工具栏图标（下排）透视上的区别。

7. Create Consistent Icon Set Styles
7. 建立一致的图标风格

Lighting and Perspective certainly contribute to the style of an icon. Though, there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge style website design, you'll likely be adding texture to the style of the icon's design.
灯光和透视无疑有助于图标风格的建立，同时还有许多其他因素在起作用。如果想使自己设计的图标与“车库摇滚”风格的网页相协调，您需要给它们加入一些纹理。

Icon sets have unique features that make them stand out. In the Echo Icon Guidelines the set is describes as, "Echo is currently a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilizing high contrast and spots of vibrant colors." Another way that this set stands out is through the consistent use of outlines. See the image below for an example.
图标需要独特的造型使自己与众不同。《Echo图标指南》是这样描述的："Echo是当前最新的一套图标，为Fedora操作系统所设计。由于Echo图标在动态空间使用，它需要兼具真实性及简洁性，同时它还有很高的对比度以及鲜明的色彩。这套图标另一个与众不同的地方，就是它使用一致的轮廓线，下图就是一个例子。

Get Started with Icon Design
开始图标设计

Designing icons for websites is a good way to get started with icon design. Often, there are only a few icons needed for a site design. Start simple with a small website design project where you are required to design only a handful of icons, or less. This is a good way to gain some experience with icon design.
为网站设计图标是从事图标设计的一个绝佳起点。通常一个网站只需要一部分图标，给这样的网站设计图标，可以为以后的设计积累一些经验。

Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon your looking to make. Sketch as much as necessary to lock down the concept. Compliment the style of the icon designs with the website design you'll be using them on. Consider the color, perspective, and graphic look of the site.
以做研究的心态开始图标设计。图标中使用通用的象征，尽量的多画草图来掌握这个原理。设计时考虑网站的颜色，透视以及图像等方面，通过网站的视觉设计将图标衬托得更精彩。

Hicks design has a quick SlideShare presentation on Icon Design. One section of the presentation covers his design process. It gives some great visual examples. Below is an example of the sketching step.
Hicks在SlideShare写了一篇《图标设计》，其中一节概述了他的设计流程，文章里有他做的精彩图标，下图是就是在草图阶段中的一部分。

ICON设计的7个实用原则相关推荐

最吸量的手游ICON设计参考资料
案例1:<刀塔传奇>ICON设计吸量原因分析: 设计精美,细节处做得很好(如手和王冠) 创意感强,胸部以立体感的方式露出来,非常吸引眼球选用了<刀塔>题材中,人气最高的冰女 ...
SAP Spartacus 里的 icon 设计
同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...
有效icon设计的三个属性
有效icon设计的三个属性~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键 ...
UI设计师必看！游戏技能与道具的ICON设计指南
作者:volvofu腾讯互动娱乐视觉设计编者按: ICON看似很不起眼,但却是游戏中必不可少的存在.那么,怎么才能将它设计得更好?本文作者总结了自己在游戏ICON方面的设计经验,希望对大家有所启发 ...
资源汇整：53套免费的扁平化Icon设计
iOS 7和新一代iPhone发布日渐临近,各种扁平化设计素材也越来越多.以下列出的扁平化icon全部是免费的,可以用在网页设计和移动app设计当中. 1. FlatIcons.co FlatIcon ...
53套免费的扁平化Icon设计
iOS 7和新一代iPhone发布日渐临近,各种扁平化设计素材也越来越多.以下列出的扁平化icon全部是免费的,可以用在网页设计和移动app设计当中. 原文:http://www.cocoachina ...
2019年ICON设计趋势总回顾
UI专栏撰稿: Jing(微信公众号:IQS开发者社区) 图标icon可能是过往整个界面设计中最容易被低估但又是最重要的元素之一.它们几乎无处不在,一个优秀的图标设计可以是独特的,同时为项目增砖添 ...
SAP Spartacus B2B 页面 info icon 设计 - 版本1.0
现在的做法:引入了新的section标签,包裹cx-icon和h3: <cx-icon[cxPopover]="listHint"[cxPopoverOptions]=&qu ...
SAP Fiori图标(icon)设计原理：一个可以查看 SAP UI5 所有可用图标的工具
When you are creating a new button and assign an icon to it, there is no way for you to know exactly ...
icon设计探讨：图标，文字，还是图标加文字？
图标是界面的基本组成部分之一,然而在很多时候,图标本身也在破坏着界面的清晰性. 象形图出现在人类早期,我们可以将其视为最初的文字形式.如今,在某些文明群体中,象形图依然是人们进行沟通的主要媒介. 在很 ...

ICON设计的7个实用原则

ICON设计的7个实用原则相关推荐

最新文章

热门文章