Interazioni con Surface DialSurface Dial interactions

Immagine di Surface Dial con Surface StudioImage of Surface Dial with Surface Studio
Surface Dial con Surface Studio e penna (acquistabili nel Microsoft Store).Surface Dial with Surface Studio and Pen (available for purchase at the Microsoft Store).

PanoramicaOverview

I dispositivi Windows Wheel, ad esempio Surface Dial, rappresentano una nuova categoria di dispositivi di input che consentono a un host di esperienze di interazione utente univoche e accattivanti per le app Windows e Windows.Windows wheel devices, such as the Surface Dial, are a new category of input device that enable a host of compelling and unique user interaction experiences for Windows and Windows apps.

Importante

In questo argomento si fa riferimento in modo specifico alle interazioni con la linea di superficie, ma le informazioni sono applicabili a tutti i dispositivi Windows Wheel.In this topic, we refer specifically to Surface Dial interactions, but the info is applicable to all Windows wheel devices.

Partner di app di Surface DialSurface Dial app partners

Superficie Dial per sviluppatoriSurface Dial for devs

Con un fattore di forma basato su un'azione (o movimento) di rotazione, Surface Dial è pensato come dispositivo di input secondario multimodale che integra l'input da un dispositivo primario.With a form factor based on a rotate action (or gesture), the Surface Dial is intended as a secondary, multi-modal input device that complements input from a primary device. Nella maggior parte dei casi, un utente maneggia il dispositivo con la mano non dominante mentre esegue un'attività con la mano dominante, ad esempio l'input penna.In most cases, the device is manipulated by a user's non-dominant hand while performing a task with their dominant hand (such as inking with a pen). Il dispositivo non è progettato per l'input da un puntatore di precisione, come il tocco, la penna o il mouse.It is not designed for precision pointer input (like touch, pen, or mouse).

Surface Dial supporta anche le azioni di pressione prolungata e di clic.The Surface Dial also supports both a press and hold action and a click action. La pressione prolungata ha una sola funzione, quella di visualizzare un menu di comandi.Press and hold has a single function: display a menu of commands. Se il menu è attivo, l'input della rotazione e del clic viene elaborato dal menu.If the menu is active, the rotate and click input is processed by the menu. Altrimenti l'input viene passato all'app per l'elaborazione.Otherwise, the input is passed to your app for processing.

Come con tutti i dispositivi di input Windows, puoi personalizzare e adattare l'esperienza di interazione con Surface Dial in base alla funzionalità delle tue app.As with all Windows input devices, you can customize and tailor the Surface Dial interaction experience to suit the functionality in your apps.

Suggerimento

Surface Dial e il nuovo Surface Studio, se usati insieme, possono offrire un'esperienza utente ancora più peculiare.Used together, the Surface Dial and the new Surface Studio can provide an even more distinctive user experience.

Oltre all'esperienza predefinita della pressione prolungata per il menu di cui abbiamo già parlato, Surface Dial può essere posizionato direttamente sullo schermo di Surface Studio.In addition to the default press and hold menu experience described, the Surface Dial can also be placed directly on the screen of the Surface Studio. Questa azione abilita uno speciale menu "su schermo".This enables a special "on-screen" menu.

Il sistema rileva il punto di contatto e il bordo di Surface Dial e usa queste informazioni per gestire l'occlusione da parte del dispositivo e visualizzare una versione più grande del menu attorno a Surface Dial.By detecting both the contact location and bounds of the Surface Dial, the system uses this info to handle occlusion by the device and display a larger version of the menu that wraps around the outside of the Dial. Queste stesse informazioni possono essere usate anche dalla tua app per adattare l'interfaccia utente sia alla presenza del dispositivo che al suo utilizzo anticipato, ad esempio all'appoggio della mano e del braccio dell'utente.This same info can also be used by your app to adapt the UI for both the presence of the device and its anticipated usage, such as the placement of the user's hand and arm.

Menu di Surface Dial fuori dallo schermoSurface Dial off-screen menu

Screenshot del menu a discesa della linea di superficie.

Menu di Surface Dial sullo schermoSurface Dial on-screen menu

Screenshot del menu di selezione della superficie di visualizzazione.

Integrazione del sistemaSystem integration

Surface Dial è strettamente integrato con Windows e supporta un set di strumenti predefiniti nel menu: volume di sistema, scorrimento, zoom avanti/indietro e annullamento/ripetizione.The Surface Dial is tightly integrated with Windows and supports a set of built-in tools on the menu: system volume, scroll, zoom in/out, and undo/redo.

Questa raccolta di sistemi predefiniti si adatta al contesto del sistema corrente per includere:This collection of built-in tools adapts to the current system context to include:

  • Uno strumento per la luminosità del sistema quando l'utente è sul desktop di WindowsA system brightness tool when the user is on the Windows Desktop
  • Uno strumento per la traccia precedente/successiva quando è in corso la riproduzione di contenuto multimedialeA previous/next track tool when media is playing

