Einführung in DoppelbildschirmgeräteIntroduction to dual-screen devices

Dual-Screen-Geräte sind tragbare Geräte mit mehreren Positionierungsmöglichkeiten mit zwei symmetrischen Bildschirmen, die auf einzigartige Weise zusammenarbeiten, um Produktivität mit einem flexiblen Formfaktor bereitzustellen.Dual-screen devices are portable multi-posture devices with two symmetric screens that work together in unique ways to provide productivity in a flexible form factor.

Mit Dual-Screen-Geräten wie dem Surface Duo von Microsoft können Sie unterwegs Dinge schneller erledigen als je zuvor: Erstellen Sie Notizen auf einem Bildschirm und überprüfen Sie das vollständige Projektangebot auf dem anderen, während Sie unterwegs sind, oder setzen Sie sich an einen Tisch, um eine fundierte E-Mail mit einer Software- oder Hardwaretastatur zu schreiben, während Sie auf Ihr Mittagessen warten, und sehen Sie sich anschließend ein Video an, surfen Sie im Internet oder lesen Sie ein Buch, wenn Sie wieder zurück im Alltag sind.With dual-screen devices such as the Microsoft Surface Duo, people can get things done on-the-go faster than ever: take notes on one screen and review the full project proposal on the other while in transit; sit down at a table to write a thoughtful email using a software or hardware keyboard while waiting for lunch; and then watch a video, browse the web, or read a book as you get back to your life.

Ein Dual-Screen-Gerät

Obwohl Dual-Screen-Geräte neue Möglichkeiten für Ihre Apps bieten, funktionieren Ihre vorhandenen Apps auf den Geräten weiterhin wie erwartet, und Sie profitieren von Verbesserungen, die Sie ohne jeglichen Arbeitsaufwand erhalten.Although dual-screen devices unlock new possibilities for your apps, your existing apps will work as expected on the devices, and there are improvements that you will get without doing any work. In dieser Dokumentation werden diese Vorteile aufgezeigt, während gleichzeitig neue Möglichkeiten zum Verbessern Ihrer App-Erfahrung aufgezeigt werden, indem Sie Ihre App für die Dual-Screen-Möglichkeiten des Geräts befähigen.This documentation will point those out, while also showing new ways to enhance your app experience by making your app aware of the dual-screen nature of the device.

Zwar gibt es zurzeit verschiedene Dual-Screen-Geräte auf dem Markt, und es werden immer mehr, aber wir glauben, dass es einen gemeinsamen Weg geben kann, um an das Design von Apps für diese Geräte heranzugehen.While there are different dual-screen devices now in the market and more coming, we believe there can be a common way of approaching the design of apps for these devices. Wir hoffen, dass dadurch Ihre App mehr Geräte erreichen kann, ohne sie für jedes Gerät von Grund auf neu entwerfen zu müssen.We hope this will help your app reach more devices without re-designing from scratch for every device.

In diesem Artikel werden allgemeine Designmuster und -konzepte erläutert, die unabhängig vom Zielbetriebssystem oder der verwendeten Entwicklungssprache anwendbar sind.In this article, we talk about common design patterns and concepts that are applicable regardless of the operating system you target or the development language you use. Plattformspezifische Informationen zum Entwickeln von Apps für Dual-Screen-Geräte finden Sie unter Kotlin und Java, React Native, Xamarin, Unity-Spieleentwicklung, Webtechnologien und Windows.For platform specific information about developing apps for dual-screen devices, see Kotlin and Java, React Native, Xamarin, Unity game development, Web technologies, or Windows.

Die Technologie steckt noch in der Entwicklung, und unsere Anleitungen können sich mit dem Fortschritt ändern.The technology is still evolving and our guidance here may change as we progress. Daher freuen wir uns über Ihr Feedback.Your feedback is welcome.

Dual-Screen – ÜbersichtDual-screen overview

Dual-Screen-Geräte gibt es in einer Reihe verschiedener Hardware- und Branchendesigns.Dual-screen devices can come in a range of hardware and industrial design variations. Das kürzlich freigegebene Surface Duo soll, zusammen mit anderen geplanten Geräten, dabei helfen, die Kategorie zu definieren, doch es mag andere Geräte geben, die über größere Anzeigen oder andere Scharnierdesigns verfügen.The recently released Surface Duo, along with other planned devices, are intended to help define the category, but other devices may come with larger displays or varying hinge designs. Beachten Sie beim Entwerfen Ihrer Apps, dass Sie vermeiden sollten, sich beim Entwurf auf die Spezifikationen bestimmter Geräte festzulegen, die heute verfügbar sind.As you design your apps, keep in mind that you should avoid designing to the specifications of any specific devices available today.

Alle Dual-Screen-Geräte können gefaltet, gekippt und gedreht werden.All dual-screen devices can fold, flip, and rotate. Beide Bildschirme können als Anzeigen verwendet werden, oder ein Bildschirm kann als Tastatur fungieren.Both screens can be used as displays, or one screen may act as a keyboard. Die unterschiedlichen Formfaktoren unterstützen eine Vielzahl von Aktivitäten und ermöglichen dem Benutzer, das Gerät an die jeweilige Situation anzupassen.The different form factors support a wide variety of activities and allow the user to fit the device to their situation. Indem Sie die verschiedenen möglichen Positionen mit ihrer App nutzen, können Sie Ihren Benutzern helfen, mehr zu erreichen.By taking advantage of the various postures with your app, you will help your users achieve more.

Übersicht über Dual-Screen-Positionen

Wenn der Benutzer eine App startet, wird ihr Hauptfenster maximiert geöffnet, und es nimmt die vollständige Breite und Höhe eines einzelnen Bildschirms ein.When the user launches an app, its core window opens maximized and occupies the full width and height of a single screen. Benutzer können auf diese Weise mehrere Anwendungen gleichzeitig geöffnet haben, sodass sie Apps nebeneinander verwenden und intuitiv mit Drag & Drop bedienen können.Users can have multiple applications open at once this way, allowing for side-by-side use of apps and intuitive drag-and-drop scenarios.

Eine App auf jedem Bildschirm

Eine App kann auch über beide Bildschirme hinweg angezeigt werden. Dies wird als übergreifendes Layout bezeichnet.An app can also appear across both screens, which is known as a spanned layout. Standardmäßig verhält sich die App so, als ob Sie auf einem größeren Bildschirm angezeigt wird.By default, the app will act as if it is being displayed across a larger screen. Sie können Ihre vorhandenen App-Layouts so ändern, dass sie die Naht zwischen den beiden Bildschirmen einbetten, oder Sie können noch weitergehen und ihre App mithilfe spezieller Layoutsteuerelemente entwerfen, die speziell darauf ausgerichtet sind, Dual-Screen-Geräte in vollem Umfang zu nutzen.You can modify your existing app layouts to accommodate the seam between the two screens, or you can go further and design your app using layout controls specifically created to take full advantage of dual-screen devices. Dies wird später in diesem Artikel noch genauer behandelt.This is discussed in more detail later in this article.

