Fluent Design-System für Ersteller von Windows-AppsThe Fluent Design System for Windows app creators

Fluent Design-Header

EinführungIntroduction

Das Fluent Design-System ist unser System zum Erstellen adaptiver, einfühlsamer und schöner Benutzeroberflächen.The Fluent Design System is our system for creating adaptive, empathetic, and beautiful user interfaces.

PrinzipienPrinciples

Adaptiv: Fluent-Benutzeroberflächen fühlen sich auf jedem Gerät natürlich an.Adaptive: Fluent experiences feel natural on each device

Fluent-Benutzeroberflächen passen sich an die Umgebung an.Fluent experiences adapt to the environment. Eine Fluent-Benutzeroberfläche fühlt sich auf einem Tablet, einem Desktop-PC und einer Xbox gut an. Sie funktioniert sogar mit einem Mixed Reality-Headset hervorragend.A Fluent experience feels comfortable on a tablet, a desktop PC, and an Xbox—it even works great on a Mixed Reality headset. Und wenn Sie mehr Hardware hinzufügen, z. B. einen zusätzlichen Monitor für Ihren PC, wird sie für ein Fluent-Erlebnis genutzt.And when you add more hardware, like an additional monitor for your PC, a Fluent experience takes advantage of it.

Einfühlsam: Fluent-Benutzeroberflächen sind intuitiv und kraftvoll.Empathetic: Fluent experiences are intuitive and powerful

Fluent-Benutzeroberflächen passen sich dem Verhalten und der Absicht an – sie verstehen und antizipieren, was nötig ist.Fluent experiences adjust to behavior and intent—they understand and anticipate what’s needed. Sie vereinen Menschen und Ideen, egal ob diese sich auf gegenüberliegenden Seiten der Erde befinden oder direkt nebeneinander stehen.They unite people and ideas, whether they’re on opposite sides of the globe or standing right next to each other.

Wunderschön: Fluent-Benutzeroberflächen sind einnehmend und immersiv.Beautiful: Fluent experiences are engaging and immersive

Durch das Einbeziehen von Elementen der physischen Welt erschließt sich eine Fluent-Benutzeroberfläche etwas Grundsätzliches.By incorporating elements of the physical world, a Fluent experience taps into something fundamental. Sie nutzt Licht, Schatten, Bewegung, Tiefe und Textur, um Informationen intuitiv und instinktiv zu organisieren.It uses light, shadow, motion, depth, and texture to organize information in a way that feels intuitive and instinctual.

Umsetzung von Fluent Design für Ihre App mit UWPApplying Fluent Design to your app with UWP

Fluent Design-Logo

In unseren Entwurfsrichtlinien wird beschrieben, wie Sie Fluent Design-Prinzipien auf Apps anwenden.Our design guidelines explain how to apply Fluent Design principles to apps. Welche Art von Apps?What type of apps? Viele unserer Richtlinien können zwar auf jede beliebige Plattform angewendet werden, aber wir haben die Universelle Windows-Plattform (UWP) zur Unterstützung von Fluent Design erstellt.While many of our guidelines can be applied to any platform, we created UWP (the Universal Windows Platform) to support Fluent Design.

Fluent Design-Features sind in UWP integriert.Fluent Design features are built into UWP. Einige dieser Funktionen – z. B. effektive Pixel und das universelle Eingabesystem – arbeiten automatisch.Some of these features—such as effective pixels and the universal input system—are automatic. Sie müssen keinen zusätzlichen Code schreiben, um sie zu nutzen.You don't have to write any extra code to take advantage of them. Andere Funktionen, z. B. Acryl, sind optional. Sie nehmen sie in Ihre Anwendung auf, indem Sie Code schreiben.Other features, like acrylic, are optional; you add them to your app by writing code to include them.

Wir bringen UWP-Steuerelemente auf den Desktop, damit Sie das Aussehen, Verhalten und die Funktionalität Ihrer vorhandenen WPF- oder Windows-Anwendungen mit Fluent Design-Features verbessern können.We're bringing UWP controls to the desktop so that you can enhance the look, feel, and functionality of your existing WPF or Windows applications with Fluent Design features. Weitere Informationen finden Sie unter Hosten von UWP-Steuerelementen in WPF- und Windows Forms-Anwendungen.To learn more, see Host UWP controls in WPF and Windows Forms applications.