Oltre a questo supporto della piattaforma generale, il quadrante della superficie è anche strettamente integrato con i controlli della piattaforma Windows Ink (InkCanvas e InkToolbar).In addition to this general platform support, the Surface Dial is also tightly integrated with the Windows Ink platform controls (InkCanvas and InkToolbar).

Superficie Dial con penna per SurfaceSurface Dial with Surface Pen
Superficie Dial con penna per SurfaceSurface Dial with Surface Pen

Questi controlli, se usati con Surface Dial, abilitano funzionalità aggiuntive per modificare gli attributi dell'input penna e controllare lo stencil del righello della barra degli strumenti Input penna.When used with the Surface Dial, these controls enable additional functionality for modifying ink attributes and controlling the ink toolbar’s ruler stencil.

Quando apri il menu di Surface Dial in un'applicazione input penna che usa la barra degli strumenti Input penna, ora il menu include gli strumenti per controllare il tipo di penna e lo spessore del pennello.When you open the Surface Dial Menu in an inking application that uses the ink toolbar, the menu now includes tools for controlling pen type and brush thickness. Quando il righello è abilitato, al menu viene aggiunto uno strumento corrispondente che consente al dispositivo di controllare la posizione e l'angolo del righello.When the ruler is enabled, a corresponding tool is added to the menu that lets the device control the position and angle of the ruler.

Menu di Surface Dial con lo strumento di selezione della penna per la barra degli strumenti di Windows InkSurface Dial menu with pen selection tool for the Windows Ink toolbar
Menu di Surface Dial con lo strumento di selezione della penna per la barra degli strumenti di Windows InkSurface Dial menu with pen selection tool for the Windows Ink toolbar

Menu di Surface Dial con lo strumento per le dimensioni del tratto per la barra degli strumenti di Windows InkSurface Dial menu with stroke size tool for the Windows Ink toolbar
Menu di Surface Dial con lo strumento per le dimensioni del tratto per la barra degli strumenti di Windows InkSurface Dial menu with stroke size tool for the Windows Ink toolbar

Menu di Surface Dial con lo strumento Righello per la barra degli strumenti di Windows InkSurface Dial menu with ruler tool for the Windows Ink toolbar
Menu di Surface Dial con lo strumento Righello per la barra degli strumenti di Windows InkSurface Dial menu with ruler tool for the Windows Ink toolbar

Personalizzazione utenteUser customization

Nella pagina Impostazioni di Windows -> Dispositivi -> Selettore circolare gli utenti possono personalizzare alcuni aspetti della loro esperienza con Surface Dial, tra cui gli strumenti predefiniti, la vibrazione (o feedback aptico) e la mano che scrive (o dominante).Users can customize some aspects of their Dial experience through the Windows Settings -> Devices -> Wheel page, including default tools, vibration (or haptic feedback), and writing (or dominant) hand.

Quando personalizzi l'esperienza utente con Surface Dial, assicurati sempre che una particolare funzione o comportamento sia disponibile e abilitato dall'utente.When customizing the Surface Dial user experience, you should always ensure that a particular function or behavior is available and enabled by the user.

Strumenti personalizzatiCustom tools

Ora analizzeremo le linee guida per l'esperienza utente e per gli sviluppatori per personalizzare gli strumenti esposti nel menu di Surface Dial.Here we discuss both UX and developer guidance for customizing the tools exposed on the Surface Dial menu.

Linee guida su UX per gli strumenti personalizzatiUX guidance for custom tools

Assicurarsi che gli strumenti corrispondano al contesto corrente Per gli utenti, quello che fa uno strumento e come funziona l'interazione con Surface Dial deve essere chiaro e intuitivo, così potranno imparare velocemente rimanendo concentrati sulla loro attività.Ensure your tools correspond to the current context When you make it clear and intuitive what a tool does and how the Surface Dial interaction works, you help users learn quickly and stay focused on their task.

Ridurre al minimo il numero di strumenti dell'appMinimize the number of app tools as much as possible
Il menu di Surface Dial ha spazio per sette voci.The Surface Dial menu has room for seven items. Se le voci sono di più, l'utente deve girare Surface Dial per visualizzare gli strumenti disponibili in un riquadro a comparsa di overflow, ma in questo modo sarà difficile esplorare il menu e individuare e selezionare gli strumenti.If there are eight or more items, the user needs to turn the Dial to see which tools are available in an overflow flyout, making the menu difficult to navigate and tools difficult to discover and select.

Ti consigliamo di fornire un solo strumento personalizzato per la tua app o per il contesto dell'app.We recommend providing a single custom tool for your app or app context. In questo modo puoi impostare lo strumento in base a ciò che l'utente sta facendo senza che debba attivare il menu di Surface Dial e selezionare uno strumento.Doing so enables you to set that tool based on what the user is doing without requiring them to activate the Surface Dial menu and select a tool.

