Come descritto nel precedente post, una volta progettata la logica di massima – definito le principali schermate che caratterizzeranno la nostra applicazione all’interno della SketchFlow Map – si può quindi procedere a lavorare sulle funzionalità che caratterizzano l’applicazione: sui controlli, gli sketch e le animazioni che rappresentano l’interazione dell’utente con l’applicativo.
Nello specifico, come già anticipato in precedenza, un’applicazione SketchFlow (Silverlight o WPF) è una vera e propria applicazione reale a cui in fase di definizione del progetto è stato associato lo SketchFlow Player per supportarne una facile ed intuitiva fruizione del prototipo. Sarete in grado di sfruttare tutte le potenzialità di un’applicazione con in più la possibilità di utilizzare degli “SketchStyles” associabili ai controlli specifici per la realizzazione dei prototipi. L’interazione, gli states e le properties dei controlli sono comunque le medisme associabili a controlli reali Silverlight e WPF ed è quindi possibile gestire interazioni avanzate anche nei prototipi attraverso l’impiego dei “behavior”.
All’interno dell’”Asset Library”, raggruppati sotto la categoria “SketchStyles”, trovate disponibili tutti i controlli a cui è già associato da Blend di “default”, uno “styles” specifico per la prototipazione.



Essendo un’applicazione a tutti gli effetti è possibile comunque utilizzare anche controlli aggiuntivi a cui non è stato associato di base uno “sketch-styles”, ma che possono comunque essere utilizzati in applicazioni reali.

Per capire come viene definito ed associato lo “sketch-style”, proviamo ad inserire un semplice “button-sketch” sull’area di lavoro. Facendo “tasto destro” dal mouse sul button inserito, ed andando a vedere in dettaglio il template associato, noterete che risulta applicato uno stile “Button-Sketch”. Vi ricordo che sia in applicazioni Silverlight e WPF lo “style” definito attraverso lo XAML contiene al suo interno il template, “control template” che vi permette di modificare la forma ed il comportamento del controllo di base. Per approfondire questi concetti, vi rimando ad un post che ho pubblicato qualche mese fa, dove nello specifico affrontavo attraverso un breve webcast queste tematiche.
Se a questo punto diamo anche un rapido sguardo al pannello “Miscellaneous” sotto Properties, noterete che anche qui risulta associato lo style “Button-Sketch”. Vi invito come ulteriore prova, a fare il “Reset” di questa properties ed in questo caso il “button” prenderà l’aspetto del button di base.

Dopo questo doveroso approfondimento, ritorniamo quindi alla definizione degli elementi dell’interfaccia, una delle potenzialità di SketchFlow è la possibilità di importare ed integrare rapidamente i vostri “schizzi”, realizzati in precedenza su carta, con elementi e controlli reali sketchflow in modo da essere il più efficaci possibili nella realizzazione dei prototipi.
In questo caso, posizionandovi sul pannello Projects, noterete che sono già presenti una serie di files che Blend ha creato dietro le quinte in fase di definizione del progetto e dal momento in cui avete iniziato ad inserire le pagine che costituiscono il vostro prototipo sulla SketchFlow Map (trattandosi di un prototipo, in questo caso specifico non dedicate molta attenzione ai files che costituiscono il progetto). Interagendo su questo pannello è possibile importare facilmente i vostri “schizzi” che dovranno essere integrati e che faranno parte del progetto. Vi consiglio in questo caso di raggruppare il tutto in una “New Folder” in modo da avere un minimo suddiviso logicamente gli asset che costituiscono il progetto.
Gli schizzi, dovranno essere importati come immagini (JPEG e PNG) e vi ricordo inoltre, nel caso abbiate già iniziato a realizzare dei layout grafici dell’applicazione con Photoshop e Illustrator potrete comunque importarli mantenendo preservata la struttura “multi-livello”. Personalmente, sconsiglio vivamente di introdurre nei prototipi qualsiasi elemento grafico che possa ricondurre alla reale interfaccia, in revisione con il cliente si potrebbe finire a discutere sulla pura “forma estetica” dell’applicazione trascurando invece tutti gli aspetti funzionali in cui il prototipo risulta fondamentale.
L’idea di integrare i layout dell’interfaccia reale con il prototipo, potrebbe essere adottata in una fase successiva del progetto, nel momento in cui le funzionalità del prototipo sono state condivise e approvate dal cliente, quale mezzo per condividere il lavoro e annotare le eventuali modifiche/suggerimenti da apportare all’interfaccia dell’applicazione.

Creata la nuova folder all’interno del progetto, le opzioni di “import” a disposizione sono molteplici e per chi ha già famigliarità con i progetti reali non c’è nulla di nuovo:

1. Creare un nuovo “item”, in questo caso vengono suggeriti una serie di possibili tipologie di oggetti che si possono creare: user-control, page, resource dictionary, etc. Per la realizzazione di prototipi, dubito che userete nello specifico questa funzionalità.

2. Aggiungere un “item” esistente, vi  permette di importare “item” nel progetto di ogni genere: immagini, video, layout XAML, etc. Nel caso specifico è l’opzione che andrete ad utilizzare per includere nel progetto gli eventuali “schizzi” prodotti. E’ inoltre possibile operare con una semplice operazione di “drag & drop” da esplora risorse del proprio PC e trascinare il tutto all’interno del progetto in Blend ottenendo lo stesso risultato più rapidamente.

3. Collegare “item” esistenti ed esterni al progetto. Anche in questo caso escludo che tale funzionalità venga utilizzata nello specifico per i prototipi, ma può essere invece utile nella fase di sviluppo del progetto reale in quanto, soprattutto nel caso di video e immagini che possono essere modificate e sostituite negli step successivi. Gli asset rimangono referenziati al progetto, ma tutte le modifiche che subiranno verranno direttamente visualizzate all’interno del progetto. Un’unica e ovvia considerazione è che il naming dei files dovrà rimanere invariato onde evitare che il file non venga aggiornato.

4. Aggiungere una “New Folder” al progetto. Opzione che dovreste aver già impiegato in precedenza e che vi permette di creare una nuova cartella all’interno del prototipo.

Nello stesso pannello sono presenti una serie di semplici opzioni aggiuntive che vi permettono di effettuare le tradizionali opzioni sugli elementi contenuti in un progetto: taglia, copia, incolla, etc.

Importati gli asset nel progetto, potrete velocemente inserirli nell’area di lavoro semplicemente trascinando gli elementi grafici nell’artboard o operando su ogni asset da inserire presente nella cartella e selezionando l’opzione “insert”.

In conclusione, vi ricordo che gli asset, verranno posizionati sull’artboard all’interno dello screen attivo sulla SketchFlow Map.