Delen via

Surface Dial-interacties

Afbeelding van Surface Dial met Surface Studio
Surface Dial met Surface Studio en pen (verkrijgbaar in de Microsoft Store).

Overzicht

Windows-wielapparaten, zoals de Surface Dial, zijn een nieuwe categorie invoerapparaten die een groot aantal aantrekkelijke en unieke gebruikersinteractie-ervaringen voor Windows- en Windows-apps mogelijk maken.

Belangrijk

In dit onderwerp verwijzen we specifiek naar Surface Dial-interacties, maar de informatie is van toepassing op alle Windows-wielapparaten.

Met een vormfactor op basis van een draaigebaar (of gebaar) is de Surface Dial bedoeld als een secundair, multimodaal invoerapparaat dat de invoer van een primair apparaat aanvult. In de meeste gevallen wordt het apparaat gemanipuleerd door de niet-dominante hand van een gebruiker tijdens het uitvoeren van een taak met hun dominante hand (zoals handschrift met een pen). Het is niet ontworpen voor precisieaanwijzerinvoer (zoals aanraken, pen of muis).

De Surface Dial ondersteunt ook een actie voor drukken en vasthouden en een klikactie . Houd ingedrukt heeft één functie: een menu met opdrachten weergeven. Als het menu actief is, wordt de invoer voor draaien en klikken verwerkt door het menu. Anders wordt de invoer doorgegeven aan uw app voor verwerking.

Net als bij alle Windows-invoerapparaten kunt u de interactie-ervaring van Surface Dial aanpassen en aanpassen aan de functionaliteit in uw apps.

Aanbeveling

De Surface Dial en de nieuwe Surface Studio kunnen samen een nog onderscheidende gebruikerservaring bieden.

Naast de standaardmenu-ervaring voor drukken en vasthouden die wordt beschreven, kan de Surface Dial ook rechtstreeks op het scherm van de Surface Studio worden geplaatst. Hiermee kunt u een speciaal menu op het scherm inschakelen.

Door zowel de contactlocatie als de contouren van de Surface Dial te detecteren, gebruikt het systeem deze informatie om de occlusie door het apparaat aan te pakken en een grotere versie van het menu weer te geven dat om de buitenkant van de Dial wikkelt. Dezelfde informatie kan ook door uw app worden gebruikt om de gebruikersinterface aan te passen voor zowel de aanwezigheid van het apparaat als het verwachte gebruik, zoals de plaatsing van de hand van de gebruiker en arm.

Off-screenmenu van Surface Dial

Schermopname van het menu Surface Dial buiten het scherm.

Menu Surface Dial op het scherm

Schermopname van het menu Surface Dial op het scherm.

Systeemintegratie

De Surface Dial is nauw geïntegreerd met Windows en ondersteunt een reeks ingebouwde hulpmiddelen in het menu: systeemvolume, schuiven, in- en uitzoomen en ongedaan maken/opnieuw uitvoeren.

Deze verzameling ingebouwde hulpprogramma's past zich aan de huidige systeemcontext aan, zoals:

  • Een hulpprogramma voor systeemhelderheid wanneer de gebruiker zich op het Windows-bureaublad bevindt
  • Een vorige/volgende track tool wanneer media worden afgespeeld

Naast deze algemene platformondersteuning is de Surface Dial ook nauw geïntegreerd met de Besturingselementen van het Windows Ink-platform (InkCanvas en InkToolbar).

Surface Dial met Surface Pen
Surface Dial met Surface Pen

Wanneer deze besturingselementen worden gebruikt met de Surface Dial, schakelt u extra functionaliteit in voor het wijzigen van inktkenmerken en het beheren van het liniaalstencil van de handschriftwerkbalk.

Wanneer u het Surface Dial-menu opent in een inkttoepassing die gebruikmaakt van de inktwerkbalk, bevat het menu nu hulpmiddelen voor het beheren van pentype en borsteldikte. Wanneer de liniaal is ingeschakeld, wordt er een bijbehorend hulpmiddel toegevoegd aan het menu waarmee het apparaat de positie en hoek van de liniaal kan beheren.

Surface Dial-menu met penselectiehulpmiddel voor de werkbalk Windows Ink
Surface Dial-menu met penselectiehulpmiddel voor de werkbalk Windows Ink

Surface Dial-menu met hulpmiddel voor pennenstreekgrootte voor de Windows Ink-werkbalk
Surface Dial-menu met hulpmiddel voor lijndikte voor de Windows Ink-werkbalk

