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

Beispiel für eine 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 ist keine Liste von Vorschriften, sondern ein lebendiges Dokument, das entwickelt wurde, um sich entsprechend unseres Fluent Design-Systems sowie der Bedürfnisse unserer App-Entwicklungs-Community zu entwickeln.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 einen Überblick über die universellen Designfunktionen, die in jeder UWP-Apps enthalten sind. Es hilft Ihnen, Benutzeroberflächen (UIs) zu erstellen, die sich über eine Vielzahl von Geräten wunderbar 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

Führen Sie die UWP-apps auf allen Windows 10-Geräte, von Ihr Fernsehgerät praktisch auf Ihrem Tablet oder PC.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. Wie entwerfen Sie eine Benutzeroberfläche, die auf einer Vielzahl von Geräten und Bildschirmgrößen in Ordnung ist?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

Dieselbe App auf verschiedenen Geräten

UWP kann, indem Sie die Elemente der Benutzeroberfläche automatisch anpassen, sodass sie lesbar und auf allen Geräten und Bildschirmgrößen mit Interaktion einfach 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). Mit dem Skalierungsalgorithmus wird sichergestellt, dass der Schriftgrad 24 Pixel auf einem 3 Meter entfernten Surface Hub genauso für den Benutzer lesbar ist wie der Schriftgrad 24 Pixel auf einem 5-Zoll-Smartphone, das nur einige 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 beim Entwerfen Ihrer UWP-App, verwenden Sie effektive Pixeln, und nicht die tatsächlichen physischen Pixel.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 werden verwendet, um Layoutabmessungen 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 austauschbar 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 der Größenklassen und effektiven Auflösungen finden Sie in dem Artikel Bildschirmgrößen und Breakpoints.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Vielfache von vierMultiples of four

The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (e.g. 4*1.5 = 6). Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Note that text doesn't have this requirement; text can have any size and position.)

grid

LayoutLayout

Da UWP-Apps automatisch für alle Geräte skaliert werden, folgt das Entwerfen einer UWP-App für jedes Gerät derselben Struktur.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

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

You can think of your app's UI as a collection of pages. It's up to you to decide what should go on each page, and the relationships between pages.

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? Meistens besitzen die Seiten eine gemeinsame Struktur, um Konsistenz bereitzustellen, sodass Benutzer problemlos 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 dem Benutzer, die Inhalte auszuwählen, die er 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.

Ein allgemeines Layoutmuster

Weitere Informationen zum Implementieren allgemeiner UWP-App Muster finden Sie im Seitenlayout.To learn more about how to implement common UWP app patterns, see the Page layout article.

Sie können auch das Windows Template Studio in Visual Studio verwenden, um mit einem Layout für Ihre 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-Designplattform bietet eine Reihe von allgemeinen Steuerelementen, die auf allen Windows-Geräten funktionieren und den Prinzipien für unser Fluent Design-System 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 Steuerelemente reichen von einfachen Steuerelementen wie Schaltflächen und Textelementen bis hin zu ausgeklügelten Steuerelementen, die Listen aus einem Datensatz und einer Vorlage erzeugen können.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 -Muster, die Sie aus ihnen erstellen können, finden Sie im Abschnitt Steuerelemente und Muster.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

FormatStyle

Die allgemeinen Steuerelemente übernehmen automatisch das Systemdesign und die Akzentfarbe, arbeiten mit allen Eingabetypen und skalieren auf allen Geräten.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. Auf diese Weise spiegeln sie das Fluent Design System wider – sie sind anpassungsfähig, einfühlsam und schön.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. Allgemeine Steuerelemente verwenden Licht, Bewegung und Tiefe in ihren Standarddesigns. Durch die Verwendung dieser Steuerelemente integrieren Sie also unser Fluent Design-System in Ihre 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 sehr anpassbar. Sie können die Vordergrundfarbe eines Steuerelements ändern oder sein Aussehen komplett anpassen.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Um die standardmäßigen Stile in Steuerelementen zu überschreiben, verwenden Sie einfache Formatierung oder erstellen benutzerdefinierte Steuerelemente in XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

Akzentfarben-Gif

ShellShell

Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

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. Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

tiles on start menu

EingabenInputs

UWP apps rely on smart interactions. 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. However, you can also design your apps for specific input modes.

inputs

GeräteDevices

Geräte

Obwohl UWP Ihre App automatisch auf verschiedene Geräte skaliert, können Sie Ihre UWP-App trotzdem 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. Jeder kann von einer wirklich umfassenden Benutzererfahrung profitieren. In Benutzerfreundlichkeit von UWP-Apps erfahren Sie, wie Sie Ihre App für jedermann benutzerfreundlich gestalten können.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 Sie für ein internationales Publikum entwerfen, sollten Sie sich mit Globalisierung und Lokalisierung vertraut machen.If you're designing for international audiences, you might want to check out Globalization and localization.

Und Sie sollten Features für Bedienungshilfen für Benutzer mit eingeschränkter Seh-, Hör- und Bewegungsfreiheit in Betracht ziehen.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. Wenn die Barrierefreiheit von Anfang an in Ihr Design integriert ist, sollte die Umsetzung der Barrierefeiheit Ihrer App nur sehr wenig Zeit und Mühe in Anspruch nehmen.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

Da Sie nun über die grundlegenden Designfunktionen Bescheid wissen, sollten Sie die ersten Schritte beim Design Ihrer UWP-App unternehmen.Now that you know about the basic design features, how about getting started with designing your UWP app?

Wir bieten eine Vielzahl von Werkzeugen zur Unterstützung Ihres Designprozesses:We provide a variety of tools to help your design process:

  • Weitere Informationen für XD, Illustrator, Photoshop, Framer und Sketch-Toolkits sowie zusätzliche Entwicklungstools und Downloads für Schriftarten finden Sie auf der Design-Toolkits-Seite.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • Um Ihren Computer so einzurichten, dass er das Codieren von UWP-Apps ermöglicht, lesen Sie den Artikel Erste Schritte >Vorbereiten.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • Für Anregungen zur Implementierung von Benutzeroberflächen für die UWP werfen Sie einen Blick auf unsere umfassenden UWP-Beispiel-Apps.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

Video-ZusammenfassungVideo summary

nächster: Fluent Design-SystemNext: Fluent Design System

Wenn Sie weitere Informationen zu der Prinzipien hinter Fluent Design (das Design-System von Microsoft) und weitere Features für Ihre UWP-App kennenlernen möchten, fahren Sie mit dem Artikel Fluent Design-System fort.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.