Zusätzlich zu einer Entwurfsanleitung wird in unseren Fluent Design-Artikeln auch beschrieben, wie Sie den Code für Ihre Entwürfe schreiben.In addition to design guidance, our Fluent Design articles also show you how to write the code that makes your designs happen. Für UWP wird XAML verwendet. Dies ist eine auf Markup basierende Sprache, mit der die Erstellung von Benutzeroberflächen vereinfacht wird.UWP uses XAML, a markup-based language that makes it easier to create user interfaces. Beispiel:Here's an example:

<Grid BorderBrush="Blue" BorderThickness="4">
    <TextBox Text="Design with XAML" Margin="20" Padding="16,24"/>
</Grid>

Falls die UWP-Entwicklung neu für Sie ist, helfen Ihnen die Informationen auf unserer Seite mit den ersten Schritte für UWP weiter.If you're new to UWP development, check out our Get started with UWP page.

Finden einer natürlichen FormFind a natural fit

Wie gestaltet man eine App auf einer Vielzahl von Geräten natürlich?How do you make an app feel natural on a variety of devices? Indem sie sich so anfühlt, als wäre sie für jedes einzelne Gerät entwickelt worden.By making it feel as though it were designed with each specific device in mind. Ein UI-Layout, das sich an verschiedene Bildschirmgrößen anpasst (ohne vergeudeten Platz oder Überladung), schafft ein natürliches Erlebnis – als ob es für dieses Gerät entwickelt wurde.A UI layout that adapts to different screen sizes so there's no wasted space (but no crowding either) makes an experience feel natural, as though it were designed for that device.

FPO-Bild

Design der richtigen BreakpointsDesign for the right breakpoints

Anstatt das Design für jede einzelne Bildschirmgröße anzupassen, kann die Konzentration auf einige wenige aber wichtige Größen („Breakpoints”) Ihre Designs und Ihren Code stark vereinfachen und Ihre App gleichzeitig auf kleinen und großen Bildschirmen großartig darstellen.Instead of designing for every individual screen size, focusing on a few key widths (also called "breakpoints") can greatly simplify your designs and code while still making your app look great on small to large screens.

Mehr über Bildschirmgrößen und BreakpointsLearn about screen sizes and breakpoints

FPO-Bild

Erstellen eines dynamischen LayoutsCreate a responsive layout

Damit eine App natürlich wirkt, sollte sich das Layout verschiedenen Bildschirmgrößen und Geräten anpassen.For an app to feel natural, it should adapt its layout to different screen sizes and devices. In XAML können Sie automatische Größenanpassung, Layoutpanel, visuelle Zustände und sogar getrennte UI-Definitionen verwenden, um eine reaktionsfähige Benutzeroberfläche zu erstellen.You can use automatic sizing, layout panels, visual states, and even separate UI definitions in XAML to create a responsive UI.

Weitere Informationen zu dynamischem DesignLearn about responsive design

FPO-Bild

Design für ein GerätespektrumDesign for a spectrum of devices

UWP-Apps können auf einer Vielzahl von Windows-basierten Geräten ausgeführt werden.UWP apps can run on a wide variety of Windows-powered devices. Es ist hilfreich zu wissen, welche Geräte verfügbar sind, wofür sie gemacht sind und wie Benutzer mit ihnen interagieren.It's helpful to understand which devices are available, what they're made for, and how users interact with them.

Mehr über UWP-GeräteLearn about UWP devices

FPO-Bild

Optimierung für die passende EingabeOptimize for the right input

UWP-Apps unterstützen automatisch gängige Maus-, Tastatur-, Stift- und Touch-Interaktionen.UWP apps automatically support common mouse, keyboard, pen, and touch interactions. Sie brauchen sich nicht eigens darum zu kümmern.There's nothing extra you have to do. Aber wenn Sie möchten, können Sie Ihre Apps um optimierte Unterstützung für bestimmte Eingabemöglichkeiten erweitern (z. B. Stift und Surface Dial).But, if you'd like to, you can enhance your app with optimized support for specific inputs, like pen and the Surface Dial.

Mehr über Eingaben und InteraktionenLearn about inputs and interactions

Sicherstellen der IntuitivitätMake it intuitive

