Condividi tramite

Linee guida per la progettazione dell'interazione con i widget

  • Articolo

Nota

Alcune informazioni sono relative a un prodotto non definitivo, che potrebbe subire modifiche sostanziali prima del rilascio sul mercato. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Importante

La funzionalità descritta in questo argomento è disponibile nelle build di anteprima Dev Channel di Windows a partire dalla build 25217. Per informazioni sulle build di anteprima di Windows, vedere Windows 10 Insider Preview.

Questo articolo fornisce una guida dettagliata per progettare l'interazione dei widget di Windows.

Un widget deve essere immediato e mirato e deve rappresentare un singolo aspetto dello scopo principale dell'app. I widget possono contenere uno o più inviti all'azione. Quando l'utente clicca su un invito all'azione, il widget dovrebbe lanciare l'applicazione o il sito web associato invece di implementare l'azione nel widget stesso. Un widget ha una sola pagina principale che può ospitare più interazioni. Cliccare su un elemento del widget non deve mai portare a una visualizzazione completamente diversa del widget. Ad esempio, in un widget meteo potresti mostrare il tempo per più giorni, ma cliccando su uno di essi non si espandono i dettagli in linea, bensì si avvia l'applicazione o il sito web.

Di seguito è riportato il numero massimo di punti di contatto consigliato per ogni dimensione di widget supportata.

Dimensione del widget Punti di contatto massimi
small 1
medium 3
grande 4

I seguenti elementi di navigazione non sono supportati nei Widget di Windows:

  • I pivot non saranno supportati all'interno dei widget
  • Le pagine L2 non saranno supportate all'interno dei widget
  • Lo scorrimento verticale o orizzontale non sarà supportato all'interno dei widget

Contenitori

Le immagini seguenti mostrano esempi di utilizzo degli elementi contenitore in un modello di widget. I contenitori raggruppano gli elementi visivi in colonne e righe per creare una struttura a griglia gerarchica.

Quattro immagini di widget che illustrano i contenitori. I widget nelle immagini hanno elementi divisi in righe e colonne per fornire una struttura gerarchica della griglia.

Le immagini seguenti mostrano esempi di utilizzo degli elementi di collegamento alle immagini in un modello di widget.

Due immagini di widget che illustrano i collegamenti alle immagini. Le immagini sono disposte in colonne e righe che creano una griglia.

Impaginazione

Le immagini seguenti mostrano esempi di paginazione in un modello di widget. I controlli di paginazione possono essere allineati orizzontalmente o verticalmente. Le frecce di navigazione appaiono in risposta al passaggio del cursore.

Questo set di due immagini mostra l'impaginazione orizzontale. Nella prima immagine, una colonna di punti è allineata lungo il lato destro. Un punto è più grande per indicare la pagina attualmente attiva. Nella seconda immagine un cursore posiziona il puntatore del mouse su una freccia rivolta verso il basso nella parte inferiore del widget che consente all'utente di passare alla pagina successiva. Nella parte superiore del widget è presente una freccia rivolta verso l'alto corrispondente per passare alla pagina precedente.

Questo set di due immagini mostra l'impaginazione verticale. Nella prima immagine, una riga di punti è allineata lungo la parte inferiore. Un punto è più grande per indicare la pagina attualmente attiva. Nella seconda immagine un cursore posiziona il puntatore del mouse su una freccia verso destra sul lato destro del widget che consente all'utente di passare alla pagina successiva. Sul lato sinistro del widget è presente una freccia che punta a sinistra per passare alla pagina precedente.

Queste due immagini illustrano l'aspetto dei controlli di paginazione quando il widget ha uno sfondo immagine.

Le immagini seguenti mostrano esempi di collegamenti ipertestuali in un modello di widget.

Due immagini di widget che illustrano i collegamenti ipertestuali. La prima immagine mostra una stringa di testo con collegamento ipertestuale. Il testo è normale. Nella seconda immagine, un cursore del mouse passa il puntatore del mouse sul collegamento ipertestuale, che fa in modo che il testo venga sottolineato.

Immagine che mostra un collegamento ipertestuale centrato nella parte inferiore del widget, appena sopra la riga orizzontale dei punti di paginazione. Una X rossa indica che i punti di paginazione e il collegamento ipertestuale non devono trovarsi nello stesso spazio. A destra un'altra immagine mostra il collegamento ipertestuale in basso, ma i punti di paginazione sono allineati verticalmente in una colonna sul lato destro. Un segno di spunta verde indica che questa posizione dei due elementi è corretta.

Due immagini di widget che illustrano i menu a discesa. Nell'immagine a sinistra il menu a discesa è compresso. Nell'immagine destra l'elenco a discesa viene espanso e si estende sul bordo del widget

I widget possono estendersi temporaneamente oltre le loro dimensioni se l'utente interagisce con un menu o una tendina. Il comportamento del menu dovrebbe essere quello di chiudere il menu se l'utente fa clic al di fuori dell'area del menu o del menu a tendina.