Surface Dial-Interaktionen

Image von Surface Dial mit Surface Studio
Surface Dial mit Surface Studio und Stift.

Übersicht

Windows Radgeräte wie die Surface Dial sind eine neue Kategorie von Eingabegeräten, die eine Vielzahl ansprechender und einzigartiger Benutzerinteraktionsfunktionen für Windows- und Windows-Apps ermöglichen.

Von Bedeutung

In diesem Thema beziehen wir uns speziell auf Surface-Dial-Interaktionen, aber die Informationen gelten für alle Windows-Radgeräte.

Bei einem Formfaktor, der auf einer rotate-Aktion (oder Geste) basiert, ist die Surface Dial als sekundäres, mehr modales Eingabegerät gedacht, das die Eingabe von einem primären Gerät ergänzt. In den meisten Fällen wird das Gerät von der nicht-dominanten Hand ein Benutzer geführt, während eine Aufgabe mit der dominanten Hand (z. B. Zeichnen mit einem Stift) ausgeführt wird. Sie ist nicht für präzisionsgenaue Zeigereingaben (z. B. Toucheingabe, Stift oder Maus) ausgelegt.

Die Surface Dial unterstützt auch eine press and hold-Aktion und eine click-Aktion. Drücken und Halten verfügt über eine einzelne Funktion: Anzeigen eines Menüs mit Befehlen. Wenn das Menü aktiv ist, wird die Dreh- und Klickeingabe vom Menü verarbeitet. Andernfalls wird die Eingabe zur Verarbeitung an Ihre App übergeben.

Wie bei allen Windows-Eingabegeräten können Sie die Interaktionserfahrung des Surface Dial anpassen und auf die Funktionalität Ihrer Apps zuschneiden.

Tipp

Die Surface Dial und die neue Surface Studio können gemeinsam eine noch unverwechselbarere Benutzererfahrung bieten.

Zusätzlich zum beschriebenen Standardmenü beim Drücken und Halten kann der Surface Dial auch direkt auf dem Bildschirm des Surface Studio platziert werden. Dadurch wird ein spezielles "On-Screen"-Menü aktiviert.

Durch Erkennen der Kontaktposition und der Grenzen des Surface Dial verwendet das System diese Informationen, um die Verdeckung durch das Gerät zu behandeln und eine größere Version des Menüs anzuzeigen, die das Surface Dial außen umgibt. Diese Informationen können auch von Ihrer App verwendet werden, um die Benutzeroberfläche sowohl für das Vorhandensein des Geräts als auch für die erwartete Verwendung anzupassen, z. B. die Platzierung der Hand und des Arms des Benutzers.

Surface-Dial-Menü außerhalb des Bildschirms

Surface Dial im On-Screen-Menü

Systemintegration

Das Surface Dial ist eng in Windows integriert und unterstützt eine Reihe integrierter Tools im Menü: Systemlautstärke, Bildlauf, Vergrößern/Verkleinern und Rückgängigmachen/Wiederholen.

Diese Sammlung integrierter Tools passt sich an den aktuellen Systemkontext an:

Ein Systemhelligkeitstool, wenn sich der Benutzer auf dem Windows Desktop befindet
Ein Werkzeug für vorherigen/nächsten Titel während der Medienwiedergabe

Zusätzlich zur allgemeinen Plattformunterstützung ist der Surface Dial auch eng mit den Windows Ink-Plattformsteuerelementen (InkCanvas und InkToolbar) integriert.

Surface Dial mit Surface Pen
Surface Dial mit Surface Pen

Bei Verwendung mit dem Surface Dial ermöglichen diese Steuerelemente zusätzliche Funktionen zum Ändern von Tintenattributen und zum Steuern der Linealschablone der Tinten-Symbolleiste.

Wenn Sie das Surface Dial Menü in einer Freihandanwendung öffnen, die die Freihandsymbolleiste verwendet, enthält das Menü jetzt Tools zum Steuern des Stifttyps und der Pinselstärke. Wenn das Lineal aktiviert ist, wird dem Menü ein entsprechendes Tool hinzugefügt, mit dem das Gerät die Position und den Winkel des Lineals steuern kann.