Eine beide Bildschirme übergreifende App

Einbeziehen und Verbessern vorhandener FunktionenEmbracing and improving existing features

Es gibt viele Funktionen, die Sie vielleicht bereits mit ihren Apps nutzen, die auch weiterhin mit geringem bis gar keinem Aufwand auf von Microsoft unterstützten Dual-Screen-Geräten funktionieren und auch weiterhin eine gute App-Erfahrung bereitstellen werden.There are many features that you may already take advantage of with your apps that will continue to work with little-to-no effort on dual-screen devices supported by Microsoft and will continue to provide a good app experience. Wir behandeln diese Aspekte, bevor wir erläutern, wie Sie Ihre App speziell für Dual-Screen-Szenarien entwerfen.We will cover those before discussing how to design your app specifically for dual-screen scenarios.

Dynamische App-LayoutsResponsive app layouts

Wenn Sie Ihre App so entwerfen, dass sie dynamische Layouts verwendet, wird sie auf jedem Gerät hervorragend aussehen, unabhängig von der Bildschirmgröße und Ausrichtung des Geräts.If you design your app so that it uses responsive layouts, it will look great on every device, regardless of the device's screen size and orientation. Verwenden Sie für die Benutzeroberflächenplattform Ihrer Wahl vorhandene Layoutmethoden, die automatisch so skalieren, dass der Bildschirm ausgefüllt wird.Use existing layout techniques for the UI platform of your choice that automatically scale to fill the screen. Wenn Sie über Bildschirmelemente verfügen, die von der Größe und dem Seitenverhältnis abhängen, verwenden Sie die von ihrer Benutzeroberflächenplattform bereitgestellten APIs, um Ihr Layout anzupassen, wenn sich die Größe oder das Seitenverhältnis ändert.If you have screen elements that depend on size and aspect ratio, use the APIs provided by your UI platform to adjust your layout when the size or aspect ratio changes.

Da Ihre App auf vielen verschiedenen Geräten ausgeführt wird, haben Sie sie wahrscheinlich bereits so entwickelt, dass sie verschiedene Bildschirm- und Fenstergrößen verarbeiten kann und so weiterhin nahtlos funktioniert.Because your app runs on many different devices, you've probably already developed it to handle various screen and window sizes, and it should continue to work seamlessly. Denken Sie jedoch daran, dass Sie möglicherweise neue Bildschirmgrößen und Seitenverhältnisse berücksichtigen müssen, die für PCs und mobile Geräte nicht typisch sind, z. B. Hochformat (höhere Ansicht), Querformat (breitere Ansicht), Dual-Hochformat (doppelte Breite des Hochformats) und Dual-Querformat (doppelte Höhe des Querformats).However, keep in mind that you might need to account for new screen sizes and aspect ratios that are not typical for PCs and mobile devices, such as portrait (taller view), landscape (wider view), dual-portrait (double the width of portrait), and dual-landscape (double the height of landscape).

Berücksichtigen aller GeräteausrichtungenConsider all device orientations

Wir gehen davon aus, dass Benutzer bei der Verwendung von Dual-Screen-Geräten auf die für sie geeignete Weise kreativ sind.We expect users to be creative in using dual-screen devices in the manner that works for them. Dies bedeutet, dass Ihre Anwendung nicht immer in der typischen Ausrichtung verwendet wir, also im Hochformat für Android oder im Querformat für Windows.This means your application might not always be used in the typical orientation; portrait for Android, or landscape for Windows. Erwägen Sie die Unterstützung aller Ausrichtungen und Bildschirmkonfigurationen.Consider supporting all orientations and screen configurations. Wenn Ihre App beispielsweise in erster Linie für Hochformate entworfen wurde, aber umfangreiche Texteingaben unterstützt, könnte es wahrscheinlicher sein, dass Benutzer sie auf einem Dual-Screen-Geräte eher im Querformat verwenden, mit der Tastatur auf dem unteren Bildschirm.For example, if your app is designed primarily for portrait orientation but supports a lot of text entry, users might be more likely to use it in landscape orientation on a dual-screen device, with the keyboard on the bottom screen.

Mit Dual-Screen-Layouts können Sie eine bessere Umgebung für Multitasking bereitstellen.Dual-screen layouts can provide a better environment for multi-tasking. Sie wissen nicht immer, in welcher Position der Benutzer das Gerät halten wird. Die Kenntnis der möglichen Positionen gestattet es Ihnen jedoch, Ihre App für die Positionen zu optimieren, die für Ihre App am sinnvollsten sind.You won't always know in what posture the user is going to hold the device; but knowing the potential postures lets you optimize your app for the postures that make the most sense for your app.