Surface Dial-menu met liniaalhulpmiddel voor de werkbalk Windows Ink
Surface Dial-menu met liniaalhulpmiddel voor de werkbalk Windows Ink

Aanpassing van gebruikers

Gebruikers kunnen bepaalde aspecten van hun Dial-ervaring aanpassen via de Windows-instellingen - Apparaten ->> Wiel pagina, inclusief standaardhulpprogramma's, trillingen (of haptische feedback) en schrijven (of dominante) hand.

Bij het aanpassen van de Surface Dial-gebruikerservaring moet u er altijd voor zorgen dat een bepaalde functie of gedrag beschikbaar is en is ingeschakeld door de gebruiker.

Aangepaste hulpprogramma's

Hier bespreken we zowel UX- als ontwikkelaarsrichtlijnen voor het aanpassen van de hulpprogramma's die beschikbaar zijn in het Surface Dial-menu.

UX-richtlijnen voor aangepaste hulpprogramma's

Zorg ervoor dat uw hulpprogramma's overeenkomen met de huidige context Wanneer u duidelijk en intuïtief maakt wat een hulpprogramma doet en hoe de interactie met Surface Dial werkt, helpt u gebruikers snel te leren en gefocust te blijven op hun taak.

Het aantal app-hulpprogramma's zoveel mogelijk minimaliseren
Het Surface Dial-menu heeft ruimte voor zeven items. Als er acht of meer items zijn, moet de gebruiker aan de draaiknop draaien om te zien welke hulpprogramma's beschikbaar zijn in een uitbreidingsmenu, waardoor het menu moeilijk te navigeren is en hulpprogramma's moeilijk te vinden en selecteren zijn.

U wordt aangeraden één aangepast hulpprogramma voor uw app- of app-context op te geven. Hierdoor kunt u dat hulpprogramma instellen op basis van wat de gebruiker doet zonder dat ze het Surface Dial-menu hoeven te activeren en een hulpmiddel te selecteren.

De verzameling hulpprogramma's dynamisch bijwerken
Omdat menu-items van Surface Dial geen uitgeschakelde status ondersteunen, moet u hulpprogramma's (inclusief ingebouwde, standaardhulpprogramma's) dynamisch toevoegen en verwijderen op basis van gebruikerscontext (huidige weergave of gericht venster). Als een hulpprogramma niet relevant is voor de huidige activiteit of als het overbodig is, verwijdert u het.

Belangrijk

Wanneer u een item aan het menu toevoegt, moet u ervoor zorgen dat het item nog niet bestaat.

Verwijder het ingebouwde hulpprogramma voor het instellen van het systeemvolume niet
Volumeregeling is doorgaans altijd vereist voor de gebruiker. Ze luisteren mogelijk naar muziek tijdens het gebruik van uw app, dus volume- en volgende hulpmiddelen moeten altijd toegankelijk zijn via het Surface Dial-menu. (Het hulpprogramma voor het volgende nummer wordt automatisch toegevoegd aan het menu wanneer media worden afgespeeld.)

Consistent zijn met menuorganisatie
Dit helpt gebruikers bij het ontdekken en leren van welke hulpprogramma's beschikbaar zijn bij het gebruik van uw app en helpen hun efficiëntie te verbeteren bij het schakelen tussen hulpprogramma's.

Hoogwaardige pictogrammen bieden die consistent zijn met de ingebouwde pictogrammen
Pictogrammen kunnen professionaliteit en uitmuntendheid overbrengen en vertrouwen in gebruikers inspireren.

  • Geef een PNG-afbeelding van hoge kwaliteit van 64 x 64 pixels (44 x 44 wordt het kleinste ondersteund)
  • Zorg ervoor dat de achtergrond transparant is
  • Het pictogram moet het grootste deel van de afbeelding vullen
  • Een wit pictogram moet een zwarte omtrek hebben om zichtbaar te zijn in de modus Hoog contrast

Schermopname van een pictogram met alfa-achtergrond.

Pictogram met alfa-achtergrond

Schermopname van een pictogram dat wordt weergegeven in het wielmenu met standaardthema.

Pictogram weergegeven in het wielmenu met standaardthema

Schermopname van een pictogram dat wordt weergegeven in het wielmenu met het thema Hoog contrast Wit.

Pictogram weergegeven in het wielmenu met thema Hoog contrast wit

