Definieren von Symbolen und einer Designfarbe

Artikel
05/23/2024

PWAs, die unter Windows installiert sind, können so angepasst werden, wie sie im Betriebssystem (Os) angezeigt werden. Eine PWA kann einen Satz von Symbolen und eine Designfarbe für die Titelleiste definieren.

Definieren von Symbolen

In Windows sind Apps für Benutzer an ihren Symbolen erkennbar. Symbole werden auf der Taskleiste, im Startmenü und an anderen Stellen wie systemeinstellungen angezeigt.

Eine PWA kann konfigurieren, welche Imagedateien das Betriebssystem verwenden soll, um ein Symbol an diesen verschiedenen Stellen anzuzeigen. Je nach Kontext können mehrere Images für das Betriebssystem bereitgestellt werden.

In der Web-App-Manifestdatei werden App-Symbole mit dem icons Member definiert:

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Jedes Symbol im icons Array sollte mindestens über die src Eigenschaften und sizes verfügen. Ein Symbol kann auch die type Eigenschaften und purpose aufweisen.

Eigenschaft	Beschreibung
`src`	Der Pfad zur Bilddatei, der ein relativer Pfad aus dem Stammordner der App oder eine absolute URL sein kann.
`sizes`	Eine durch Leerzeichen getrennte Liste von Größen, für die das entsprechende Bild verwendet werden kann.
`type`	Ein optionaler Hinweis für das Betriebssystem, um den Imagetyp schnell zu erkennen.
`purpose`	Ein optionaler Hinweis, mit dem das Betriebssystem je nach Kontext das richtige Symbolbild auswählen kann. Der Wert kann , `maskable`oder `any`sein`monochrome`.

Erfahren Sie mehr über das Symbolelement.

Symbolbildgrößen

Ihre PWA kann unter Windows verbessert werden, indem Sie die Bilder mit bestimmten Dimensionen in Ihrem Web-App-Manifest bereitstellen. Es wird empfohlen, eine der folgenden Optionen auszuwählen:

Ebene 1: (Grundlegende Imageunterstützung: 512x512) Dies ist das Basisimage, aus dem fehlende Images generiert werden.
Ebene 2: (Kacheln) Auf dieser Ebene enthält Ihr Web-App-Manifest Kachelbilder für die Standardanzeigeskala (1x). Jedes der Bilder muss im PNG-Format vorliegen und den any Zweck festgelegt haben. Hier finden Sie eine Liste der empfohlenen Bilder und Größen.
- 44x44 – App-Symbol
- 71x71 – kleine Kachel
- 150 x 150 – mittlere Kachel
- 310 x 150 – breite Kachel
- 310 x 310 – große Kachel
- 50x50 – Store-Logo
- 620 x 300 – Begrüßungsbildschirm
Ebene 3: (Kacheln mit Anzeigeskalen) Auf dieser Ebene sollte Ihr Web-App-Manifest Kachelbilder für alle Windows-Bildschirmskalengrößen enthalten. Die Bildschirmskalierung ist eine Benutzerkonfiguration in Windows (Benutzer können sie ändern, indem Sie zu Einstellungen>Anzeigeskalierung> wechseln). Ihre Web-App-Manifestsymbole sollten Bilder mit den folgenden Dimensionen enthalten:
- 44x44 – App-Symbol
- 55 x 55 - App-Symbol 1,25-fache Anzeigeskala
- 66x66 – App-Symbol 1,5-fache Anzeigeskala
- 88x88 - App-Symbol 2x Anzeigeskala
- 176 x 176 - App-Symbol 4x Anzeigeskala
- 71x71 – kleine Kachel
- 89x89 - kleine Kachel 1,25x Bildschirmskala
- 107 x 107 – kleine Kachel 1,5-fache Anzeigeskala
- 142 x 142 - kleine Kachel 2x Anzeigeskala
- 284 x 284 - kleine Kachel 4x Bildschirmskala
- 150 x 150 – mittlere Kachel
- 188 x 188 – mittlere Kachel 1,25x Bildschirmskala
- 225 x 225 – mittlere Kachel 1,5-fache Bildschirmskala
- 300 x 300 – mittlere Kachel 2x Bildschirmskalierung
- 600 x 600 – mittlere Kachel 4x Bildschirmskalierung
- 310 x 150 – breite Kachel
- 388 x 188 - breite Kachel 1,25x Bildschirmskala
- 465 x 225 – breite Kachel 1,5-fache Bildschirmskala
- 620 x 300 – breite Kachel 2x Bildschirmskalierung
- 1240x600 – breite Kachel 4x Bildschirmskala
- 310 x 310 – große Kachel
- 388 x 388 - große Kachel 1,25x Bildschirmskala
- 465 x 465 - große Kachel 1,5-fache Anzeigeskala
- 620 x 620 – große Kachel 2x Bildschirmskalierung
- 1240 x 1240 – große Kachel 4x Bildschirmskalierung
- 50 x 50 – Store-Kachel
- 63 x 63 – Speicherkachel 1,25x Bildschirmskalierung
- 75 x 75 – Speicherkachel 1,5x Bildschirmskalierung
- 100x100 – Speichern der Kachel 2x Bildschirmskala
- 200 x 200 – Speicherkachel 4x Bildschirmskalierung
- 620 x 300 – Begrüßungsbildschirm
- 775 x 375 - Begrüßungsbildschirm 1,25-fache Bildschirmskala
- 930 x 450 – Begrüßungsbildschirm 1,5-fache Bildschirmskalierung
- 1240 x 600 – Begrüßungsbildschirm 2x Bildschirmskalierung
- 2480 x 1200 – Begrüßungsbildschirm 4-fache Bildschirmskalierung
Ebene 4 (Kacheln, Bildschirmskalen und Zielgrößen) Auf dieser Ebene stellen Sie Bilder für Kacheln mit Anzeigeskalen und Zielgrößenbildern für die Anzeige auf verschiedenen Oberflächen in Windows bereit, einschließlich Taskleiste, Startmenü, Task-Manager, ALT+TAB-Aufgabenumschalter und mehr. Dies bietet die beste Erfahrung für Ihre Benutzer, erfordert aber auch den größten Aufwand für Entwickler. Ihre Web-App-Manifestsymbole sollten Bilder mit den folgenden Dimensionen enthalten:
- 44x44 – App-Symbol
- 55 x 55 - App-Symbol 1,25-fache Anzeigeskala
- 66x66 – App-Symbol 1,5-fache Anzeigeskala
- 88x88 - App-Symbol 2x Anzeigeskala
- 176 x 176 - App-Symbol 4x Anzeigeskala
- 71x71 – kleine Kachel
- 89x89 - kleine Kachel 1,25x Bildschirmskala
- 107 x 107 – kleine Kachel 1,5-fache Anzeigeskala
- 142 x 142 - kleine Kachel 2x Anzeigeskala
- 284 x 284 - kleine Kachel 4x Bildschirmskala
- 150 x 150 – mittlere Kachel
- 188 x 188 – mittlere Kachel 1,25x Bildschirmskala
- 225 x 225 – mittlere Kachel 1,5-fache Bildschirmskala
- 300 x 300 – mittlere Kachel 2x Bildschirmskalierung
- 600 x 600 – mittlere Kachel 4x Bildschirmskalierung
- 310 x 150 – breite Kachel
- 388 x 188 - breite Kachel 1,25x Bildschirmskala
- 465 x 225 – breite Kachel 1,5-fache Bildschirmskala
- 620 x 300 – breite Kachel 2x Bildschirmskalierung
- 1240x600 – breite Kachel 4x Bildschirmskala
- 310 x 310 – große Kachel
- 388 x 388 - große Kachel 1,25x Bildschirmskala
- 465 x 465 - große Kachel 1,5-fache Anzeigeskala
- 620 x 620 – große Kachel 2x Bildschirmskalierung
- 1240 x 1240 – große Kachel 4x Bildschirmskalierung
- 50 x 50 – Store-Kachel
- 63 x 63 – Speicherkachel 1,25x Bildschirmskalierung
- 75 x 75 – Speicherkachel 1,5x Bildschirmskalierung
- 100x100 – Speichern der Kachel 2x Bildschirmskala
- 200 x 200 – Speicherkachel 4x Bildschirmskalierung
- 620 x 300 – Begrüßungsbildschirm
- 775 x 375 - Begrüßungsbildschirm 1,25-fache Bildschirmskala
- 930 x 450 – Begrüßungsbildschirm 1,5-fache Bildschirmskalierung
- 1240 x 600 – Begrüßungsbildschirm 2x Bildschirmskalierung
- 2480 x 1200 – Begrüßungsbildschirm 4-fache Bildschirmskalierung
- 16 x 16 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 20 x 20 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 24 x 24 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 30 x 30 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 32 x 32 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 36 x 36 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 40 x 40 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 44 x 44 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 48 x 48 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 60 x 60 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 64 x 64 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 72 x 72 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 80 x 80 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 96 x 96 – Zielgröße für Taskleiste, Startmenü, Task-Manager
- 256 x 256 – Zielgröße für Taskleiste, Startmenü, Task-Manager

Zusammenfassung auf Bildebene

Überlegen Sie beispielsweise, wie ihr App-Symbol je nach verfügbarer Oberfläche unterschiedliche Inhalte anzeigen kann:

Kleine Oberfläche: App-Symbol (44 x 44) in der Taskleiste mit einem kleinen, abgekürzten Logo:

Größere Oberfläche: Mittlere Kachel (150 x 150) im Startmenü mit dem vollständigen Logo der App:

Breite Oberfläche: Breite Kachel im Startmenü mit einem ausführlicheren App-Symbol:

Beachten Sie, wie sich der Inhalt des Symbols geändert hat. Dies ist nur durch die Verwendung höherer Ebenen der Symbolunterstützung möglich. Wir empfehlen Entwicklern, höhere Ebenen zu wählen, um Ihren Windows-Benutzern die beste Erfahrung zu bieten.

Symbolbeschreibungen