Surface Dial Menü mit Auswahlwerkzeug für Stifte in der Windows Ink Symbolleiste

Surface Dial-Menü mit Strichstärkewerkzeug für die Windows Ink-Symbolleiste

Surface Dial-Menü mit Linealwerkzeug für die Windows Ink-Symbolleiste

Benutzeranpassung

Benutzer können einige Aspekte ihres Bedienrades über die Seite Windows-Einstellungen -> Geräte -> Wheel anpassen, einschließlich Standardtools, Vibrationen (oder haptisches Feedback) und Schreiben (oder dominante Hand).

Beim Anpassen der Surface Dial Benutzeroberfläche sollten Sie immer sicherstellen, dass eine bestimmte Funktion oder ein bestimmtes Verhalten verfügbar und vom Benutzer aktiviert ist.

Benutzerdefinierte Tools

Hier besprechen wir sowohl UX- als auch Entwickleranleitungen zum Anpassen der Tools, die im menü Surface Dial verfügbar gemacht werden.

UX-Richtlinien für benutzerdefinierte Tools

Stellen Sie sicher, dass Ihre Tools dem aktuellen Kontext entsprechen Wenn Sie klar und intuitiv darlegen, was ein Tool tut und wie die Surface Dial Interaktion funktioniert, helfen Sie den Benutzern, schnell zu lernen und sich auf ihre Aufgabe zu konzentrieren.

Minimieren Sie die Anzahl der App-Tools so weit wie möglich.
Das menü Surface Dial verfügt über Platz für sieben Elemente. Wenn acht oder mehr Elemente vorhanden sind, muss der Benutzer das Dial drehen, um zu sehen, welche Tools in einem Überlauf-Flyout verfügbar sind, wodurch das Menü schwer zu navigieren und Tools schwer zu finden und auszuwählen ist.

Es wird empfohlen, ein einzelnes benutzerdefiniertes Tool für Ihre App oder Ihren App-Kontext bereitzustellen. Auf diese Weise können Sie dieses Tool basierend auf dem, was der Benutzer ausführt, festlegen, ohne dass sie das menü Surface Dial aktivieren und ein Tool auswählen müssen.

Dynamisches Aktualisieren der Sammlung von Tools
Da Surface Dial Menüelemente keinen deaktivierten Zustand unterstützen, sollten Sie Tools (einschließlich integrierter, Standardtools) basierend auf dem Benutzerkontext (aktuelle Ansicht oder fokussiertes Fenster) dynamisch hinzufügen und entfernen. Wenn ein Tool für die aktuelle Aktivität nicht relevant ist oder redundant ist, entfernen Sie es.

Von Bedeutung

Wenn Sie dem Menü ein Element hinzufügen, stellen Sie sicher, dass das Element noch nicht vorhanden ist.

Entfernen Sie das integrierte Systemvolumeeinstellungstool nicht.
Der Benutzer benötigt in der Regel immer die Lautstärkeregelung. Möglicherweise hören sie Musik, während Sie Ihre App verwenden, daher sollten Lautstärke- und nächste Titeltools immer über das Menü Surface Dial zugänglich sein. (Das nächste Titeltool wird automatisch zum Menü hinzugefügt, wenn Medien wiedergegeben werden.)

Mit der Menüorganisation konsistent sein
Auf diese Weise können Benutzer herausfinden und lernen, welche Tools bei der Verwendung Ihrer App verfügbar sind, und die Effizienz beim Wechseln von Tools zu verbessern.

Bereitstellen von hochwertigen Symbolen, die mit den integrierten Symbolen konsistent sind
Symbole können Professionalität und Exzellenz vermitteln und Vertrauen in die Benutzer inspirieren.

Bereitstellen eines qualitativ hochwertigen PNG-Bilds mit 64 x 64 Pixeln (44 x 44 wird am kleinsten unterstützt)
Sicherstellen, dass der Hintergrund transparent ist
Das Symbol sollte den größten Teil des Bilds ausfüllen.
Ein weißes Symbol sollte eine schwarze Kontur aufweisen, damit sie im Modus mit hohem Kontrast sichtbar ist.

Symbol mit Alphahintergrund