Aggiornare in modo dinamico la raccolta di strumentiDynamically update the collection of tools
Dato che le voci di menu di Surface Dial non supportano uno stato disabilitato, devi aggiungere e rimuovere gli strumenti in modo dinamico (inclusi gli strumenti predefiniti) in base al contesto dell'utente (la visualizzazione corrente o la finestra attiva).Because Surface Dial menu items do not support a disabled state, you should dynamically add and remove tools (including built-in, default tools) based on user context (current view or focused window). Se uno strumento non è pertinente all'attività corrente o è ridondante, rimuovilo.If a tool is not relevant to the current activity or it’s redundant, remove it.

Importante

Quando aggiungi una voce al menu, assicurati che non esista già.When you add an item to the menu, ensure the item does not already exist.

Non rimuovere lo strumento di impostazione del volume di sistema predefinitoDon’t remove the built-in system volume setting tool
Il controllo del volume in genere è sempre necessario all'utente.Volume control is typically always required by user. Se, ad esempio, ascolta della musica mentre usa la tua app, gli strumenti per regolare il volume e passare al brano successivo dovrebbero essere sempre accessibili dal menu di Surface Dial.They might be listening to music while using your app, so volume and next track tools should always be accessible from the Surface Dial menu. Lo strumento per passare alla traccia successiva viene automaticamente aggiunto al menu durante la riproduzione di contenti multimediali.(The next track tool is automatically added to the menu when media is playing.)

Essere coerente con l'organizzazione del menuBe consistent with menu organization
Questo aiuta gli utenti a individuare e conoscere gli strumenti che sono disponibili mentre usano la tua app e a passare più velocemente da uno strumento all'altro.This helps users with discovering and learning what tools are available when using your app, and helps improve their efficiency when switching tools.

Inserire icone di alta qualità coerenti con le icone predefiniteProvide high-quality icons consistent with the built-in icons
Le icone ti aiutano a comunicare professionalità ed eccellenza e a ispirare fiducia negli utenti.Icons can convey professionalism and excellence, and inspire trust in users.

  • Usa un'immagine PNG di alta qualità da 64 x 64 pixel (44 x 44 è la dimensione minima supportata)Provide a high-quality 64 x 64 pixel PNG image (44 x 44 is the smallest supported)
  • Verifica che lo sfondo sia trasparenteEnsure the background is transparent
  • L'icona deve occupare la maggior parte dell'immagineThe icon should fill most of the image
  • Un'icona bianca deve avere un contorno nero per essere visibile in modalità a contrasto elevatoA white icon should have a black outline to be visible in high contrast mode

Screenshot di un'icona con sfondo alfa.

Icona con sfondo alfaIcon with alpha background

Screenshot di un'icona visualizzata nel menu della rotellina con il tema predefinito.

Icona visualizzata nel menu selettore circolare con il tema predefinitoIcon displayed on wheel menu with default theme

Screenshot di un'icona visualizzata nel menu della rotellina con Contrasto elevato tema bianco.

Icona visualizzata nel menu selettore circolare con il tema Bianco a contrasto elevatoIcon displayed on wheel menu with High Contrast White theme

Usare nomi concisi e descrittiviUse concise and descriptive names
Il nome dello strumento viene visualizzato nel menu dello strumento insieme all'icona dello strumento ed è usato anche dalle utilità per la lettura dello schermo.The tool name is displayed in the tool menu along with the tool icon and is also used by screen readers.

  • I nomi devono essere brevi per entrare nel cerchio centrale del menu selettore circolareNames should be short to fit inside the central circle of the wheel menu
  • I nomi devono indicare con chiarezza l'azione primaria (un'azione complementare può essere implicita):Names should clearly identify the primary action (a complementary action can be implied):
    • Scorri indica l'effetto di entrambe le direzioni di rotazioneScroll indicates the effect of both rotation directions
    • Annulla specifica un'azione primaria, ma Ripeti (l'azione complementare) è deducibile e facilmente individuabile per l'utenteUndo specifies a primary action, but redo (the complementary action) can be inferred and easily discovered by the user

Istruzioni per sviluppatoriDeveloper guidance

Puoi personalizzare l'esperienza con Surface Dial per integrare le funzionalità delle tue app tramite un set completo di API Windows Runtime.You can customize the Surface Dial experience to complement the functionality in your apps through a comprehensive set of Windows Runtime APIs.

Come indicato prima, il menu di Surface Dial predefinito è prepopolato con un set di strumenti predefiniti che coprono un'ampia gamma di funzionalità di sistema di base (volume di sistema, luminosità di sistema, scorrimento, zoom, annullamento e controllo del contenuto multimediale quando il sistema rileva una riproduzione audio o video in corso),As previously mentioned, the default Surface Dial menu is pre-populated with a set of built-in tools covering a broad range of basic system features (system volume, system brightness, scroll, zoom, undo, and media control when the system detects ongoing audio or video playback). ma è possibile che questi strumenti predefiniti non garantiscano la funzionalità necessaria per la tua app.However, these default tools might not provide the functionality required by your app.

