Allan Day
aday@gnome.org
Jakub Steiner
Auswahl und Erstellung von Symbolen.
Christian Kirbach
christian.kirbach@gmail.com 2014
Mario Blättermann
mario.blaettermann@gmail.com 2016

# Symbole und grafische Gestaltung

Symbole spielen eine bedeutende Rolle in der Benutzeroberfläche: Die Auswahl eines korrekten Symbols ist daher unerlässlich, um dafür zu sorgen, dass Ihre Anwendung gut benutzbar ist. Ein eindeutiges Symbol ist außerdem ein essenzieller Teil jeder Anwendung und entscheidend für deren Identität.

# Verwendung von Symbolen in Ihrer Benutzeroberfläche

There are many situations when it is necessary to decide between using an icon and a text label, particularly for buttons. Icons have the advantage of being smaller, and not requiring translation. At the same time, the incorrect use of an icon can make your interface hard - or even impossible - to understand.

Only use icons whose meaning is commonly recognized. If a commonly recognized icon is not available, it might be better to use a text label instead.

Convention establishes which icons will be recognized. If you are in doubt, stick to icons which are frequently used in other applications.

Consider which icons will be meaningful in the specific context of your application - users of specialist tools will often be familiar with domain-specific symbols.

Remember that some icons are only meaningful alongside other icons of the same type. For example, a media icon for stop is simply a square, and may not be identified as a stop icon without other media controls (like play, pause, or skip) being visible close by. Likewise, the icon to remove an item from a list is a subtract symbol (ie. a single line), and will not be recognizable without a corresponding “plus” add icon.

# Choosing stock GNOME icons

GNOME provides a full set of standard icons. These should be used where ever appropriate; try to avoid creating custom icons unless they are absolutely necessary.

Follow the icon naming specification when selecting which icons to use - the name of the icon should reflect what the icon is intended to communicate. This is important for those using a screen reader.

Sie können den Symbolbrowser von GTK+ verwenden, um empfohlene Symbole zu suchen.

## Color vs. symbolic icons

GNOME 3 provides two types of icon: full-color and monochrome symbolic icons. The guidelines in this HIG indicate when to use which type of icon. The following is a a general guide.

Farbige Symbole sollten verwendet werden für:

Geräte

Dateitypen/MIME-Typen

Anwendungssymbole (Starter)

All other icons should use the symbolic icon style. In addition, symbolic icons should always be used inside:

Knöpfen

Listen

Eintragsfeldern

Wenn der Hintergrund halbtransparent ist (zum Beispiel bei Überlagerungen oder Vollbildsteuerungen)

# Anwendungssymbole

Every application should have a unique and beautiful application icon. It is the face of the application, and the first visual element a user sees when browsing for new applications. The application basics page includes details on what an application is, and when to provide an application icon.

Because application icons are presented at larger sizes, legacy Tango styled 48x48 px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256 px icon. With the advent of high-DPI displays, a 512x512 px variant is recommended.

While not as critical, there are still areas where application icons are presented at a small size. To keep the icon sharp and well defined, a specific rendering is required to sizes of 48x48 px, 32x32 px, 24x24 px and 16x16 px. Many GNOME icons also ship a 22x22 px size for legacy reasons, but that isn’t required.

To maintain crispness, a lot of detail is discarded for the low resolution variants and a 1px stroke is used to outline the silhouette of the object.

More information on designing an application icon can be found below, in the custom full-color icon section.

# Benutzerdefinierte symbolische Symbole

Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically scaled and colored within the user interface itself.

Identify a single property when looking for an appropriate metaphor for an icon, and focus on what distinguishes the idea you want to communicate. For example, when describing an action to be performed on an image, it isn’t necessary to repeat the idea of an image in every icon. Instead, focus on what is distinct about each action (for example: rotate, tag, align).

Vermeiden Sie perspektivische Darstellungen in symbolischen Symbolen, bleiben Sie stattdessen bei einer strikten rechtwinkligen Ansicht.

Ausgefüllte Formen sind in der visuellen Wahrnehmung des Benutzers im Allgemeinen schneller zu erfassen als einfache Umrandungslinien.

Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.

When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.

## Größe und Raster

While the icons are scalable and should work in any size, the basic canvas size is 16x16 grid units. You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.

# Custom full-color icons

Full-color icons are drawn and rendered at a variety of preset sizes.

## Perspektive

Most icons can be executed best by using the “on the table” perspective, as if the observer was standing in front of the object and looking slightly down on it. Many icons can be rendered with a simple “straight on” or “on the shelf” perspective, with the observer looking directly at the object at eye level.

## Farbpalette

Use the Tango color palette when designing full color application or device icons.

Butter |  | Pflaume |
Orange |  | Scharlachrot |
Schokolade |  | Aluminium |
Chamäleon |  |  |
Himmelblau |

You are free to use different shades of these colors depending on the desired material effect. However, these primary colors are a good baseline to start from. All major libre graphics packages come with the Tango palette pre-installed.

# Siehe auch

Tango Icon Guidelines