Unten finden Sie eine Beschreibung der einzelnen App-Symbole und deren Anzeige in Windows.

Das normale App-Symbol, das im Startmenü, in der Taskleiste oder im Task-Manager angezeigt wird.

44x44
55 x 55 (1,25-fache Skalierung)
66 x 66 (1,5-fache Skalierung)
88 x 88 (2-fache Skalierung)
176 x 176 (4-fache Skalierung)

Die kleine Kachel wird im Startmenü angezeigt, wenn der Benutzer die Kachel Ihrer App auf eine kleine Größe festgelegt hat.

71x71
89 x 89 (1,25-fache Skalierung)
107 x 107 (1,5-fache Skalierung)
142 x 142 (2-fache Skalierung)
284 x 284 (4-fache Skalierung)

Das Symbol für die mittlere Kachel wird im Startmenü angezeigt, wenn der Benutzer die Kachel Ihrer App auf eine mittlere Größe festlegt.

150 x 150
188 x 188 (1,25-fache Skala)
225 x 225 (1,5-fache Skalierung)
300 x 300 (2-fache Skalierung)
600 x 600 (4-fache Skalierung)

Das Breite Kachelsymbol wird im Startmenü angezeigt, wenn der Benutzer die Kachel Ihrer App auf breite Größe festlegt.

310 x 150
388 x 188 (1,25-fache Skalierung)
465 x 225 (1,5-fache Skalierung)
620 x 300 (2-fache Skalierung)
1240 x 600 (4-fache Skalierung)

Das Große Kachelsymbol befindet sich im Startmenü, wenn der Benutzer die Kachel Ihrer App auf "Groß" festlegt.

310 x 310
388 x 388 (1,25-fache Skalierung)
465 x 465 (1,5-fache Skalierung)
620 x 620 (2-fache Skalierung)
1240 x 1240 (4x Skala)

Das Symbol für das Store-Logo wird im App-Installer, windows Partner Center, der Option "App melden" im Store und der Option "Review schreiben" im Store angezeigt.

50x50
63 x 63 (1,25-fache Skalierung)
75 x 75 (1,5-fache Skalierung)
100 x 100 (2-fache Skalierung)
200 x 200 (4-fache Skalierung)

Das Begrüßungsbildschirmobjekt wird als Begrüßungsbildschirm für Ihre App angezeigt. Derzeit nur im klassischen Paket unterstützt. In Zukunft wird möglicherweise auch Unterstützung für das moderne gehostete App-Paket hinzugefügt.

620 x 300
775 x 375 (1,25-fache Skalierung)
930 x 450 (1,5-fache Skalierung)
1240 x 600 (2-fache Skalierung)
2480 x 1200 (4-fache Skalierung)

Bilder mit Zielgröße

Zusätzlich zu den oben beschriebenen Standardskalierungsfaktorgrößen empfehlen wir auch das Erstellen von "Zielgröße"-Ressourcen. Diese Ressourcen werden als Zielgröße bezeichnet, da sie auf bestimmte Größen abzielen, z. B. 16 Pixel, und nicht auf bestimmte Skalierungsfaktoren, z. B. 400. Ressourcen mit Zielgröße sind für Windows-Oberflächen vorgesehen, die nicht das Skalierungsplateausystem verwenden.

Beispielsweise verwendet die Windows-Einstellung Apps & Features App-Symbole mit bestimmten Größen.

16x16 (empfohlen)
20x20
24x24 (empfohlen)
30x30
32x32 (empfohlen)
36x36
40x40
48x48 (empfohlen)
60x60
64x64
72x72
80x80
96x96
256 x 256 (empfohlen)

Auswählen einer Designfarbe

Unter Windows verfügen PWAs über ein eigenes Anwendungsfenster mit einer Titelleiste mit dem Namen der App und dem System zum Schließen, Maximieren und Minimieren von Symbolen.

Der vom PWA erstellte Webinhalt füllt die gesamte Oberfläche des Fensters aus, mit Ausnahme des Titelleistenbereichs, der mit einer Designfarbe angepasst werden kann.

Die folgende Abbildung zeigt, wie die Titelleiste einer PWA aussieht, wenn keine Designfarbe verwendet wird und eine Designfarbe verwendet wird, die mit der Standard Farbe der App übereinstimmt:

Verwenden Sie zum Definieren einer Designfarbe das theme_color Web-App-Manifestelement:

{
    "theme_color": "#0d4c73"
}

Einzelne Webseiten können auch mithilfe des theme-color Metatags eine Designfarbe definieren. Wenn dieses Metatag auf der Seite vorhanden ist, überschreibt die definierte Farbe die Farbe, die im Web-App-Manifest gefunden wird.

Anzeigen von App-Inhalten im Titelleistenbereich

Sie können Ihren App-Inhalt im Titelleistenbereich anzeigen, indem Sie das Feature Fenstersteuerelementüberlagerung verwenden. Weitere Informationen finden Sie unter Anzeigen von Inhalten im Titelleistenbereich mithilfe der Überlagerung von Fenstersteuerelementen.

Freigeben über

Definieren von Symbolen und einer Designfarbe