Entwurfsrichtlinien für Windows App-Symbole

Befolgen Sie diese Richtlinien, um ein großartiges App-Symbol für Ihre App zu erstellen, die sich unter Windows wohl fühlt.

Entwurfsanleitung: Metapher

Ein Symbol sollte eine Metapher für seine App sein: eine visuelle Darstellung des Wertversprechens, der Funktionen und der Merkmale des Produkts.

Darstellung

Ihr Symbol sollte das Konzept Ihrer App in einem einzelnen Element mithilfe einfacher Formulare veranschaulichen.

Verwenden Sie beim Erstellen Ihres Symbols klare Metaphern und nutzen Sie Konzepte, die weitgehend verstanden werden – z. B. einen Umschlag für Post oder eine Lupe für die Suche. Das Schlüsselkonzept sollte der Mittelpunkt Ihres Symbols sein. Verwässern Sie Ihr Symbol nicht, indem Sie dekorative Elemente hinzufügen, die die Metapher nicht unterstützen. Um die Klarheit der Kommunikation zu verbessern, verwenden Sie nicht mehr als zwei Metaphern in einem einzigen Symbol. Wenn eine einzige Metapher verwendet werden kann, ist das noch besser.

Literale Metaphern eignen sich am besten, um den Zweck und das Versprechen klar zu artikulieren. Ein guter Test für ein effektives Symbol ist, wenn Benutzer ohne Bezeichnung sagen können, was es darstellt.

Verwenden Sie eine abstrakte Metapher nur in Fällen, in denen es unmöglich ist, eine literale, selbstverständliche Metapher zu finden, um die Kernfunktionalität eines Produkts darzustellen.

Symbole sollten keine Typografie als Teil des Entwurfs enthalten. Buchstaben und Wörter auf Dem Symbol sollten vermieden und nur verwendet werden, wenn es wichtig ist. Der Name der App wird in Verbindung mit dem Symbol im gesamten Betriebssystem angezeigt.

Entwurfsanleitung: Shape

Raster und abgerundete Ecken

Microsoft richtet seine Symbole zunächst an einem Raster von 48 x 48 aus, um ein ausgewogenes Symbol zu gewährleisten, das den verfügbaren Platz nutzt und gleichzeitig eine charakteristische Form und Silhouette behält. Wenn Sie die charakteristischen Merkmale Ihres Symbols auf das Raster ausrichten, werden sie gut mit den anderen Symbolen rund um das Symbol abgestimmt.

Nahbarkeit ist ein Microsoft-Persönlichkeitsprinzip. Eine Möglichkeit, dieses Merkmal zu kommunizieren, besteht darin, weiche oder abgerundete Ecken zu verwenden. Shapes, die in den Produktsymbolen Ihrer App verwendet werden, sollten so erstellt werden, dass sie am Symbolraster ausgerichtet sind. Die Ecken dieser Formen sollten mit den abgerundeten Ecken im Symbolraster übereinstimmen. Wenn abgerundete Ecken auf eine äußere Kurve angewendet werden, verwenden Sie einen 2px-Radius bei 48x48. Wenn abgerundete Ecken auf eine innere Kurve angewendet werden, verwenden Sie stattdessen einen 1px-Radius.

Silhouette

Eine optisch ausgewogene Silhouette ermöglicht eine gute Symbolskalierbarkeit und vermeidet auch Extreme von dicken und dünnen Formen. Verwenden Sie das Raster, um eine Silhouette zu entwerfen, die charakteristisch ist, aber in kleinen Größen lesbar ist. Verwenden Sie so wenige Formen mit so wenigen Ecken wie möglich, um Ihr Produkt zu unterscheiden, während Sie sich unter Windows wie zu Hause fühlen.

Detail

Beim Hinzufügen von Details sollte darauf geachtet werden, die Lesbarkeit bei kleinen Größen zu erhalten. Es wird empfohlen, der prominentesten Ebene eines Symbols nur zusätzliche Literaldetails hinzuzufügen.

Entwurfsanleitung: Farbe und Farbverläufe

Wählen Sie Farben sorgfältig aus, und vermeiden Sie es, sich allein auf Die Farbe zu verlassen, um Bedeutung zu vermitteln. Verwenden Sie Form und Metapher mit Farbe, um zu kommunizieren. Um Komplexität beim Skalieren eines Symbols über eine Reihe von Größen zu vermeiden, sollten Behandlungen in Farben minimiert werden. Farbverläufe, Überlagerungen unterschiedlicher Deckkraft und Farbton sollten auf ein Minimum beschränkt werden.

Farbverläufe sollten größtenteils subtil sein. Versuchen Sie, Ihre Farbverlaufsrampen auf nur ein oder zwei Schritte in horizontaler und vertikaler Richtung zu beschränken.

Der Standardwinkel für Farbverläufe beträgt 120 Grad. Start- und Endpunkte können entsprechend angepasst werden. Wichtig ist, dass es sich um einen reibungslosen Übergang handelt. Vermeiden Sie sehr enge Übergänge, die sich wie Reflexionen oder Dimensionen anfühlen würden.

Monochrome Palette

Erstellen Sie eine monochrome Palette mit den folgenden Schritten:

1. Erstellen Sie drei Farben aus demselben Farbton. In den meisten Fällen müssen Sie die helle Farbe so anpassen, dass sie heller und die dunkle Farbe weniger gesättigt ist, aber natürlich sollten Sie Ihr bestes Urteilsvermögen verwenden.
2. Erstellen Sie drei Schritte zwischen den einzelnen Basisfarben. Dies ist Ihre primäre Spur. Die meisten Symbole sollten aus diesen Farben bestehen.
3. Für eine breitere Palette erstellen Sie Mit der gleichen Methode wie Schritt 2 Farbtons in Weiß und Schattierungen in Schwarz. Diese Tönungen und Schattierungen sollten nur verwendet werden, wenn Sie etwas mehr Kontrast benötigen.
4. Die Tönungen der dunklen Farben und Schattierungen der hellen Farben sind in der Regel nutzlos und trist. Sie können entfernt werden.

Monochrome Farbverläufe

Monochrome Farbverläufe werden normalerweise verwendet, um einen subtilen Hinweis auf einen Umgebungslichtwinkel von oben links zu geben. Sie sollten jedoch nicht als direkte Lichtquelle behandelt werden. Die Idee ist, den Formen ein wenig Bewegung zu geben, ohne zu dramatisch zu sein.

Analoge Palette

Das Erstellen einer analogen Palette ist genau wie das Erstellen einer monochromen Palette, aber mit mehr Farben. Der Schlüssel für diese Art von Palette besteht darin, sie nicht zu übertreiben. Seien Sie nachdenklich mit Ihren Farbübergängen.

1. Erstellen Sie drei Farbsätze anstelle eines.
2. Erstellen Sie aus allen drei Farbsätzen vertikale Rampen.
3. Verwenden Sie stattdessen Ihre zweite und dritte Farbe, anstatt Farb- und Schattierungen mit Weiß und Schwarz zu erstellen.

Analoge Farbverläufe

Analoge Farbverläufe sollten sich im gleichen Winkel wie das Monochrom befinden, müssen aber nicht immer sein. In der Regel sollten hellere Farbtöne oben links sein, um nicht übermäßig dramatisch zu wirken, sondern auch, um so konsistent wie möglich mit dem Monochrom zu sein.

Entwurfsleitfaden: Kontrast, Schatten und Perspektive

Farbkontrast

Barrierefreiheit hat für Microsoft eine hohe Priorität. App-Symbole werden hauptsächlich auf hellem und dunklem Hintergrund angezeigt, aber über Desktophintergrundbildern und Tönungen oder Schattierungen der Systemakzentfarbe angezeigt. Es ist schwierig, ein Symbol auf jedem Hintergrund zu 100 % zugänglich zu machen, aber es gibt mehrere Möglichkeiten, um sicherzustellen, dass Ihr Symbol so zugänglich wie möglich ist.