Nelle sezioni seguenti spieghiamo come aggiungere uno strumento personalizzato al menu di Surface Dial e indichiamo quali strumenti predefiniti vengono esposti.In the following sections, we describe how to add a custom tool to the Surface Dial menu and specify which built-in tools are exposed.

Scaricare una versione più affidabile di questo esempio dalla personalizzazione di RadialController.Download a more robust version of this sample from RadialController customization.

Aggiungere uno strumento personalizzatoAdd a custom tool

In questo esempio aggiungiamo uno strumento personalizzato di base che passa i dati di input sia dagli eventi di rotazione che dagli eventi clic ad alcuni controlli dell'interfaccia utente XAML.In this example, we add a basic custom tool that passes the input data from both the rotation and click events to some XAML UI controls.

  1. Prima di tutto dichiariamo la nostra interfaccia utente (solo un dispositivo di scorrimento e un interruttore) in XAML.First, we declare our UI (just a slider and toggle button) in XAML.

    Screenshot dell'esempio di controller radiale con il dispositivo di scorrimento orizzontale impostato a sinistra.Screenshot of the Radial Controller Sample with the horizontal slider set to the left.
    Interfaccia utente dell'app di esempioThe sample 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>
    
  2. Quindi, nel code-behind, viene aggiunto uno strumento personalizzato al menu di composizione della superficie e vengono dichiarati i gestori di input RadialController .Then, in code-behind, we add a custom tool to the Surface Dial menu and declare the RadialController input handlers.

    Viene ottenuto un riferimento all'oggetto RadialController per la linea di superficie (controller) chiamando CreateForCurrentView.We get a reference to the RadialController object for the Surface Dial (myController) by calling CreateForCurrentView.

    Si crea quindi un'istanza di RadialControllerMenuItem (elemento) chiamando RadialControllerMenuItem. CreateFromIcon.We then create an instance of a RadialControllerMenuItem (myItem) by calling RadialControllerMenuItem.CreateFromIcon.

    Poi aggiungiamo questo elemento alla raccolta di voci di menu.Next, we append that item to the collection of menu items.

    I gestori eventi di input (ButtonClicked e RotationChanged) vengono dichiarati per l'oggetto RadialController .We declare the input event handlers (ButtonClicked and RotationChanged) for the RadialController object.

    Infine definiamo i gestori eventi.Finally, we define the event handlers.

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

Quando eseguiamo l'app, usiamo Surface Dial per interagire.When we run the app, we use the Surface Dial to interact with it. Prima di tutto, teniamo premuto per aprire il menu e selezioniamo il nostro strumento personalizzato.First, we press and hold to open the menu and select our custom tool. Una volta attivato lo strumento personalizzato, puoi regolare il dispositivo di scorrimento ruotando Surface Dial e attivare e disattivare l'interruttore facendo clic su Surface Dial.Once the custom tool is activated, the slider control can be adjusted by rotating the Dial and the switch can be toggled by clicking the Dial.

Screenshot dell'esempio di controller radiale con il dispositivo di scorrimento orizzontale impostato sul centro.Screenshot of the Radial Controller Sample with the horizontal slider set to the middle.
Interfaccia utente dell'app di esempio attivata tramite lo strumento personalizzato di Surface DialThe sample app UI activated using the Surface Dial custom tool

Specificare gli strumenti predefinitiSpecify the built-in tools

È possibile usare la classe RadialControllerConfiguration per personalizzare la raccolta di voci di menu predefinite per l'app.You can use the RadialControllerConfiguration class to customize the collection of built-in menu items for your app.

Se, ad esempio, l'app non ha aree di scorrimento o di zoom e non richiede la funzionalità di annullamento/ripetizione, questi strumenti possono essere rimossi dal menu.For example, if your app doesn’t have any scrolling or zooming regions and doesn’t require undo/redo functionality, these tools can be removed from the menu. In questo modo guadagni spazio nel menu per aggiungere strumenti personalizzati per la tua app.This opens space on the menu to add custom tools for your app.

Importante

Il menu di Surface Dial deve contenere almeno una voce di menu.The Surface Dial menu must have at least one menu item. Se tutti gli strumenti predefiniti vengono rimossi prima che tu aggiunga uno dei tuoi strumenti personalizzati, gli strumenti predefiniti vengono ripristinati e il tuo strumento viene aggiunto alla raccolta predefinita.If all default tools are removed before you add one of your custom tools, the default tools are restored and your tool is appended to the default collection.

In base alle linee guida per la progettazione, ti sconsigliamo di rimuovere gli strumenti di controllo dei contenuti multimediali (volume e traccia precedente/successiva) perché spesso gli utenti riproducono musica in background mentre eseguono altre attività.Per the design guidelines, we do not recommend removing the media control tools (volume and previous/next track) as users often have background music playing while they perform other tasks.

