查看完整版本: [推荐]icon设计过程中需要注意的10种错误

[推荐]icon设计过程中需要注意的10种错误

[color=#a0522d][attach]1170[/attach]  [url=http://www.gaolewen.com/post/52.htm][Via][/url]      [[url=http://www.iconfans.com/viewthread.php?tid=561&page=1&fromuid=2#pid2732]看不懂E文的，请看zEPHIRUz的中文翻译[/url]]

[color=#a0522d]一篇不错的文章，介绍了在icon设计过程中需要注意的10种错误，对于ui设计者来说，非常值得一看。[/color]
[color=#a0522d]It is much easier to criticize somebody else’s work than to create something cool yourself. [color=#ee6600][color=#ee6600][color=#ee6600][color=#ee6600]But[/color][/color][/color][/color] [color=blue][color=blue][color=blue][color=blue]if[/color][/color][/color][/color] you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…[/color]

[size=14px][color=#4169e1]1 Insufficient differentiation between icons[/color][/size]

[color=#a0522d]Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. [color=blue][color=blue][color=blue][color=blue]If[/color][/color][/color][/color] you miss the legends, you can very easily get the icons mixed up.[/color]
[color=#a0522d][attach]1171[/attach][/color]
[size=10px][color=#deb887]Icons from the Utilities section in Mac OS X. I am always getting them confused and launching the wrong application.[/color][/size]
[size=10px]
[/size]
[size=10px][color=#deb887][attach]1172[/attach][/color][/size]
[size=10px][color=#deb887][color=#deb887][size=10px]The problem is aggravated by having small size icons displayed on screen.[/size][/color][/color][/size]
[size=10px][color=#deb887][color=#deb887]
[/color][/color][/size]
[size=10px][color=#deb887][color=#deb887]
[/color][/color][/size]
[size=14px][color=#4169e1]2 Too many elements in one icon[/color][/size]

[color=#a0522d]The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.

Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:[/color]

[attach]1173[/attach]
[color=#deb887][size=10px]Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.[/size][/color]
[size=10px][color=#deb887][color=#deb887][size=10px][color=#deb887]

[color=#4169e1][size=14px]3 Unnecessary elements[/size][/color]

[color=#a0522d][size=14px]An icon should be easy to read. The fewer elements it has, the better. It is better [color=blue][color=blue][color=blue][color=blue]if[/color][/color][/color][/color] the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.[/size]

Let us take for instance some database icons:
[/color][attach]1174[/attach]

[color=#deb887][size=10px]At first glance everything looks alright.[/size][/color]

[color=#a0522d][size=14px][color=#ee6600][color=#ee6600][color=#ee6600][color=#ee6600]But[/color][/color][/color][/color] [color=blue][color=blue][color=blue][color=blue]if[/color][/color][/color][/color] this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:[/size][/color]
[attach]1175[/attach]
[color=#deb887][size=10px]The sense is not lost here [color=#ee6600][color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color][/color] the icons become much more discernible.[/size][/color]

[color=#a0522d][size=14px]Here is a real-life example of unnecessary elements occurring in BeOS 5 icons:[/size][/color]

[color=#a0522d][/color][attach]1176[/attach]

[color=#deb887][size=10px]Ticks here are absolutely superfluous. By the way, why are they done in red?[/size][/color]


[color=#4169e1][size=14px]4 Lack of unity of style within a set of icons[/size][/color]

[color=#a0522d][size=14px]It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. [color=blue][color=blue][color=blue][color=blue]If[/color][/color][/color][/color] there are only a few icons in the set, the designer can keep some rules in his head. [color=blue][color=blue][color=blue][color=blue]If[/color][/color][/color][/color] there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.[/size][/color][/color][/size][/color][/color][/size]
[color=#a0522d][/color]
[color=#a0522d][attach]1177[/attach][/color]
[color=#a0522d][/color]
[color=#deb887][size=10px]A multitude of styles in the shell32.dll file in Windows XP. This is the default set of icons suggested to a user wishing to change an icon.[/size][/color]


[color=#4169e1][size=14px]5 Unnecessary perspective and shadows in small icons[/size][/color]

[color=#a0522d]Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. [color=#ee6600][color=#ee6600][color=#ee6600]But[/color][/color][/color] is it really all that useful? Not always! Especially [color=blue][color=blue][color=blue]if[/color][/color][/color] we are talking about icons sized 16×16 or smaller.

For example, let us take the application manager from GNOME 2.2.0 (RedHat 9):[/color]

[attach]1178[/attach]
[color=#deb887][size=10px]Perspective in icons of such minute size is unnecessary and even counter-productive.[/size][/color]

[color=#a0522d]And here is the application manager from Windows XP:[/color]
[attach]1179[/attach]

[color=#deb887][size=10px]As standard, icons in Windows XP are given a two-pixel black shadow; [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] in 16×16 size the shadow appears too large and makes the icons look dirty. The Address Book icon looks especially bad in this set.[/size][/color]


[color=#4169e1][size=14px]6 Overly original metaphors[/size][/color]

[color=#a0522d]Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] rather in adopting the existing solution.

An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] a shredder.[/color]
[attach]1180[/attach]

[color=#deb887][size=10px]Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor.[/size][/color]


[color=#4169e1][size=14px]7 National or social characteristics not being taken into account[/size][/color]

[color=#a0522d]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.

Let us suggest that we need to draw an icon for working with e-mail. It makes perfect sense to use a metaphor of real paper mail. A mailbox for example.[/color]
[attach]1181[/attach]

[color=#deb887][size=10px]These images are courtesy of the Wikipedia article entitled Post box.[/size][/color]

[color=#a0522d]The answer can be found in the manual on creating icons for Mac OS X: "Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp."[/color]
[attach]1182[/attach]
[color=#deb887][size=10px]The idea of using a stamp is great [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] the use of the eagle red-tailed hawk image is definitely questionable.[/size][/color]

[color=#a0522d]However, you need to account not only for national features… That reminds me of something funny. Once, we needed an icon for a data filter, which is often portrayed using the metaphor of a funnel. It was drawn like this:[/color]
[attach]1183[/attach]
[color=#a0522d]The client’s response was as follows: "I do not really understand why for a filter, you drew an icon shaped like a Martini glass!"[/color]


[color=#4169e1][size=14px]8 Images of real interface elements in icons[/size][/color]

[color=#a0522d]The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” [color=#ee6600][color=#ee6600][color=#ee6600]But[/color][/color][/color] all in vain! For instance, take a look at the following icon:[/color]
[attach]1184[/attach]
[color=#deb887][size=10px]You reach out to click on the radio button [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] end up clicking the whole icon![/size][/color]

Here is an interesting example from the OmniWeb browser interface:
[attach]1185[/attach]
[color=#deb887][size=10px]Pay attention to the Previous and Next buttons, a rare type of button with legends underneath. Oops! They are not buttons at all, they are icons![/size][/color]


[color=#4169e1][size=14px]9 Text inside icons[/size][/color]

[color=#a0522d]This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, [color=blue][color=blue][color=blue]if[/color][/color][/color] the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.[/color]
[attach]1186[/attach]

[color=#4169e1][size=14px]10 Outside the pixel framework[/size][/color]

[color=#a0522d]As a rule, this problem occurs [color=blue][color=blue][color=blue]if[/color][/color][/color] you use a vector editor for drawing icons. In large size everything looks pretty and clear; [color=#ee6600][color=#ee6600][color=#ee6600]but[/color][/color][/color] in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.[/color]

[attach]1187[/attach]
[url=http://www.gaolewen.com/post/52.htm][Via][/url][/color]

非常想看...
可惜全英文...

完全看不懂:$

还希望楼主再帮帮忙,简单的说下大意.我英盲

看到很多人希望阅读，我就试着翻译了一下。看着挺少的，没想到还花了不少时间。没什么经验，应该会有些错误。大家将就着看吧。


[img]http://www.iconfans.com/attachments/month_0803/20080306_8f156e339212c87a4222loPJ8oNaH5aW.png[/img]
批评别人的作品比自己制作一个优秀的作品要容易得多。但如果你使用一个有系统的方式去批评，列出项目清单并准备好插图，它就会被认为是个成熟的分析！在我看来，图标设计正经历着一个过渡阶段。一方面，屏幕分辨率在增长，因此要提高图标品质。另一方面，我们仍拥有好的旧款图素。16X16乃至于更小的图标仍在被广泛使用。所以，这里为大家介绍一下在图标设计中很容易被观察到的错误。
[color=royalblue][b]1.图标间差异不充分[/b]
[/color]有时，在一套图标中，我们的一些图标看起来很像，这让人很难分辨出哪个是哪个。如果你不注意说明，你会很容易把这些图标混在一起。
[img]http://www.iconfans.com/attachments/month_0803/20080306_55bf162a0f593cadbe70HjERRFkunfhI.png[/img]
[color=darkorange]MacOS X中的图标。我经常把他们搞混以致选错程序。[/color]
[img]http://turbomilk.com/img/10mis-similar2.png[/img]
[color=darkorange]问题在显示小图标时变得更严重。[/color]
[b][color=royalblue]2.图标中元素过多[/color][/b]
图标越简单、简洁，就越好。把一个图标中的元素控制到尽可能少的数量是很可取的。
然而，微软的设计师们，受到windows vista新的图标设计特征的启示，决定设计巨大、肿胀的图标来证明他们拥有庞大的预算。
[img]http://turbomilk.com/img/10mis-many-objects.png[/img]
[color=sandybrown]每个图标用复杂的构图给我们展现出微小的信息，问题在于在使用小图标时你无法搞清它在描述什么。甚至使用在大图标时，有时也不是那么容易搞清图标的含义。[/color]

[color=royalblue][b]3.不必要的元素。[/b]
[/color]图标应该被轻松识读。图标元素越少越好。最好让整个图像具有相关性，而不是只是一部分。因此，你必须注意使用这些图标的环境。
让我们看看数据库中图标的例子：
[img]http://turbomilk.com/img/10mis-db1.png[/img]
[color=sandybrown]一眼扫过，没什么问题。[/color]

但是如果这个应用程序（或者独立工具栏）仅仅与数据库有关，你可以（也理应）去掉不必要的部分。
[img]http://www.iconfans.com/attachments/month_0803/20080306_4a5b2e2c3aafbabcb3bbKJ6DnWdYWXqA.png[/img]
[color=darkorange]含义没有丢失，可是图标更好辨识了。[/color]
这是个BeOS5图标中使用不必要元素的鲜活例子。
[img]http://www.iconfans.com/attachments/month_0803/20080306_f62ab1a2985c1ae67e644Br4Q96dNiEn.png[/img]
[color=darkorange]这里的对号绝对多余，另外，它们为什么是红色的？[/color]
[color=#ff8c00][/color]
[b][color=royalblue]4.一套图标的风格缺乏一致性
[/color][/b]图标风格上的一致使得多个图标称为一套。一致性可以是以下的任何一种。色彩设计、透视、大小、绘画技巧或以上多种的结合。如果一套中只有一些图标，那么设计者可以把一些规则记在脑中。可是如果一套中有许多图标，或者有好几个设计者在绘制（比如制作操作系统的图标），那么就要制定一些特别的规则。这些规则需要从细节描述如何绘制图标，从而使其契合这个系列。
[img]http://www.iconfans.com/attachments/month_0803/20080306_d0c1d2d74b9981006255xVb2yiEpXcPq.png[/img]
[color=darkorange]WindowsXP中的shell32.dll文件中有大量风格，这是给希望更换图标的用户提供的默认图标[/color]

[color=royalblue][b]5.小图标中使用不必要的透视和阴影[/b][/color]
事物一直在发展：界面中已经可以呈现出半透明物体了。没有了颜色使用数量的限制，目前有向3D图标发展的趋势。可是，这真的有用吗？不一定！尤其是在16X16乃至更小的图标中。
举例来说，让我们看看GNOME 2.2.0 (RedHat 9)的应用程序管理器。
[img]http://www.iconfans.com/attachments/month_0803/20080306_d834cf7ab61243ba5633CIYzVviYp8gq.png[/img]
[color=darkorange]在这么小的图标中使用透视画法没有必要，甚至是事与愿违[/color]
这是XP的应用程序管理器
[img]http://www.iconfans.com/attachments/month_0803/20080306_af4b1101c48c181d642aQZJAHrKFWVkF.png[/img]
[color=sandybrown]作为标准，XP中的图标是用了2个像素的阴影，但是在16X16的图标中，这种阴影显得太大了，而且让图标显得很脏。地址簿在这种形式中显得特别差。[/color]
[color=#f4a460][color=royalblue][b]6.过于原创的隐喻
[/b][/color][/color][color=black]在选择图标要表现的内容时，要兼顾易识别性和原创性。在一个隐喻（比喻）使用前，看看它在其他产品中的表现是明智的。也许最好的方式不是选择原创而是接受已有的方法。
OS/2 Warp4中回收站的过度创意就是一个例子。它实际上不是一个回收站，而是一个碎纸机。[/color]
[img]http://www.iconfans.com/attachments/month_0803/20080306_21d88716550cab396a46lw5mkeLEoiuG.png[/img]
[color=sandybrown]选择碎纸机的另一个问题是，并没有一个类型著名的碎纸机。这个图标看起来很像藏着章鱼的打印机。而且，在这个创意中，满了的回收站难以表现出来。[/color]
[color=#f4a460][/color]
[color=#f4a460][color=royalblue][b]7.没有考虑国家和社会特征
[/b][/color][/color][color=black]考虑到你的图标将被运用到的环境是十分必要的。一个重要的方面就是国家特征。文化传统，环境，手势在不同国家的意思可能完全不同。
让我们设想一下，如果我们要画一个关于电子邮件的图标。使用一个真实邮箱的创意是绝好的。例如以下邮箱：[/color]
[img]http://www.iconfans.com/attachments/month_0803/20080306_dd2391303a9047a7e1bcNRHbotePYpmi.png[/img]
[color=darkorange]这些邮箱图片选自维基辞典。[/color]
答案可以在MacOS X图标创作指南中找到。“使用可以被轻松识读出的全球通用图像。避免注重在一个元素的次要方面。例如：一个电子邮件图标，使用一个乡村邮筒比使用一枚邮票难认。”
[url=http://www.iconfans.com/attachments/month_0803/20080306_780609d2d4fd3c4892f5CPOoyNzcHVnN.png][img]http://www.iconfans.com/attachments/month_0803/20080306_780609d2d4fd3c4892f5CPOoyNzcHVnN.png[/img][/url]
[color=sandybrown]使用一个邮票的创意很好，可是使用一个红尾鵟的图像显然是有问题的。[/color]
然而，你不仅仅要考虑国家元素。这让我想到了一些有趣的事。曾经，我们需要一个数据过滤器的图标。它一般被做成一个漏斗。它是这样画的：
[url=http://www.iconfans.com/attachments/month_0803/20080306_054ba86b36cba196511eJKGF4UufMJcw.png][img]http://www.iconfans.com/attachments/month_0803/20080306_054ba86b36cba196511eJKGF4UufMJcw.png[/img][/url]
委托人这样表示：“我难以理解到它是一个过滤器，你画了一个形状类似马提尼酒杯的图标。”

[b][color=royalblue]8.在图标中单纯使用界面化图标。
[/color][/b]MacOS X的图标创作指南告诉我们：“避免在你的图标中使用Mac Aqua界面元素。他们会对真正的界面元素感到困惑。”但一切都是徒劳。比如说，看看下面的图标：
[img]http://www.iconfans.com/attachments/month_0803/20080306_ed8c43862ade8bca8e76JezAhuMaPJZ0.png[/img]
[color=sandybrown]你本要单击图标，可是结果点击了整个图标。
[/color]这是OmniWeb浏览器界面的有趣例子：
[img]http://www.iconfans.com/attachments/month_0803/20080306_73ba730f15bf36707d01GuPpMEyyOpyt.png[/img]
[color=sandybrown]注意向前和向后的按钮，少见的有说明文字在下面的图标。哦！它们根本不是按钮，他们是图标！[/color]

[color=royalblue][b]9.图标中的文字
[/b][/color]这个错误在应用程序图标中很常见。明显，当使用一个应用程序图标时首先跃入脑海的是应用程序的logo。把文字放到图标里多不好啊！首先，它受限于语言而阻碍了本土化。其次，如果图标很小，读出文字就很难。第三，在有应用程序图标存在的情况下，这个文字在应用程序名字中重复了。
[img]http://www.iconfans.com/attachments/month_0803/20080306_67b7b11335d3e4920019wf5yCMwFSXsv.png[/img]
[color=royalblue][b]10.边沿像素
[/b][/color]作为一个规则，这个问题在你使用矢量绘图工具绘图时存在。在大的尺寸下，每样都很美丽和清楚。但实际上这些图标很小，并且物体边沿需要完成反锯齿栅格化处理。
[img]http://www.iconfans.com/attachments/month_0803/20080306_598c9ae923d87c418fd48Sldt6jlH6IT.png[/img]

[[i] 本帖最后由 zEPHIRUz 于 2008-3-27 21:28 编辑 [/i]]

太感谢楼上好人了,转走了谢谢!

回复 5# 的帖子

:P 非常感谢热心翻译！！ 感觉这篇文章写的还是蛮贴近图标的设计规范的。
正如文中写的“批评别人的作品比自己制作一个优秀的作品要容易得多。”
还是要多多按照规范去做一个项目的图标。这样才是捷径。

:lol   感谢翻译。 学习。

[quote]原帖由 [i]zEPHIRUz[/i] 于 2008-3-22 20:36 发表 [url=http://www.iconfans.com/redirect.php?goto=findpost&pid=2732&ptid=561][img]http://www.iconfans.com/images/common/back.gif[/img][/url]
看到很多人希望阅读，我就试着翻译了一下。看着挺少的，没想到还花了不少时间。没什么经验，应该会有些错误。大家将就着看吧。[/quote]
早拖下来看到你的翻译，我就不费劲看那些E文了……
不过第8条翻译得不妥，“[color=#f4a460]你本要点击收音机图标，可是结果点击了整个图标。[/color]”。"radio button"在这里的意思是单选按钮。

非常感谢 翻译

:kiss:  不错学习了

谢谢soelf，我已经修正了

不错不错！还是看中文舒服

:P 我这个设计的外行也学习了！
可以提高我的眼光，只能眼高手低了，哈哈

:lol 受教了···

感受了...谢谢:victory:

学到很多，谢谢 zEPHIRUz！:)

:loveliness: 谢谢翻译，辛苦啦~~~~

文章说得好好,令我顿悟了,

谢谢翻译!

对图标设计的规范化和注意事项有了更深的了解
感谢楼主和翻译的朋友~:)

:victory: 谢谢lz！真的不错！

真是非常的强！5楼好人:lol :lol

不错，中文很好理解了！      。。。。。。。。。

:loveliness:  感谢热心的朋友哈。
翻译的真不错，学习学习了。

不错啊 ，谢谢楼主提供的素材及其翻译内容:kiss:

:P 认真学习了            
真是好教程呀

呜呜，好感动，感谢原文作者，感谢box，感谢zEPHIRUz，感谢TVB，感谢MTV

这文章 确实相当的经典，细节注定成败啊！～

[quote]10.边沿像素
作为一个规则，这个问题在你使用矢量绘图工具绘图时存在。在大的尺寸下，每样都很美丽和清楚。但实际上这些图标很小，并且物体边沿需要完成反锯齿栅格化处理。
[/quote]

这个如何做到?  如他图里面的.

我也想知道LS的那个问题的答案~~:lol :lol