Linee guida per le animazioni di transizione di pagina

Applies to Windows and Windows Phone

Usa le animazioni di transizione di pagina per visualizzare la prima pagina di un'app appena avviata o durante la transizione da una pagina all'altra all'interno di un'app.

Nota  Se deve cambiare solo una parte del contenuto dello schermo, usa le animazioni di transizione di contenuto anziché di pagina.

Cosa fare e cosa non fare

  • Suddividi la pagina lungo i limiti o i bordi naturali in un insieme di due a cinque aree. Applica intervalli scaglionati alle varie aree dello schermo, in modo che vengano visualizzate in sequenza e non tutte insieme, e specifica un valore di offset di 100 pixel tra un'area e l'altra in modo da ampliare il layout dell'app. Puoi scegliere un valore offset minore se la tua app dispone di un layout speciale per lo stato di visualizzazione stretto. Per informazioni sulle divisioni di pagina più comuni e sull'ordine in cui devono apparire, vedi Istruzioni aggiuntive per l'uso.
  • Verifica che gli eventuali contenuti che la pagina in uscita e quella in entrata hanno in comune rimangano al loro posto, senza alcuna animazione. Ad esempio, se sia nella pagina in uscita che in quella in entrata è presente un pulsante Indietro, questo non deve essere incluso nell'animazione di transizione.
  • Se la pagina in uscita non contiene un pulsante Indietro (ad esempio nella prima pagina dell'app) mentre la pagina in entrata lo contiene, il pulsante Indietro deve essere specificato come un'area distinta, che deve essere visualizzata con un'animazione prima delle altre.
  • Se le pagine in uscita e in entrata hanno sfondi diversi, usa l'animazione con dissolvenza in entrata per visualizzare lo sfondo successivo. Avvia l'animazione con dissolvenza in entrata contemporaneamente all'animazione di transizione di pagina.
  • Se parte del contenuto della pagina in entrata non è pronto per essere visualizzato immediatamente, usa l'animazione di transizione di pagina per visualizzare il contenuto pronto in quel momento. Nel frattempo, se necessario, mostra un controllo di stato in attesa che il resto del contenuto sia pronto. Quando è pronto da visualizzare, applicagli un'animazione in entrata in base alla relativa area di contenuto. Per un'area di contenuto di grandi dimensioni, usa l'animazione di transizione di contenuto. Per un'area di contenuto di piccole dimensioni o contenuto discontinuo, usa l'animazione con dissolvenza in entrata.
  • Fai scorrere la pagina all'interno della visualizzazione in senso inverso rispetto al flusso generale della pagina o all'ordine di lettura. Se ad esempio il contenuto della pagina in entrata scorre da sinistra a destra, la pagina in entrata dovrebbe entrare da destra verso sinistra. Nelle app con ordine di lettura da destra a sinistra la pagina in entrata dovrebbe entrare da sinistra verso destra. Allo stesso modo, nel caso di una pagina divisa in sezioni come mostrato nelle immagini seguenti, l'ordine con cui le varie sezioni devono entrare nella visualizzazione deve essere opposto all'ordine di lettura.
  • Non eseguire animazioni di transizione di pagina quando un utente ridimensiona una finestra dell'app. Le animazioni di transizione di pagina, infatti, servono solo per lo spostamento da una pagina a un'altra all'interno di una visualizzazione specifica. Il sistema gestisce l'animazione tra il vecchio e il nuovo layout quando la visualizzazione cambia.

Istruzioni aggiuntive per l'uso

Di seguito puoi vedere le più comuni divisioni di pagina con l'ordine in cui devono apparire:

Divisioni di pagina comuni

Di seguito puoi vedere le divisioni di pagina più comuni, con pulsanti Indietro. Se la pagina in uscita non contiene un pulsante Indietro (ad esempio nella prima pagina dell'app) mentre la pagina in entrata lo contiene, il pulsante Indietro deve essere specificato come un'area distinta, che deve essere visualizzata con un'animazione prima delle altre.

Divisioni di pagina comuni

Di seguito puoi vedere le divisioni di pagina più comuni usate con un'app in visualizzazione con larghezza ridotta o verticale e l'ordine in cui devono comparire. Se il pulsante Indietro è già presente nella pagina in uscita, deve rimanere al suo posto e non essere incluso nell'animazione.

Divisioni di pagina comuni in visualizzazioni ridimensionate e verticali

Argomenti correlati

Per progettisti
Linee guida per l'aggiunta e l'eliminazione
Linee guida per le animazioni di transizione di contenuto
Linee guida per le animazioni di trascinamento
Linee guida per le animazioni dell'interfaccia utente basata su bordi
Linee guida per le animazioni con dissolvenza
Linee guida per le animazioni dei puntatori
Linee guida per le animazioni di riposizionamento
Linee guida per le animazioni dell'interfaccia utente popup
Linee guida per le animazioni con scorrimento
Per sviluppatori (HTML)
Esempio di libreria delle animazioni HTML
Animazione dell'interfaccia utente
Animazione delle transizioni di pagina
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
Per sviluppatori (XAML)
Animazione dell'interfaccia utente
Animazione delle transazioni di contenuto e in entrata
Guida introduttiva: Animazione dell'interfaccia utente con le animazioni della libreria
EntranceThemeTransition class

 

 

Mostra:
© 2015 Microsoft