Qui illustriamo come configurare il menu di Surface Dial per includere solo i controlli di contenuti multimediali per il volume e la traccia successiva/precedente.Here, we show how to configure the Surface Dial menu to include only media controls for volume and next/previous track.

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

Interazioni personalizzateCustom interactions

Come già accennato, Surface Dial supporta tre movimenti (pressione prolungata, rotazione, clic) con le corrispondenti interazioni predefinite.As mentioned, the Surface Dial supports three gestures (press and hold, rotate, click) with corresponding default interactions.

Assicurati che le interazioni personalizzate basate su questi movimenti abbiano senso per l'azione o lo strumento selezionato.Ensure any custom interactions based on these gestures make sense for the selected action or tool.

Nota

L'esperienza di interazione dipende dallo stato del menu di Surface Dial.The interaction experience is dependent on the state of the Surface Dial menu. Se il menu è attivo, elabora l'input. In caso contrario è l'app a farlo.If the menu is active, it processes the input; otherwise, your app does.

Tenere premutoPress and hold

A questo movimento che attiva e visualizza il menu di Surface Dial non è associata alcuna funzionalità dell'app.This gesture activates and shows the Surface Dial menu, there is no app functionality associated with this gesture.

Per impostazione predefinita, il menu viene visualizzato al centro dello schermo dell'utente,By default, the menu is displayed at the center of the user’s screen. ma l'utente può prenderlo e spostarlo dove preferisce.However, the user can grab it and move it anywhere they choose.

Nota

Quando Surface Dial viene posizionato sullo schermo di Surface Studio, il menu è al centro della posizione sullo schermo di Surface Dial.When the Surface Dial is placed on the screen of the Surface Studio, the menu is centered at the on-screen location of the Surface Dial.

RuotaRotate

Surface Dial è progettato principalmente per supportare la rotazione per le interazioni che comportano leggere correzioni incrementali per controlli o valori analoghi.The Surface Dial is primarily designed to support rotation for interactions that involve smooth, incremental adjustments to analog values or controls.

Il dispositivo può essere ruotato in senso orario o antiorario e può fornire feedback aptico per indicare distanze discrete.The device can be rotated both clockwise and counter-clockwise, and can also provide haptic feedback to indicate discrete distances.

Nota

Il feedback aptico può essere disabilitato dall'utente nella pagina Impostazioni di Windows -> Dispositivi -> Selettore circolare.Haptic feedback can be disabled by the user in the Windows Settings -> Devices -> Wheel page.

Linee guida per l'esperienza utente per le interazioni personalizzateUX guidance for custom interactions

Per gli strumenti con sensibilità rotazionale continua o elevata è opportuno disabilitare il feedback apticoTools with continuous or high rotational sensitivity should disable haptic feedback

Il feedback aptico corrisponde alla sensibilità rotazionale dello strumento attivo.Haptic feedback matches the rotational sensitivity of the active tool. Ti consigliamo di disabilitare il feedback aptico per gli strumenti con sensibilità rotazionale continua o elevata per evitare che l'esperienza utente possa diventare complicata.We recommend disabling haptic feedback for tools with continuous or high rotational sensitivity as the user experience can get uncomfortable.

La mano dominante non deve ostacolare le interazioni basate sulla rotazioneDominant hand should not affect rotation-based interactions

Surface Dial non riesce a rilevare la mano usata, ma l'utente può impostare la mano usata per scrivere (o dominante) in Impostazioni di Windows -> Dispositivi -> Penna e Windows Ink.The Surface Dial cannot detect which hand is being used, but the user can set the writing (or dominant hand) in Windows Settings -> Device -> Pen & Windows Ink.

Tenere in considerazione le impostazioni locali per tutte le interazioni basate sulla rotazioneLocale should be considered for all rotation interactions

Ottimizza la soddisfazione dei clienti adattando le tue interazioni alle impostazioni locali e ai layout da destra a sinistra.Maximize customer satisfaction by accomodating and adapting your interactions to locale and right-to-left layouts.

Gli strumenti e i comandi predefiniti nel menu di Surface Dial seguono queste linee guida per le interazioni basate sulla rotazione:The built-in tools and commands on the Dial menu follow these guidelines for rotation-based interactions:

SinistraLeft

SuUp

In uscitaOut

Immagine di Surface Dial

DestraRight

GiùDown

InIn

Direzione concettualeConceptual direction Mapping a Surface DialMapping to Surface Dial Rotazione in senso orarioClockwise rotation Rotazione in senso antiorarioCounter-clockwise rotation
Ridimensionamento orizzontaleHorizontal Mapping a sinistra e destra basato sulla parte superiore di Surface DialLeft and right mapping based on the top of the Surface Dial DestraRight SinistraLeft
VerticalVertical Mapping in alto e in basso basato sul lato sinistro di Surface DialUp and down mapping based on the left side of the Surface Dial GiùDown SuUp
Asse ZZ-axis Con mapping verso l'interno (o più vicino) in alto/a destraIn (or nearer) mapped to up/right
Con mapping verso l'esterno (o più lontano) in basso/a sinistraOut (or further) mapped to down/left
InIn In uscitaOut

