App-Symbole und LogosApp icons and logos

Jede App hat ein Symbol/Logo, das sie darstellt, und dieses Symbol wird an mehreren Orten in der Windows-Shell angezeigt:Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • In der App-Liste im StartmenüThe app list in the start menu
  • In der Taskleiste und im Task-ManagerThe taskbar and task manager
  • Auf den Kacheln Ihrer AppYour app's tiles
  • Auf dem Begrüßungsbildschirm Ihrer AppYour app's splash screen
  • Im Microsoft StoreIn the Microsoft Store

Starten von Windows 10 und Kacheln

Dieser Artikel behandelt die Grundlagen der Erstellung von App-Symbolen, wie Sie diese mit Visual Studio verwalten, und wie Sie sie im Bedarfsfall manuell verwalten.This article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(Dieser Artikel bezieht sich speziell auf Symbole, die die App selbst darstellen. Eine allgemeine Anleitung zu Symbolen finden Sie in dem Artikel Symbole.)(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

Symboltypen, Ort und SkalierungsfaktorenIcon types, locations, and scale factors

Standardmäßig speichert Visual Studio Symbolressourcen in einem Unterverzeichnis für Ressourcen.By default, Visual Studio stores your icon assets in an assets subdirectory. Hier finden Sie eine Liste der verschiedenen Typen von Symbolen, wo diese vorkommen und wie sie heißen.Here's a list of the different types of icons, where they appear, and what they're called.

SymbolnameIcon name Kommt vor inAppears in RessourcendateinameAsset file name
Kleine KachelSmall tile StartmenüStart menu SmallTile.pngSmallTile.png
Mittelgroße KachelMedium tile Startmenü, Microsoft Store-Eintrag*Start menu, Microsoft Store listing* Square150x150Logo.pngSquare150x150Logo.png
Breite KachelWide tile StartmenüStart menu Wide310x150Logo.pngWide310x150Logo.png
Große KachelLarge tile Startmenü, Microsoft Store-Eintrag*Start menu, Microsoft Store listing* LargeTile.pngLargeTile.png
App-SymbolApp icon App-Liste im Startmenü, Taskleiste, Task-ManagerApp list in start menu, task bar, task manager Square44x44Logo.pngSquare44x44Logo.png
BegrüßungsbildschirmSplash screen Begrüßungsbildschirm der AppThe app's splash screen SplashScreen.pngSplashScreen.png
BadgelogoBadge logo Auf den Kacheln Ihrer AppYour app's tiles BadgeLogo.pngBadgeLogo.png
Paketlogo/Store-LogoPackage logo/Store logo App-Installationsprogramm, Partner Center, die Option „Eine App melden“ im Store, die Option „Eine Rezension schreiben“ im StoreApp installer, Partner Center, the "Report an app" option in the Store, the "Write a review" option in the Store StoreLogo.pngStoreLogo.png

* Wird verwendet, außer Sie wählen aus, dass nur hochgeladene Bilder im Store angezeigt werden sollen.* Used unless you choose to display only uploaded images in the Store.

Um sicherzustellen, dass diese Symbole auf allen Bildschirmen scharf aussehen, können Sie mehrere Versionen desselben Symbols für unterschiedliche Skalierungsfaktoren von Anzeigegeräten erstellen.To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

Der Skalierungsfaktor bestimmt die Größe von UI-Elementen wie Text.The scale factor determines the size of UI elements, such as text. Skalierungsfaktoren liegen zwischen 100 % und 400 %.Scale factors range from 100% to 400%. Größere Werte erstellen größere UI-Elemente, wodurch sie auf Anzeigegeräten mit hoher Auflösung (DPI) leichter zu sehen sind.Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows legt den Skalierungsfaktor für jede Anzeige automatisch aus, basierend auf dem DPI-Wert (Punkte pro Zoll) und dem Betrachtungsabstand des Geräts.Windows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device. (Benutzer können den Standardwert außer Kraft setzen, indem sie zur Seite Einstellungen > Anzeige > Skalierung und Anordnung navigieren.)(Users can override the default value by going to the Settings > Display > Scale and layout page.)

Screenshot der Seite „Anzeige“ in den Einstellungen.

Da App-Symbolressourcen Bitmaps sind und Bitmaps sich nicht gut skalieren lassen, empfehlen wir, eine Version jeder Symbolressource für jeden Skalierungsfaktor bereitzustellen: 100 %, 125 %, 150 %, 200 % und 400 %.Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. Das sind eine Menge Symbole!That's a lot of icons! Glücklicherweise bietet Visual Studio ein Tool, das das Generieren und Aktualisieren diese Symbole erleichtert.Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Bild im Microsoft Store-EintragMicrosoft Store listing image

„Wie gebe ich Bilder für den Eintrag meiner App im Microsoft Store an?“"How do I specify images for my app's listing in the Microsoft Store?"

Standardmäßig verwenden wir einige der Bilder aus Ihren Paketen im Store, wie in der Tabelle am Anfang dieser Seite beschrieben (zusammen mit anderen Bildern, die Sie während des Übermittlungsprozesses bereitstellen).By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). Sie haben jedoch die Möglichkeit, zu verhindern, dass der Store die Logobilder verwendet, die in den Paketen Ihrer App enthalten sind, wenn Ihr Eintrag für Kunden mit Windows 10 (einschließlich Xbox) angezeigt wird, und können den Store dazu zwingen, dass stattdessen nur Bilder verwendet werden, die Sie hochladen.However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. Dies bietet Ihnen mehr Kontrolle über die Darstellung Ihrer App auf verschiedenen Anzeigegeräten im Store.This gives you more control over your app’s appearance in various displays throughout the Store. (Beachten Sie, dass, wenn Ihr Produkt frühere Betriebssystemversionen unterstützt, diesen Kunden eventuell weiterhin Bilder aus Ihren Paketen angezeigt werden können, selbst wenn Sie diese Option verwenden.) Sie können dies im Abschnitt Store-Logos des Schritts Store-Eintrag des Übermittlungsprozesses erledigen.(Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

Angeben von Store-Logos während des App-Übermittlungsprozesses

Durch Aktivieren dieses Kontrollkästchens wird ein neuer Abschnitt namens Bilder für die Store-Anzeige angezeigt.When you check this box, a new section called Store display images appears. Hier können sie 3 Bildgrößen hochladen, die vom Store anstelle von Logobildern aus den Paketen Ihrer App verwendet werden: 300 x 300, 150 x 150 und 71 x 71 Pixel.Here, you can upload 3 image sizes that the Store will use in place of logo images from your app’s packages: 300 x 300, 150 x 150, and 71 x 71 pixels. Nur die Größe 300 x 300 ist erforderlich, obwohl wir empfehlen, alle 3 Größen bereitzustellen.Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

Weitere Informationen finden Sie unter Nur hochgeladene Logobilder im Store anzeigen.For more info, see Display only uploaded logo images in the Store.

Verwalten von App-Symbolen mit dem Visual Studio Manifest-DesignerManaging app icons with the Visual Studio Manifest Designer

Visual Studio bietet ein sehr nützliches Tool für die Verwaltung Ihrer App-Symbole namens Manifest-Designer.Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

Wenn Sie nicht schon Visual Studio 2019 besitzen, sind mehrere Versionen erhältlich, einschließlich einer kostenlosen Version (Visual Studio 2019 Community Edition), und die anderen Versionen bieten kostenlose Testversionen an.If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. Diese können Sie hier herunterladen: https://developer.microsoft.com/windows/downloadsYou can download them here: https://developer.microsoft.com/windows/downloads

So starten Sie den Manifest-DesignerTo launch the Manifest Designer:

  1. Verwenden Sie Visual Studio, um ein UWP-Projekt zu öffnen.Use Visual Studio to open a UWP project.
  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei „Package.appxmanifest“.In the Solution Explorer, double-click the Package.appmxanifest file.

Der Manifest-Designer in Visual Studio 2019

In Visual Studio wird der Manifest-Designer angezeigt.Visual Studio displays the Manifest Designer.

Screenshot des Manifestdesigners mit der Registerkarte „Anwendung“.

  1. Klicken Sie auf die Registerkarte Visuelle Assets.Click the Visual Assets tab.

Screenshot des Manifestdesigners mit der Registerkarte „Visuelle Assets“.

Gleichzeitiges Generieren aller RessourcenGenerating all assets at once

Das erste Menüelement auf der Registerkarte Visuelle Assets, Alle visuellen Assets, macht genau das, was der Name schon sagt: Es generiert alle visuellen Assets, die Ihre App benötigt, mit nur einem Klick auf eine Schaltfläche.The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

Generieren aller visuellen Assets in Visual Studio

Alles, was Sie tun müssen, ist, ein einzelnes Bild bereitzustellen, und Visual Studio generiert die Assets für die kleine Kachel, die mittelgroße Kachel, die große Kachel, die breite Kachel, das App-Symbol, den Begrüßungsbildschirm sowie die Paket-Logo-Assets für alle Skalierungsfaktoren.All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

So generieren Sie alle Ressourcen gleichzeitigTo generate all assets at once:

  1. Klicken Sie auf die ... neben dem Feld Quelle, und wählen Sie das Bild aus, das Sie verwenden möchten.Click the ... next to the Source field and select the image you want to use. Wenn Sie ein Bitmap-Bild verwenden, stellen Sie sicher, dass es mindestens 400 x 400 Pixel groß ist, damit Sie ein scharfes Ergebnisse erhalten.If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. Vektorbasierte Bilder funktionieren am besten. Visual Studio gestattet Ihnen die Verwendung von Adobe Illustrator (AI)- und PDF-Dateien.Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (Optional.) Konfigurieren Sie im Abschnitt Anzeigeeinstellungen diese Optionen:(Optional.) In the Display Settings section, configure these options:

    ein.a. Kurzname: Geben Sie einen Kurznamen für Ihre App an.Short name: Specify a short name for your app.

    b.b. Name anzeigen: Geben Sie an, ob der Kurzname auf mittelgroßen, breiten oder großen Kacheln angezeigt werden soll.Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c.c. Kachelhintergrund: Geben Sie den Hexadezimalwert oder einen Farbnamen für die Hintergrundfarbe der Kachel an.Tile background: Specify the hex value or a color name for the tile background color. Beispiel: #464646.For example, #464646. Der Standardwert ist transparent.The default value is transparent.

    d.d. Hintergrund des Begrüßungsbildschirms: Geben Sie den Hexadezimalwert oder Farbnamen für den Hintergrund des Begrüßungsbildschirms an.Spash screen background: Specify the hex value or color name for the spash screen background.

  3. Klicken Sie auf Generieren.Click Generate.

Visual Studio generiert Ihre Bilddateien und fügt sie dem Projekt hinzu.Visual Studio generates your image files and adds them to project. Wenn Sie Ihre Ressourcen ändern möchten, wiederholen Sie den Prozess einfach.If you want to change your assets, simply repeat the process.

Skalierte Symbolressourcen befolgen diese Dateibenennungskonvention:Scaled icon assets follow this file naming convention:

Dateiname-scale-Skalierungsfaktor.pngfilename-scale-scale factor.png

Beispiel:For example,

Square150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.pngSquare150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png

Beachten Sie, dass Visual Studio das Badgelogo nicht standardmäßig generiert.Notice that Visual Studio doesn't generate a badge logo by default. Der Grund hierfür ist, dass Ihr Badgelogo einzigartig ist und nicht mit Ihren anderen App-Symbolen übereinstimmen sollte.That's because your badge logo is unique and probably shouldn't match your other app icons. Weitere Informationen finden Sie in dem Artikel Signalbenachrichtigungen für Windows-Apps.For more info, see the Badge notifications for Windows apps article.

Weitere Informationen zu App-SymbolressourcenMore about app icon assets

Visual Studio generiert alle App-Symbolressourcen, die für Ihr Projekt erforderlich sind, aber wenn Sie sie anpassen möchten, ist es hilfreich, zu verstehen, wie sie sich von anderen App-Ressourcen unterscheiden.Visual Studio will generate all the app icon assets required by your project, but if you'd like to customize them, it helps to understand how they're different from other app assets.

Die App-Symbolressource kommt an vielen Stellen vor: in der Windows-Taskleiste, in der Taskansicht, bei ALT+TAB und in der unteren rechten Ecke von Startkacheln.The app icon asset appears in a lot of places: the Windows taskbar, the task view, ALT+TAB, and the lower-right corner of Start tiles. Da die App-Symbolressource an so vielen Stellen angezeigt wird, stehen für sie einige zusätzliche Größen- und Hintergrundquadratoptionen zur Verfügung, über die andere Ressourcen nicht verfügen: Ressourcen mit „Zielgröße“ und Ressourcen „ohne Hintergrundquadrat“.Because the app icon asset appears in so many places, it has some additional sizing and plating options the other assets don't have: "target-size" assets and "unplated" assets.

App-Symbolressourcen mit ZielgrößeTarget-size app icon assets

Zusätzlich zu den Standard-Skalierungsfaktorgrößen („Square44x44Logo.scale-400.png“) empfehlen wir Ihnen ebenfalls, Ressourcen mit „Zielgröße“ zu erstellen.In addition to the standard scale factor sizes ("Square44x44Logo.scale-400.png"), we also recommend creating "target-size" assets. Wir bezeichnen diese Ressourcen mit „Zielgröße“, weil sie auf bestimmte Größen abzielen, wie z. B. 16 Pixel, anstatt auf bestimmte Skalierungsfaktoren, z. B. 400.We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. Ressourcen mit Zielgröße sind für Oberflächen gedacht, die nicht das Skalierungsplateau-System verwenden:Target-size assets are for surfaces that don't use the scaling plateau system:

  • Starten der Sprungliste (Desktop)Start jump list (desktop)
  • Starten der unteren Ecke der Kachel (Desktop)Start lower corner of tile (desktop)
  • Tastenkombinationen (Desktop)Shortcuts (desktop)
  • Systemsteuerung (Desktop)Control Panel (desktop)

Dies ist die Liste der Ressourcen in Zielgrößen:Here's the list of target-size assets:

RessourcengrößeAsset size Beispiel für DateinamenFile name example
16x16*16x16* Square44x44Logo.targetsize-16.pngSquare44x44Logo.targetsize-16.png
24x24*24x24* Square44x44Logo.targetsize-24.pngSquare44x44Logo.targetsize-24.png
32x32*32x32* Square44x44Logo.targetsize-32.pngSquare44x44Logo.targetsize-32.png
48x48*48x48* Square44x44Logo.targetsize-48.pngSquare44x44Logo.targetsize-48.png
256x256*256x256* Square44x44Logo.targetsize-256.pngSquare44x44Logo.targetsize-256.png
20 x 2020x20 Square44x44Logo.targetsize-20.pngSquare44x44Logo.targetsize-20.png
30 x 3030x30 Square44x44Logo.targetsize-30.pngSquare44x44Logo.targetsize-30.png
36 x 3636x36 Square44x44Logo.targetsize-36.pngSquare44x44Logo.targetsize-36.png
40 x 4040x40 Square44x44Logo.targetsize-40.pngSquare44x44Logo.targetsize-40.png
60 x 6060x60 Square44x44Logo.targetsize-60.pngSquare44x44Logo.targetsize-60.png
64 x 6464x64 Square44x44Logo.targetsize-64.pngSquare44x44Logo.targetsize-64.png
72 x 7272x72 Square44x44Logo.targetsize-72.pngSquare44x44Logo.targetsize-72.png
80 x 8080x80 Square44x44Logo.targetsize-80.pngSquare44x44Logo.targetsize-80.png
96 x 9696x96 Square44x44Logo.targetsize-96.pngSquare44x44Logo.targetsize-96.png

* Wir empfehlen, mindestens diese Größen bereitzustellen.* At a minimum, we recommend providing these sizes.

Sie müssen für diese Ressourcen keine Abstände hinzufügen, diese werden bei Bedarf von Windows hinzugefügt.You don't have to add padding to these assets; Windows adds padding if needed. Bei diesen Ressourcen sollte eine minimale Fläche von 16 Pixeln vorgesehen werden.These assets should account for a minimum footprint of 16 pixels.

Unten sehen Sie ein Beispiel dafür, wie diese Ressourcen als Symbole in der Windows-Taskleiste angezeigt werden:Here's an example of these assets as they appear in icons on the Windows taskbar:

Ressourcen in Windows-Taskleiste

Ressourcen ohne HintergrundquadratUnplated assets

Standardmäßig verwendet Windows eine zielbasierte Ressource vor einem farbigen Hintergrundquadrat.By default, Windows uses a target-based asset on top of a colored backplate by default. Wenn Sie möchten, können Sie eine zielbasierte Ressource ohne Hintergrundquadrat bereitstellen.If you want, you can provide a target-based unplated asset. „Ohne Hintergrundquadrat“ bedeutet, dass die Ressource vor einem transparenten Hintergrund angezeigt wird."Unplated" means the asset will be displayed on a transparent background. Denken Sie daran, dass diese Ressourcen vor einer Reihe verschiedener Hintergrundfarben angezeigt werden.Keep in mind that these assets will appear over a variety of background colors.

Ressourcen mit und ohne Anpassung

Dies sind die Oberflächen, die App-Symbolressourcen ohne Hintergrundquadrat verwenden:Here are the surfaces that use unplated app icon assets:

  • Taskleiste und Miniaturansicht der Taskleiste (Desktop)Taskbar and taskbar thumbnail (desktop)
  • Taskleisten-SprunglisteTaskbar jumplist
  • AufgabenansichtTask view
  • ALT+TABALT+TAB

Ressourcen ohne Hintergrundquadrat und DesignsUnplated assets and themes

Das ausgewählte Design des Benutzers bestimmt die Farbe der Taskleiste.The user's selected theme determines the color of the taskbar. Wenn die Ressource ohne Hintergrundquadrat nicht speziell für das aktuelle Design qualifiziert ist, überprüft das System die Ressource hinsichtlich des Kontrasts.If the unplated asset isn't specifically qualified for the current theme, the system checks the asset for contrast. Wenn sie über ausreichend Kontrast zur Taskleiste verfügt, verwendet das System die Ressource.If it has enough contrast with taskbar, the system uses it. Andernfalls sucht das System nach einer Version der Ressource mit hohem Kontrast.Otherwise, the system looks for a high-contrast version of the asset. Wenn keine gefunden wird, zeichnet das System stattdessen die Form der Ressource mit Hintergrundquadrat.If it can't find one, the system draws the plated form of the asset instead.

Zielgröße und Größenanpassung ohne HintergrundquadratTarget and unplated sizing

Nachfolgend finden Sie die Größenempfehlungen für zielbasierte Ressourcen mit einer Skalierung von 100 %:Here are the size recommendations for target-based assets, at 100% scale:

Zielbasierte Ressourcengröße bei einer Skalierung von 100 %

Weitere Informationen zu Ressourcen für den BegrüßungsbildschirmMore about splash screen assets

Weitere Informationen zu Begrüßungsbildschirmen finden Sie unter Begrüßungsbildschirme für Windows-Apps.For more info about splash screens, see Windows app splash screens.

Weitere Informationen zu BadgelogoressourcenMore about badge logo assets

Wenn Sie den Asset-Generator verwenden, um alle benötigten Ressourcen zu generieren, gibt es einen Grund, warum er Badgelogos nicht standardmäßig generiert: Sie unterscheiden sich sehr stark von anderen App-Ressourcen.When you use the asset generator to generate all the assets you need, there's a reason why it doesn't generate badge logos by default: they're very different from other app assets. Das Badgelogo ist ein Statusbild, das in Benachrichtigungen und auf den Kacheln der App angezeigt wird.The badge logo is a status image that appears in notifications and on the app's tiles.

Weitere Informationen finden Sie unter Signalbenachrichtigungen für Windows-Apps.For more information, see Badge notifications for Windows apps.

Anpassen der Abstandsauffüllung von RessourcenCustomizing asset padding

Standardmäßig wendet der Asset-Generator von Visual Studio die empfohlene Abstandsauffüllung auf jedes Bild an.By default, Visual Studio asset generator applies recommended padding to whatever image. Wenn Ihre Bilder bereits Abstandsauffüllung enthalten, oder wenn Sie randlose Bilder möchten, die bis zum Rand der Kachel gehen, können Sie diese Funktion deaktivieren, indem Sie das Kontrollkästchen Empfohlene Auffüllung anwenden deaktivieren.If your images already contain padding or you want full bleed images that extend to the end of the tile, you can turn this feature off by unchecking the Apply recommended padding check box.

Empfehlungen für Abstandsauffüllung von KachelnTile padding recommendations

Wenn Sie Ihre eigene Abstandsauffüllung bereitstellen möchten, finden Sie hier unsere Empfehlungen für Kacheln.If you want to provide your own padding, here are our recommendations for tiles.

Es gibt 4 Kachelgrößen: Klein (71 x 71), Mittel (150 x 150), Breit (310 x 150) und Groß (310 x 310).There are 4 tile sizes: small (71 x 71), medium (150 x 150), wide (310 x 150), and large (310 x 310).

Jede Kachelressource hat die gleiche Größe wie die Kachel, auf der sie sich befindet.Each tile asset is the same size as the tile on which it is placed.

Randlose Kachel

Wenn Sie nicht möchten, dass Ihr Symbol bis zum Rand der Kachel geht, können Sie transparente Pixel in Ihrer Ressource verwenden, um Abstandsauffüllung herzustellen.If you don't want your icon to extend to the edge of the tile, you can use transparent pixels in your asset to create padding.

Kachel und Rückwand

Beschränken Sie bei kleinen Kacheln die Breite und Höhe auf 66 % der Kachelgröße:For small tiles, limit the icon width and height to 66% of the tile size:

Verhältnisse bei kleinen Kachelgrößen

Beschränken Sie bei mittelgroßen Kacheln die Symbolbreite auf 66 % und die Höhe auf 50 % der Kachelgröße.For medium tiles, limit the icon width to 66% and height to 50% of tile size. Dadurch wird verhindert, dass Elemente in der Brandingleiste überlappen:This prevents overlapping of elements in the branding bar:

Verhältnisse bei mittelgroßen Kacheln

Beschränken Sie bei breiten Kacheln die Symbolbreite auf 66 % und die Höhe auf 50 % der Kachelgröße.For wide tiles, limit the icon width to 66% and height to 50% of tile size. Dadurch wird verhindert, dass Elemente in der Brandingleiste überlappen:This prevents overlapping of elements in the branding bar:

Verhältnisse bei breiten Kacheln

Beschränken Sie bei großen Kacheln die Symbolbreite auf 66 % und die Höhe auf 50 % der Kachelgröße:For large tiles, limit the icon width to 66% and height to 50% of tile size:

Verhältnisse bei großen Kacheln

Einige Symbole sind so konzipiert, dass sie horizontal oder vertikal ausgerichtet sind, andere Symbole hingegen weisen komplexere Formen auf, wodurch verhindert wird, dass sie direkt in die Zielabmessungen passen.Some icons are designed to be horizontally or vertically oriented, while others have more complex shapes that prevent them from fitting squarely within the target dimensions. Symbole, die zentriert erscheinen, können auf eine Seite geneigt sein.Icons that appear to be centered can be weighted to one side. In diesem Fall können Teile eines Symbols aus der empfohlenen Fläche heraushängen, vorausgesetzt, das Symbol belegt dasselbe visuelle Gewicht wie ein genau passendes Symbol:In this case, parts of an icon may hang outside the recommended footprint, provided it occupies the same visual weight as a squarely fitted icon:

Drei zentrierte Symbole

Berücksichtigen Sie bei randlosen Ressourcen Elemente, die innerhalb der Ränder und Kanten der Kacheln interagieren.With full-bleed assets, take into account elements that interact within the margins and edges of the tiles. Behalten Sie Ränder von mindestens 16 % der Höhe oder Breite der Kachel bei.Maintain margins of at least 16% of the height or width of the tile. Dieser Prozentsatz stellt die doppelte Breite der Ränder bei den kleinsten Kachelgrößen dar:This percentage represents double the width of the margins at the smallest tile sizes:

Randlose Kachel mit Rändern

In diesem Beispiel sind die Ränder zu eng:In this example, margins are too tight:

Randlose Kachel mit zu engen Rändern

Optimieren für bestimmte Designs, Sprachen und andere BedingungenOptimizing for specific themes, languages, and other conditions

In diesem Artikel wurde beschrieben, wie Sie Ressourcen für bestimmte Skalierungsfaktoren erstellen, aber Sie können auch Ressourcen für eine Vielzahl verschiedener Bedingungen und Kombinationen von Bedingungen erstellen.This article described how to create assets for specific scale factors, but you can also create assets for a wide variety of conditions and combinations of conditions. Beispielsweise können Sie Symbole für Anzeigegeräte mit hohem Kontrast oder für die hellen und dunklen Designs erstellen.For example, you can can create icons for high contrast displays or for the light themes and dark themes. Sie können sogar Ressourcen für bestimmte Sprachen erstellen.You can even create assets for specific languages.

Anleitungen hierzu finden Sie unter Anpassen von Ressourcen mit Qualifizierern für Sprache, Skalierung, hohen Kontrast und andere Eigenschaften.For instructions, see Tailor your resources for language, scale, high contrast, and other qualifiers.