Das Fluent Design System für Windows-app-creatorsThe Fluent Design System for Windows app creators

Fluent Design-header

EinführungIntroduction

Das Fluent Design System ist unser System zur Erstellung adaptiver, empathischer und schöner Benutzeroberflächen.The Fluent Design System is our system for creating adaptive, empathetic, and beautiful user interfaces.

PrinzipienPrinciples

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

Fluent-Erlebnisse passen sich an die Umgebung an.Fluent experiences adapt to the environment. Ein Fluent-Erlebnis fühlt sich auf einem Tablet, desktop-PCs und einer Xbox – es funktioniert sogar hervorragend auf einem Mixed Reality-Kopfhörer.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, wie z. B. einen zusätzlichen Monitor für Ihren PC, nutzt ein Fluent-Erlebnis diese Vorteile.And when you add more hardware, like an additional monitor for your PC, a Fluent experience takes advantage of it.

Empathisch: Fluent-Erlebnisse sind intuitiv und kraftvoll.Empathetic: Fluent experiences are intuitive and powerful

Fluent-Erlebnisse 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 sie sich auf gegenüberliegenden Seiten der Welt 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-Erlebnisse sind einnehmend und immersiv.Beautiful: Fluent experiences are engaging and immersive

Durch das Einbeziehen von Elementen der physischen Welt erschließt sich ein Fluent-Erlebniss etwas Grundsätzliches.By incorporating elements of the physical world, a Fluent experience taps into something fundamental. Es 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 des Fluent Designs für Ihre app mit UWPApplying Fluent Design to your app with UWP

Fluent Design-logo

Unseren Designrichtlinien wird erläutert, wie Fluent-Entwurfsprinzipien auf apps anwenden.Our design guidelines explain how to apply Fluent Design principles to apps. Welche Art von apps?What type of apps? Obwohl viele unserer Richtlinien auf jeder Plattform angewendet werden können, haben wir Windows-Plattform (der universellen) zur Unterstützung der 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 – wie 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, wie 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 hierzu finden Sie in der Host-UWP-Steuerelemente in WPF- oder Windows Forms-Anwendung.To learn more, see Host UWP controls in WPF and Windows Forms applications.

Zusätzlich zur designanleitungen zeigen unserer Fluent Design-Artikel auch Ihnen, wie Sie Code schreiben, der Ihre Entwürfe passieren erheblich vereinfacht.In addition to design guidance, our Fluent Design articles also show you how to write the code that makes your designs happen. UWP verwendet XAML, eine Markup-basierte Sprache, die zum Erstellen von Benutzeroberflächen erleichtert.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="24,16"/>
</Grid>

Wenn Sie die Entwicklung für UWP sind, sehen Sie sich unsere Erste Schritte mit UWP-Seite.If you're new to UWP development, check out our Get started with UWP page.

Eine natürliche Form findenFind 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.

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Design for the right breakpoints

    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.

    [Learn about screen sizes and breakpoints](/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design)
:::column-end:::

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Create a responsive layout

    For an app to feel natural, it should adapt its layout to different screen sizes and devices. You can use automatic sizing, layout panels, visual states, and even separate UI definitions in XAML to create a responsive UI.

    [Learn about responsive design](/windows/uwp/design/layout/responsive-design)
:::column-end:::

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Design for a spectrum of devices

    UWP apps can run on a wide variety of Windows-powered devices. It's helpful to understand which devices are available, what they're made for, and how users interact with them.

    [Learn about UWP devices](/windows/uwp/design/devices/)

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Optimize for the right input

    UWP apps automatically support common mouse, keyboard, pen, and touch interactions&mdash;there's nothing extra you have to do. But you can enhance your app with optimized support for specific inputs, like pen and the Surface Dial.

    [Learn about inputs and interactions](/windows/uwp/design/input/input-primer)

:::row-end:::

Stellen sie intuitivMake it intuitive

Ein Erlebnis fühlt sich intuitiv, wenn es sich um die Art und Weise 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 Zugänglichkeit und Globalisierung schaffen Sie eine reibungsloses Erlebnis, mit dem die Benutzer produktiver sind.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.

Empathie bedeutet, das Richtige zur richtigen Zeit zu tun.Demonstrating empathy is about doing the right thing at the right time.

Fluent-Erlebnisse verwenden Steuerelement und Muster konsequent, sodass sie sich so verhalten, wie es der Benutzer erwartet hat.Fluent experiences use controls and patterns consistently, so they behave in ways the user has learned to expect. Fluent-Erlebnisse 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.

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Provide the right navigation

    Create an effortless experience by using the right app structure and navigation components.

    [Learn about navigation](/windows/uwp/design/basics/navigation-basics/)

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Be interactive

    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.

    [Learn about commanding](/windows/uwp/design/basics/commanding-basics/)

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Use the right control for the job

    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 provides more than 45 controls,ranging from simple buttons to powerful data controls.

    [Learn about UWP controls](/windows/uwp/design/controls-and-patterns/)

:::row-end:::

:::row::: :::column::: inclusive image :::column-end::: :::column span="2"::: Be inclusive A well-design app is accessible to people with disabilities. With some extra coding, you can share your app with people around the world.

    [Learn about Usability](/windows/uwp/design/usability/)

:::row-end:::

Gestalten Sie ansprechend und immersivBe engaging and immersive

Beim Fluent Design geht es nicht um auffällige Effekte.Fluent Design isn't about flashy effects. Es beinhaltet physikalische Effekte, die das Benutzererlebnis wirklich verbessern. Es emuliert Erlebnisse, 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.

Verwendung 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:

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Reveal highlight

    [Reveal highlight](../style/reveal.md) uses light to make interactive elements stand out. Light illuminates the elements the user can interact with, revealing hidden borders. Reveal is automatically enabled on some controls, such as list view and grid view. You can enable it on other controls by applying our predefined Reveal highlight styles.

:::row-end:::

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Reveal focus

    [Reveal focus](../style/reveal-focus.md) uses light to call attention to the element that currently has input focus.

:::row-end:::

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 das UI verwandeln wir eine flache, 2D-Schnittstelle in etwas, das Informationen und Konzepte durch eine visuelle Hierarchie effizient präsentiert.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 erfindet neu, wie sich die Dinge in einer geschichteten, 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:

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Parallax

    [Parallax](../motion/parallax.md) creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

:::row-end:::

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 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:

:::row::: :::column::: continuity gif :::column-end::: :::column span="2"::: Connected animations

    [Connected animations](../motion/connected-animation.md) help the user maintain context by creating a seamless transition between scenes.

:::row-end:::

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 biegen, strecken, prallen, zerspringen und gleiten.They bend, stretch, bounce, shatter, and glide. Diese materiellen Qualitäten übersetzen sich in digitale Umgebungen, die Menschen dazu bringen, unsere Entwürfe zu berühren und zu erreichen.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:

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Acrylic

    [Acrylic](../style/acrylic.md) is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

:::row-end:::

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 helfen Ihnen, Ihre Entwürfe zu beschleunigen. 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.

:::row::: :::column::: fpo image :::column-end::: :::column span="2"::: Design toolkits and samples page

    Check out our [Design toolkits and samples page](/windows/uwp/design/downloads/)

:::row-end:::