Istruzioni per sviluppatoriDeveloper guidance

Quando l'utente ruota il dispositivo, vengono generati eventi RadialController.RotationChanged in base a un delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relativo alla direzione di rotazione.As the user rotates the device, RadialController.RotationChanged events are fired based on a delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relative to the direction of rotation. La sensibilità (o risoluzione) dei dati può essere impostata con la proprietà RadialController.RotationResolutionInDegrees.The sensitivity (or resolution) of the data can be set with the RadialController.RotationResolutionInDegrees property.

Nota

Per impostazione predefinita, un evento di input rotazionale viene recapitato a un oggetto RadialController solo quando il dispositivo viene ruotato di un minimo di 10 gradi.By default, a rotational input event is delivered to a RadialController object only when the device is rotated a minimum of 10 degrees. Ogni evento di input fa vibrare il dispositivo.Each input event causes the device to vibrate.

In generale ti consigliamo di disabilitare il feedback aptico quando la risoluzione della rotazione è impostata su meno di 5 gradi,In general, we recommend disabling haptic feedback when the rotation resolution is set to less than 5 degrees. in modo che l'esperienza per le interazioni continue risulti più fluida.This provides a smoother experience for continuous interactions.

È possibile abilitare e disabilitare il feedback tattile per gli strumenti personalizzati impostando la proprietà RadialController. UseAutomaticHapticFeedback .You can enable and disable haptic feedback for custom tools by setting the RadialController.UseAutomaticHapticFeedback property.

Nota

Non è possibile ignorare il comportamento aptico per gli strumenti di sistema come il controllo del volume.You cannot override the haptic behavior for system tools such as the volume control. Per questi strumenti, il feedback tattile può essere disabilitato solo dall'utente nella pagina delle impostazioni della rotellina.For these tools, haptic feedback can be disabled only by the user from the wheel settings page.

Ecco un esempio di come personalizzare la risoluzione dei dati di rotazione e di come abilitare o disabilitare il feedback aptico.Here’s an example of how to customize the resolution of the rotation data and enable or disable haptic 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;
  }
}

Fare clic suClick

Fare clic su Surface Dial è come fare clic sul pulsante sinistro del mouse. Lo stato della rotazione del dispositivo non ha effetto su questa azione.Clicking the Surface Dial is similar to clicking the left mouse button (the rotation state of the device has no effect on this action).

Linee guida per l'esperienza utenteUX guidance

Non associare un'azione o un comando a questo movimento se l'utente non può tornare facilmente indietroDo not map an action or command to this gesture if the user cannot easily recover from the result

Ogni azione eseguita dalla tua app in seguito a un clic dell'utente su Surface Dial deve essere reversibile.Any action taken by your app based on the user clicking the Surface Dial must be reversible. Consenti sempre all'utente di percorrere a ritroso le azioni eseguite nell'app e di ripristinare uno stato precedente dell'app.Always enable the user to easily traverse the app back stack and restore a previous app state.

Le operazioni binarie, ad esempio disattivare/attivare l'audio o mostrare/nascondere, offrono una buona esperienza utente con il movimento clic.Binary operations such as mute/unmute or show/hide provide good user experiences with the click gesture.

Gli strumenti modali non devono essere abilitati o disabilitati facendo clic su Surface DialModal tools should not be enabled or disabled by clicking the Surface Dial

Alcune modalità di app/strumenti possono entrare in conflitto con le interazioni basate sulla rotazione o disabilitarle.Some app/tool modes can conflict with, or disable, interactions that rely on rotation. Gli strumenti come il righello nella barra degli strumenti di Windows Ink devono essere attivati o disattivati tramite altri inviti dell'interfaccia utente (la barra degli strumenti di Ink include un pulsante ToggleButton predefinito).Tools such as the ruler in the Windows Ink toolbar, should be toggled on or off through other UI affordances (the Ink Toolbar provides a built-in ToggleButton control).

Per gli strumenti modali, associa la voce di menu di Surface Dial attiva allo strumento di destinazione o alla voce di menu già selezionata.For modal tools, map the active Surface Dial menu item to the target tool or to the previously selected menu item.

Istruzioni per sviluppatoriDeveloper guidance

Quando si fa clic su Surface Dial, viene generato un evento RadialController.ButtonClicked.When the Surface Dial is clicked, a RadialController.ButtonClicked event is fired. Il RadialControllerButtonClickedEventArgs include una proprietà Contact che contiene la posizione e l'area delimitatore del contatto della linea di superficie nella schermata Surface Studio.The RadialControllerButtonClickedEventArgs include a Contact property that contains the location and bounding area of the Surface Dial contact on the Surface Studio screen. Se Surface Dial non è a contatto con lo schermo, questa proprietà è null.If the Surface Dial is not in contact with the screen, this property is null.

Su schermoOn-screen

