Common errors in Icon design

1. The difference between the different icons is not obvious

Sometimes, in a group of icons, each icon looks very similar and it is difficult to tell which is which. If you miss the text description, you will find it easy to confuse the icons.

The above icon comes from the Efficiency Application section of Mac OS X. I often confuse them so that I run the wrong program.

If you display a small icon on the screen, the problem is more serious.

2. An icon contains too many elements

The simpler and more concise the icon the better. It is best to control the elements of an icon to the minimum.

However, Microsoft's designers, inspired by the new icon in Windows Vista, decided to use big, bloated icons to justify their bloated budget.

Each icon is a small story with a tangled plot. The problem is that when the size is small, we simply can't see what is depicted in the icon. Even in the case of large size, it is not easy to decipher the icon.

3. Unnecessary elements

Icons should be easy to read. The less the element the better. The best of all image elements are related, not just part of the entire icon. Therefore, you must understand the context of using icons.

Let's take a look at the icons for this set of databases:

Look at the past, as if everything is not a problem.

However, if the program (or the individual sidebar) is all processing the database, we can (and should) remove unnecessary parts:

The meaning of the icon is not lost, but the icon becomes easier to identify.

This is a real case in the BeOS 5 icon, which is about the extra elements:

Gogo is absolutely superfluous here. Besides, is the horse red for God?

4. The same group of icons lacks style consistency

Several icons can become a group because of the consistency of style. Consistency can be shown in the following areas: color, perspective, size, drawing techniques, or a combination of several such attributes. If there are only a few icons in a group, it is easy for the designer to keep these rules in mind. If there are many icons in a group, and several designers work at the same time (for example, an icon for an operating system), then a special design specification is required. These specifications describe in detail how to draw an icon so that it fits well into the entire icon group.

A variety of styles in Windows XP shell32.dll files. This is a default icon group that is recommended for users who want to change the icon.

5. Small icons in the unnecessary perspective and shadow

The pace of progress has never stopped: the interface has been able to show the translucent class, no longer have color restrictions, and now there is a trend towards the development of the current. But is it really useful? Not all of them! Especially when it comes to 16x16 or smaller icons.

For example, let's look at the program manager for Gnome 2.2.0 (RedHat 9).

The perspective in these small-size icons is not needed or even effective.

This is the Windows XP program Manager:

By standard, Windows XP icons have a 2px black shadow, but in the 16x16 icon, the 2px shadow seems too large to make the icon look a bit dirty. The Address Book icon looks the worst.

6. An overly original metaphor

Choose to show in an icon what is always recognizable and original compromise between each other. It's always good to see how other people's products are done before metaphors or images have been made. The best solution may not be something new in your mind, but a method that already exists.

An overly original example is the OS/2 Warp 4 trash-bin icon. It is not a trash bin but a paper shredder.

Another problem with choosing a paper shredder is that there are many types of shredders and there is no uniform image. The icon looks very much like a printer, except that it hides an octopus. In addition, it is also a problem in this metaphor how to show that the dustbin is full.

7. Not taking into account the characteristics of each country or society

It is necessary to use the context of your icon icon. One important aspect is the national character. The differences in cultural traditions, environment and gestures between countries are very large.

Let's say we need to do an icon to indicate through e-mail. It's good to use a real mail metaphor. For example, a mailbox.

These images come from Wikipedia.

The answer can be found in the manual for Mac OS x: "Use popular images that everyone can easily identify." Avoid focusing on the minor aspects of an element. For example, an email icon, a village mailbox is more difficult to identify than a stamp stamped on it. ”

The idea of using stamps is great, but the image of the red-tailed eagle seems open to question.

But it is not just about national characteristics. It reminds me of some interesting things. Once we need a data filter icon, the commonly used metaphor is a funnel, like the following:

Customer feedback said: "I do not quite understand why a martini glass as a shape to indicate the filter ... ”

8. Image using the real interface in the icon

The "Make icon manual for Mac OS X" warns us to avoid using interface elements in icons that might be mistaken for real interaction. But this warning is in vain! Look at the following icon:

You go to click the radio button, the result found that the entire icon point!

This is an interesting example from the OmniWeb browser interface:

Note The forward and rewind buttons, which are very uncommon to add text underneath the forward and back buttons. oops! They're not buttons at all, just icons!.

9. Icon inside text

This error is common to software icons. Obviously, the first idea in mind is to use the logo of the software in the icon. What's wrong with text in the icon? First, it is directly related to language and hinders localization. Second, if the icon is small, it is difficult to see the text. Third, in the case of software icons, this text is often duplicated in the name of the software.

10. No pixel benchmarks

This problem usually occurs when you use a vector editor to draw an icon. In large sizes, everything looks very clear, but the reality is that the icons are usually very small, and anti-aliasing blurs the edges of the object in the grid.

This article by the station cool Net-weee translation, reproduced please retain this information, thank you for your cooperation.