• Verwenden Sie Farbwerte in allen 3 Bereichen, dunkel, mittel, hell.
• Stellen Sie sicher, dass mindestens die Hälfte des Symbols ein Kontrastverhältnis von 3,0:1 für helles und dunkles Design überlässt.
• Einige Farbtonwerte sind schwieriger als andere. Gelb übergibt nie ein zugängliches Kontrastverhältnis für helles Design, bis es braun ist. Rotfarben sind bei dunklem Design schwieriger.
• Obwohl sie nicht erforderlich sind, haben Sie die Möglichkeit, separate helle und dunkle Designressourcen für Taskleiste, Start und andere themensensitive Bereiche von Windows bereitzustellen.

Hoher Kontrast

Tipp

Windows 11 erfordert keine Objekte mit hohem Kontrast für App-Symbole mehr.

Symbole mit hohem Kontrast sind schwarz und weiß und sollten eine direkte Darstellung Ihres App-Symbols sein. Häufig kann das Symbol mit hohem Kontrast aus der Farbversion mit einer vollfarbigen Füllung und Linie erstellt werden. Vermeiden Sie Farbverläufe in Symbolen mit hohem Kontrast. Manchmal sind monoline Symbole für In-App-Erfahrungen erforderlich, sollten gemäß diesen Richtlinien entworfen werden.

Schichtung und Schatten

Obere/frontseitige Ansicht.

Isometrische Ansicht zur Veranschaulichung der Z-Tiefe. Nur zu Veranschaulichungszwecken; keine vorgeschlagene Entwurfsoption.

Symbole bestehen aus flachen Objekten, die auf den darunter liegenden Ebenen sitzen.

• Verwenden Sie so wenige Ebenen wie möglich, und minimieren Sie extreme Kontraste bei der Skalierung zwischen Formen.
• Verwenden Sie Schatten innerhalb von Symbolen, um eine Definition zwischen Objektebenen zu erstellen und Komponenten innerhalb des Symbolentwurfs visuell miteinander zu verbinden.
• Im Allgemeinen haben Schatten, die von hellen auf dunkle Formen geworfen werden, das beste Ergebnis.
• Innere Schatten sollten nur einen Schatten auf das Grafiksymbol werfen, nicht auf den umgebenden Hintergrund.
• Es gibt zwei Arten von inneren Schatten, von denen beide jeweils zwei Schatten haben

Schattenkonstruktion

Alle diese Werte sollen mit 48x48 px gerendert und von dort aus hoch- oder herunterskaliert werden. Wenn dies nicht eingehalten wird, sind Schatten im Symbolsystem inkonsistent. Es gibt zwei Arten von Objektschatten, die beide jeweils über zwei Schatten verfügen. Objekte innerhalb derselben Metapher haben einen Schatten mit etwas weniger Unschärfe.

Gleiche Metapher

Dieser Schatten wird verwendet, wenn Sie Inhalte in einer einzelnen Metapher haben, die etwas Tiefe benötigt. Es ist nicht immer notwendig, dies zu tun, aber einzelne Objektmetaphern benötigen eine gewisse Tiefe, um sich als Teil des Systems zu fühlen. blau bei Schatten 2 ist der einzige Unterschied.

Eigene Metapher

Dieser Schatten wird verwendet, wenn Sie über zwei Objekte verfügen, die sich überlappen, aber nicht unbedingt Teil derselben Metapher sind. Der Schatten sollte in der darunter liegenden Form maskiert werden.

Perspektive

Die Symbole auf der linken Seite sind recht einfach; Perspektive wird nicht empfohlen, kann aber hier angemessen sein. Das Symbol auf der rechten Seite ist für die Perspektive zu komplex, daher wird die Verwendung für dieses Symbol nicht empfohlen.

Symbole sollten mit einer geradlinigen Perspektive gezeichnet werden, um die Metapher auf eine einfache, leicht verständliche Weise darzustellen. Ausnahmen sind Fälle, in denen sich die Metapher nicht gut liest, ohne eine andere Seite anzuzeigen. Beispielsweise ist ein gerader Zylinder ein Rechteck, sodass die Oberseite hinzugefügt werden kann, um zu zeigen, dass er Volumen hat. Die andere Ausnahme ist, wenn eine App mit 3d verknüpft ist, wo es sinnvoll ist, die Dimension anzuzeigen. In beiden Fällen gelten weiterhin die vorherigen Richtlinien für flache Objekte. Ebenen sollten immer flach und senkrecht zum Blickwinkel sein.