Visuelle Ressourcen für Kacheln und Popups

Visuelle Ressourcen für Kacheln und Popups (Windows-Runtime-Apps)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema werden die Größenanforderungen für Bilddateiressourcen für Kacheln und Popups erläutert.

Allgemeine Anforderungen für Bilder

Kachel- und Popupquellbilder dürfen maximal 1024 x 1024 Pixel groß sein, und die Dateigröße darf 200 KB nicht übersteigen. Zulässige Dateitypen sind PNG, JPG, JPEG und GIF. Hinsichtlich der Bittiefe oder Farben gelten keine bestimmten Anforderungen, solange das Bild die anderen Anforderungen erfüllt.

Quadratische und breite Kacheln

Kacheln werden auf der Startseite angezeigt und können breit (310 x 150 Pixel bei einer Skalierung von 100 %) oder quadratisch sein. Kacheln können verschiedene Größen haben:

  • Klein (70 x 70) (nur Windows)
  • Klein (71 x 71) (nur Windows Phone)
  • Mittel (150 x 150)
  • Breit (310 x 150)
  • Groß (310 x 310) (nur Windows)

Benutzer können die Größe Ihrer Kachel nur in Größen ändern, für die in der Manifestdatei der App (package.appxmanifest) ein Logobild bereitgestellt wird. Ein mittelgroßes Kachellogo ist mindestens erforderlich. Wenn Sie keine anderen Logos bereitstellen, weist die App immer eine mittelgroße Kachel (150 x 150) auf, und in den Kachelbenachrichtigungen der App werden nur Nutzlasten für Vorlagen von mittelgroßen Kacheln angezeigt. Für einige Szenarien reicht dies unter Umständen aus.

Wenn im Manifest mehrere Logobilder bereitgestellt werden, können Sie entweder eine mittelgroße oder eine breite Kachel als Standard angeben, die beim Anheften der Kachel auf der Startseite verwendet wird.

Hinweis   Für Windows Phone Store-Apps ist diese Option nicht vorhanden. Eine Kachel wird immer als mittelgroße Kachel auf der Startseite angeheftet. Der Benutzer kann die Größe aber anpassen.

Benutzer können die Größe Ihrer Kachel jederzeit ändern. Es gibt keine programmgesteuerte Möglichkeit zu erkennen, welche Größe gerade verwendet wird, und es werden nur Benachrichtigungen angezeigt, die für die derzeitige Anzeigegröße geeignet sind. Daher sollten alle Kachelbenachrichtigungen, die an Ihre App gesendet werden, eine Vorlage für jede unterstützte Größe enthalten. Wenn Sie in einer Benachrichtigung z. B. nur eine breite Vorlage angeben und der Benutzer die Anzeige der mittelgroßen Kachel ausgewählt hat, wird die Benachrichtigung nur angezeigt, wenn der Benutzer die Größe vor Ablauf der Benachrichtigung auf die breite Kachel umstellt.

Auswählen einer Kachelform

  • Verwenden Sie die mittelgroße Kachel für eine statische Kachel, wenn in der App keine Updates in Form von Benachrichtigungen an die Kachel gesendet werden.
  • Verwenden Sie die mittelgroße Kachel mit einem Signal, wenn die App nur Szenarien mit kurzen Zusammenfassungsbenachrichtigungen unterstützt. Ein Verwendungsbeispiel hierfür ist die Kachel einer SMS-App, die nur die Anzahl der empfangenen neuen Nachrichten anzeigt.
  • Verwenden Sie die breite oder große Kachel nur, wenn in der App neue und interessante Inhalte für den Benutzer angezeigt werden sollen und häufig (mindestens wöchentlich) entsprechende Benachrichtigungen gesendet werden. Der Inhalt breiter und großer Kacheln sollte frisch und lebendig sein. Sie sollten einen guten Grund dafür haben, diesen zusätzlichen Platz zu belegen.

Andere visuelle Ressourcen

  • Sehr klein (30 x 30) (nur Windows)
  • Sehr klein (44 x 44) (nur Windows Phone))

Sehr kleine und kleine Elemente sind keine Live-Kacheln, sondern es wird nur das Logo der Kachel angezeigt, das im App-Manifest angegeben ist. Die kleine Kachel wird auf der Startseite verwendet, und die sehr kleine Kachel wird nur in den Suchergebnissen und in der Liste Apps verwendet.

Skalieren von Bildern in einer Windows-Runtime-App

Die Startseite auf einem Windows-Gerät unterstützt vier Skalierungswerte, die sich auf die Bildabmessungen auswirken: 80 %, 100 %, 140 % und 180 %. Windows Phone Store-Apps unterstützen 100 %, 140 % und 240 % gemäß Manifest, in der Praxis aber auch 120 %, 160 %, 180 %, 200 %, 220 %, 300 % und 400 %.