Beknopte en beschrijvende namen gebruiken
De naam van het hulpprogramma wordt weergegeven in het menu van het hulpmiddel, samen met het pictogram van het hulpmiddel en wordt ook gebruikt door schermlezers.

  • Namen moeten kort zijn om binnen de centrale cirkel van het wielmenu te passen
  • Namen moeten duidelijk de primaire actie identificeren (een aanvullende actie kan worden geïmpliceerd):
    • Scroll geeft het effect van beide draairichtingen aan
    • Ongedaan maken specificeert een primaire actie, maar opnieuw uitvoeren (de aanvullende actie) kan worden afgeleid en gemakkelijk worden ontdekt door de gebruiker.

Richtlijnen voor ontwikkelaars

U kunt de Surface Dial-ervaring aanpassen om de functionaliteit in uw apps aan te vullen via een uitgebreide set Windows Runtime-API's.

Zoals eerder vermeld, wordt het standaardmenu van Surface Dial vooraf gevuld met een reeks ingebouwde hulpmiddelen voor een breed scala aan basissysteemfuncties (systeemvolume, systeemhelderheid, schuiven, zoomen, ongedaan maken en mediabesturing wanneer het systeem doorlopende audio- of videoweergave detecteert). Deze standaardhulpprogramma's bieden echter mogelijk niet de functionaliteit die vereist is voor uw app.

In de volgende secties wordt beschreven hoe u een aangepast hulpmiddel toevoegt aan het Surface Dial-menu en opgeeft welke ingebouwde hulpprogramma's beschikbaar zijn.

Download een krachtigere versie van dit voorbeeld van radialController-aanpassing.

Een aangepast hulpprogramma toevoegen

In dit voorbeeld voegen we een eenvoudig aangepast hulpprogramma toe dat de invoergegevens van zowel de rotatie- als de aangeklikte gebeurtenissen doorgeeft aan enkele XAML UI-besturingselementen.

  1. Eerst declareren we onze gebruikersinterface (alleen een schuifregelaar en wisselknop) in XAML.

    Schermopname van het radiale controllervoorbeeld met de horizontale schuifregelaar ingesteld aan de linkerkant.
    De gebruikersinterface van de voorbeeld-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>

  2. Vervolgens voegen we in code-behind een aangepast hulpmiddel toe aan het Surface Dial-menu en declareren we de RadialController-invoerhandlers.

    We krijgen een verwijzing naar het RadialController-object voor de Surface Dial (myController) door CreateForCurrentView aan te roepen.

    Vervolgens maken we een exemplaar van een RadialControllerMenuItem (myItem) door RadialControllerMenuItem.CreateFromIcon aan te roepen.

    Vervolgens voegen we dat item toe aan de verzameling menu-items.

    We declareren de invoergebeurtenishandlers (ButtonClicked en RotationChanged) voor het RadialController-object .

    Ten slotte definiëren we de eventhandlers.

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

Wanneer we de app uitvoeren, gebruiken we de Surface Dial om ermee te communiceren. Eerst drukken en vasthouden om het menu te openen en onze aangepaste tool te selecteren. Zodra het aangepaste hulpmiddel is geactiveerd, kan de schuifregelaar worden aangepast door de wijzerplaat te draaien en kan de schakelaar worden in- of uitgeschakeld door op de kies te klikken.

Schermopname van het radiale controllervoorbeeld met de horizontale schuifregelaar ingesteld op het midden.
De gebruikersinterface van de voorbeeld-app is geactiveerd met behulp van het aangepaste surface Dial-hulpprogramma

De ingebouwde hulpprogramma's opgeven

U kunt de RadialControllerConfiguration-klasse gebruiken om de verzameling ingebouwde menu-items voor uw app aan te passen.

Als uw app bijvoorbeeld geen schuif- of zoomregio's heeft en geen functionaliteit voor ongedaan maken/opnieuw vereist, kunnen deze hulpprogramma's uit het menu worden verwijderd. Hiermee opent u ruimte in het menu om aangepaste hulpprogramma's voor uw app toe te voegen.

Belangrijk

Het menu Surface Dial moet ten minste één menu-item hebben. Als alle standaardhulpprogramma's worden verwijderd voordat u een van uw aangepaste hulpprogramma's toevoegt, worden de standaardhulpprogramma's hersteld en wordt uw hulpprogramma toegevoegd aan de standaardverzameling.