Eine Benutzeroberfläche fühlt sich intuitiv an, wenn sie sich so verhält, wie der Benutzer es erwartet.An experience feels intuitive when it behaves the way the user expects it to. Durch die Verwendung etablierter Steuerelemente und Muster und die Nutzung der Plattformunterstützung für die Barrierefreiheit und Globalisierung schaffen Sie eine reibungslose Benutzeroberfläche, mit der Benutzer produktiver sein können.By using established controls and patterns and taking advantage of platform support for accessibility and globalization, you create an effortless experience that helps users be more productive.

Beim Einfühlungsvermögen geht es darum, das Richtige zur richtigen Zeit zu tun.Demonstrating empathy is about doing the right thing at the right time.

Für Fluent-Benutzeroberflächen werden Steuerelemente und Muster konsistent eingesetzt, damit sie sich so verhalten, wie es der Benutzer erwartet.Fluent experiences use controls and patterns consistently, so they behave in ways the user has learned to expect. Fluent-Benutzeroberflächen sind für Menschen mit einem breiten Spektrum an körperlichen Fähigkeiten zugänglich und umfassen Globalisierungsfunktionen für Menschen auf der ganzen Welt.Fluent experiences are accessible to people with a wide range of physical abilities, and incorporate globalization features so people around the world can use them.

FPO-Bild

Bereitstellen der richtigen NavigationProvide the right navigation

Sorgen Sie mit der richtigen App-Struktur und den entsprechenden Navigationskomponenten für eine angenehme Benutzererfahrung.Create an effortless experience by using the right app structure and navigation components.

Weitere Informationen zur NavigationLearn about navigation

FPO-Bild

Interaktiv seinBe interactive

Mithilfe von Schaltflächen, Befehlsleisten, Tastenkombinationen und Kontextmenüs können Benutzer mit Ihrer App interagieren. Dabei handelt es sich um die Tools, die einer statischen Benutzeroberfläche Dynamik verleihen.Buttons, command bars, keyboard shortcuts, and context menus enable users to interact with your app; they're the tools that change a static experience into something dynamic.

Weitere Informationen zu BefehlenLearn about commanding

FPO-Bild

Das passende Steuerelement für eine AufgabeUse the right control for the job

Steuerelemente sind die Bausteine der Benutzeroberfläche. Mit dem richtigen Steuerelement können Sie eine Benutzeroberfläche erstellen, die sich so verhält, wie es die Benutzer erwarten.Controls are the building blocks of the user interface; using the right control helps you create a user interface that behaves the way users expect it to. UWP bietet mehr als 45 Steuerelemente – von einfachen Schaltflächen bis hin zu leistungsstarken Datensteuerelementen.UWP provides more than 45 controls, ranging from simple buttons to powerful data controls.

Mehr über UWP-SteuerelementeLearn about UWP controls

Inklusiv-Bild

Inklusiv sein Eine gut gestaltete App ist für Menschen mit Behinderungen zugänglich.Be inclusive A well-designed app is accessible to people with disabilities. Mit zusätzlichem Code können Sie Ihre Apps mit anderen Menschen auf der ganzen Welt teilen.With some extra coding, you can share your app with people around the world.

Mehr über BenutzerfreundlichkeitLearn about Usability

Gestalten auf ansprechende und immersive WeiseBe engaging and immersive

Bei Fluent Design geht es nicht um auffällige Effekte.Fluent Design isn't about flashy effects. Es werden physikalische Effekte genutzt, die das Benutzererlebnis wirklich verbessern. Hierdurch werden Benutzeroberflächen emuliert, die unser Gehirn effizient verarbeiten kann.It incorporates physical effects that truly enhance the user experience, because they emulate experiences that our brains are programmed to process efficiently.

Verwenden von LichtUse light

Licht kann unsere Aufmerksamkeit auf sich ziehen.Light has a way of drawing our attention. Es schafft Atmosphäre und Raumgefühl und ist ein praktisches Werkzeug, um Informationen zu beleuchten.It creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Bringen Sie Licht in Ihre UWP-App:Add light to your UWP app:

FPO-Bild

Reveal HighlightReveal highlight

