Allan Day
aday@gnome.org
Jakub Steiner

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

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 sind ein grundlegendes Element in Benutzeroberflächen. Sie bilden auch einen fundamentalen Teil der Identität Ihrer Anwendung. Diese Seite bietet einen Überblick über die Verwendung von Symbolen. sie beschreibt außerdem, welche Symbole on der GNOME-Plattform verfügbar sind, führt in die Ressourcen zur Gestaltung neuer Symbole ein und bietet einige allgemeine Richtlinien zur Verwendung von Symbolen in Benutzeroberflächen.

# Symbol-Stile

In GNOME 3 kommen zwei Symbolstile zum Einsatz: farbige und stilisierte Symbole.

Full-color icons are colorful and detailed, and are optimized for larger sizes. They are defined as 128×128px SVGs, and are sharpest when scaled up in multiples of 128 (such as 256✕256 and 512✕512).The design of full-color icons also allows them to be rendered sharp at 64×64px and 32×32px, but is not advised to make them any smaller.

Stilisierte Symbole sind einfach und einfarbig und werden mit dem Ziel entworfen, in geringen Größen gut zu funktionieren. Sie sind als 16✕16 Pixel große SVG-Dateien definiert und können als vielfaches von 16 skaliert werden (wie 32✕32, 64✕64, 128✕128). Stilisierte Symbole haben generell eine neutrale Farbe, aber ihre Färbung kann programmbezogen geändert werden.

# Anwendungsfälle für Symbole

Anwendungsymbole sind der prominenteste Symboltyp. Jede Anwendung sollte ihr eigenes, unverwechselbares und ästhetisches Symbol haben: Es ist das Gesicht der Anwendung und damit das erste visuelle Element, dass der Benutzer sieht, wenn er nach neuen Anwendungen sucht.

Application icons use the full-color style. Applications are also recommended to provide a symbolic version of their icon, which is used for the high-contrast accessibility feature, as well as in contexts where a legible low-resolution icon is required.

User interface icons typically use the symbolic style and this is the primary icon style used for user interface controls. The most common and obvious example of symbolic icon usage is on buttons.

Apart from application icons, the full-color icon style can also be used in cases where icons are displayed at large sizes and are intended to be the focus of attention. File and folder icons in a file manager are a good example of this.

# Stock icons and creating your own

GNOME provides a set of standard icons, which can be used by applications. This can be accessed directly through GTK. Icon names follow the Freedesktop icon specification. Symbolic versions of icons have the `-symbolic` name ending, such as `open-menu-symbolic`.

The icon design guidelines provide more details on how to create your own icons, including application icons.

# Verwendung von Symbolen in Ihrer Benutzeroberfläche

Icons are a common user interface element and they have some practical advantages over text labels (such as being smaller). At the same time, over-use of icons can lead to confusion and a poor user experience. Likewise, the use of inappropriate icons can often make an interface difficult to use.

Therefore, 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. Typically, convention establishes which icons are commonly recognized. This set of icons is actually quite small, and includes standard icons such as search, menu, forward, back and share. If you are in doubt, only use icons which are frequently used in other applications.

Weitere Aspekte, die Sie beim Verwenden von Symbolen beachten sollten:

Think about 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 (i.e. a single line), and will not be recognizable without a corresponding “plus” add icon.