Symbol, das im Radmenü mit Standarddesign angezeigt wird

Symbol, das im Radmenü mit weißem Design mit hohem Kontrast angezeigt wird

Verwenden Sie prägnante und beschreibende Namen
Der Werkzeugname wird zusammen mit dem Werkzeugsymbol im Toolmenü angezeigt und auch von Screenreadern verwendet.

Namen sollten kurz sein, um in den zentralen Kreis des Radmenüs zu passen.
Namen sollten die primäre Aktion eindeutig identifizieren (eine ergänzende Aktion kann impliziert werden):
- Scrollen zeigt den Effekt beider Drehrichtungen an.
- Rückgängig gibt eine primäre Aktion an, aber wiederholen (die ergänzende Aktion) kann vom Benutzer abgeleitet und leicht erkannt werden.

Anleitung für Entwickler

Sie können die Surface Dial Erfahrung anpassen, um die Funktionalität in Ihren Apps durch einen umfassenden Satz von Windows Runtime-APIs zu ergänzen.

Wie bereits erwähnt, wird das Standardmenü des Surface Dial mit einer Reihe integrierter Tools gefüllt, die eine Vielzahl grundlegender Systemfunktionen abdecken (Systemlautstärke, Systemhelligkeit, Bildlauf, Zoom, Rückgängigmachen und Mediensteuerung, wenn das System laufende Audio- oder Videowiedergabe erkennt). Diese Standardtools stellen jedoch möglicherweise nicht die für Ihre App erforderlichen Funktionen bereit.

In den folgenden Abschnitten wird beschrieben, wie Sie dem Menü Surface Dial ein benutzerdefiniertes Tool hinzufügen und angeben, welche integrierten Tools verfügbar gemacht werden.

Laden Sie eine robustere Version dieses Beispiels aus der RadialController-Anpassung herunter.

Hinzufügen eines benutzerdefinierten Tools

In diesem Beispiel fügen wir ein einfaches benutzerdefiniertes Tool hinzu, das die Eingabedaten sowohl aus der Drehung als auch aus Klickereignissen an einige XAML-UI-Steuerelemente übergibt.

Zunächst deklarieren wir die Benutzeroberfläche (nur einen Schieberegler und eine Umschaltfläche) in XAML.

Screenshot des Radial Controller Beispiels, bei dem der horizontale Schieberegler nach links eingestellt ist.
Die Beispiel-App-UI

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
    Orientation="Horizontal" 
    Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="RadialController customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
  </StackPanel>
  <StackPanel Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"
    Grid.Row="1">
      <!-- Slider for rotation input -->
      <Slider x:Name="RotationSlider"
        Width="300"
        HorizontalAlignment="Left"/>
      <!-- Switch for click input -->
      <ToggleSwitch x:Name="ButtonToggle"
        HorizontalAlignment="Left"/>
  </StackPanel>
</Grid>

Anschließend fügen wir im CodeBehind dem Menü Surface Dial ein benutzerdefiniertes Tool hinzu und deklarieren die Eingabehandler RadialController.

Wir erhalten einen Verweis auf das RadialController-Objekt für den Surface Dial (myController) durch Aufrufen von CreateForCurrentView.

Anschließend erstellen wir eine Instanz eines RadialControllerMenuItem (myItem) durch Aufrufen von RadialControllerMenuItem.CreateFromIcon.

Als Nächstes fügen wir dieses Element an die Sammlung von Menüelementen an.

Wir deklarieren die Eingabeereignishandler (ButtonClicked und RotationChanged) für das Objekt RadialController.

Schließlich definieren wir die Ereignishandler.

public sealed partial class MainPage : Page
{
    RadialController myController;

    public MainPage()
    {
        this.InitializeComponent();
        // Create a reference to the RadialController.
        myController = RadialController.CreateForCurrentView();

        // Create an icon for the custom tool.
        RandomAccessStreamReference icon =
          RandomAccessStreamReference.CreateFromUri(
            new Uri("ms-appx:///Assets/StoreLogo.png"));

        // Create a menu item for the custom tool.
        RadialControllerMenuItem myItem =
          RadialControllerMenuItem.CreateFromIcon("Sample", icon);

        // Add the custom tool to the RadialController menu.
        myController.Menu.Items.Add(myItem);

        // Declare input handlers for the RadialController.
        myController.ButtonClicked += MyController_ButtonClicked;
        myController.RotationChanged += MyController_RotationChanged;
    }