Volgens de ontwerprichtlijnen raden we u niet aan om de mediabesturingshulpprogramma's (volume en vorige/volgende track) te verwijderen, omdat gebruikers vaak achtergrondmuziek afspelen terwijl ze andere taken uitvoeren.

Hier laten we zien hoe u het Surface Dial-menu configureert om alleen mediabesturingselementen voor volume en volgende/vorige track op te nemen.

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

Aangepaste interacties

Zoals vermeld, ondersteunt de Surface Dial drie gebaren (drukken en vasthouden, draaien, klikken) met bijbehorende standaardinteracties.

Zorg ervoor dat aangepaste interacties op basis van deze gebaren zinvol zijn voor de geselecteerde actie of het geselecteerde hulpprogramma.

Opmerking

De interactie-ervaring is afhankelijk van de status van het Surface Dial-menu. Als het menu actief is, verwerkt het de invoer; anders doet uw app dat.

Druk en houd vast

Deze beweging wordt geactiveerd en toont het Surface Dial-menu, er is geen app-functionaliteit gekoppeld aan deze gebaar.

Het menu wordt standaard weergegeven in het midden van het scherm van de gebruiker. De gebruiker kan het echter pakken en verplaatsen waar hij of zij ook kiest.

Opmerking

Wanneer de Surface Dial op het scherm van de Surface Studio wordt geplaatst, wordt het menu gecentreerd op de locatie op het scherm van de Surface Dial.

Draaien

De Surface Dial is voornamelijk ontworpen ter ondersteuning van rotatie voor interacties die vloeiende, incrementele aanpassingen van analoge waarden of besturingselementen vereisen.

Het apparaat kan zowel rechts als rechtsom worden gedraaid en kan ook haptische feedback geven om discrete afstanden aan te geven.

Opmerking

Haptische feedback kan worden uitgeschakeld door de gebruiker in de Windows-instellingen -> Apparaten -> Wielpagina .

UX-richtlijnen voor aangepaste interacties

Tools met continue of hoge rotatiegevoeligheid moeten haptische feedback uitschakelen

Haptische terugkoppeling komt overeen met de rotatiegevoeligheid van het actieve gereedschap. We raden u aan haptische feedback uit te schakelen voor hulpprogramma's met continue of hoge rotatiegevoeligheid, omdat de gebruikerservaring ongemakkelijk kan raken.

Dominante hand mag geen invloed hebben op interacties op basis van rotatie

De Surface Dial kan niet detecteren welke hand wordt gebruikt, maar de gebruiker kan het schrijven (of dominante hand) instellen in Windows-instellingen -> Apparaat -> Pen en Windows Ink.

Locale moet in aanmerking worden genomen voor alle rotatieinteracties

Maximaliseer de klanttevredenheid door uw interacties aan te passen aan landinstellingen en indelingen van rechts naar links.

De ingebouwde hulpprogramma's en opdrachten in het menu Dial volgen deze richtlijnen voor interacties op basis van rotatie:

Links

Up

Out

Afbeelding van de Surface Dial

Rechts

Omlaag

In

Conceptuele richting Koppeling met Surface Dial Rechtsom draaien Tegen de klok in draaien
Horizontaal Links-rechts-mapping op basis van de bovenkant van de Surface Dial. Rechts Links
Verticaal Toewijzing omhoog en omlaag op basis van de linkerkant van de Surface Dial Omlaag Up
Z-as In (of in de buurt) toegewezen naar omhoog/rechts
Uit (of verder) naar beneden/links toegewezen		 In Out

Richtlijnen voor ontwikkelaars

Wanneer de gebruiker het apparaat draait, worden radialController.RotationChanged-gebeurtenissen geactiveerd op basis van een delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) ten opzichte van de draairichting. De gevoeligheid (of resolutie) van de gegevens kan worden ingesteld met de eigenschap RadialController.RotationResolutionInDegrees .

Opmerking

Standaard wordt een rotatie-invoergebeurtenis alleen aan een RadialController-object geleverd wanneer het apparaat minimaal 10 graden wordt gedraaid. Elke invoer gebeurtenis zorgt ervoor dat het apparaat trilt.

Over het algemeen raden we u aan haptische feedback uit te schakelen wanneer de draairesolutie is ingesteld op minder dan 5 graden. Dit biedt een soepelere ervaring voor continue interacties.