Reveal highlight hebt interaktive Elemente mit Lichteffekten hervor. Mithilfe von Lichteffekten werden die Elemente hervorgehoben, mit denen der Benutzer interagieren kann, und dabei verborgene Ränder angezeigt.Reveal highlight uses light to make interactive elements stand out. Light illuminates the elements the user can interact with, revealing hidden borders. „Reveal“ ist bei einigen Steuerelementen, wie z. B. der Listen- und der Rasteransicht, automatisch aktiviert.Reveal is automatically enabled on some controls, such as list view and grid view. Zur Aktivierung für andere Steuerelemente können Sie unsere vordefinierten Reveal-Highlight-Stile verwenden.You can enable it on other controls by applying our predefined Reveal highlight styles.

FPO-Bild

Reveal FocusReveal focus

Reveal Focus lenkt mit Lichteffekten die Aufmerksamkeit auf das Element, das aktuell den Eingabefokus hat.Reveal focus uses light to call attention to the element that currently has input focus.

Schaffen Sie ein Gefühl von TiefeCreate a sense of depth

Wir leben in einer dreidimensionalen Welt.We live in a three-dimensional world. Durch die gezielte Integration von Tiefe in die Benutzeroberfläche verwandeln wir eine flache, 2D-Schnittstelle in eine Oberfläche, auf der Informationen und Konzepte durch eine visuelle Hierarchie effizient präsentiert werden.By purposefully incorporating depth into the UI, we transform a flat, 2-D interface into something more—something that efficiently presents information and concepts by creating a visual hierarchy. Es wird neu erfunden, wie sich die Dinge in einer mehrschichtigen, physikalischen Umgebung zueinander verhalten.It reinvents how things relate to each other within a layered, physical environment

Bringen Sie Tiefe in Ihre UWP-App:Add depth to your UWP app:

FPO-Bild

ParallaxParallax

Parallax erzeugt eine Tiefenillusion, indem die Bewegung von Gegenständen im Vordergrund schneller als die Bewegung von Gegenständen im Hintergrund erscheint.Parallax creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

Integrieren von BewegungIncorporate motion

Stellen Sie sich Motion-Design wie einen Film vor.Think of motion design like a movie. Nahtlose Übergänge halten Sie auf die Geschichte konzentriert und erwecken Erlebnisse zum Leben.Seamless transitions keep you focused on the story, and bring experiences to life. Wir können dieses Gefühl in unsere Entwürfe einbringen und Menschen quasi filmisch leicht von einer Aufgabe zur nächsten führen.We can invite those feelings into our designs, leading people from one task to the next with cinematic ease.

Bringen Sie Bewegung in Ihre UWP-App:Add motion to your UWP app:

Kontinuitäts-GIF

Verbundene AnimationenConnected animations

Verbundene Animationen helfen dem Benutzer, den Kontext beizubehalten, indem ein nahtloser Übergang zwischen den Szenen hergestellt wird.Connected animations help the user maintain context by creating a seamless transition between scenes.

Verwenden Sie das richtige MaterialBuild it with the right material

Die Dinge, die uns in der realen Welt umgeben, sind sinnlich und belebend.The things that surround us in the real world are sensory and invigorating. Sie können sich biegen, strecken, prallen, zerspringen und gleiten.They bend, stretch, bounce, shatter, and glide. Diese Materialqualitäten übersetzen sich in digitale Umgebungen, die bewirken, dass Menschen unsere Entwürfe berühren möchten.Those material qualities translate to digital environments, making people want to reach out and touch our designs.

Bringen Sie Material in Ihre UWP-App:Add material to your UWP app:

FPO-Bild

AcrylicAcrylic

Acrylic ist ein transparentes Material, das dem Benutzer Ebenen von Inhalten anzeigt und eine Hierarchie von Oberflächenelementen aufbaut.Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

Design-Toolkits und CodebeispieleDesign toolkits and code samples

Sie möchten Ihre eigenen Apps mit Fluent Design erstellen?Want to get started creating your own apps with Fluent Design? Unsere Toolkits für Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer und Sketch dienen Ihnen als Hilfe bei Ihrer Entwurfsarbeit, und mit unseren Beispielen können Sie schneller entwickeln.Our toolkits for Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer, and Sketch will help jumpstart your designs, and our samples will help get you coding faster.

FPO-Bild

Seite zu Design-Toolkits und BeispielenDesign toolkits and samples page

Schauen Sie sich unsere Seite zu Design-Toolkits und Beispielen an.Check out our Design toolkits and samples page