    // Handler for rotation input from the RadialController.
    private void MyController_RotationChanged(RadialController sender,
      RadialControllerRotationChangedEventArgs args)
    {
        if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
        {
            RotationSlider.Value = 100;
            return;
        }
        else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
        {
            RotationSlider.Value = 0;
            return;
        }
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }

    // Handler for click input from the RadialController.
    private void MyController_ButtonClicked(RadialController sender,
      RadialControllerButtonClickedEventArgs args)
    {
        ButtonToggle.IsOn = !ButtonToggle.IsOn;
    }
}

Wenn wir die App ausführen, verwenden wir die Surface Dial, um damit zu interagieren. Zuerst drücken und halten wir, um das Menü zu öffnen und unser benutzerdefiniertes Tool auszuwählen. Nachdem das benutzerdefinierte Tool aktiviert wurde, kann der Schieberegler durch Drehen des Wahlrads angepasst werden, und der Schalter kann durch Anklicken des Wahlrads umgeschaltet werden.

Screenshot des Radialcontrollerbeispiels mit dem horizontalen Schieberegler, der auf die Mitte festgelegt ist.
Die Benutzeroberfläche der Beispiel-App, die mit dem benutzerdefinierten Tool Surface Dial aktiviert wurde

Angeben der integrierten Tools

Sie können die Klasse RadialControllerConfiguration verwenden, um die Sammlung integrierter Menüelemente für Ihre App anzupassen.

Wenn Ihre App beispielsweise keine Bildlauf- oder Zoombereiche enthält und keine Rückgängig-/Wiederholen-Funktionalität erfordert, können diese Tools aus dem Menü entfernt werden. Dadurch wird platz im Menü geöffnet, um benutzerdefinierte Tools für Ihre App hinzuzufügen.

Von Bedeutung

Das menü Surface Dial muss mindestens ein Menüelement aufweisen. Wenn alle Standardtools entfernt werden, bevor Sie eines Ihrer benutzerdefinierten Tools hinzufügen, werden die Standardtools wiederhergestellt, und Das Tool wird an die Standardauflistung angefügt.

Gemäß den Entwurfsrichtlinien empfehlen wir nicht, die Mediensteuerungen (Lautstärke und vorheriger/nächster Titel) zu entfernen, da Benutzer häufig Hintergrundmusik abspielen, während sie andere Aufgaben ausführen.

Hier erfahren Sie, wie Sie das menü Surface Dial so konfigurieren, dass nur Mediensteuerelemente für Lautstärke und nächste/vorherige Titel enthalten sind.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Benutzerdefinierte Interaktionen

Wie bereits erwähnt, unterstützt die Surface Dial drei Gesten (Drücken und Halten, Drehen, Klicken) mit entsprechenden Standardinteraktionen.

Stellen Sie sicher, dass benutzerdefinierte Interaktionen basierend auf diesen Gesten für die ausgewählte Aktion oder das ausgewählte Tool sinnvoll sind.

Hinweis

Die Interaktionserfahrung hängt vom Status des menüs Surface Dial ab. Wenn das Menü aktiv ist, verarbeitet es die Eingabe; andernfalls führt Ihre App dies aus.

Drücken und halten

Diese Geste aktiviert und zeigt das menü Surface Dial an, es gibt keine App-Funktionalität, die dieser Geste zugeordnet ist.

Standardmäßig wird das Menü in der Mitte des Bildschirms des Benutzers angezeigt. Der Benutzer kann es jedoch an beliebiger Stelle abrufen und verschieben.

Hinweis

Wenn die Surface Dial auf dem Bildschirm des Surface Studio platziert wird, wird das Menü an der Bildschirmposition des Surface Dial zentriert.

Drehen

Die Surface Dial dient hauptsächlich der Unterstützung der Drehung für Interaktionen, die reibungslose, inkrementelle Anpassungen an analoge Werte oder Steuerelemente umfassen.

