Surface Dial-Interaktionen

Abbildung von Surface Dial mit Surface Studio
Surface Dial mit Surface Studio und Stift (erhältlich im Microsoft Store).

Überblick

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

Von Bedeutung

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

Mit einem Formfaktor, der auf einer Drehaktion (oder Geste) basiert, ist das Surface Dial als sekundäres, multimodales Eingabegerät konzipiert, 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.

Das Surface Dial unterstützt auch eine Gedrückt-halten-Funktion und eine Klick-Funktion. 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 Interaktion mit dem Surface Dial anpassen, um sie an die Funktionalität in Ihren Apps anzupassen.

Tipp

Zusammen können Surface Dial und das neue Surface Studio eine noch unverwechselbarere Benutzererfahrung bieten.

Zusätzlich zur beschriebenen Standardeinstellung für das Gedrückthalten des Menüs kann das Surface Dial auch direkt auf dem Bildschirm des Surface Studio platziert werden. Dadurch wird ein spezielles "On-Screen"-Menü aktiviert.

Durch das Erkennen der Kontaktposition und der Begrenzungen des Surface Dial verwendet das System diese Informationen, um die Okklusion durch das Gerät zu umgehen und eine größere Version des Menüs anzuzeigen, das den Drehregler 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 Offscreen-Menü

Surface Dial-Bildschirmmenü

Systemintegration

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

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 zu dieser allgemeinen Plattformunterstützung ist das Surface Dial auch eng mit den Windows Ink-Plattformsteuerelementen (InkCanvas und InkToolbar) integriert.

Surface Dial mit Surface Pen

Bei Verwendung mit dem Surface Dial ermöglichen diese Steuerelemente zusätzliche Funktionalität zum Ändern von Freihandattributen und zur Steuerung der Linealschablone der Freihandsymbolleiste.

Wenn Sie das Surface Dial-Menü in einer Freihandanwendung öffnen, die die Stift-Symbolleiste verwendet, enthält das Menü jetzt Tools zum Anpassen 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 Stiftauswahltool für die Windows Ink-Symbolleiste

Surface Dial-Menü mit dem Strichgrößenwerkzeug für die Windows Ink-Symbolleiste

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

Benutzeranpassung

Benutzer können einige Aspekte ihrer Dial-Erfahrung über die Windows-Einstellungen – Geräte –>> Rad anpassen, einschließlich Standardtools, Vibrationen (oder haptisches Feedback) und dominante (oder schreibende) 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 Surface Dial-Menü 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 machen, was ein Tool tut und wie die Surface Dial-Interaktion funktioniert, helfen Sie Benutzern, schnell zu lernen und sich auf ihre Aufgabe zu konzentrieren.

Minimieren Sie die Anzahl der App-Tools so weit wie möglich.
Das Surface Dial-Menü 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 Surface Dial-Menü 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 Tools, 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 Surface Dial-Menü 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.

Entwicklerleitfaden

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

Wie bereits erwähnt, ist das Standard Surface Dial-Menü mit integrierten Tools vorbestückt, die eine breite Palette von grundlegenden Systemfunktionen abdecken. Dazu gehören Systemlautstärke, Systemhelligkeit, Bildlauf, Zoom, Rückgängigmachen und Mediensteuerung, wenn das System eine fortlaufende 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 Surface Dial-Menü 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 Code-Behind dem Surface Dial-Menü ein benutzerdefiniertes Tool hinzu und deklarieren die RadialController-Eingabehandler.

Wir erhalten einen Verweis auf das RadialController-Objekt für das 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 RadialController-Objekt .

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 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 Surface Dial-Tool aktiviert wird

Angeben der integrierten Tools

Sie können die RadialControllerConfiguration-Klasse 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 Surface Dial-Menü 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 Surface Dial-Menü 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 das 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

Das Interaktionserlebnis hängt vom Zustand des Surface Dial-Menüs 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 Surface Dial-Menü 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 das Surface Dial auf dem Bildschirm des Surface Studio platziert wird, wird das Menü an der Bildschirmposition des Surface Dial zentriert.

Drehen

Das Surface Dial ist hauptsächlich für die Unterstützung der Drehung für Interaktionen konzipiert, 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-Einstellungen –> Geräte –> Rad " 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

Das Surface Dial kann nicht erkennen, welche Hand verwendet wird, aber der Benutzer kann das Schreiben (oder dominante Hand) in den Windows-Einstellungen - Gerät ->> Stift und Windows Ink festlegen.

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

Abbildung des Surface Dial

Richtig

Nach unten

Konzeptionelle Richtung	Zuordnung zu Surface Dial	Im Uhrzeigersinn	Drehung gegen den Uhrzeigersinn
Horizontal	Links- und Rechtszuordnung basierend auf der Oberseite des Surface Dial	Richtig	Links
Vertikal	Zuordnung nach 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

Entwicklerleitfaden

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 nur dann 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 das Surface Dial ähnelt dem Klicken auf die linke Maustaste (der Drehungszustand des Geräts hat keine Auswirkungen 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 Ihre App ausführt, wenn der Benutzer 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.

Modale Tools sollten nicht aktiviert oder deaktiviert werden, indem Sie auf das 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-Angebote ein- oder ausgeschaltet werden (die Freihandsymbolleiste stellt ein integriertes ToggleButton-Steuerelement bereit).

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

Entwicklerleitfaden

Wenn auf das Surface Dial geklickt wird, wird ein RadialController.ButtonClicked-Ereignis ausgelöst. Die RadialControllerButtonClickedEventArgs enthalten eine Kontakt-Eigenschaft, die die Position und den Begrenzungsbereich des Surface Dial-Kontakts auf dem Surface Studio-Bildschirm umfasst. Wenn das Surface Dial nicht mit dem Bildschirm in Kontakt ist, ist diese Eigenschaft null.

Auf dem Bildschirm

Wie zuvor beschrieben, kann das Surface Dial in Verbindung mit 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 Oberflächen, die nur mit 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 auf der Benutzeroberfläche, auf der das 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 der Surface Dial auf dem Bildschirm erkannt wird

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

Anpassen der Surface Dial-bezogenen Benutzeroberfläche basierend auf der Geräteposition

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

Anpassen der Surface Dial-bezogenen Benutzeroberfläche basierend auf der Benutzerinteraktion

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 hauptsächlich mit der nicht dominanten Hand verwendet werden soll, sollte die Surface Dial-bezogene Benutzeroberfläche für die vom Benutzer angegebene entgegengesetzte Hand angepasst werden (Windows-Einstellungen Geräte Stift & Windows Ink Wählen Sie, mit welcher Hand Sie schreiben ).

Interaktionen sollten auf die Surface Dial-Position und nicht 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, das Surface Dial anzuheben und zu platzieren, anstatt es ü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.

Entwicklerleitfaden

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

Ebenso wird ein RadialController.ButtonClicked-Ereignis ausgelöst, wenn auf das Surface Dial geklickt wird, während es mit der Digitalisierungsoberfläche des Surface Studio in Kontakt steht, und die Kontaktinformationen (RadialControllerButtonClickedEventArgs.Contact) für Ihre App bereitgestellt werden.

Die Kontaktinformationen (RadialControllerScreenContact) enthalten die X/Y-Koordinate der Mitte des 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 festzulegen, welche Schieberegler und Umschaltflächen vom 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 CodeBehind mit Handlern, die für die Bildschirmposition von 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 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 das Surface Dial gedrückt, um das Menü zu öffnen und unser benutzerdefiniertes Tool auszuwählen. Nachdem das benutzerdefinierte Tool aktiviert wurde, lässt sich das Schieberegler-Steuerelement durch Drehen des Surface Dial anpassen, und der Schalter lässt sich durch Klicken auf das Surface Dial umschalten.

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

Zusammenfassung

Dieses Thema enthält eine Übersicht über das Surface Dial-Eingabegerät mit UX und Entwickleranleitungen zum Anpassen der Benutzeroberfläche für Offscreen-Szenarien sowie Für Szenarien auf dem Bildschirm, die mit Surface Studio verwendet werden.

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

Anleitung: Unterstützung des Surface Dial (und anderer Radgeräten) in Ihrer Windows-App

API-Referenz

Beispiele

Themenbeispiele

RadialController-Anpassung

Weitere Beispiele

Coloring Book-Beispiel

Lernprogramm für die ersten Schritte: Unterstützung des Surface Dial (und anderer Radgeräte) in Ihrer Windows-App

Beispiele für die universelle Windows-Plattform (C# und C++)

Windows-Desktopbeispiel

Feedback

War diese Seite hilfreich?

Last updated on 2025-12-02

Freigeben über

Surface Dial-Interaktionen

Überblick

Systemintegration

Benutzeranpassung

Benutzerdefinierte Tools

UX-Richtlinien für benutzerdefinierte Tools

Entwicklerleitfaden

Benutzerdefinierte Interaktionen

Drücken und Halten

Drehen

UX-Richtlinien für benutzerdefinierte Interaktionen

Entwicklerleitfaden

Click

UX-Anleitung

Entwicklerleitfaden

Auf dem Bildschirm

UX-Anleitung für Bildschirminteraktionen

Entwicklerleitfaden

Zusammenfassung

Verwandte Artikel

API-Referenz

Beispiele

Themenbeispiele

Weitere Beispiele

Feedback

Zusätzliche Ressourcen