Sie können eine separate Bildressource für jeden Skalierungswert bereitstellen oder nur eine Teilmenge dieser Bilder bereitstellen und dem System die Skalierung auf die am besten geeignete Bildgröße überlassen. Aufgrund der Vielzahl von Geräten, mit denen Ihre Kachel angezeigt werden kann, ist es ratsam, skalierte Versionen der Bilder in Ihr App-Paket einzubinden. Das System kann dann die am besten geeignete Version für das Gerät und die entsprechenden Einstellungen wählen. Wenn Sie nur eine Bildressource bereitstellen und sich ganz auf die Skalierung verlassen möchten, stellen Sie die Ressource mit 180 % für Windows und die Ressource 240 % für Windows Phone Store-Apps bereit. Allerdings erzielen Sie damit nicht die besten Ergebnisse.

Logobilder, die über das Manifest bereitgestellt werden, müssen genau über die benötigten Pixelabmessungen verfügen. Für Bilder, die im Rahmen einer Kachel- oder Popupbenachrichtigung bereitgestellt werden, gilt diese Anforderung nicht, solange sie die oben angegebenen allgemeinen Anforderungen für Bilder erfüllen. Falls ein Bild nicht zu den Abmessungen des Bildbereichs der Benachrichtigung passt, wird es vom System entsprechend skaliert und zugeschnitten.

Weitere Informationen zur Benennung und Organisation von Bildressourcen finden Sie unter Definieren von App-Ressourcen.

Informationen zu Größenanpassung, Abstand, Skalierung und Transparenz für Windows Phone Store-Apps

Wie bereits erwähnt sollten stellen Sie mindestens das scale-240-Element für eine Windows Phone Store-App bereit, vorzugsweise auch scale-140 und scale-100.

Die Dateibildressourcen selbst sollten einen transparenten Hintergrund aufweisen, wie durch den Schachbretteffekt in den folgenden Abbildungen gezeigt (die Abbildungen zeigen auch, die darunterliegende Farben durchscheinen). Legen Sie im App-Manifest „Assets\<assetname>.png“ als Wert für die entsprechende Eigenschaft fest, und legen Sie einen Wert für „VisualElements@BackgroundColor“ fest. Sie können die Hintergrundfarbe der Marke Ihrer App verwenden oder die Hintergrundfarbe auf „transparent“ festlegen, damit das Erscheinungsbild den integrierten Apps entspricht.

Eigenschaftsname im App-Manifest<assetname>.scale-100.png<assetname>.scale-140.png<assetname>.scale-240.png

Square71x71Logo

(Kleine Kachel auf der Startseite)

Element 71x71px

Abstand 19,19px

Logo 32x32px

Element 99x99px

Abstand 27,27px

Logo 45x45px

Element 170x170px

Abstand 46,46px

Logo 77x77px

Square150x150Logo

(Mittlere Kachel auf der Startseite)

Element 150x150px

Abstand 45,45px

Logo 60x60px

Element 210x210px

Abstand 63,63px

Logo 84x84px

Element 360x360px

Abstand 108,108px

Logo 144x144px

Wide310x150Logo

(Breite Kachel auf der Startseite)

Element 310x150px

Abstand 125,45px

Logo 60x60px

Element 434x210px

Abstand 175,63px

Logo 84x84px

Element 744x360px

Abstand 300,108px

Logo 144x144px

Square44x44Logo

(Liste „Alle Apps“)

Element 44x44px

Abstand 6,6px

Logo 32x32px

Element 62x62px

Abstand 9,9px

Logo 44x44px

Element 106x106px

Abstand 15,15px

Logo 76x76px

Paket/Eigenschaften/Logo

Element 50x50px

Abstand 9,9px

Logo 32x32px

Element 70x70px

Abstand 12,12px

Logo 46x46px

Element 120x120px

Abstand 20,20px

Logo 80x80px

 

Verwandte Themen

Anwendungsressourcen und Lokalisierungsbeispiele
Designen für einen globalen Markt
Kachelvorlagenkatalog
Richtlinien und Prüfliste für Kacheln
Schnellstart: Erstellen einer Standardkachel im Manifest-Editor von Microsoft Visual Studio
Schnellstart: Senden eines Kachelupdates
XML-Schema für Kacheln
Beispiel für App-Kacheln und Signale
Übersicht über Kacheln und Kachelbenachrichtigungen
Auswählen der App-Bilder
Definieren von App-Ressourcen

 

 

Anzeigen:
© 2016 Microsoft