Come descritto in precedenza, Surface Dial può essere usato insieme a Surface Studio per visualizzare il menu di Surface Dial in una speciale modalità su schermo.As described earlier, the Surface Dial can be used in conjunction with the Surface Studio to display the Surface Dial menu in a special on-screen mode.

Quando sei in questa modalità, puoi integrare e personalizzare ancora di più le tue esperienze di interazione con Surface Dial con le tue app.When in this mode, you can integrate and customize your Dial interaction experiences with your apps even further. Ecco alcuni esempi di esperienze uniche rese possibili esclusivamente da Surface Dial e Surface Studio:Examples of unique experiences only possible with the Surface Dial and Surface Studio include:

  • Visualizzazione di strumenti contestuali (ad esempio, una tavolozza dei colori) in base alla posizione di Surface Dial, che rende più facile trovarli e usarliDisplaying contextual tools (such as a color palette) based on the position of the Surface Dial, which makes them easier to find and use
  • Impostazione dello strumento attivo in base alla 'interfaccia utente su cui si trova Surface DialSetting the active tool based on the UI the Surface Dial is placed on
  • Ingrandimento di un'area dello schermo in base alla posizione di Surface DialMagnifying a screen area based on location of the Surface Dial
  • Interazioni di gioco uniche in base alla posizione sullo schermoUnique game interactions based on screen location

Linee guida per l'esperienza utente per le interazioni sullo schermoUX guidance for on-screen interactions

Le app devono rispondere quando viene rilevato Surface Dial sullo schermoApps should respond when the Surface Dial is detected on-screen

Il feedback visivo consente di indicare agli utenti che la tua app ha rilevato il dispositivo sullo schermo di Surface Studio.Visual feedback helps indicate to users that your app has detected the device on the screen of the Surface Studio.

Modificare l'interfaccia utente correlata a Surface Dial in base alla posizione del dispositivoAdjust Surface Dial-related UI based on device location

Il dispositivo (e il corpo dell'utente) può bloccare elementi critici dell'interfaccia utente a seconda di dove l'utente lo posiziona.The device (and the user's body) can occlude critical UI depending on where the user places it.

Modificare l'interfaccia utente correlata a Surface Dial in base all'interazione dell'utenteAdjust Surface Dial-related UI based on user interaction

Oltre all'occlusione causata dall'hardware, la mano e il braccio di un utente possono bloccare parte dello schermo durante l'uso del dispositivo.In addition to hardware occlusion, a user’s hand and arm can occlude part of the screen when using the device.

L'area bloccata dipende dalla mano che viene usata con il dispositivo.The occluded area depends on which hand is being used with the device. Dato che il dispositivo è progettato per essere usato soprattutto con la mano non dominante, l'interfaccia utente correlata a Surface Dial deve essere adattata all'altra mano specificata dall'utente (impostazione Impostazioni di Windows > Dispositivi > Penna e Windows Ink > Scegli la mano che usi per scrivere).As the device is designed to be used primarily with the non-dominant hand, Surface Dial-related UI should adjust for the opposite hand specified by the user (Windows Settings > Devices > Pen & Windows Ink > Choose which hand you write with setting).

Le interazioni devono rispondere alla posizione di Surface Dial invece che al movimentoInteractions should respond to Surface Dial position rather than movement

La base del dispositivo è progettata per aderire allo schermo e non per scorrere, perché non è un dispositivo di puntamento di precisione.The foot of the device is designed to stick to the screen rather than slide, as it is not a precision pointing device. Prevediamo quindi che per lo più gli utenti solleveranno e posizioneranno Surface Dial invece di trascinarlo sullo schermo.Therefore, we expect it to be more common for users to lift and place the Surface Dial rather than drag it across the screen.

Usare la posizione sullo schermo per determinare l'intento dell'utenteUse screen position to determine user intent

Impostare lo strumento attivo in base al contesto dell'interfaccia utente, ad esempio in base alla prossimità a un controllo, un canvas o una finestra, può migliorare l'esperienza utente riducendo il numero di passaggi necessari per eseguire un'attività.Setting the active tool based on UI context, such as proximity to a control, canvas, or window, can improve the user experience by reducing the steps required to perform a task.

Istruzioni per sviluppatoriDeveloper guidance

Quando Surface Dial viene posizionato sulla superficie del digitalizzatore di Surface Studio, viene generato un evento RadialController.ScreenContactStarted e la tua app riceve i dati di contatto (RadialControllerScreenContactStartedEventArgs.Contact).When the Surface Dial is placed onto the digitizer surface of the Surface Studio, a RadialController.ScreenContactStarted event is fired and the contact info (RadialControllerScreenContactStartedEventArgs.Contact) is provided to your app.

Analogamente, se si fa clic sulla linea di superficie quando si è in contatto con la superficie del digitalizzatore di Surface Studio, viene generato un evento RadialController. ButtonClicked e le informazioni di contatto (RadialControllerButtonClickedEventArgs. Contact) vengono fornite all'app.Similarly, if the Surface Dial is clicked when in contact with the digitizer surface of the Surface Studio, a RadialController.ButtonClicked event is fired and the contact info (RadialControllerButtonClickedEventArgs.Contact) is provided to your app.

