Condividi tramite

Linee guida per gli elementi interattivi

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

Il supporto dell'input touch (e la natura relativamente imprecisa dell'area di contatto touch) richiede un'ulteriore ottimizzazione delle dimensioni del bersaglio e della disposizione dei controlli, poiché il set di dati di input più grande e complesso segnalato dal digitalizzatore touch viene utilizzato per determinare il bersaglio inteso (o più probabile) dell'utente.

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

In questo argomento vengono descritti questi comportamenti predefiniti in modo da poter progettare l'app per garantire la massima usabilità usando sia i controlli della piattaforma che 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 un equilibrio tra la densità delle informazioni e il comfort dell'utente. In effetti, tutti gli elementi sullo schermo si adattano a un obiettivo di 40x40 pixel effettivi (epx), il che consente agli elementi dell'interfaccia utente di posizionarsi su una griglia e di adattarsi in modo appropriato in base al ridimensionamento a livello di sistema.

Annotazioni

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

Per ulteriori informazioni sul ridimensionamento a livello di sistema, consulta Allineamento, margine, spaziatura.

Dimensioni di Fluent Compact

Le applicazioni possono visualizzare un livello superiore di densità di informazioni con dimensionamento fluent Compact. Il ridimensionamento compatto allinea gli elementi dell'interfaccia utente a una destinazione epx 32x32, consentendo loro di allinearsi a una griglia più stretta e scalare correttamente in base al ridimensionamento a livello di sistema.

Esempi

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

Livello della griglia

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

Dimensioni di destinazione

In generale, imposta le dimensioni dell'area di tocco su una dimensione quadrata di 7,5 mm (40x40 pixel su uno schermo 135 PPI a un livello di scala di 1,0x). In genere, i controlli UWP sono allineati all'obiettivo di tocco di 7,5 mm (questo può variare in base al controllo specifico e a eventuali modelli di utilizzo comune). Per altri dettagli, vedere Dimensioni e densità del controllo.

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

  • Frequenza dei tocchi: fare in modo che i bersagli che vengono premuti ripetutamente o frequentemente siano più grandi delle dimensioni minime.
  • Conseguenza dell'errore: le destinazioni che hanno gravi conseguenze se toccate in errore devono avere una spaziatura interna maggiore e essere posizionate più lontano dal bordo dell'area del contenuto. Questo vale soprattutto per gli obiettivi che vengono toccati frequentemente.
  • Posizione nell'area del contenuto.
  • Fattore di forma e dimensioni dello schermo.
  • Posizione del dito.
  • Tocca visualizzazioni.

Esempi

Esempi di archivio