U kunt haptische feedback voor aangepaste hulpprogramma's in- en uitschakelen door de eigenschap RadialController.UseAutomaticHapticFeedback in te stellen.

Opmerking

U kunt het haptische gedrag voor systeemhulpprogramma's zoals de volumeregeling niet overschrijven. Voor deze hulpprogramma's kan haptische feedback alleen worden uitgeschakeld door de gebruiker vanaf de pagina met wielinstellingen.

Hier volgt een voorbeeld van het aanpassen van de resolutie van de rotatiegegevens en het in- of uitschakelen van haptische feedback.

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

Klik

Als u op de Surface Dial klikt, klikt u op de linkermuisknop (de draaistatus van het apparaat heeft geen effect op deze actie).

UX-richtlijnen

Wijs een actie of opdracht niet toe aan deze gebaar als de gebruiker niet eenvoudig kan herstellen uit het resultaat

Elke actie die door uw app wordt uitgevoerd op basis van de gebruiker die op de Surface Dial klikt, moet omkeerbaar zijn. Schakel de gebruiker altijd in om de backstack van de app eenvoudig te doorlopen en een eerdere app-status te herstellen.

Binaire bewerkingen zoals dempen/dempen opheffen of weergeven/verbergen bieden goede gebruikerservaringen met de klikbeweging.

Modale hulpprogramma's mogen niet worden ingeschakeld of uitgeschakeld door op de Surface Dial te klikken

Sommige app-/toolmodi kunnen conflicteren met of uitschakelen, interacties die afhankelijk zijn van rotatie. Hulpprogramma's zoals de liniaal in de werkbalk Windows Ink moeten worden in- of uitgeschakeld via andere UI-elementen (de Inktwerkbalk biedt een ingebouwd ToggleButton-besturingselement).

Voor modale hulpprogramma's wijst u de actieve Surface Dial-menuopdracht toe aan het doelprogramma of aan de eerder geselecteerde menuopdracht.

Richtlijnen voor ontwikkelaars

Wanneer op de Surface Dial wordt geklikt, wordt een RadialController.ButtonClicked-gebeurtenis geactiveerd. De RadialControllerButtonClickedEventArgs bevatten een eigenschap Contact die de locatie en het begrenzingsgebied van het contactpunt van de Surface Dial op het Surface Studio-scherm aangeeft. Als de Surface Dial niet in contact is met het scherm, is deze eigenschap null.

Op het scherm

Zoals eerder beschreven, kan de Surface Dial worden gebruikt in combinatie met de Surface Studio om het Surface Dial-menu weer te geven in een speciale schermmodus.

Wanneer u in deze modus bent, kunt u de interactie-ervaringen voor bellen met uw apps nog verder integreren en aanpassen. Voorbeelden van unieke ervaringen die alleen mogelijk zijn met de Surface Dial en Surface Studio zijn:

  • Contextuele hulpmiddelen (zoals een kleurenpalet) weergeven op basis van de positie van de Surface Dial, waardoor ze gemakkelijker te vinden en te gebruiken zijn
  • Het actieve hulpprogramma instellen op basis van de gebruikersinterface waarop de Surface Dial is geplaatst
  • Een schermgebied vergroten op basis van de locatie van de Surface Dial
  • Unieke spelinteracties op basis van schermlocatie

UX-richtlijnen voor interacties op het scherm

Apps moeten reageren wanneer de Surface Dial op het scherm wordt gedetecteerd

Visuele feedback geeft gebruikers aan dat uw app het apparaat heeft gedetecteerd op het scherm van de Surface Studio.

Surface Dial-gerelateerde gebruikersinterface aanpassen op basis van apparaatlocatie

Het apparaat (en het lichaam van de gebruiker) kan kritieke elementen van de gebruikersinterface blokkeren, afhankelijk van waar de gebruiker het plaatst.

Surface Dial-gerelateerde gebruikersinterface aanpassen op basis van gebruikersinteractie

Naast hardware-occlusie kan de hand en arm van een gebruiker een deel van het scherm afsluiten wanneer het apparaat wordt gebruikt.

Het afgedekte gebied is afhankelijk van de hand waarmee het apparaat wordt bediend. Omdat het apparaat is ontworpen voor gebruik met de niet-dominante hand, moet de Surface Dial-gerelateerde gebruikersinterface worden aangepast voor de door de gebruiker opgegeven tegenovergestelde hand (Windows-instellingen Apparaten Pen & Windows-inkt Kies met welke hand u schrijft instelling).

