Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
La modellazione dell'interattività (l'interazione tra l'utente e un'applicazione) consente di mostrare i vari modi nei quali un utente potrebbe interagire con un'applicazione. Microsoft Expression Blend fornisce molti strumenti diversi per mostrare il comportamento interattivo dei prototipi. A tale scopo, è possibile eseguire una delle procedure seguenti:
Simulare il comportamento interattivo utilizzando l'animazione.
Aggiungere la navigazione agli elementi nel prototipo.
Creare i prototipi delle interfacce utente guidate dai dati utilizzando i dati di esempio e l'associazione dei dati.
Applicare i comportamenti agli elementi nel prototipo.
Per ulteriori informazioni sull'aggiunta di interattività a un progetto SketchFlow, vedere Getting Started with SketchFlow .png "Ee341387.xtlink_newWindow(it-it,Expression.40).png")
(Guida introduttiva a SketchFlow).
Animazione
Talvolta è utile aggiungere sequenze animate a un prototipo per dimostrare l'interazione. È possibile utilizzare gli strumenti di animazione con fotogrammi chiave come quelli nel pannello Oggetti e sequenza temporale, utilizzare il pannello Stati oppure utilizzare il pannello Animazione SketchFlow per creare una sequenza animata semplice.
Per ulteriori informazioni sull'utilizzo degli stati, vedere "Stati di visualizzazione" più avanti in questo argomento.
Animazione con fotogramma chiave
È possibile utilizzare gli strumenti di animazione con fotogramma chiave in Expression Blend per creare sequenze animate in tutte le schermate del progetto SketchFlow. È possibile utilizzare le animazioni con fotogramma insieme agli stati di visualizzazione (ad esempio, un'animazione che è attivata al raggiungimento di uno stato specificato) o indipendentemente da questi (ad esempio, quando un'animazione è attivata da un'azione).
Per ulteriori informazioni sulla creazione delle animazioni in Expression Blend, vedere Animazione di oggetti.
Nelle applicazioni Windows Presentation Foundation (WPF), è anche possibile utilizzare i tracciati di movimento per creare sequenze animate. Per ulteriori informazioni, vedere Creare, modificare o eliminare un tracciato di movimento.
Animazione SketchFlow
Le animazioni con fotogramma chiave possono essere molto utili. Tuttavia, le animazioni con fotogramma chiave possono anche essere molto dettagliate e non rientrare nell'ambito di un progetto. Le animazioni SketchFlow sono esercitazioni di stile storyboard che possono essere create in modo rapido e facile nel pannello Animazione SketchFlow. Allo stesso modo delle animazioni e degli stati dei fotogrammi, le animazioni SketchFlow richiedono l'interazione dell'utente.
In un'animazione SketchFlow, è possibile utilizzare il pannello Animazione SketchFlow per creare una sequenza di snapshot aggiungendo un nuovo frame al pannello e regolando la "scena" sulla tavola da disegno per il frame. È possibile regolare facilmente i tempi di transizione con i tempi di attesa per ciascun frame. È possibile riprodurre la sequenza di animazione direttamente nella finestra del documento selezionando Play nel pannello Animazione SketchFlow oppure è possibile generare ed eseguire il progetto facendo clic su F5 e quindi riprodurre l'animazione in SketchFlow Player.
L'esempio seguente è un esempio di un'animazione SketchFlow. Nei seguenti frame, il puntatore si sposta dalla parte inferiore destra all'immagine "Halo°2" e la selezione di un'azione viene simulata con una stella rossa. L'immagine "Halo°2" si sposta sulla sinistra e il puntatore sulla destra.
.png "Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(it-it,Expression.40).png")
.png "Ee341387.02c55e22-17c4-404d-90a4-2fd308993ad7(it-it,Expression.40).png")
.png "Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(it-it,Expression.40).png")
.png "Ee341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(it-it,Expression.40).png")
.png "Ee341387.fba8a139-19c5-4a84-b0d2-1bce67266301(it-it,Expression.40).png")
Per creare un'animazione SketchFlow
Aprire la schermata nella quale si desidera aggiungere un'animazione. Per creare una nuova animazione SketchFlow, nel pannello Animazione SketchFlow, fare clic su Nuova animazione SketchFlow
.png "Ee341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(it-it,Expression.40).png")
Viene visualizzato un nuovo frame nel pannello Animazione SketchFlow.[!NOTA]
Se non è possibile vedere il pannello Animazione SketchFlow, nel menu Finestra fare clic su Animazione SketchFlow.
In questo esempio, lo stato Base (lo stato normale della schermata) è lo stesso del primo frame.
Aggiungere un nuovo frame facendo clic su Aggiungi stato
.png "Ee341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(it-it,Expression.40).png")
nel primo frame.Selezionare l'oggetto che si desidera spostare e trascinarlo nella posizione in cui si desidera visualizzare l'oggetto. In questo esempio, il puntatore si sposta dalla parte inferiore destra alla lettera "o" in "Halo".
Se necessario, è possibile eseguire una delle operazioni seguenti:
Modifica tempo di permanenza°°°È possibile modificare il tempo di permanenza (il periodo di tempo per il quale lo stato corrente viene visualizzato) per un fotogramma passando il puntatore sul fotogramma fino a quando non viene visualizzata la finestra di dialogo Modifica tempo di permanenza. È possibile fare doppio clic all'interno del fotogramma e digitare un nuovo valore oppure fare clic una volta e utilizzare il tasto FRECCIA SU o FRECCIA GIÙ per aumentare o diminuire il tempo di attesa.
Sospensione e ripresa È possibile aggiungere funzionalità di sospensione e ripresa all'animazione utilizzando il pulsante Pausa attivata nel pannello Animazione SketchFlow. L'animazione verrà sospesa quando raggiunge il fotogramma in cui è stata aggiunta la funzionalità di sospensione e ripresa. È possibile riprendere l'animazione facendo clic sul titolo dell'animazione nel pannello Esplora in SketchFlow Player.
Il pulsante Pausa attivata viene visualizzato accanto alla casella Modifica tempo di permanenza quando si passa il puntatore del mouse sopra un fotogramma dell'animazione. Quando si fa clic sul pulsante ****Pausa attivata ****
.png "Icona Pausa attivata Animazione SketchFlow")
, la casella Modifica tempo di permanenza non sarà più disponibile.La casella EditHoldTime e il pulsante Pausa attivata in un fotogramma dell'animazione
.png "Pulsante Tempo di attesa e Pausa attivata SketchFlowAnimation")
Modifica tempo di transizione È possibile modificare il tempo di transizione tra i fotogrammi (il periodo di tempo che occorre per terminare la transizione da un fotogramma a un altro) facendo sulla finestra di dialogo Modifica tempo di transizione tra i fotogrammi. Fare doppio clic all'interno del fotogramma e digitare un nuovo valore oppure fare clic una volta e utilizzare il tasto FRECCIA SU o FRECCIA GIÙ per aumentare o diminuire il tempo di transizione.
Effetti di transizione È possibile applicare un TransitionEffect predefinito a un'animazione SketchFlow quando il tempo di transizione è superiore di 0. Nel pannello Animazione SketchFlow fare clic su ****TransitionEffects ****
.png "Icona effetto di transizione")
, quindi selezionare l'effetto di transizione che si desidera dall'elenco a discesa TransitionEffect. È inoltre possibile modificare il tempo di transizione per TransitionEffect.Per ulteriori informazioni in merito, vedere Applicare un effetto di transizione a una modifica dello stato di visualizzazione.
Funzione di interpolazione È inoltre possibile applicare una funzione EasingFunction predefinita facendo clic su ****EasingFunction ****
.png "Ee341387.9718b395-a71d-40b2-9d08-8e29a225151f(it-it,Expression.40).png")
, quindi selezionando la funzione di interpolazione desiderata dall'elenco a discesa EasingFunction.
Una volta completata l'animazione SketchFlow, è possibile visualizzarla in anteprima eseguendo una delle seguenti operazioni:
Facendo clic su Play nella barra degli strumenti SketchFlow.
[!NOTA]
Se è stata utilizzata la funzionalità di sospensione e ripresa in un'animazione SketchFlow, la pausa viene sostituita con un tempo di attesa di 1 secondo se viene visualizzata l'anteprima dell'animazione nel pannello Animazione SketchFlow.
Facendo clic con il pulsante destro sul tavolo da disegno e selezionando Riproduci animazione SketchFlow e quindi scegliendo l'animazione da riprodurre.
Generando ed eseguendo il progetto premendo F5 e visualizzando l'animazione in SketchFlow Player.
Barra degli strumenti animazione SketchFlow
È possibile utilizzare la barra degli strumenti Animazione SketchFlow per eseguire l'operazione nel pannello Animazione SketchFlow:
.png "Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(it-it,Expression.40).png") |
Passare al primo frame. |
.png "Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(it-it,Expression.40).png") |
Riprodurre l'animazione. |
.png "Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(it-it,Expression.40).png") |
Bloccare gli editor temporali |
.png "Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(it-it,Expression.40).png") |
Attivare o disattivare FluidLayout Per ulteriori informazioni, vedere Transizione graduale tra le modifiche di layout. |
.png "Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(it-it,Expression.40).png") |
Utilizzare le frecce per aprire un'animazione SketchFlow da un elenco a discesa. Utilizzare l'icona a forma di segno più per aggiungere un nuovo storyboard. Utilizzare la freccia singola per creare, eliminare o chiudere gli storyboard. |
.png "Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(it-it,Expression.40).png") |
Utilizzare la barra di scorrimento per spostarsi tra i frame dell'animazione. |
Stati di visualizzazione
È inoltre possibile dimostrare l'interattività nel prototipo utilizzando gli stati di visualizzazione per definire diverse alternative di progettazione per una singola schermata. Esistono molti diversi scenari nei quali avere più stati di una singola schermata potrebbe essere utile per creare un prototipo, compresi i seguenti esempi:
Una schermata in un'applicazione potrebbe visualizzare diversi elementi dell'interfaccia utente (IU) a seconda se un utente è registrato. È possibile utilizzare gli stati di visualizzazione per creare due opzioni di visualizzazione di una singola schermata nel prototipo: una nella quale l'utente è registrato e una nella quale l'utente non è registrato. Potrebbero essere disponibili diverse alternative di progettazione per una determinata schermata in un prototipo. È possibile creare uno stato per ognuna delle diverse alternative di progettazione nella stessa schermata.
Dal momento che gli stati possono contenere animazioni, è possibile creare diversi stati per la stessa schermata e includere le animazioni. L'animazione in uno stato può essere quindi attivata visualizzando lo stato della schermata che contiene l'animazione.
Quando si esegue un progetto SketchFlow in SketchFlow Player, gli stati sono visualizzati come comandi separati nel pannello Esplora. Nella seguente immagine, Transizioni è lo StateGroup e Chiudi e Apri sono due diversi stati definiti per la schermata.
.png "Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(it-it,Expression.40).png")
Dal momento che è possibile utilizzare i comandi per navigare tra gli stati, non è necessario creare trigger per spostarsi tra gli stati creati sulla tavola da disegno.
Per ulteriori informazioni sugli stati di visualizzazione, vedere Definire stati di visualizzazione diversi per un controllo.
Comportamenti
I comportamenti sono parti di codice predefinite che è possibile applicare in modo facile e rapido a un elemento per creare l'interattività. I comportamenti possono essere semplici come le azioni che sono attivate quando si verifica un evento (ad esempio, quando un pulsante viene selezionato, parte un'animazione) oppure è possibile incapsulare più eventi attivati da più azioni.
I comportamenti sono strumenti avanzati per la generazione dei prototipi. È ad esempio possibile utilizzare controlli a una schermata e applicare un comportamento a tale controllo. È quindi possibile generare ed eseguire il progetto (F5) e il controllo al quale è stato aggiunto il comportamento che avrà nella schermata come in un'applicazione finale.
I comportamenti SketchFlow predefiniti includono la navigazione Back e Forward ed è anche possibile applicare un comportamento Passa a a un controllo in SketchFlow.
Per ulteriori informazioni, vedere Utilizzo dei comportamenti SketchFlow.
Navigazione e modifiche dello stato
Quando si visualizza un prototipo in SketchFlow Player, è possibile navigare tre le schermate e attivare le modifiche di stato utilizzando il pannello Esplora. Questa funzionalità indica che è possibile navigare nel prototipo senza aggiungere ulteriori codici o elementi IU, anche se comprendono solo pochi schizzi irregolari.
È possibile aggiungere in modo rapido e semplice comportamenti SketchFlow agli elementi IU disegnati sulla tavola da disegno e abilitare la navigazione tra le schermate o la riproduzione di animazioni aggiunte al prototipo.
Per aggiungere un comportamento di animazione Play SketchFlow a un controllo
- Fare clic con il pulsante destro del mouse sul controllo al quale si desidera aggiungere un comportamento di animazione di Play SketchFlow, selezionare Riproduci animazione SketchFlow e quindi selezionare l'animazione che si desidera riprodurre quando il controllo è selezionato.
Dati di esempio
Molte applicazioni si affidano ai database per la generazione di informazioni. Può essere difficile modellare il comportamento guidato dai dati senza avere dati reali a disposizione con i quali creare il prototipo. Con Expression Blend, è possibile creare un'origine di dati di esempio e quindi associare i dati ai controlli. È possibile utilizzare i dati di esempio nel prototipo per modellare le interfacce utente guidate dai dati che simulano la natura dinamica degli scenari utente reali e guidati dai dati.
Per ulteriori informazioni, vedere Creazione di dati di esempio.
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.