I dati di contatto (RadialControllerScreenContact) includono le coordinate X/Y del centro di Surface Dial nello spazio delle coordinate dell'app (RadialControllerScreenContact.Position), oltre al rettangolo delimitatore (RadialControllerScreenContact.Bounds) in DIP (Device Independent Pixel).The contact info (RadialControllerScreenContact) includes the X/Y coordinate of the center of the Surface Dial in the coordinate space of the app (RadialControllerScreenContact.Position), as well as the bounding rectangle (RadialControllerScreenContact.Bounds) in Device Independent Pixels (DIPs). Queste informazioni sono molto utili per fornire allo strumento attivo il contesto e all'utente il feedback visivo correlato al dispositivo.This info is very useful for providing context to the active tool and providing device-related visual feedback to the user.

Nell'esempio seguente abbiamo creato un'app di base con quattro sezioni diverse, ognuna delle quali include un dispositivo di scorrimento e un interruttore.In the following example, we’ve created a basic app with four different sections, each of which includes one slider and one toggle. Poi usiamo la posizione sullo schermo di Surface Dial per determinare il set di dispositivi di scorrimento e interruttori controllato da Surface Dial.We then use the onscreen position of the Surface Dial to dictate which set of sliders and toggles are controlled by the Surface Dial.

  1. Prima di tutto dichiariamo la nostra interfaccia utente (quattro sezioni, ognuna con un dispositivo di scorrimento e un interruttore) in XAML.First, we declare our UI (four sections, each with a slider and toggle button) in XAML.

    Screenshot dell'esempio di controller radiale con quattro dispositivi di scorrimento orizzontali impostati sulla sinistra.Screenshot of the Radial Controller Sample with four horizontal sliders set to the left.
    Interfaccia utente dell'app di esempioThe sample app UI

```
  1. Ecco il code-behind con i gestori definiti per la posizione sullo schermo di Surface Dial.Here's the code-behind with handlers defined for Surface Dial screen position.
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;
    }
  }
}

Quando eseguiamo l'app, usiamo Surface Dial per interagire.When we run the app, we use the Surface Dial to interact with it. Prima posizioniamo sullo schermo di Surface Studio il dispositivo, che l'app rileva e associa alla sezione in basso a destra (vedi l'immagine).First, we place the device on the Surface Studio screen, which the app detects and associates with the lower right section (see image). Poi teniamo premuto Surface Dial per aprire il menu e selezioniamo il nostro strumento personalizzato.We then press and hold the Surface Dial to open the menu and select our custom tool. Una volta attivato lo strumento personalizzato, puoi regolare il dispositivo di scorrimento ruotando Surface Dial e attivare e disattivare l'interruttore facendo clic su Surface Dial.Once the custom tool is activated, the slider control can be adjusted by rotating the Surface Dial and the switch can be toggled by clicking the Surface Dial.

Screenshot dell'esempio di controller radiale con quattro dispositivi di scorrimento orizzontali impostati sulla sinistra e sul quarto controller evidenziati.Screenshot of the Radial Controller Sample with four horizontal sliders set to the left and the fourth controller highlighted.
Interfaccia utente dell'app di esempio attivata tramite lo strumento personalizzato di Surface DialThe sample app UI activated using the Surface Dial custom tool

RiepilogoSummary

Questo argomento offre una panoramica del dispositivo di input Surface Dial, incluse le linee guida per l'esperienza utente e per gli sviluppatori su come personalizzare l'esperienza utente per gli scenari fuori dallo schermo, ma anche per gli scenari sullo schermo quando il dispositivo viene usato con Surface Studio.This topic provides an overview of the Surface Dial input device with UX and developer guidance on how to customize the user experience for off-screen scenarios as well as on-screen scenarios when used with Surface Studio.

Inviare le domande, i suggerimenti e i commenti a radialcontroller@microsoft.com .Please send your questions, suggestions, and feedback to radialcontroller@microsoft.com.

Esercitazione: supportare la linea di superficie e altri dispositivi della rotellina nell'app di WindowsTutorial: Support the Surface Dial (and other wheel devices) in your Windows app

Informazioni di riferimento sulle APIAPI reference

EsempiSamples

Esempi di argomentoTopic samples

Personalizzazione di RadialControllerRadialController customization

Altri esempiOther samples

Esempio di colorazione BookColoring Book sample

Esercitazione introduttiva: supportare la linea di superficie e altri dispositivi della rotellina nell'app di WindowsGet Started Tutorial: Support the Surface Dial (and other wheel devices) in your Windows app

Esempi per la piattaforma UWP (Universal Windows Platform) (C# e C++)Universal Windows Platform samples (C# and C++)

Esempio per il desktop classico di WindowsWindows classic desktop sample