Das Gerät kann sowohl im Uhrzeigersinn als auch gegen den Uhrzeigersinn gedreht werden und kann auch haptisches Feedback bereitstellen, um diskrete Abstände anzugeben.

Hinweis

Haptisches Feedback kann vom Benutzer auf der Seite Windows Settings -> Devices -> Wheel deaktiviert werden.

UX-Richtlinien für benutzerdefinierte Interaktionen

Tools mit kontinuierlicher oder hoher Drehempfindlichkeit sollten haptisches Feedback deaktivieren

Haptisches Feedback entspricht der Drehempfindlichkeit des aktiven Tools. Wir empfehlen, haptisches Feedback für Tools mit kontinuierlicher oder hoher Drehempfindlichkeit zu deaktivieren, da die Benutzererfahrung unangenehm werden kann.

Dominante Hand sollte sich nicht auf drehbasierte Interaktionen auswirken

Die Surface Dial kann nicht erkennen, welche Hand verwendet wird, aber der Benutzer kann die Schreibhand (oder die dominante Hand) in den Windows-Einstellungen - Geräte - Stift & Windows Freihand einstellen.

Das Locale sollte bei allen Rotationsinteraktionen berücksichtigt werden.

Maximieren Sie die Kundenzufriedenheit, indem Sie Ihre Interaktionen an regionale Gegebenheiten und Layouts für die Rechts-nach-links-Ausrichtung anpassen.

Die integrierten Tools und Befehle im Menü "Dial" befolgen die folgenden Richtlinien für drehbasierte Interaktionen:

Links

Nach oben

Out

Bild des Surface Dial

Rechts

Nach unten

Konzeptionelle Richtung	Zuordnung zu Surface Dial	Im Uhrzeigersinn	Drehung gegen den Uhrzeigersinn
Horizontal	Links- und Rechtszuordnung basierend auf der oberen Seite des Surface Dial	Rechts	Links
Vertikal	Zuordnung von oben und unten basierend auf der linken Seite des Surface Dial	Nach unten	Nach oben
Z-Achse	In (oder näher) nach oben/rechts zugeordnet "Aus (oder weiter) nach unten/links zugeordnet"	In	Out

Anleitung für Entwickler

Wenn der Benutzer das Gerät dreht, werden RadialController.RotationChanged-Ereignisse basierend auf einem Delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relativ zur Drehrichtung ausgelöst. Die Empfindlichkeit (oder Auflösung) der Daten kann mit der RadialController.RotationResolutionInDegrees-Eigenschaft festgelegt werden.

Hinweis

Standardmäßig wird ein Drehungseingabeereignis an ein RadialController-Objekt übermittelt, wenn das Gerät mindestens 10 Grad gedreht wird. Jedes Eingabeereignis bewirkt, dass das Gerät vibriert.

Im Allgemeinen wird empfohlen, haptisches Feedback zu deaktivieren, wenn die Drehauflösung auf weniger als 5 Grad festgelegt ist. Dies bietet eine reibungslosere Oberfläche für kontinuierliche Interaktionen.

Sie können haptisches Feedback für benutzerdefinierte Tools aktivieren und deaktivieren, indem Sie die RadialController.UseAutomaticHapticFeedback-Eigenschaft festlegen.

Hinweis

Sie können das haptische Verhalten für Systemtools wie die Lautstärkeregelung nicht außer Kraft setzen. Für diese Tools kann haptisches Feedback nur vom Benutzer auf der Seite mit den Radeinstellungen deaktiviert werden.

Hier sehen Sie ein Beispiel, wie Sie die Auflösung der Drehungsdaten anpassen und haptisches Feedback aktivieren oder deaktivieren können.

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Click

Das Klicken auf die Surface Dial ähnelt dem Klicken auf die linke Maustaste (der Drehungszustand des Geräts hat keine Auswirkung auf diese Aktion).

UX-Anleitung

Ordnen Sie dieser Geste keine Aktion oder einen Befehl zu, wenn der Benutzer das Ergebnis nicht problemlos wiederherstellen kann.

