Linee guida per le destinazioni di tocco

  • Articolo

Tutti gli elementi interattivi dell'interfaccia utente dell'applicazione Windows devono essere sufficientemente grandi per consentire agli utenti di accedervi e usarli in modo accurato, indipendentemente dal tipo di dispositivo o dal metodo di input.

Il supporto dell'input tocco (e la natura relativamente imprecisa dell'area di contatto del tocco) richiede un'ulteriore ottimizzazione rispetto alle dimensioni di destinazione e al layout del controllo, poiché viene usato un set di dati di input più grande e complesso riferito dal digitalizzatore tocco per determinare la destinazione voluta dall'utente (o più probabile).

Tutti i controlli UWP sono stati progettati con layout e dimensioni di destinazione tocco predefiniti che consentono di creare app visivamente bilanciate e accattivanti confortevoli, facili da usare e affidabili.

Questo argomento descrive questi comportamenti predefiniti in modo da poter progettare l'app all'insegna della facilità d'uso usando sia i controlli della piattaforma sia i controlli personalizzati (se l'app li richiede).

API importanti: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Dimensionamento Fluent Standard

Il dimensionamento Fluent Standard è stato creato per offrire equilibrio tra densità delle informazioni e comodità per l'utente. Tutti gli elementi sullo schermo sono allineati in base a un target di 40 x 40 pixel effettivi (epx) grazie a cui gli elementi dell'interfaccia utente rimangono allineati a una griglia e si ridimensionano in modo appropriato in base al ridimensionamento a livello di sistema.

Nota

Per maggiori informazioni sui pixel effettivi e sul ridimensionamento, vedere Dimensioni dello schermo e punti di interruzione

Per altre informazioni sul ridimensionamento a livello di sistema, vedi Allineamento, margine e spaziatura interna.

Dimensionamento Fluent Compact

Le applicazioni possono visualizzare un livello superiore di densità di informazioni con Dimensionamento Fluent Compact. Il dimensionamento compatto allinea gli elementi dell'interfaccia utente a una destinazione 32x32 epx, che consente agli elementi dell'interfaccia utente di allinearsi a una griglia più stretta e di ridimensionarsi in modo appropriato in base al ridimensionamento a livello di sistema.

Esempi

Il dimensionamento compatto può essere applicato a livello di pagina o griglia.

Livello pagina

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

A livello di griglia

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Dimensioni target

In generale, impostare le dimensioni della destinazione tocco su un intervallo quadrato di 7,5 mm (40x40 pixel su un display 135 PPI a un livello di ridimensionamento 1,0x). In genere, i controlli UWP sono allineati alla destinazione tocco di 7,5 mm (questo può variare in base al controllo specifico e a qualsiasi modello di utilizzo comune). Per altri dettagli, vedere Dimensione e densità del controllo.

Queste raccomandazioni relative alle dimensioni di destinazione possono essere modificate in base alle esigenze dello scenario specifico. Di seguito sono indicati alcuni aspetti da considerare:

  • Frequenza dei tocchi: valutare la possibilità di ingrandire le destinazioni premute ripetutamente o frequentemente.
  • Conseguenza dell'errore: le destinazioni che comportano gravi conseguenze se toccate per errore dovrebbero avere una spaziatura interna maggiore ed essere posizionate più lontano dal bordo dell'area di contenuto. Questo vale soprattutto per le destinazioni toccate con frequenza.
  • Posizione nell'area di contenuto.
  • Fattore di forma e dimensioni dello schermo.
  • Posizione del dito.
  • Visualizzazioni tocco.

Esempi

Esempi di archivio