torna all'indice

Microsoft SketchFlow

Software commerciale ($599 Expression Studio 3) - Trial 60 giorni
sito web: www.microsoft.com/expression/products/SketchFlow_OverView.aspx

L'estate scorsa anche Microsoft ha rilasciato uno strumento interessante per la progettazione e realizzazione di wireframe e prototipi interattivi. Il suo nome è SketchFlow ed è un plug-in integrato con il più noto Expression Blend 3. Le funzionalità offerte sono molte, e questo software rende soprattutto semplice la gestione delle animazioni tra gli oggetti nella pagina, oltre a mettere a disposizione uno strumento potente come il concetto di "stati". Infatti tramite gli stati è possibile creare comportamenti differenti tra gli oggetti per realizzare così delle interazioni complesse.

Mappa dell'applicazione

SketchFlow oltre ad offrire la gestione del progetto tramite la consueta vista ad albero nel box a sinistra, offre una visione nuova ed efficiente della gestione delle pagine che compongono il progetto, ovvero la vista mappa. Mediante la vista mappa è possibile definire la pagina iniziale e tutte le altre pagine che compongono il sito o l'applicazione. Inoltre è possibile creare pagine personalizzate (utilizzando dei colori predefiniti e personalizzabili) che vengono visualizzate a seconda del tipo di azione compiuta su un oggetto presente nella pagina genitore. Questo metodo di organizzazione risulta essere semplice e immediato, e soprattutto molto potente nella gestione dei vari task.

Componenti

SketchFlow introduce il concetto di componenti, mediante i quali è possibile creare e gestire processi all'interno delle singole pagine. All'interno della mappa i componenti (chiamati component screens) non sono navigabili ma vengono spesso associati a pagine che includono un componente con un comportamento definito.

Stili degli oggetti

Con SketchFlow è possibile avere due stili distinti degli oggetti che inseriamo all'interno delle pagine. Da un lato avremo tutti gli oggetti di SketchFlow che avranno uno stile più simile a quello degli schizzi fatti con carta e penna, dall'altro in fase di progettazione di un wireframe hi-fidelity potremmo utilizzare lo stile fornito da Blend 3 che si avvicina di più a quello di una vera applicazione. Per entrambi gli stili è possibile avere lo stesso comportamento, le stesse proprietà sul singolo oggetto e lo stesso grado di interazione.

Animazioni

L'utilizzo delle animazioni all'interno di SketchFlow è un'ottima tecnica per comunicare in modo rapido e semplice un'idea di design. SketchFlow infatti offre un set completo di strumenti basati sul key-frame che permettono la creazione di animazioni sia semplici che complesse attraverso le pagine del sito. Inoltre SketchFlow offre un metodo di animazione chiamato "SketchFlow Animation" che consente di creare step by step dei veri e propri storyboard. Per ognuno di essi è possibile configurare la durata di ogni singola schermata, il tempo delle transizioni tra le varie schermate e molto altro.

Stati

Gli stati come abbiamo detto sono semplici da creare e molto potenti al fine di creare differenti comportamenti tra gli oggetti e all'interno dello stesso oggetto. Infatti in chiave design un bottone ad esempio avrà diversi stati tra cui normale, mouse-over, pressed etc. Tutti gli oggetti all'interno di SketchFlow hanno la possibilità di avere diversi stati a seconda del livello di interazione che vogliamo avere sull'oggetto. Gli stati sono raggruppati in State Groups. Questo permette di avere un controllo preciso sugli stati all'interno degli oggetti.

Data Binding

Come per alcuni software di progettazione visti in precedenza, anche in SketchFlow vi è la totale gestione dei dati all'interno di oggetti. Il tutto avviene con un'interfaccia semplice ed intuitiva, ed è possibile ad esempio inserire immagini come data oltre che funzioni, testo, numeri etc.

Queste sono solo le caratteristiche principali di SketchFlow, che si pone come uno strumento completo e molto competitivo nella progettazione di prototipi interattivi, utilissimo soprattutto in un team di sviluppo che utilizza il framework .Net o Silverlight. Di contro possiamo avere una curva di apprendimento abbastanza elevata prima di padroneggiare completamente questo potentissimo strumento.

In Sintesi

Vantaggi

- Mappa dell'applicazione
- Interfaccia utente facile ed intuitiva
- Creazione di componenti riutilizzabili integrati con la mappa
- Gestione degli stati sugli oggetti
- Funzioni di data binding avanzate
- Integrazione con applicazioni quali Expression Design & Adobe Creative suite

Svantaggi
- Il Viewer funziona solo su Windows
- Curva di apprendimento elevata
- Costo non indifferente