Jede Aktion, die von Ihrer App ausgeführt wird, basierend auf dem Benutzer, der auf das Surface Dial klickt, muss umkehrbar sein. Ermöglichen Sie es dem Benutzer immer, den App-Zurück-Stapel auf einfache Weise zu durchlaufen und einen vorherigen App-Zustand wiederherzustellen.

Binäre Vorgänge wie Stummschalten/Aktivieren oder Ein-/Ausblenden bieten eine gute Benutzererfahrung mit der Klick-Geste.

Modal-Tools sollten nicht aktiviert oder deaktiviert werden, indem Sie auf den Surface Dial klicken

Einige Modi von Apps/Tools können mit Interaktionen, die Drehung erfordern, in Konflikt stehen oder deaktiviert werden. Tools wie das Lineal in der Windows Ink-Symbolleiste sollten über andere UI-Elemente ein- oder ausgeschaltet werden (die Windows Ink-Symbolleiste bietet ein integriertes ToggleButton-Steuerelement).

Ordnen Sie für modale Tools das aktive Surface Dial Menüelement dem Zieltool oder dem zuvor ausgewählten Menüelement zu.

Anleitung für Entwickler

Wenn auf das Surface Dial geklickt wird, wird ein RadialController.ButtonClickedEreignis ausgelöst. Die RadialControllerButtonClickedEventArgs enthalten eine Contact-Eigenschaft, die die Position und den Begrenzungsbereich des Surface Dial-Kontakts auf dem Bildschirm des Surface Studio enthält. Wenn die Surface Dial nicht mit dem Bildschirm in Kontakt ist, ist diese Eigenschaft NULL.

Auf dem Bildschirm

Wie bereits beschrieben, kann die Surface Dial zusammen mit dem Surface Studio verwendet werden, um das Surface Dial Menü in einem speziellen Bildschirmmodus anzuzeigen.

Wenn Sie sich in diesem Modus befinden, können Sie Ihre Dial-Interaktionserfahrungen noch weiter mit Ihren Apps integrieren und anpassen. Beispiele für einzigartige Erfahrungen, die nur mit dem Surface Dial und Surface Studio möglich sind:

Anzeigen von Kontexttools (z. B. einer Farbpalette) basierend auf der Position des Surface Dial, wodurch sie leichter zu finden und zu verwenden sind
Festlegen des aktiven Tools basierend auf der Benutzeroberfläche, auf der die Surface Dial platziert wird
Vergrößern eines Bildschirmbereichs basierend auf der Position des Surface Dial
Eindeutige Spielinteraktionen basierend auf der Bildschirmposition

UX-Anleitung für Bildschirminteraktionen

Apps sollten reagieren, wenn die Surface Dial auf dem Bildschirm erkannt wird

Visuelles Feedback hilft Benutzern anzugeben, dass Ihre App das Gerät auf dem Bildschirm der Surface Studio erkannt hat.

Oberfläche für Surface Dial abhängig vom Standort des Geräts anpassen

Abhängig davon, wo der Benutzer es platziert, kann das Gerät (und der Körper des Benutzers) kritische UI verdecken.

Passen Sie das auf den Surface Dial bezogene UI basierend auf der Benutzerinteraktion an

Zusätzlich zur Hardware-Okkklusion kann die Hand und der Arm eines Benutzers einen Teil des Bildschirms bei der Nutzung des Geräts verdecken.

Der verdeckte Bereich hängt davon ab, welche Hand mit dem Gerät verwendet wird. Da das Gerät in erster Linie mit der nicht dominanten Hand verwendet werden soll, sollte die Surface Dial-bezogene Benutzeroberfläche für die gegenüberliegende Hand angepasst werden, die vom Benutzer angegeben wird (Windows-Einstellungen Geräte Stift und Windows Ink Wählen Sie aus, mit welcher Hand Sie schreiben, die Einstellung).

Interaktionen sollten auf die Position des Surface Dial anstatt auf die Bewegung reagieren

Der Fuß des Geräts ist so konzipiert, dass er auf dem Bildschirm haftet, anstatt zu rutschen, da es sich nicht um ein Präzisionszeigengerät handelt. Daher erwarten wir, dass es für Benutzer häufiger ist, die Surface Dial anzuheben und zu platzieren, anstatt sie über den Bildschirm zu ziehen.

Verwenden der Bildschirmposition zum Ermitteln der Benutzerabsicht

Das Festlegen des aktiven Tools basierend auf dem Benutzeroberflächenkontext, z. B. der Nähe zu einem Steuerelement, einer Canvas oder einem Fenster, kann die Benutzererfahrung verbessern, indem die erforderlichen Schritte zum Ausführen einer Aufgabe reduziert werden.

Anleitung für Entwickler

Wenn die Surface Dial auf der Digitalisiereroberfläche des Surface Studios platziert wird, wird ein RadialController.ScreenContactStarted-Ereignis ausgelöst, und die Kontaktinformationen (RadialControllerScreenContactStartedEventArgs.Contact) werden Ihrer App bereitgestellt.

Wenn die Surface Dial angeklickt wird, während sie in Kontakt mit der digitalisierten Oberfläche des Surface Studio steht, wird ein RadialController.ButtonClicked-Ereignis ausgelöst, und die Kontaktinformationen (RadialControllerButtonClickedEventArgs.Contact) werden Ihrer App bereitgestellt.

Die Kontaktinformationen (RadialControllerScreenContact) enthalten die X/Y-Koordinate des Mittelpunkts von Surface Dial im Koordinatenbereich der App (RadialControllerScreenContact.Position) sowie das umgebende Rechteck (RadialControllerScreenContact.Bounds) in geräteunabhängigen Pixeln (DIPs). Diese Informationen sind sehr nützlich, um dem aktiven Tool Kontext bereitzustellen und dem Benutzer gerätebezogenes visuelles Feedback bereitzustellen.

Im folgenden Beispiel haben wir eine einfache App mit vier verschiedenen Abschnitten erstellt, die jeweils einen Schieberegler und einen Umschalter enthalten. Anschließend verwenden wir die Bildschirmposition des Surface Dial, um zu bestimmen, welche Schieberegler und Schalter durch das Surface Dial gesteuert werden.

Zunächst deklarieren wir die Benutzeroberfläche (vier Abschnitte mit einem Schieberegler und einer Umschaltfläche) in XAML.

Screenshot des Radialcontrollerbeispiels mit vier horizontalen Schiebereglern auf der linken Seite.
Die Beispiel-App-UI

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
        Orientation="Horizontal" 
        Grid.Row="0">
    <TextBlock x:Name="Header"
      Text="RadialController customization sample"
      VerticalAlignment="Center"
      Style="{ThemeResource HeaderTextBlockStyle}"
      Margin="10,0,0,0" />
  </StackPanel>
  <Grid Grid.Row="1" x:Name="RootGrid">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid0"
      Grid.Row="0"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider0"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle0"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid1"
      Grid.Row="0"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider1"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle1"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid2"
      Grid.Row="1"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider2"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle2"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid3"
      Grid.Row="1"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider3"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle3"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
  </Grid>
</Grid>

Hier sehen Sie den Code-Behind mit Handlern, die für die Bildschirmposition des Surface Dial definiert sind.

Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;

public MainPage()
{
  ...

  myController.ScreenContactStarted += 
    MyController_ScreenContactStarted;
  myController.ScreenContactContinued += 
    MyController_ScreenContactContinued;
  myController.ScreenContactEnded += 
    MyController_ScreenContactEnded;
  myController.ControlLost += MyController_ControlLost;

  //Set initial grid for Surface Dial input.
  ActiveGrid = Grid0;
  ActiveSlider = RotationSlider0;
  ActiveSwitch = ButtonToggle0;
}

private void MyController_ScreenContactStarted(RadialController sender, 
  RadialControllerScreenContactStartedEventArgs args)
{
  //find grid at contact location, update visuals, selection
  ActivateGridAtLocation(args.Contact.Position);
}

private void MyController_ScreenContactContinued(RadialController sender, 
  RadialControllerScreenContactContinuedEventArgs args)
{
  //if a new grid is under contact location, update visuals, selection
  if (!VisualTreeHelper.FindElementsInHostCoordinates(
    args.Contact.Position, RootGrid).Contains(ActiveGrid))
  {
    ActiveGrid.Background = new 
      SolidColorBrush(Windows.UI.Colors.White);
    ActivateGridAtLocation(args.Contact.Position);
  }
}

