Designgrundlagen für Windows-AppsDesign basics for Windows apps

Symbol für Designgrundlagen

Der Designleitfaden für Windows ist eine Ressource, die Sie beim Entwerfen und Erstellen ansprechender und optimierter Apps unterstützen kann.Windows 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 ein lebendiges Dokument, das entwickelt wurde, um sich an unser Fluent Design-System sowie die Bedürfnisse unserer App-Entwicklungs-Community anzupassen.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.

ÜbersichtOverview

Einführung in das Design von Windows-AppsIntroduction to Windows app design

Hier finden Sie eine Einführung in die Windows-App-Features sowie bewährte Methoden für die Erstellung von Apps, die sich auf allen Arten von Windows-basierten Geräten wunderbar skalieren lassen.An introduction to Windows app features combined with best practices for creating apps that scale beautifully on all types of Windows-powered devices.

Fluent Design-SystemFluent Design System

Unsere Ziele und Prinzipien für die Erstellung adaptiver, intuitiver und ansprechender Benutzeroberflächen sind im Fluent Design-System zusammengefasst.The Fluent Design System presents our goals and principles for creating adaptive, empathetic, and beautiful user interfaces.

GrundlagenBasics

NavigationsgrundlagenNavigation basics

Die Navigation in Windows-Apps basiert auf einem flexiblen Modell aus Navigationsstrukturen, Navigationselementen und Funktionen auf Systemebene.Navigation in Windows apps is based on a flexible model of navigation structures, navigation elements, and system-level features. Dieser Artikel führt Sie in diese Komponenten ein und zeigt, wie Sie diese gemeinsam verwenden, um eine gute Navigationsumgebung zu erstellen.This article introduces you to these components and shows you how to use them together to create a good navigation experience.

BefehlsgrundlagenCommand basics

Befehlselementen sind die interaktiven UI-Elemente, mit denen der Benutzer Aktionen ausführen kann, um beispielsweise eine E-Mail zu senden, ein Element zu löschen oder ein Formular zu übermitteln.Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. Dieser Artikel beschreibt Befehlselemente wie Schaltflächen und Kontrollkästchen, die von diesen unterstützten Interaktionen sowie die Befehlsoberflächen (wie Befehlsleisten und Kontextmenüs), auf denen sie sich befinden können.This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them.

InhaltsgrundlagenContent basics

Der Hauptzweck jeder App ist das Bereitstellen von Zugriff auf Inhalte: In einer Fotobearbeitungs-App stellen Fotos den Inhalt dar, in einer Reise-App stellen Karten und Informationen über die Reiseziele den Inhalt dar, usw.The main purpose of any app is to provide access to content: in a photo-editing app, the photo is the content; in a travel app, maps and info about travel destinations is the content; and so on. Dieser Artikel stellt Empfehlungen für das Design von Inhalten für die drei Inhaltsszenarien bereit: Nutzung, Erstellung und Interaktion.This article provides content design recommendations for the three content scenarios: consumption, creation, and interaction.

LernprogrammeTutorials

Lernen Sie, wie Sie eine einfache Bildbearbeitungsanwendung in XAML und C# erstellen.Learn how to create a basic photo-editing application in XAML and C#.

1. Erstellen einer einfachen Benutzeroberfläche1. Create a basic UI

Verwenden Sie XAML, um eine einfache Benutzeroberfläche zu erstellen.Use XAML to create a basic user interface.

2. Erstellen eines adaptiven Layouts2. Create an adaptive layout

Versehen Sie die Bildbearbeitungsanwendung mit einem adaptiven Layout.Give the photo-editing application an adaptive layout.

3. Erstellen eigener Stile3. Create custom styles

Gestalten Sie unsere Windows-Steuerelemente nach Ihren Vorstellungen, indem Sie benutzerdefinierte Stile erstellen.Give our Windows controls your own look and feel by creating custom styles.