Unsere Studien zeigen, dass Benutzer am liebsten auf einer flachen Oberfläche tippen oder schreiben.Our studies show that users are more comfortable typing or writing on a flat surface. Wenn Ihre App stark eingabeorientiert ist, wie bei einer Notizen-App, können Sie sie so optimieren, dass Sie im Querformatlayout verwendet wird (sofern dies nicht bereits der Fall ist).If your app is heavily input oriented, like a note taking app, you can optimize it to be used in a landscape layout (if it's not already).

Multitasking auf zwei Bildschirmen

Unterstützung verschiedener EingabemöglichkeitenSupport a variety of inputs

Viele Geräte, einschließlich der neuen Dual-Screen-Geräte, unterstützen eine Vielzahl unterschiedlicher Eingabemöglichkeiten, einschließlich Tastatureingabe, Toucheingabe und Stifteingabe.Many devices, including the new dual-screen devices, support a wide variety of inputs, including typing, touch, and pen. Die Flexibilität von Dual-Screen-Geräten ermöglicht es Benutzern, schnell zwischen Positionen und Eingabemodi zu wechseln, die ihren Aufgaben entsprechen.The flexibility of dual-screen devices lets a user quickly switch between postures and input modes to fit their task. Stellen Sie für eine großartige Benutzererfahrung sicher, dass Ihre App alle verfügbaren Eingabearten unterstützt, sodass der Benutzer die Kontrolle behält und mit Ihrer App auf die von ihm bevorzugte Weise interagieren kann.To ensure a great user experience, make sure your app supports all available input types, so the user remains in control and can interact with your app in the way they prefer.

Drag & DropDrag-and-drop

Sicherzustellen, dass Ihre App Drag & Drop unterstützt, ist eine andere Möglichkeit, um bei der Verwendung verschiedener Eingabearten eine gute Benutzererfahrung zu gewährleisten – nicht nur für Dual-Screen-Geräte, sondern auch für alle anderen Gerätetypen.Making sure your app supports drag-and-drop is another way to ensure a great user experience when using different types of input, not only for dual-screen devices, but also for all other device types.

Drag & Drop ist eine Funktion, die Sie bereits nutzen können.Drag-and-drop is a feature you can already take advantage of. Ein Dual-Screen-Gerät, auf dem Apps nebeneinander ausgeführt werden, eignet sich jedoch besonders für Drag & Drop-Interaktionen, um eine großartige App-Erfahrung zu gewährleisten.However, a dual-screen device that runs apps side-by-side especially lends itself to drag-and-drop interactions for a great app experience.

Um Drag & Drop in Ihrer App zu ermöglichen, stellen Sie sich Szenarien vor, in denen Benutzer Text, Links, Bilder oder erweiterte Objekte direkt in die Benutzeroberfläche der App einbringen oder daraus herausziehen können, dann:To enable drag-and-drop in your app, think of scenarios when users can directly manipulate text, links, images, or rich objects into and out of your app's experience, then:

  1. Aktivieren Sie überall, wo man ausschneiden, kopieren und einfügen kann, Drag & Drop.Anywhere you can cut, copy, and paste, enable drag-and-drop.
  2. Erwägen Sie überall, wo man Inhalte teilen kann, die Aktivierung von Drag & Drop.Anywhere you can share content, consider enabling drag-and-drop.

Mehrere Instanzen für Ihre AppMulti-instance for your app

Benutzer können den zweiten Bildschirm nutzen wollen, um unterschiedliche Inhalte derselben App anzuzeigen.Users may want to take advantage of the second screen to view different content from the same app. Um dies zu ermöglichen, erwägen Sie die Unterstützung mehrerer Instanzen, wobei mehrere Instanzen Ihrer App parallel ausgeführt werden.To enable this, consider supporting multi-instance, where multiple instances of your app run side-by-side.

Bild-im-Bild-Erfahrung für Ihre MedienPicture in picture experience for your media

Wenn Sie eine Medien-App erstellen, die davon profitieren kann, dass im Vordergrund die Videowiedergabe fortgesetzt wird, während eine andere App ausgeführt wird, sollten Sie Bild-im-Bild-Erfahrungen unterstützen.If you are creating a media app that can benefit from continuing to play video in the foreground while another app is running, consider supporting picture-in-picture experiences. Mit mehr Bildschirmfläche verschafft dies dem Benutzer die Möglichkeit zum Multitasking, indem er sich das Video ansehen und gleichzeitig eine andere Aufgabe erledigen kann.With more screen real-estate, this gives the user a chance to multi-task by watching the video and performing another task at the same time.

Überlegungen zur Dual-Screen-BenutzererfahrungDual-screen user experience considerations

Im vorherigen Abschnitt haben wir die Funktionen besprochen, die Sie in Ihrer App unterstützen können, die nicht spezifisch für Dual-Screen-Geräte sind, die aber die Benutzererfahrung verbessern können, wenn Ihre App auf einem Dual-Screen-Gerät ausgeführt wird.In the previous section we talked about features you can support in your app that are not specific to dual-screen devices, but that can improve the user experience when your app runs on a dual-screen device. Nun betrachten wir die Dinge, die Sie tun können, um nur dann eine einzigartige Benutzererfahrung bereitzustellen, wenn Ihre App auf einem Dual-Screen-Gerät ausgeführt wird.Now we'll look at things you can do to provide a unique experience only when your app runs on a dual-screen device.

Auf einem Dual-Screen-Gerät kann Ihre App auf einem einzelnen Bildschirm oder über beide Bildschirme hinweg ausgeführt werden.On a dual-screen device, your app can run on a single screen, or across both screens. Wenn eine einzelne App über zwei Bildschirme hinweg angezeigt wird, nenne wir dies übergreifend.When a single app is presented across two screens, we say it is spanned. Die Art und Weise, wie Ihre App reagiert, wenn sie sich in einem übergreifenden Zustand befindet, kann sich in hohem Maße auf die Benutzererfahrung auswirken.How your app responds to being in a spanned state can have a great impact on the user experience. Die einzigartigen Positionen, die ein Dual-Screen-Gerät ermöglicht, können nie dagewesene Verwendungsmöglichkeiten Ihrer App offenbaren.The unique postures that a dual-screen device enables may unlock unprecedented ways your app can be used. Beispielsweise eignen sich Geräte, die die Naht in der Mitte haben, gut für Produktivitätsszenarien, die von der Untergliederung von Inhalten profitieren.For example, devices that have seams down the middle lend themselves well to productivity scenarios that benefit from the compartmentalization of content.

Im Folgenden finden Sie einige Grundsätze, die Sie berücksichtigen sollten, bevor Sie entscheiden, welche spezifischen Dual-Screen-Designmethoden für Ihre APP geeignet sein könnten:Here are some principles you should take into account before deciding which specific dual-screen design techniques might be appropriate for your app:

  • Bereitstellen dauerhafter WerteProvide continuous value
    • Der übergreifende Zustand sollte die Erfahrung des Benutzers als Bestandteil des End-to-End-Flows von Aufgaben bereichern, die er mit Ihrer App ausführt.The spanned state should enrich the user's experience as part of the end-to-end flow of tasks they perform with your app. Es sollte kein angepasster Zustand sein, der nur vorübergehend wertvoll ist.It shouldn't be a custom state that is only momentarily valuable. Statt sich spezifische Bildschirme vorzustellen, denken Sie an das Gesamtbild.Rather than thinking about specific screens, think of the overall picture.
  • Nicht alles dreht sich um die übergreifende DarstellungIt isn't all about spanning
    • Apps sollten nicht nur dann großartig sein, wenn Sie übergreifend sind.Apps shouldn't be great only when spanned. Verstecken Sie keine grundlegenden Funktionalitäten im übergreifenden Zustand, sodass der Benutzer die App übergreifend anzeigen muss, um eine einfache Aufgabe ausführen zu können.Don't bury fundamental functionality in the spanned state, so the user must span our app to be able to perform a basic task.
  • Benutzer besitzen stets die KontrolleUsers are always in control
    • Um unvorhersehbare (oder potenziell beschädigende) Erfahrungen für Ihre Benutzer zu vermeiden, sollten Apps nicht automatisch in einen übergreifenden Zustand wechseln, ohne dass eine absichtliche, vom Benutzer initiierte Aktion durchgeführt wird.In order to avoid unpredictable (or potentially destructive) experiences for your users, apps shouldn't automatically enter a spanned state without an intentional, user-initiated action. Den Benutzer entscheiden lassen.Let the user decide.
  • Übergreifendes Verhalten vorhersagbar machenMake spanning predictable
    • Begreifen Sie die Absicht des Benutzers beim Verwenden des übergreifenden Zustands, und legen Sie das Design entsprechend an.Understand your user's intent to span and design for that. Stellen Sie sicher, dass das Ergebnis der übergreifenden Anordnung vorhersagbar ist und jederzeit einen Mehrwert liefert.Make sure the outcome of spanning is predictable and adds value at any given time.

Verwendung der übergreifenden Anzeige ist die Entscheidung des BenutzersSpanning is the user's choice

Benutzer erhalten die volle Kontrolle darüber, wie sie Ihre App verwenden, einschließlich der Entscheidung, wann Ihre App übergreifend angezeigt werden soll.Users are empowered to have full control over how they use your app, including when they want to span your app. Einige Apps, z. B. Taschenrechner, mögen eventuell nicht besonders gut aussehen oder in irgendeiner Weise von dieser Konfiguration profitieren, doch es bleibt die Entscheidung des Benutzers.Some apps, like calculators, may not look great or derive any benefit from this configuration, but it's still the user's choice. Möglicherweise entscheiden Sie aber auch, dass die meisten Benutzer die App nicht übergreifend verwenden werden und es in Ordnung ist, nichts zu unternehmen, um der Aktion des Benutzers Rechnung zu tragen.However, you might decide that since most users won't choose to span your app, it's okay to not do anything to accommodate the user's action.

Dieser Artikel enthält zwar verschiedene Ideen, wie Sie das Dual-Screen-Layout handhaben können, doch treffen Sie bitte eine Auswahl, die für Ihre Benutzer und Ihre App die richtige ist.While this article provides several different ideas as to how you might want to handle multi-screen layout, please make a choice that is right for your users and your app.

Berücksichtigen von Benutzerabsicht und GeräteausrichtungConsider user intent and device orientation

Wenn Sie die Erfahrung Ihrer App so gestalten, dass zwei Bildschirme verwendet werden, ist es wichtig, die Absicht Ihrer Benutzer zu erfahren, die hinter der Verwendung des übergreifenden Modus steckt, sowohl bei Dual-Querformat- als auch Dual-Hochformatkonfigurationen.When you design your app's experience to take advantage of two screens, it's important to learn about your users' intent behind spanning, in both dual-landscape and dual-portrait configurations. Zwar gäbe es noch weitere Studien durchzuführen, doch wir beginnen bereits, eine Tendenz für diese Benutzerpräferenzen zu beobachten:While there are more studies to be done, we are starting to observe a tendency for these user preferences:

  • Bei Dual-Querformat möchten Benutzer mehr Bildschirmfläche verwenden, sodass die beiden Bildschirme verwendet werden, um den Inhaltsbereich zu erweitern.In dual-landscape, users want to use more screen real-estate, so the two screens are used to expand the content area.
  • Beim Dual-Hochformat bevorzugen Benutzer Multitasking- oder Produktivitätsaktivitäten, sodass die beiden Bildschirme verwendet werden, um Inhalte zu trennen bzw. zu gruppieren.In dual-portrait, users prefer multi-tasking or productivity activities, so the two screens are used to separate and group content.

Behalten Sie dies im Hinterkopf, wenn Sie entscheiden, wie die Dual-Screen-Designmuster angewendet werden sollen.Keep this in mind when deciding how to apply the dual-screen design patterns. Ist es für den Benutzer vorteilhaft, wenn Sie das Layout und die Erfahrung Ihrer App vollständig anpassen, oder können Sie übergreifende Darstellung unterstützen, indem Sie die Steuerelement und Elemente Ihrer App einfach so anordnen, dass sie nicht durch die Naht verdeckt werden?Does the user benefit if you fully adapt your app's layout and experience, or can you support spanning by simply arranging your app's controls and elements so that they aren't obscured by the seam?

Berücksichtigen aller unterstützten LayoutsConsider all supported layouts

Beim Entwerfen Ihrer App-Erfahrung für ein Dual-Screen-Gerät gibt es vier zu berücksichtigende Layoutszenarien, abhängig davon, ob die App auf einem einzelnen Bildschirm oder übergreifend angezeigt wird, und ob die Ansicht im Standard- oder Vollbildmodus ist.There are four layout scenarios to consider when designing your app experience for a dual-screen device, depending on whether the app is on single screen or spanned, and whether the view is default or full-screen.

Unterstützte Layouts

  • Einzeln/StandardSingle-Default

    • Standardmäßig werden Apps im maximierten Zustand geöffnet und belegen einen einzelnen Bildschirm.By default, apps open in a maximized state and occupy a single screen. Bei Dual-Screen-Positionen können Benutzer zwei Apps nebeneinander ausführen, um Inhalte gleichzeitig zu vergleichen, zu nutzen oder querzuverweisen.In dual-screen postures, users can run two apps beside each other to simultaneously compare, consume, or cross-reference content.
    • Standardmäßig unterstützt.Supported by default. Wenn Ihre App darauf ausgelegt ist, verschiedene Bildschirmgrößen sowie Hochformat- und Querformatausrichtungen wie zuvor beschrieben zu verarbeiten, müssen Sie nichts weiter unternehmen.If your app was designed to handle different screen sizes and portrait and landscape orientations as described earlier, there's nothing more you need to do.
  • Übergreifend/StandardSpanned-Default

    • Wenn sich das Gerät in einer Dual-Screen-Position befindet (Dual-Hochformat oder Dual-Querformat), können Benutzer eine einzelne App auf beide Bildschirme erweitern, sodass die Inhalte mehr Platz erhalten.When the device is in a dual-screen posture (dual-portrait or dual-landscape), users can extend a single app across both screens, allowing more space for content. Der Benutzer ist dafür verantwortlich, dass die App übergreifend angezeigt wird. Es handelt sich nicht um einen Zustand, in den die App programmgesteuert wechselt.The user is responsible for spanning the app, it's not a state the app enters programmatically.
    • Unterstützung ist optional.Support is optional. Der übergreifende Modus ist nur auf Dual-Screen-Geräten möglich.Spanned mode is unique to dual-screen devices. Wenn Sie keine Änderungen an Ihrer App vornehmen, verhält sie sich so, als ob Sie auf einem großen Bildschirm angezeigt wird.If you don't make any modifications to your app, it will behave as if it is being displayed across one large screen. Sie können jedoch eine Reihe von Layoutoptimierungen implementieren, damit Ihre App die einzigartigen Funktionen von Dual-Screen-Geräten nutzt.However, you can implement a range of layout optimizations to make your app take advantage of the unique features of dual-screen devices. Dies werden später in diesem Artikel noch genauer behandelt.These are covered in more detail later in this article.
  • Einzeln/VollbildSingle-Full Screen

    • Dies ähnelt dem Standardlayout, mit dem Unterschied, dass die Systembenutzeroberfläche (Taskleiste, Infobereich, App-Leiste, App-Titel) ausgeblendet ist, um eine vollständig immersive Erfahrung zu schaffen, ideal für Spiele und Videowiedergabe.This is similar to the default layout, except the system UI (Task Bar, System Tray, App Bar, App Title) are hidden to create a fully immersive experience, ideal for games and video playback.
    • Unterstützung ist optional.Support is optional. Sie können verfügbare APIs verwenden, um Ihre App in den Vollbildmodus zu versetzen.You can use available APIs to put your app in full screen mode.
  • Übergreifend/VollbildSpanned-Full Screen

    • Sie können Ihre App programmgesteuert so erweitern, dass sie den Vollbildmodus verwendet, wenn Sie übergreifend ausgeführt wird.You can programmatically expand your app to use full screen mode when spanned. Wenn eine App, die auf einem einzelnen Bildschirm im Vollbildmodus angezeigt wird, vom Benutzer übergreifend erweitert wird, bleibt sie in der Vollbildanzeige.If an app that is displayed on a single screen in full screen mode is spanned by the user, it will remain full screen.
    • Unterstützung ist optional.Support is optional. Beachten Sie den Vorteil der Vollbildanzeige im übergreifenden Modus sowie auf einem einzelnen Bildschirm.Consider the benefit of full screen in a spanned mode as well as single screen.

Arbeiten mit der NahtHow to work with the seam

Ein übergreifendes Layout liegt vor, wenn eine einzelne App beide Bildschirme einnimmt.A spanned layout occurs when a single app is presented across two screens. Wenn eine App nicht für dieses Szenario angepasst ist, informiert das System die App standardmäßig darüber, dass sie nun eine größere Bildschirmbreite und -höhe einnimmt. Die Benutzeroberfläche der App passt sich dann selbständig an die neuen Bildschirmabmessungen an.By default, if an app is not customized for this scenario, the system notifies the app that it now occupies a greater screen width and height and the app's UI will resize itself to fit the new screen dimensions.

Wenn eine App übergreifend auf zwei Bildschirmen angezeigt wird, gibt es eine Naht – den Platz zwischen den beiden Bildschirmen.When an app is spanned across two screens, there is going to be a seam — the space between the two screens. Dies ist ein Nebenprodukt der Produktion eines Dual-Screen-Geräts.This is a byproduct of making a dual-screen device. In diesem Abschnitt werden einige der Ideen und Methoden erläutert, deren Verwendung Sie in Erwägung ziehen könnten, damit Ihre App mit der Naht funktioniert.This section talks about some of the ideas and techniques you might consider to make your app work with the seam.

Bette ich die Naht immer ein?Do I always accommodate the seam?

Abhängig von Ihrer App können einige Benutzeroberflächenelemente problemlos so verwendet werden, wie sie sind.Depending on your app, some UI may be perfectly fine to be used as is. Wenn der Benutzer den App-Inhalt so ändern kann, dass eine Verdeckung durch die Naht vermieden wird, könnten Sie sich entschließen, nichts zu unternehmen, um die Naht einzubetten.If the user can manipulate the app content to avoid obstruction by the seam, you might decide to not do any special work to accommodate the seam.

Beispielsweise kann eine Karten-App beide Bildschirme umfassen, um die Bildschirmfläche zu nutzen, aber keine Maßnahme zur Berücksichtigung der Naht ergreifen, weil der Benutzer den Karteninhalt verschieben kann, um die Naht zu vermeiden.For example, a map app may span both screens to take advantage of the screen real-estate, but not do anything to handle the seam because the user can move the map content around to avoid the seam. Dies wird später im Abschnitt Erweiterter Zeichenbereich noch genauer behandelt.This is discussed in more detail later in the Extended canvas section.

Übergreifende Karte

Die folgende Abbildung zeigt eine Rasterbenutzeroberfläche, in der der Benutzer problemlos scrollen kann, um die Naht zu vermeiden.The following image shows a grid UI that the user can easily scroll to avoid the seam. Wenn die Benutzeroberfläche jedoch nicht scrollbar ist, wie z. B. die Symbolleiste oberhalb des Rasters, sollten Sie das Ausrichten an der Begrenzung erwägen, wobei es sich um eine der Methoden handelt, die wir später noch behandeln.However, if the UI does not scroll, like the toolbar above the grid, you might consider snapping to the boundary, which is one of the techniques we address later. Wir empfehlen Ihnen, verschiedene Designideen mit Benutzern zu testen, um über die beste Option für Ihre App zu entscheiden.We suggest that you test different design ideas with users to decide on the best option for your app.

Benutzeroberfläche, die sich an natürlichen Begrenzungen ausrichtet

Vermeiden der NahtAvoiding the seam

Verschieben von Elementen auf eine SeiteMove things to one side

Da in der Mitte der beiden Bildschirme eine offensichtliche Naht vorhanden ist, können einige Benutzeroberflächenelemente – insbesondere Elemente, die innerhalb Ihres App-Layouts zentriert sind – durch die Naht verdeckt werden, wenn der Benutzer Ihre App übergreifend anzeigt.Because there is an obvious seam in the middle of the two screens, some UI—especially elements that are centered inside your app layout—could be obscured by the seam when the user spans your app. Dies verursacht keine funktionalen Probleme, und die App wird weiterhin funktionieren. Es könnte jedoch eine bessere Erfahrung bereitstellen, wenn die Benutzeroberfläche auf eine Seite des Bildschirms verschoben werden könnte.This doesn't cause any functional problems and the app will continue to work; however, it might provide a better experience if the UI were to be shifted to one side of the screen. Es ist eine gute Faustregel, zu vermeiden, dass Text oder Inhalte an der Naht angezeigt werden, da diese die Lesbarkeit und Nutzbarkeit Ihrer App beeinträchtigen kann.It's a good rule of thumb to avoid having text or content display at the seam as it may impact the legibility and usability of your app.

In der App gestartete Dialogfelder sollten auf einen der Bildschirme verschoben werden, anstatt sie auf beide Bildschirme auszudehnen, insbesondere, wenn Schaltflächen oder Aktionen vorhanden sind, die Benutzer verwenden bzw. ausführen müssen.App-launched dialogs should move to one of the screens instead of stretching across both, especially when there are buttons or actions users need to take.

Dialogfeld, das die Naht auf einem größeren Gerät vermeidet.

Ein Menü am unteren Rand sollte auf eine der beiden Seiten verschoben werden, anstatt auf beide Bildschirme erweitert zu werden.A bottom menu should be moved to one side or the other instead of stretching across both screens.

Dialogfeld, das die Naht auf dem Surface Duo vermeidet.

Vom Benutzer aufgerufene Kontextmenüs sollten die Naht als Begrenzung behandeln, insbesondere, wenn Sie in der Nähe des Bildschirmrands aufgerufen werden.User-invoked context menus should treat the seam as a boundary, especially if they are invoked close to the edge of the screen.

Menü, das die vertikale Naht vermeidet

In-App-Dropdownmenüs oder erweiterbare Container sollten ihre Erweiterungsrichtung ändern.In-app drop down menus or expandable containers should change direction of expansion.

Menü, das die horizontale Naht vermeidet

Wenn die App übergreifend angezeigt wird, verschieben Sie Benutzeroberflächenelemente in die Mitte des oberen oder linken Bildschirms anstatt in die Mitte des gesamten App-Bereichs.When the app is spanned, move UI to the center of the top or left screen instead of to the center of the entire app region.

Benutzeroberflächenelement, das die Naht vermeidet

Ausrichten an der NahtSnapping to the seam

Ausrichten am Rand der Naht mit einer geraden Anzahl von SpaltenAlign to the edge of the seam with an even number of columns

Wenn Ihre Benutzeroberfläche über ein Raster- oder tabellarisches Layout verfügt, kann es für einen Benutzer einfacher sein, Ihre App anzuzeigen und zu verwenden, wenn die vertikalen oder horizontalen Linien an der Naht ausgerichtet sind.When your UI has a grid or tabular layout, it may be easier for a user to view and use your app if the vertical or horizontal lines are aligned with the seam.

Benutzeroberfläche, die sich an der Naht ausrichtet

Verwenden Sie eine gerade Anzahl von Spalten in Ihrem Raster, insbesondere für Container, Tabellen usw., und berücksichtigen Sie Ränder im Bereich der Naht.Use an even number of columns in your grid, especially for containers, tables, etc. and account for margins towards the seam.

Benutzeroberfläche mit einer geraden Anzahl von Spalten

Darüber hinaus nutzen viele Apps Teilbenutzeroberflächen, die App-Inhalte überlagern.Moreover, many apps take advantage of partial-screen UI overlaid on top of the app content. Abhängig von der Größe kann es sein, dass die überlagernde Benutzeroberfläche stattdessen den gesamten zweiten Bildschirm einnehmen sollte.Depending on its size, you might want to have the overlaid UI take up all of the second screen instead. Dadurch kann sich die Bedienbarkeit Ihrer App verbessern und sie visuell klarer strukturiert werden.This can make your app more usable and visually cleaner. Beachten Sie, dass die überlagernde Teilbenutzeroberfläche vielleicht manchmal impliziert, dass sie reduzierbar oder temporär ist. Machen Sie sich also auch die Implikationen für die Interaktionen klar, wenn Sie dieses Verhalten ändern.Keep in mind that the overlaid partial UI may sometimes imply that it is collapsible or temporary, so be aware of the interaction implications when changing this behavior. Diese Methode könnte eher für Geräte mit kleineren Abmessungen geeignet sein.This technique might be more appropriate for smaller sized devices.

Überlagernde Benutzeroberfläche im Vergleich mit Dual-Screen-Layout mit vertikaler Naht

Überlagernde Benutzeroberfläche im Vergleich mit Dual-Screen-Layout mit horizontaler Naht

Neuanordnen von BenutzeroberflächenelementenRearranging UI elements

Verschieben zu einer der beiden Seiten der NahtMove to either side of the seam

Eine dynamische Layoutmethode, die Sie zur Optimierung für Dual-Screen-Geräte verwenden können, ist die Neuanordnung Ihrer Inhalte, wenn sich die Bildschirmausrichtung oder -größe ändert.One responsive layout technique you can use to optimize for dual-screen devices is to rearrange your content when the screen orientation or size changes. Anstatt Elemente Ihrer App willkürlich auf die beiden Bildschirme zu erweitern, können Sie sie mit besseren Gruppierungen neu anordnen, um Ihre App-Inhalte absichtsvoller anzupassen.Instead of arbitrarily stretching elements of your app across the two screens, you may rearrange them with better groupings to adapt your app content more intentionally.

Beispiel für neu angeordnete Benutzeroberflächenelemente.

Maskieren und AufteilenMasking and splitting

Es gibt zwei Möglichkeiten, wie die Software die Naht behandeln kann.There are two ways the seam can be handled by the software. Eine besteht im Maskieren, die andere im Aufteilen.One is to mask, the other is to split.

Ein übergreifendes Bild, das Maskierung verwendet, im Vergleich mit der Verwendung der Aufteilung

Die _Maskierung_smethode rendert das Bild hinter der Naht.The mask technique renders the image behind the seam. Wenn ein Bild teilweise verdeckt ist, ergänzt unser Gehirn ganz natürlich die „nicht sichtbaren“ Teile.When an image is partially obstructed, our brains naturally connect the "unseen" parts. Dieses Verfahren eignet sich in der Regel besser für Medien (Video, Fotos usw.) sowie für Szenarien mit Zeichenbereichen, in denen das Beibehalten der Kontinuität des Bilds wichtiger ist, als sicherzustellen, dass der gesamte Inhalt angezeigt wird.This technique is typically better for media (video, photos, etc.) as well as for canvas-type scenarios where keeping the continuity of the image is more important than ensuring all the content is displayed.

Mit der _Aufteilung_smethode wird das Bild gerendert, indem es durchgeschnitten und auseinandergezogen wird.The split technique renders the image by cutting it and pulling it apart. Dies ist dasselbe Verhalten wie bei der Anzeige einer App über mehrere Monitore hinweg.This is the same behavior you experience when an app is displayed across multiple monitors. Dieses Verfahren eignet sich gut für Apps mit vielen Steuerelementen wie Schaltflächen, die in der Mitte der beiden Bildschirme angezeigt werden können.This technique works well for apps that have many controls such as buttons that may appear in the middle of the two screens.

Beide Möglichkeiten bieten Vorteile, je nach Typ der App, die Sie erstellen, und wir erweitern ständig unsere Kenntnisse über das beste Standardverhalten für unterschiedliche Fälle.There are benefits to each option depending on the type of app being created, and we continue to learn about the best default behavior for different cases.

Muster für Dual-Screen-AppsDual-screen app patterns

Die zuvor besprochenen Methoden dienen in erster Linie der Einbettung der Naht in einer Weise, dass die App den Benutzern weiterhin Wert bereitstellen kann.The techniques previously discussed are mainly to accommodate the seam so that the app continues to provide value to users. Mithilfe der folgenden Muster können Sei die Tatsache ausnutzen, dass zwei Bildschirme vorhanden sind.The following patterns let you take advantage of the fact there are two screens.

Hier sind 5 Dual-Screen-Muster, die Sie in Erwägung ziehen können.Here are 5 dual-screen patterns for you to consider. Dies sind nicht die einzigen Muster für Dual-Screen-Geräte, aber sie werden hier als Ausgangspunkt bereitgestellt, um Ihrer Vorstellungskraft Flügel zu verleihen.These are not the only patterns for dual-screen devices, but are provided here as a starting point for your imagination to grow.

Eine Übersicht der Dual-Screen-Muster

Erweiterter ZeichenbereichExtended canvas

Das Muster erweiterter Zeichenbereich ist zwar das einfachste Dual-Screen-Muster, aber es ist leistungsstark.The extended canvas pattern is the simplest dual-screen pattern, but it's powerful. Sie können dieses Muster in Betracht ziehen, wenn Sie einen größeren Zeichenbereich für Aufgaben wie Zeichnen benötigen, oder wenn Ihre App einen frei fließenden Zeichenbereich besitzt, in dem der Benutzer ungehindert scrollen kann, um die Naht zu vermeiden, falls wichtige Inhalte verdeckt werden.You may consider this pattern if you need a bigger canvas for a task such as drawing, or if your app has a free-flowing canvas that the user can freely scroll to avoid the seam if some important content is obscured. Dies bietet den Vorteil, dass Ihrer App mehr Bildschirmfläche zur Verfügung gestellt wird, anstatt Sie auf den einen oder anderen Bildschirm einzuschränken.This provides the benefit of giving your app more screen real-estate, rather than constricting it to one screen or another.

Dieses Muster gilt nur für den Zeichenbereichsteil der Benutzeroberfläche.This pattern only applies to the canvas portion of the UI. Möglicherweise müssen Sie trotzdem noch eine der anderen Methoden verwenden, um die Naht einzubetten, wenn sie den Nichtzeichenbereichsteil der App verdeckt.You may still need to use one of the other techniques to accommodate the seam if it will obscure the non-canvas portion of the app.

Zeichenbeispiel für erweiterte Zeichenbereichs-Benutzeroberfläche.

Tabellen- und Kartenbeispiel für erweiterte Zeichenbereichs-Benutzeroberfläche.

Hauptnutzen:Key value:

Durch das Erweitern des Zeichenbereichs können Benutzer die größere Bildschirmfläche ausnutzen, die von Dual-Screen-Geräten bereitgestellt wird.Extending the canvas allows users to take advantage of the larger screen real-estate provided by dual-screen devices.

Typen von Apps, die von diesem Muster profitieren können:Types of apps that may benefit from this pattern:

  • Karten-AppsMap apps
  • Canvas-Apps zum ZeichnenDrawing canvas apps

ListendetailList-detail

Das list-detail-Muster verfügt über einen Hauptbereich (in der Regel mit einer Listenansicht) und einen Detailbereich für Inhalte.The list-detail pattern has a main pane (usually with a list view) and a details pane for content. Wenn ein Element in der Liste ausgewählt wird, wird der Detailbereich aktualisiert.When an item in the list is selected, the details pane is updated. Dieses Muster eignet sich von Natur aus gut für Szenarien mit einem breiteren Anzeigebereich.This pattern is naturally good for when you have a wider viewing area. Es wird häufig für E-Mails und Adressbücher verwendet.It is frequently used for email and address books.

Durch die Ausnutzung der beiden getrennten Bildschirme und das Ausrichten an der natürlichen Begrenzung können Sie einen Bildschirm zum Anzeigen der Liste mit den „Elementen“ und den anderen zum Anzeigen der Details des jeweils ausgewählten Elements verwenden.Taking advantage of the two distinct screens and snapping to the natural boundary, you could use one screen to show the "items" list and the other to show details of the selected item.

Beispiel für die Listen-/Detailbenutzeroberfläche.

Beispiele für die Komplexe Listen-/Detailbenutzeroberfläche.

Wie bereits erwähnt, beginnen wir, eine Tendenz bei Benutzern festzustellen, dass sie die Verwendung der Dual-Querformatansicht bevorzugen, um die größere Bildschirmfläche nutzen zu können.As mentioned previously, we are starting to observe a tendency of users to prefer using the dual-landscape view to utilize larger screen real estate. Aus diesem Grund sollten Sie vielleicht erwägen, die Listen- und Detailansicht im Dual-Hochformatmodus nebeneinander anzuzeigen, während Sie dann, wenn Sie nur die Listenansicht oder nur die Detailansicht anzeigen, diese im Dual-Querformatmodus anzeigen.Because of this, you may consider showing list and detail views side-by-side in dual-portrait mode but changing to show only the list view or only detail view in dual-landscape mode.

Listen-/Detailbenutzeroberfläche im Dual-Hochformatmodus im Vergleich zum Dual-Querformatmodus.

Hauptnutzen:Key value:

Die Trennung der Navigation bzw. des Überblicks von Details ermöglicht es Benutzern, den Inhalt eingehender zu untersuchen und gleichzeitig ihre Position innerhalb der gesamten Liste bzw. des Gefüges unverändert zu lassen.Separating navigation or overview from details allows users to drill deeper into content while staying grounded regarding their position in the overall list/aggregate.

Typen von Apps, die von diesem Muster profitieren können:Types of apps that may benefit from this pattern:

  • Apps mit Listen oder KatalogenApps that have lists or galleries
  • E-Mail-AppsMail apps
  • Zeitplanungs-AppsScheduling apps
  • Apps zum Zusammenstellen von Fotos oder BildernPhotos or image curation apps
  • Musik-Apps mit Wiedergabelisten und LieddetailsMusic apps with playlists and song details
  • Apps mit starker NavigationsstrukturApps with strong navigation structure

Zwei SeitenTwo page

Einige Apps neigen naturgemäß zu einem buchartigen Umblätterverhalten.Some apps naturally tend to a book-like paging experience. Sie können die vorhandene Begrenzung verwenden, um mehrere Elemente aus einer Sammlung, wie Seiten oder Bilder, anzuzeigen, die der Benutzer sonst vielleicht hätte einzeln betrachten müssen.You can use the natural boundary to show several items from a collection—like pages or pictures—which otherwise might have required the user to view one at a time.

In Abhängigkeit von Ihrer App können Sie sich entscheiden, ob Sie zweiseitiges Umblättern wünschen oder jeweils um eine Seite vorwärtsblättern möchten.Depending on your app, you could decide to paginate per 2 pages or advance one page at a time.

Beispiel für eine Benutzeroberfläche mit einem zweiseitigen Dokument.

Beispiel für eine Kartenbenutzeroberfläche mit zwei Seiten.

Hauptnutzen:Key value:

Wenn Sie die skeuomorphe Metapher eines Buchs nutzen, um eine Seite auf jedem Bildschirm zu präsentieren, gestaltet dies das Lesen angenehmer.Leveraging the skeuomorphic metaphor of a book to showcase one page on each screen, so it's more conducive to reading.

Typen von Apps, die von diesem Muster profitieren können:Types of apps that may benefit from this pattern:

  • Dokumentorientierte AppDocument-oriented app
  • Apps mit paginierten InhaltenApps with content that is paginated
  • Dedizierte Lese-AppsApps made for reading
  • Apps mit einem untergliederten Zeichenbereich (z. B. Notizen, Grafikboards)Apps with an itemized canvas (e.g. notes, art boards)

Duale AnsichtDual view

Zwei Bildschirme bieten die natürliche Möglichkeit, zwei Versionen desselben Inhaltstyps nebeneinander zu vergleichen bzw. gegenüberzustellen, z. B. zwei Bilder, Listen oder Dokumente.Having two screens provides a natural affordance to compare and contrast two versions of the same type of content side-by-side, like two images, lists, or documents.

Ein Beispiel für eine Benutzeroberfläche mit einem „Finde die Unterschiede“-Spiel mit nebeneinanderstehenden Bildern.

Sie kann auch verwendet werden, um dieselben Informationen gleichzeitig auf zwei unterschiedliche Arten anzuzeigen, wobei jeder Bildschirm nahtlos funktioniert, um dem Benutzer weitere Informationen bereitzustellen.It can also be used to show the same information in two different ways at the same time, with each screen working seamlessly to provide more information to the user. Beispielsweise eine Liste mit Restaurants auf einem Bildschirm und eine Karte mit den Standorten auf der anderen Seite.For example, a list of restaurants on one screen, and a map with locations on the other.

Beispiel für eine Benutzeroberfläche mit Wegbeschreibungen und einer Karte auf unterschiedlichen Bildschirmen.

Wenn Sie ein eine Erfahrung erzielen möchten, die einer dualen Ansicht ähnelt, ohne zwei spezifische Ansichten zu entwerfen, sollten Sie stattdessen mehrere Instanzen mit Ihrer App unterstützen, um die vom Betriebssystem bereitgestellte integrierte Unterstützung zu nutzen.If you want to achieve a dual view-like experience without designing two specific views, consider instead supporting multi-instance with your app to take advantage of the built-in support the OS provides. Dies kann hilfreich sein, um zwei Produkte miteinander zu vergleichen, die auf zwei Registerkarten geöffnet sind, oder in ähnlichen Szenarien.This could be useful for comparing two products opened on two tabs or other similar scenarios.

Eine Beispielbenutzeroberfläche einer dualen Ansicht, die sich auch mit mehreren Instanzen erzielen lässt.

Hauptnutzen:Key value:

Mehrere Ansichten derselben App im selben Container, was den Vergleich von Inhalten ähnlichen Typs nebeneinander ermöglicht.Having multiple views of the same app in the same container, allowing comparison of similar-type content side by side.

Typen von Apps, die von diesem Muster profitieren können:Types of apps that may benefit from this pattern:

  • Bearbeitungstools, die davon profitieren, dass Vorher/Nachher-Zustände nebeneinander angeordnet sind (z. B. Markdowncode und Vorschau).Editing tools that benefit from having before/after states side-by-side (e.g. markdown code and preview)
  • Inhalt und Kontext nebeneinander (z. B. eine Karte und eine Liste mit Restaurants).Content and context side-by-side (e.g. map and list of restaurants)
  • Apps, mit denen der Benutzer ähnliche Elemente vergleichen kann.Apps that let the user compare similar items
  • Zwei Zeichenbereiche mit koordinierten Inhalten, wobei jede Seite getrennt gehalten wird (z. B. Zeichenbereich auf der einen Seite, Erstellen von Notizen auf der anderen).Having two canvases with coordinated content but keeping each page separate (e.g. canvas on one side, note taking on the other)

BegleitbereichCompanion pane

Das Begleitbereichsmuster bietet eine großartige Gelegenheit, die Vorteile der zusätzlichen Bildschirmfläche zu nutzen, indem ansonsten ausgeblendete Oberflächen der zweiten Ebene angezeigt werden, wenn die App auf beide Bildschirme erweitert wird.The companion pane pattern is a great opportunity to take advantage of added screen real-estate by taking second-level surfaces that are otherwise hidden and exposing them when the app is spanned.

Beispiel für Begleitbereichs-Benutzeroberfläche mit Bild und Steuerelementen.

Sie können auch zwei Bildschirme nutzen, indem Sie den App-Zeichenbereich auf einem Bildschirm platzieren und den anderen zur Aufnahme von Tools verwenden, mit denen der Inhalt des Zeichenbereichs bearbeitet werden kann.You can also take advantage of two screens by placing the app canvas on one screen and using the other to hold tools that manipulate the content of the canvas. Wenn Sie den Begleitbereich für ein Szenario mit Tools verwenden, ist es aus Gründen der Ergonomie wahrscheinlich besser, wenn sich die Tools auf der rechten Seite oder im unteren Bereich befinden, doch testen Sie Ihre App, um herauszufinden, was bei Ihrer App am besten funktioniert.When using the companion pane for a tooling scenario, due to the ergonomics, it is likely better suited for tools to be on the right or bottom, but test your app to see what works best for your app.

Ein Beispiel für eine Begleitbereichs-Benutzeroberfläche mit Diagrammen oder Bearbeitung.

Ein Beispiel für eine Begleitbereichs-Benutzeroberfläche mit Tabellen oder einem Spielcontroller.

Hauptnutzen:Key value:

Anzeigen von ergänzendem Kontext, um Benutzern das Erledigen von Aufgaben zu erleichtern (in der Regel mithilfe einer Primär-/Sekundärbeziehung), indem bislang verborgene Funktionen der Ebene 2 an die Oberfläche geholt werden, um einen schnelleren Zugriff zu ermöglichen.Show complementary context to augment users' tasks, usually with a primary/secondary relationship, by elevating to the surface previously buried level 2 functionalities for quicker access.

Die Trennung der zu nutzenden Inhalte von den Tools für die Interaktion mit den Inhalten erleichtert Benutzern die Analyse des Inhalts und die Konzentration darauf.Separating content for consumption from tools for interactions makes it easier for users to parse and focus on the content. Dies bietet eine ergonomisch bessere Erfahrung, indem sich die Tools näher bei der Hand befinden, insbesondere bei Dual-Querformat-Positionen.It provides a more ergonomic experience by having tools closer to the hands, especially in dual-landscape postures.

Typen von Apps, die von diesem Muster profitieren können:Types of apps that may benefit from this pattern:

  • Produktivitäts-Apps, in denen neben dem Hauptinhalt ergänzende Informationen angezeigt werden.Productivity apps that have supplemental information that appears next to the main content
  • Kreativtools wie Apps zum Zeichnen von BildernCreative tools like image drawing app
  • Musik- oder Video-Editor-AppsMusic or video editor apps
  • Spiele-AppsGaming apps

Windows 10XWindows 10X

Wichtig

Wir haben vor Kurzem einige Änderungen an der Priorisierung für Windows 10 und Windows 10X angekündigt.We recently announced some changes in the prioritization for Windows 10 and Windows 10X. Zu diesen Ankündigungen gehören Änderungen an den Formfaktor-Prioritäten für Windows 10X.These announcements include changes to the Windows 10X form factor priorities. Hier mehr erfahren.Read more here.

Nächste SchritteNext steps

Wählen Sie eine Entwicklungsplattform aus, um zu erfahren, wie Sie Dual-Screen-Apps erstellen:Select a development platform to learn how to build dual-screen apps: