Surface Dial-Interaktionen

Artikel
01/18/2024

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

Übersicht

Windows-Wheel-Gerä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.

Wichtig

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

Mit einem Formfaktor, der auf einer Drehaktion (oder Geste) basiert, ist das Surface Dial als sekundäres, modales Eingabegerät vorgesehen, 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 des Benutzers bedient, während er eine Aufgabe mit der dominanten Hand ausführt (z. B. das Schreiben mit einem Stift). Es ist nicht für präzise Zeigereingaben (wie Touch, Stift oder Maus) konzipiert.

Surface Dial unterstützt auch eine Gedrückthalten-Aktion und eine Klickaktion. Drücken und Halten verfügt über eine einzelne Funktion: das 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 Surface Dial-Interaktion an die Funktionalität in Ihren Apps anpassen und zuschneiden.

Tipp

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

Zusätzlich zur beschriebenen standardmäßigen Menübedienung durch Gedrückthalten kann das Surface Dial auch direkt auf dem Bildschirm von Surface Studio angezeigt werden. Dadurch wird ein spezielles „On-Screen“-Menü aktiviert.

Das System erkennt sowohl die Position des Kontakts als auch die Grenzen des Surface Dials und verwendet diese Informationen, um die Abdeckung durch das Gerät zu behandeln und eine größere Version des Menüs anzuzeigen, die sich um die Außenseite des Dials wickelt. Diese Information kann auch von Ihrer App verwendet werden, um die Benutzeroberfläche an das Vorhandensein des Geräts und seine voraussichtliche Verwendung anzupassen, z. B. an die Position der Hand und des Arms des Benutzers.

Surface Dial-Off-Screen-Menü

Surface Dial-On-Screen-Menü

Systemintegration

Surface Dial ist vollständig in Windows integriert und unterstützt eine Reihe von 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 und beinhaltet:

Ein Systemhelligkeitstool, wenn sich der Benutzer auf dem Windows-Desktop befindet
Ein Vorheriges/nächstes Titeltool, wenn Medien wiedergegeben werden

Zusätzlich zu dieser allgemeinen Plattform-Unterstützung ist das Surface Dial auch vollständig mit den Steuerelementen der Windows Ink-Plattform (InkCanvas und InkToolbar) integriert.

Surface Dial mit Surface Pen

In Verbindung mit dem Surface Dial ermöglichen diese Steuerelemente zusätzliche Funktionen zur Änderung von Freihand-Attributen und zur Steuerung der Linealschablone in der Freihand-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 Stiftauswahltool für die Windows Ink-Symbolleiste

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

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

Benutzeranpassung

Über die Seite Windows-Einstellungen -> Geräte -> Wheel können Sie einige Aspekte des Wählens anpassen, darunter die Standardwerkzeuge, die Vibration (oder das haptische Feedback) und die schreibende (oder dominante) Hand.

Beim Anpassen des Surface Dial-Benutzererlebnisses 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 Entwicklerleitfäden 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 erklären, was ein Tool tut und wie die Interaktion mit dem Surface Dial 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 Surface Dial-Menü verfügt über Platz für sieben Elemente. Wenn es acht oder mehr Einträge gibt, muss der Benutzer die Drehsteuerung drehen, um zu sehen, welche Werkzeuge in einem Überlauf-Flyout verfügbar sind. Das macht die Navigation im Menü schwierig und die Tools sind schwer zu finden und auszuwählen.

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.

Wichtig

Wenn Sie dem Menü einen Artikel hinzufügen, stellen Sie sicher, dass der Artikel noch nicht vorhanden ist.

Entfernen Sie das integrierte Systemvolumeeinstellungstool nicht.
Die Lautstärkeregelung wird in der Regel immer vom Benutzer verlangt. 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.)

Seien Sie bei Menüorganisation konsequent
Dies hilft den Nutzern dabei, zu entdecken und zu lernen, welche Tools bei der Verwendung Ihrer App zur Verfügung stehen, und trägt dazu bei, ihre Effizienz beim Wechsel zwischen den Tools zu verbessern.

Stellen Sie hochwertige Symbole bereit, die mit den integrierten Symbolen übereinstimmen.
Icons können Professionalität und Exzellenz vermitteln und das Vertrauen der Benutzer wecken.

Stellen Sie ein hochwertiges PNG-Bild mit 64 x 64 Pixeln bereit (44 x 44 ist die kleinste unterstützte Größe).
Stellen Sie sicher, dass der Hintergrund transparent ist
Das Symbol sollte den größten Teil des Bilds ausfüllen.
Ein weißes Symbol sollte einen schwarzen Umriss haben, damit es im Hochkontrastmodus sichtbar ist.

Symbol mit Alpha-Hintergrund

Symbol, das im Wheel-Menü mit Standarddesign angezeigt wird

Symbol, das im Wheel-Menü mit weißem Design für hohen Kontrast angezeigt wird

Verwenden Sie prägnante und beschreibende Namen
Der Tool-Name wird zusammen mit dem Tool-Symbol im Tool-Menü angezeigt und wird auch von Sprachausgaben verwendet.

Namen sollten kurz sein, um in den zentralen Kreis des Wheel-Menüs zu passen.
Die Namen sollten die primäre Aktion eindeutig identifizieren (eine ergänzende Aktion kann angedeutet werden):
- Scrollen gibt 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, ist das Standardmenü des Surface Dial mit einer Reihe integrierter Tools vorbelegt, die eine breite Palette grundlegender Systemfunktionen abdecken (Systemlautstärke, Systemhelligkeit, Scrollen, Zoom, Rückgängig machen und Mediensteuerung, wenn das System eine 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 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 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-Benutzeroberflächen-Steuerelemente übergibt.

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

Screenshot des Radialcontrollerbeispiels mit dem horizontalen Schieberegler auf der linken Seite.
Die Benutzeroberfläche der Beispiel-App

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

Dann fügen wir im Code-Behind ein benutzerdefiniertes Tool zum Menü Surface Dial hinzu und deklarieren unsere 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 das Schieberegler-Steuerelement durch Drehen der Drehsteuerung angepasst werden, und der Schalter kann durch Klicken auf die Drehsteuerung 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

Geben Sie die integrierten Tools an

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 Patz im Menü frei gemacht, um benutzerdefinierte Tools für Ihre App hinzuzufügen.

Wichtig

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 Designrichtlinien empfehlen wir nicht, die Mediensteuerungswerkzeuge (Lautstärke und vorheriger/nächster Titel) zu entfernen, da Benutzer häufig Hintergrundmusik hören, während sie andere Aufgaben erledigen.

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 den 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 ist abhängig vom Status des Surface Dial-Menüs. 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 greifen und an eine beliebige Stelle 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 in erster Linie zur Unterstützung der Rotation für Interaktionen gedacht, die sanfte, schrittweise Anpassungen von analogen Werten oder Steuerelementen beinhalten.

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 in Windows-Einstellungen -> Geräte -> Wheel-Seite 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.

Die 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 Windows Einstellungen -> Gerät -> Stift und Windows Ink festlegen.

Gebietsschema sollte für alle Drehungsinteraktionen berücksichtigt werden.

Maximieren Sie die Kundenzufriedenheit, indem Sie Ihre Interaktionen an Gebietsschema- und Rechts-nach-links-Layouts anpassen.

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

Nach links

aus

Abbildung des Surface Dial

Right

Nach unten

Konzeptionelle Richtung	Zuordnung zu Surface Dial	Drehung im Uhrzeigersinn	Drehung gegen den Uhrzeigersinn
Horizontal	Links- und Rechtszuordnung basierend auf dem oberen Rand des Surface Dial	Right	Nach links
Vertikal	Zuordnung nach Oben und Unten basierend auf der linken Seite des Surface Dial	Nach unten	Up
Z-Achse	In (oder näher) nach oben/rechts zugeordnet Nach unten/links zugeordnet (oder weiter)	In	aus

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 Sensitivität (oder Auflösung) der Daten kann mit der RadialController.RotationResolutionInDegrees-Eigenschaft festgelegt werden.

Hinweis

Standardmäßig wird ein Drehungseingabe-Ereignis 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 sorgt für eine angenehmere Erfahrung bei kontinuierlichen 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 Werkzeuge kann das haptische Feedback nur vom Benutzer auf der Seite mit den Wheel-Einstellungen deaktiviert werden.

Hier ist ein Beispiel dafür, wie Sie die Auflösung der Rotationsdaten anpassen und das haptische 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;
  }
}

Klicken

Das Klicken auf das Surface Dial entspricht dem Klicken mit der linken Maustaste (der Drehzustand des Geräts hat keinen Einfluss auf diese Aktion).

Erläuterungen zur Benutzeroberfläche

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

Jede Aktion, die von Ihrer App ausgeführt wird, wenn der Benutzer auf das Surface Dial klickt, muss reversibel sein. Ermöglichen Sie es dem Benutzer immer, die Rücksetzung der App einfach zu durchlaufen und einen früheren Zustand der App wiederherzustellen.

Binäre Vorgänge wie Stummschalten/Aufheben der Stummschaltung oder Ein-/Ausblenden bieten eine gute Benutzererfahrung mit der Klickbewegung.

Modale Tools sollten nicht aktiviert oder deaktiviert werden, indem Sie auf das Surface Dial klicken.

Einige App-/Tool-Modi können mit Interaktionen, die auf Rotation beruhen, in Konflikt geraten oder diese deaktivieren. Tools wie das Lineal in der Windows Ink-Symbolleiste sollten über andere Benutzeroberflächen-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.

Anleitung für Entwickler

Wenn auf das Surface Dial geklickt wird, wird ein RadialController.ButtonClicked-Ereignis ausgelöst. Die RadialControllerButtonClickedEventArgs enthalten eine Contact-Eigenschaft, die die Position und den Begrenzungsbereich des Surface Dial-Kontakts auf dem Surface Studio-Bildschirm enthält. 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.

In diesem Modus können Sie die Interaktionsmöglichkeiten von Dial mit Ihren Apps noch besser integrieren und anpassen. Beispiele für einzigartige Erfahrungen, 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-Leitfaden für Bildschirminteraktionen

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

Visuelles Feedback zeigt dem Benutzer an, dass Ihre App das Gerät auf dem Bildschirm des Surface Studio erkannt hat.

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

Das Gerät (und der Text des Benutzers) können kritische Benutzeroberflächen verdecken, je nachdem, wo der Benutzer es platziert.

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

Zusätzlich zur Hardware-Okklusion können die Hand und der Arm des Benutzers bei der Verwendung des Geräts einen Teil des Bildschirms verdecken.

Der verdeckte Bereich hängt davon ab, mit welcher Hand das 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 aus, mit welcher Hand Sie schreiben Einstellung).

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 klebt und nicht gleitet, da es kein präzises Zeigegerät ist. Daher gehen wir davon aus, dass die Benutzer das Surface Dial häufiger anheben und platzieren werden, als es über den Bildschirm zu ziehen.

Verwenden der Bildschirmposition zum Ermitteln der Benutzerabsicht

Das Einstellen des aktiven Tools auf der Grundlage des Benutzeroberflächenkontexts, z.B. der Nähe zu einem Steuerelement, Canvas oder Fenster, kann die Benutzererfahrung verbessern, indem es die für die Ausführung einer Aufgabe erforderlichen Schritte reduziert.

Anleitung für Entwickler

Wenn das Surface Dial auf die Oberfläche des Digitalisierungsgeräts Surface Studio gelegt wird, wird ein RadialController.ScreenContactStarted-Ereignis ausgelöst und die Kontaktinformationen (RadialControllerScreenContactStartedEventArgs.Contact) werden an Ihre App weitergegeben.

Ähnlich verhält es sich, wenn das Surface Dial angeklickt wird, wenn es sich in Kontakt mit der Oberfläche des Digitalisierungsgeräts Surface Studio befindet. Dann wird ein RadialController.ButtonClicked-Ereignis ausgelöst und die Kontaktinformationen (RadialControllerButtonClickedEventArgs.Contact) werden an Ihre App weitergegeben.

Die Kontaktinformationen (RadialControllerScreenContact) enthalten die X/Y-Koordinaten des Mittelpunkts des Surface Dial im Koordinatenraum der App (RadialControllerScreenContact.Position) sowie das begrenzende Rechteck (RadialControllerScreenContact.Bounds) in geräteunabhängigen Pixeln (DIPs). Diese Informationen sind sehr nützlich, um dem aktiven Tool einen Kontext zu geben und dem Benutzer ein gerätebezogenes visuelles Feedback zu vermitteln.

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 unsere Benutzeroberfläche (vier Abschnitte mit jeweils einem Schieberegler und einer Umschalttaste) in XAML.

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

<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). Dann drücken wir zuerst und halten, um das Menü zu öffnen und unser benutzerdefiniertes Tool auszuwählen. Nachdem das benutzerdefinierte Tool aktiviert wurde, kann das Schieberegler-Steuerelement durch Drehen des Surface Dial angepasst werden, und der Schalter kann durch Klicken auf 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 Surface Dial-Tool aktiviert wird

Zusammenfassung

Dieses Thema bietet einen Überblick über das Surface Dial-Eingabegerät mit UX- und Entwickleranleitungen zur Anpassung des Benutzererlebnisses für Szenarien außerhalb des Bildschirms sowie für Szenarien auf dem Bildschirm bei Verwendung mit Surface Studio.

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

Anleitung: Unterstützen Sie das Surface Dial (und andere Wheel-Geräte) in Ihrer Windows-App

API-Referenz

Beispiele

Themenbeispiele

RadialController-Anpassung

Weitere Beispiele

Beispiel für ein Malbuch

Erste Schritte Anleitung: Unterstützen Sie das Surface Dial (und andere Wheel-Geräte) in Ihrer Windows-App

Universelle Windows-Plattform – Beispiele (C# und C++)

Windows Desktop Beispiel

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

Klicken

Erläuterungen zur Benutzeroberfläche

Anleitung für Entwickler

Auf dem Bildschirm

UX-Leitfaden für Bildschirminteraktionen

Anleitung für Entwickler

Zusammenfassung

API-Referenz

Beispiele

Themenbeispiele

Weitere Beispiele

Zusätzliche Ressourcen

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

Klicken

Erläuterungen zur Benutzeroberfläche

Anleitung für Entwickler

Auf dem Bildschirm

UX-Leitfaden für Bildschirminteraktionen

Anleitung für Entwickler

Zusammenfassung

Verwandte Artikel

API-Referenz

Beispiele

Themenbeispiele

Weitere Beispiele

Zusätzliche Ressourcen