private void MyController_ScreenContactEnded(RadialController sender, object args)
{
  //return grid color to normal when contact leaves screen
  ActiveGrid.Background = new 
  SolidColorBrush(Windows.UI.Colors.White);
}

private void MyController_ControlLost(RadialController sender, object args)
{
  //return grid color to normal when focus lost
  ActiveGrid.Background = new 
    SolidColorBrush(Windows.UI.Colors.White);
}

private void ActivateGridAtLocation(Point Location)
{
  var elementsAtContactLocation = 
    VisualTreeHelper.FindElementsInHostCoordinates(Location, 
      RootGrid);

  foreach (UIElement element in elementsAtContactLocation)
  {
    if (element as Grid == Grid0)
    {
      ActiveSlider = RotationSlider0;
      ActiveSwitch = ButtonToggle0;
      ActiveGrid = Grid0;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid1)
    {
      ActiveSlider = RotationSlider1;
      ActiveSwitch = ButtonToggle1;
      ActiveGrid = Grid1;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid2)
    {
      ActiveSlider = RotationSlider2;
      ActiveSwitch = ButtonToggle2;
      ActiveGrid = Grid2;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid3)
    {
      ActiveSlider = RotationSlider3;
      ActiveSwitch = ButtonToggle3;
      ActiveGrid = Grid3;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
  }
}

Wenn wir die App ausführen, verwenden wir die Surface Dial, um damit zu interagieren. Zunächst platzieren wir das Gerät auf dem Surface Studio-Bildschirm, das von der App erkannt und dem unteren rechten Abschnitt zugeordnet wird (siehe Bild). Anschließend halten wir die Surface Dial gedrückt, um das Menü zu öffnen und unser benutzerdefiniertes Tool auszuwählen. Nachdem das benutzerdefinierte Tool aktiviert wurde, kann der Schieberegler durch Drehen des Surface Dial angepasst werden, und der Schalter kann durch Klicken auf das Surface Dial umgeschaltet werden.

Screenshot des Radialcontrollerbeispiels mit vier horizontalen Schiebereglern links und hervorgehobener vierter Controller.
Die Benutzeroberfläche der Beispiel-App, die mit dem benutzerdefinierten Tool Surface Dial aktiviert wurde

Zusammenfassung

In diesem Thema finden Sie eine Übersicht über das Surface Dial Eingabegerät mit UX und Entwickleranleitungen zum Anpassen der Benutzeroberfläche für Offscreen-Szenarien sowie Bildschirmszenarien, wenn sie mit Surface Studio verwendet werden.

Bitte senden Sie Ihre Fragen, Vorschläge und Feedback an radialcontroller@microsoft.com.

Tutorial: Unterstützen Sie die Surface Dial (und andere Radgeräte) in Ihrer Windows App

API-Referenz

Beispiele

Themenbeispiele

RadialController-Anpassung

Weitere Beispiele

Coloring Book-Beispiel

Lernprogramm für erste Schritte: Unterstützen Sie die Surface Dial (und andere Radgeräte) in Ihrer Windows-App

Universal Windows Platform Beispiele (C# und C++)

Windows Desktopbeispiel

Feedback

War diese Seite hilfreich?

Last updated on 2026-03-11

Freigeben über

Surface Dial-Interaktionen

Übersicht

Systemintegration

Benutzeranpassung

Benutzerdefinierte Tools

UX-Richtlinien für benutzerdefinierte Tools

Anleitung für Entwickler

Benutzerdefinierte Interaktionen

Drücken und halten

Drehen

UX-Richtlinien für benutzerdefinierte Interaktionen

Anleitung für Entwickler

Click

UX-Anleitung

Anleitung für Entwickler

Auf dem Bildschirm

UX-Anleitung für Bildschirminteraktionen

Anleitung für Entwickler

Zusammenfassung

Verwandte Artikel

API-Referenz

Beispiele

Themenbeispiele

Weitere Beispiele

Feedback

Zusätzliche Ressourcen