Interacties moeten reageren op de positie van Surface Dial in plaats van beweging

De voet van het apparaat is ontworpen om het scherm te houden in plaats van te schuiven, omdat het geen precisiepuntapparaat is. Daarom verwachten we dat het gebruikelijker is voor gebruikers om de Surface Dial op te tillen en te plaatsen in plaats van het over het scherm te slepen.

Schermpositie gebruiken om de intentie van de gebruiker te bepalen

Het actieve hulpprogramma instellen op basis van ui-context, zoals nabijheid van een besturingselement, canvas of venster, kan de gebruikerservaring verbeteren door de stappen te verminderen die nodig zijn om een taak uit te voeren.

Richtlijnen voor ontwikkelaars

Wanneer de Surface Dial op het digitaleroppervlak van de Surface Studio wordt geplaatst, wordt er een RadialController.ScreenContactStarted-gebeurtenis geactiveerd en worden de contactgegevens (RadialControllerScreenContactStartedEventArgs.Contact) aan uw app verstrekt.

Als op de Surface Dial wordt geklikt terwijl deze in contact is met het digitaliseerd oppervlak van de Surface Studio, wordt er een RadialController.ButtonClicked gebeurtenis geactiveerd en worden de contactgegevens (RadialControllerButtonClickedEventArgs.Contact) aan uw app verstrekt.

De contactgegevens (RadialControllerScreenContact) omvatten de X/Y-coördinaat van het midden van de Surface Dial in de coördinaatruimte van de app (RadialControllerScreenContact.Position), evenals de begrenzingsrechthoek (RadialControllerScreenContact.Bounds) in apparaatonafhankelijke pixels (DIPs). Deze informatie is erg nuttig voor het bieden van context aan het actieve hulpprogramma en het verstrekken van visuele feedback aan de gebruiker met betrekking tot apparaten.

In het volgende voorbeeld hebben we een eenvoudige app gemaakt met vier verschillende secties, die elk één schuifregelaar en één wisselknop bevatten. Vervolgens gebruiken we de positie op het scherm van de Surface Dial om te bepalen welke set schuifregelaars en wisselknoppen door de Surface Dial wordt bepaald.

  1. Eerst declareren we onze gebruikersinterface (vier secties, elk met een schuifregelaar en wisselknop) in XAML.

    Schermopname van het radiale controllervoorbeeld met vier horizontale schuifregelaars die aan de linkerkant zijn ingesteld.
    De gebruikersinterface van de voorbeeld-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>

  2. Hier volgt de code-achter met handlers die zijn gedefinieerd voor de positie van het Surface Dial-scherm.

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

Wanneer we de app uitvoeren, gebruiken we de Surface Dial om ermee te communiceren. Eerst plaatsen we het apparaat op het Surface Studio-scherm, dat de app detecteert en koppelt aan de sectie rechtsonder (zie afbeelding). Vervolgens houden we de Surface Dial ingedrukt om het menu te openen en onze aangepaste tool te selecteren. Zodra het aangepaste hulpmiddel is geactiveerd, kan het schuifregelaar worden aangepast door de Surface Dial te draaien en kan de schakelaar worden ingeschakeld door op de Surface Dial te klikken.

Schermopname van het radiale controllervoorbeeld met vier horizontale schuifregelaars die links zijn ingesteld en de vierde controller is gemarkeerd.
De gebruikersinterface van de voorbeeld-app is geactiveerd met behulp van het aangepaste surface Dial-hulpprogramma

Samenvatting

In dit onderwerp vindt u een overzicht van het Surface Dial-invoerapparaat met UX- en ontwikkelaarsrichtlijnen voor het aanpassen van de gebruikerservaring voor scenario's buiten het scherm en scenario's op het scherm bij gebruik met Surface Studio.

Stuur uw vragen, suggesties en feedback naar radialcontroller@microsoft.com.

Handleiding: Surface Dial (en andere wielapparaten) ondersteunen in uw Windows-app

API-referentie

Samples

Onderwerpvoorbeelden

RadialController aanpassen

Andere voorbeelden

Voorbeeld van kleurboek

Aan de slag met de tutorial: Ondersteuning voor Surface Dial (en andere wielapparaten) in uw Windows-app

Voorbeelden van universeel Windows-platform (C# en C++)

Voorbeeld van Windows-bureaublad

  • Last updated on