Einführung in das UWP-App-DesignIntroduction to UWP app design

Exemplarische Beleuchtungs-App

Der Designleitfaden für die universelle Windows-Plattform (UWP) ist eine Ressource, die Sie beim Entwerfen und Erstellen ansprechender und optimierter Apps unterstützen kann.The Universal Windows Platform (UWP) design guidance is a resource to help you design and build beautiful, polished apps.

Es handelt sich dabei nicht um eine Liste von Vorschriften, sondern um ein lebendiges Dokument, das auf unser dynamisches Fluent Design-System sowie auf die Bedürfnisse unserer App-Entwicklercommunity abgestimmt wird.It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

Diese Einführung bietet eine Übersicht über die universellen Entwurfsfeatures, die in jeder UWP-App enthalten sind und dich bei der Erstellung von Benutzeroberflächen (User Interfaces, UIs) unterstützen, die sich problemlos auf verschiedensten Geräten skalieren lassen.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Effektive Pixel und SkalierungEffective pixels and scaling

UWP-Apps können auf beliebigen Windows 10-Geräten ausgeführt werden – von Fernsehern über Tablets bis hin zu PCs.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. Aber wie lässt sich eine ansprechende UI für unterschiedlichste Geräte und Bildschirmgrößen entwerfen?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

Gleiche App auf verschiedenen Geräten

UWP passt UI-Elemente automatisch so an, dass sie auf allen Geräten sowie auf Bildschirmen mit beliebiger Größe gut lesbar und problemlos verwendbar sind.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

Wenn Ihre App auf einem Gerät ausgeführt wird, verwendet das System einen Algorithmus, um die Art der Anzeige der UI-Elemente auf dem Bildschirm zu normalisieren.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. Dieser Skalierungsalgorithmus berücksichtigt den Abstand zum Bildschirm und die Bildschirmdichte (Pixel pro Zoll), um die wahrgenommene Größe (anstelle der physischen Größe) zu optimieren.This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). Der Skalierungsalgorithmus sorgt dafür, dass Schrift mit einem Schriftgrad von 24 Pixeln auf einem drei Meter entfernten Surface Hub ebenso gut lesbar ist wie auf einem 5-Zoll-Smartphone, das nur wenige Zentimeter entfernt ist.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

Sichtabstände für verschiedene Geräte

Aufgrund der Funktionsweise des Skalierungssystems arbeitest du beim Entwerfen deiner UWP-App nicht mit tatsächlichen physischen Pixeln, sondern mit effektiven Pixeln.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. Effektive Pixel (epx) sind eine virtuelle Maßeinheit und dienen dazu, Layoutdimensionen und Abstände unabhängig von der Pixeldichte auszudrücken.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (In unseren Richtlinien werden epx, ep und px synonym verwendet.)(In our guidelines, epx, ep, and px are used interchangeably.)

Sie können die Pixeldichte und die tatsächliche Bildschirmauflösung beim Entwerfen ignorieren.You can ignore the pixel density and the actual screen resolution when designing. Entwerfen Sie stattdessen für die effektive Auflösung (die Auflösung in effektiven Pixeln) für eine Größenklasse (Details finden Sie im Artikel Bildschirmgrößen und Haltepunkte).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

Tipp

Legen Sie beim Erstellen von Bildschirmmodellen in Bildbearbeitungsprogrammen die DPI auf 72 und die Bildgröße auf effektive Auflösung für die Zielgrößenklasse fest.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. Eine Liste mit Größenklassen und effektiven Auflösungen findest du im Artikel Bildschirmgrößen und Haltepunkte.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Vielfache von vierMultiples of four

