Dialogfeldsymbole

Dialogfeldsymbole werden in Pop-up-Dialogfeldern angezeigt, die den Nutzer zur Interaktion auffordern. Sie heben sich durch einen hellen Farbverlauf und einen Schatten nach innen von einem dunklen Hintergrund ab.

Wie unter Dichtespezifische Symbolgruppen bereitstellen beschrieben, sollten Sie für Bildschirme mit niedriger, mittlerer und hoher Dichte separate Symbolgruppen erstellen. Dadurch wird sichergestellt, dass Ihre Symbole auf allen Geräten, auf denen Ihre App installiert werden kann, richtig angezeigt werden. In Tabelle 1 finden Sie eine Liste der empfohlenen fertigen Symbolgrößen für die jeweilige Dichte. Unter Tipps für Designer finden Sie Vorschläge zum Arbeiten mit mehreren Symbolsätzen.

Tabelle 1 Zusammenfassung der fertigen Dialogfeldsymbole für jede der drei allgemeinen Bildschirmdichten.

ldpi (120 dpi)
(Bildschirm mit geringer Dichte)
mdpi (160 dpi)
(Bildschirm mit mittlerer Punktdichte)
hdpi (240 dpi)
(HD-Bildschirm)
xhdpi (320 dpi)
(Bildschirm mit besonders hoher Punktdichte)
Größe des Dialogfeldsymbols 24 x 24 Pixel 32 x 32 Pixel 48 x 48 Pixel 64 x 64 Pixel

Das endgültige Artwork muss als transparente PNG-Datei exportiert werden. Geben Sie keine Hintergrundfarbe an.

Vorlagen zum Erstellen von Symbolen in Adobe Photoshop sind im Icon Templates Pack verfügbar.

Alle Android-Versionen

In den folgenden Richtlinien wird beschrieben, wie Dialogsymbole für alle Versionen der Android-Plattform erstellt werden.

Struktur

  • Dialogfeldsymbole haben einen SafeFrame mit 1 Pixel. Die Basisform muss in den SafeFrame passen, aber der Kantenglättungsbereich einer runden Form kann den SafeFrame überlappen.
  • Alle auf dieser Seite angegebenen Abmessungen basieren auf einer Zeichenflächengröße von 32 x 32 Pixel in Adobe Photoshop. Verwenden Sie innerhalb der Photoshop-Vorlage einen Abstand von 1 Pixel um den Begrenzungsrahmen.
Ansicht der Symbolstruktur
für Dialogfelder.

Abbildung 1. Safeframe und Füllung (Farbverlauf) für Dialogfeldsymbole. Die Symbolgröße beträgt 32 x 32.

Licht, Effekte und Schatten

Dialogsymbole sind flach und von Angesicht zu sehen. Um sich von einem dunklen Hintergrund abzuheben, werden sie mit einem hellen Farbverlauf und einem inneren Schatten aufgebaut.

Eine Ansicht von Licht,
Effekten und Schatten für Dialogsymbole.

Abbildung 2. Licht, Effekte und Schatten für Dialogsymbole.

1.Vorderseite:Farbverlaufs-Overlay | Winkel 90°
unten: r 223 | g 223 | b 223
oben: r 249 | g 249 | b 249
untere Farbposition: 0%
obere Farbposition: 75%
2.Schatten nach innen:Schwarz | 25% Deckkraft |
Winkel -90 ° | Abstand 1 px | Größe 0 px

Detaillierte Anleitung

  1. Erstellen Sie die Grundformen mit einem Tool wie Adobe Illustrator.
  2. Importieren Sie die Form in ein Tool wie Adobe Photoshop und skalieren Sie die Form, damit sie ein Bild von 32 x 32 Pixel auf einen transparenten Hintergrund passt.
  3. Fügen Sie für den richtigen Filter die in Abbildung 2 gezeigten Effekte hinzu.
  4. Exportieren Sie das Symbol im Format 32 x 32 als PNG-Datei mit aktivierter Transparenz.