Share via


Riquadri animati

Schermata Start con riquadri animati per Mail, Meteo, Notizie e altre app

I riquadri animati sono un elemento essenziale della schermata Start e della moderna esperienza di Windows. Offrono accesso a contenuto e notifiche aggiornate e incarnano il principio di progettazione Microsoft della velocità e della fluidità. Gli utenti possono visualizzare aggiornamenti e informazioni in tempo reale dalle loro app tramite la schermata Start, che consente di esaminare rapidamente le nuove informazioni e usare le app ancora prima di averle aperte.

Riquadri animati in Windows

Il riquadro è una rappresentazione dell'app nella schermata Start e può essere statico o animato. In un riquadro statico viene visualizzato il contenuto predefinito, che corrisponde in genere a un'immagine del logo che occupa l'intero spazio disponibile. Un riquadro animato può presentare invece contenuti nuovi e importanti che rinnovano l'interesse dell'utente per la tua app. Puoi implementare notifiche tramite un semplice badge o con riquadri animati per attirare l'attenzione dell'utente.

Riquadro statico e riquadro animato per l'app Notizie

Gli aggiornamenti frequenti sotto forma di notifiche tramite riquadro indicano all'utente che l'app è connessa e sta ricevendo contenuti nuovi e attivi. La frequenza delle notifiche tramite riquadro dipende dallo scenario della specifica app. Gli aggiornamenti possono avvenire, ad esempio, ogni 15 minuti in un'app di social media molto frequentata, ogni due ore in un'app di informazioni meteo, alcune volte al giorno in un'app di news, una volta al giorno in un'app di offerte del giorno e mensilmente nell'app di una rivista. Se nella tua app gli aggiornamenti avverranno meno di una volta alla settimana, considera l'uso di un semplice riquadro con un badge, per non dare all'utente la sensazione che i contenuti non siano aggiornati.

I badge di notifica sono ideali per le app che supportano notifiche con brevi riepiloghi, ad esempio un'app di SMS. Puoi usare i numeri di notifica per comunicare informazioni come lo stato o il numero di messaggi ricevuti dall'ultima volta in cui l'utente ha avviato l'app. Se il tuo badge probabilmente visualizza sempre un numero pari almeno a 50, considera la possibilità di usare un glifo del sistema per comunicare lo stato al posto di un numero.

Le notifiche tramite riquadro devono essere appropriate per l'utente, oltre che interessanti e informative. Le notifiche servono a invitare l'utente ad avviare l'app per acquisire più informazioni o per eseguire un'azione.

Gli utenti possono ridimensionare i riquadri secondo diverse dimensioni. Puoi regolare gli stili di notifica dei riquadri animati in base alle diverse dimensioni. Un'immagine può ad esempio risultare accattivante in un riquadro grande, ma una semplice notifica può essere più efficace in un riquadro medio. Considera le singole dimensioni dei riquadri e progetta le funzionalità dei riquadri animati di conseguenza.

Innovazione grazie ai riquadri animati

Riquadri animati larghi dell'app Great British Chefs e di Windows Store

Il contenuto mostrato in un riquadro animato può variare sensibilmente, da semplici notifiche a immagini, fino a estratti di contenuto più ampio che invitano gli utenti a esplorare ulteriormente aprendo l'app. Incoraggiamo progettisti e sviluppatori a sfruttare la visibilità e la tempestività offerte da un riquadro animato.

Le caratteristiche di un riquadro animato accattivante sono le seguenti:

  • Contenuti aggiornati di frequente per dare agli utenti l'impressione che la tua app sia attiva anche quando non è in esecuzione.
  • Aggiornamenti personalizzati in base alle informazioni in tuo possesso sull'utente, ad esempio gli interessi che l'utente specifica nelle impostazioni dell'app.
  • Contenuto pertinente per il contesto corrente dell'utente.

Esempi

Monsters Love Candy

Il gioco Monsters Love Candy usa l'intero riquadro per mostrare il proprio marchio. Il riquadro largo mostra il banner XBOX, una grafica dai colori brillanti all'interno del gioco e un prompt che invita a esplorare e sbloccare altro contenuto interno.

Due visualizzazioni del riquadro animato largo dell'app Monsters Love Candy

 

Usando dimensioni più piccole, il riquadro animato di Monsters Love Candy risulta leggibile e dinamico. Mostra innanzitutto la grafica del personaggio, quindi passa a un testo che ricorda ai giocatori l'esistenza di altri contenuti da esplorare.

Quattro visualizzazioni del riquadro animato dell'app Monsters Love Candy

 

News Bento

News Bento, un'app di notizie personalizzata, mostra nuove storie usando varie dimensioni di riquadri animati. News Bento è perfetta per aggregare contenuti provenienti da origini di interesse dei propri utenti. Mostrando l'origine di ogni storia nel riquadro animato, riesce ad attirare l'attenzione e aumentare la fiducia dell'utente verso l'app.

Due visualizzazione del riquadro animato largo dell'app New Bento

 

L'app usa immagini dell'articolo con dimensioni di riquadro animato grandi e larghe. Con dimensiono di riquadro animato più piccole l'origine e il titolo di una storia occupano tutto il riquadro. Lo sfondo blu rappresentativo di News Bento consente agli utenti di identificare l'app in modo più semplice tra altri riquadri, anche quando viene visualizzato contenuto di vario tipo.

Due visualizzazioni dei riquadri animati di dimensioni medie dell'app New Bento

 

Linee guida ed elenco di controllo per i riquadri e le notifiche