Die Größen, Ränder und Positionen der UI-Elemente in UWP-Apps sollten immer ein Vielfaches von 4 Epx betragen.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP unterstützt eine Skalierung für eine Vielzahl von Geräten mit den Skalierungsebenen 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % und 400 %.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. Die Basiseinheit ist 4, da sie die einzige ganze Zahl ist, die mit nicht ganzen Zahlen skaliert werden kann (z. B. 4 * 1,5 = 6).The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 6). Durch die Verwendung von Vielfachen von vier werden alle Elemente der Benutzeroberfläche mit ganzen Pixeln ausgerichtet, und es wird sichergestellt, dass die Benutzeroberflächenelemente über klare, scharfe Kanten verfügen.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Beachten Sie, dass diese Anforderung für Text nicht gilt. Text kann eine beliebige Größe und Position haben.)(Note that text doesn't have this requirement; text can have any size and position.)

Raster

LayoutLayout

Da UWP-Apps automatisch für alle Geräte skaliert werden, wird beim Entwerfen einer UWP-App für ein beliebiges Gerät immer die gleiche Struktur verwendet.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Beginnen wir mit den Grundlagen der Benutzeroberfläche einer UWP-App.Let's start from the very beginning of your UWP app's UI.

Fenster, Rahmen und SeitenWindows, Frames, and Pages

Wenn eine UWP-App auf einem Windows 10-Gerät gestartet wird, startet sie in einem Window mit einem Frame, der zwischen Page-Instanzen navigieren kann.When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Frame

Sie können sich die UI Ihrer App als eine Sammlung von Seiten vorstellen.You can think of your app's UI as a collection of pages. Es liegt an Ihnen, was auf jeder Seite angezeigt wird und welche Beziehungen zwischen den Seiten bestehen sollen.It's up to you to decide what should go on each page, and the relationships between pages.

Informationen dazu, wie Sie Ihre Seiten organisieren können, finden Sie unter Navigationsgrundlagen.To learn how you can organize your pages, see Navigation basics.

Frame

SeitenlayoutPage layout

Wie sollten diese Seiten aussehen?What should those pages look like? Aus Konsistenzgründen haben die meisten Seiten eine gemeinsame Struktur, sodass Benutzer mühelos zwischen und auf App-Seiten navigieren können.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. Seiten enthalten in der Regel drei Arten von UI-Elementen:Pages typically contain three types of UI elements:

  • Navigationselemente ermöglichen es Benutzern, die Inhalte auszuwählen, die sie anzeigen möchten.Navigation elements help users choose the content they want to display.
  • Befehlselemente initiieren Aktionen wie etwa das Bearbeiten, Speichern oder Freigeben von Inhalten.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Inhaltselemente zeigen die Inhalte der App an.Content elements display the app's content.

Allgemeines Layoutmuster

Weitere Informationen zur Implementierung allgemeiner UWP-App-Muster findest du im Artikel zum Seitenlayout.To learn more about how to implement common UWP app patterns, see the Page layout article.

Du kannst auch Windows Template Studio in Visual Studio verwenden, um mit einem Layout für deine App zu beginnen.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

SteuerelementeControls

Die UWP-Entwurfsplattform bietet eine Reihe allgemeiner Steuerelemente, die auf allen Windows-Geräten funktionieren und den Prinzipien unseres Fluent Design-Systems entsprechen.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. Diese reichen von einfachen Steuerelementen wie Schaltflächen und Textelementen bis hin zu komplexen Steuerelementen zur Generierung von Listen auf der Grundlage eines Datensatzes und einer Vorlage.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

UWP-Steuerelemente

Eine vollständige Liste der UWP-Steuerelemente und der möglichen Muster findest du im Abschnitt zu Steuerelementen und Mustern.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

FormatStyle

Allgemeine Steuerelemente übernehmen automatisch das Systemdesign und die Akzentfarbe, funktionieren mit allen Eingabetypen und werden auf allen Geräten ordnungsgemäß skaliert.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. Sie sind also adaptiv, intuitiv und ansprechend und spiegeln somit das Fluent Design-System wider.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. Allgemeine Steuerelemente nutzen Licht, Bewegung und Tiefe in ihren Standardstilen. Durch die Verwendung dieser Steuerelemente integrierst du also unser Fluent Design-System in deine App.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

Allgemeine Steuerelemente sind zudem hochgradig anpassbar. So kannst du beispielsweise die Vordergrundfarbe eines Steuerelements ändern oder sein Aussehen umfassend verändern.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Verwende zum Überschreiben der Standardstile von Steuerelementen entweder die einfache Formatierung, oder erstelle benutzerdefinierte Steuerelemente in XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

GIF-Bild zu Akzentfarben

ShellShell

UWP-Apps interagieren mit der allgemeinen Windows-Umgebung über Kacheln und Benachrichtigungen in der Windows-Shell.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

Kacheln werden im Startmenü sowie beim Start Ihrer App angezeigt und geben einen Einblick in das Geschehen in Ihrer App.Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. Ihr Mehrwert basiert auf dem zugrunde liegenden Inhalt und ihrem Design.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP-Apps haben vier Kachelgrößen (klein, mittel, breit und groß), die mit dem Symbol und der Identität der App angepasst werden können.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. Hinweise zur Gestaltung von Kacheln für Ihre UWP-Apps finden Sie unter Richtlinien für Kachel- und Symbolelemente.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

Kacheln im Startmenü

EingabenInputs

UWP-Apps basieren auf intelligenten Interaktionen.UWP apps rely on smart interactions. Sie können sie ausgehend von einer Klick-Interaktion konzipieren, ohne zu wissen oder zu definieren, ob der Klick von einer Maus, einem Stift oder einem Fingertipp stammt.You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. Sie können Ihre Apps aber auch für bestimmte Eingabemodi gestalten.However, you can also design your apps for specific input modes.

Eingaben

GeräteDevices

Geräte

UWP skaliert deine App zwar automatisch für verschiedene Geräte, du kannst aber auch deine UWP-App für bestimmte Geräte optimieren.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

NutzbarkeitUsability

Bei der Benutzerfreundlichkeit geht es darum, die App für alle Benutzer zugänglich zu machen.Last but not least, usability is about making your app's experience open to all users. Eine wirklich inklusive Benutzerumgebung kommt letztendlich allen zugute. Unter Benutzerfreundlichkeit in UWP-Apps erfährst du, wie du eine rundum benutzerfreundliche App gestaltest.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

Wenn du Apps für ein internationales Publikum entwickelst, solltest du dich ggf. auch mit den Informationen unter Globalisierung und Lokalisierung vertraut machen.If you're designing for international audiences, you might want to check out Globalization and localization.

Darüber hinaus solltest du auch Barrierefreiheitsfeatures für Benutzer mit eingeschränktem Seh- oder Hörvermögen oder mit eingeschränkter Mobilität in Betracht ziehen.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. Wenn du die Barrierefreiheit gleich von Anfang an in deinem Entwurf berücksichtigst, ist die Umsetzung der Barrierefreiheit in deiner App in der Regel keine große Sache.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Tools und Design-ToolkitsTools and design toolkits

Nachdem du nun mit den grundlegenden Entwurfsfeatures vertraut bist, kannst du damit beginnen, deine UWP-App zu entwerfen.Now that you know about the basic design features, how about getting started with designing your UWP app?

Wir stellen verschiedene Tools bereit, um dich dabei zu unterstützen.We provide a variety of tools to help your design process:

  • Auf der Seite Design-Toolkits und Beispiele für UWP-Apps findest du Toolkits für XD, Illustrator, Photoshop, Framer und Sketch sowie zusätzliche Design-Tools und Downloads für Schriftarten.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • Wie du deinen Computer für die Programmierung von UWP-Apps einrichtest, erfährst du unter Beginnen > Einrichten.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • Anregungen zur UI-Implementierung für UWP findest du in unseren umfassenden UWP-Beispiel-Apps.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

VideozusammenfassungVideo summary

Nächstes Thema: Fluent Design-SystemNext: Fluent Design System

Informationen zu den Prinzipien von Fluent Design (das Entwurfssystem von Microsoft) sowie zu weiteren Features für deine UWP-App findest du im Artikel Fluent Design-System für Ersteller von Windows-Apps.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.