Download - Designing Flex and AIR applications
WWW.COMTASTE.COM
KIRA GARFAGNOLICreative [email protected]
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
KIRAENTERPRISE CONSUMER
DEVELOPMENT INTERFACE DESIGN
Workflow design di un’applicazione
Presa visione delle specifiche
Studio usabilità/accessibilità interfaccia
Ideazione e realizzazione proposta grafica
FASE 1
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Nello studio dell’interfaccia è fondamentale avere sempre in mente quale sarà il target di riferimento, sapere chi sarà l'utente finale che dovrà utilizzare la nostra applicazione.
Utilizzare la flessibilità e le potenzialità di tecnologie come Adobe Flex e Adobe Air nel giusto modo (non sempre 1000 effetti speciali sono meglio di 1).
Nella realizzazione di una prova grafica statica di un'applicazione, si dovrebbero mostrare al cliente almeno 3 schermate, cercando di rappresentare quelle che hanno al proprio interno più componenti possibili (menu, grafici, tabelle dati ecc.).
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Per dare un’idea precisa di come si muoveranno gli elementi nell’interfaccia proposta e quali saranno gli effetti inseriti, è bene dare una descrizione scritta, o verbale, della parte che pensiamo sia difficile comprendere in una prova grafica di tipo statico.
Ricordarsi, nella fase dello studio grafico di una RIA, che l’approccio è più vicino a quello usato per lavorazioni realizzate con Adobe Flash e molto diverso quindi, da quello utilizzato, ad esempio, per creare un sito web statico in HTML.
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Workflow design di un’applicazione
Realizzazione componenti e elementi grafici generici (sfondi, loghi ecc.)
Realizzazione file SWF per il developer
Indicazione degli effetti di supporto alla navigazione dell’interfaccia
FASE 2
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Questa è una delle fasi più delicate, è il momento in cui possono venir fuori delle difficoltà e dei limiti nelle lavorazioni, che si possono superare solo con una stretta collaborazione fra developer e designer, e con una buona comprensione della struttura di un'applicazione RIA.
http://learn.adobe.com/wiki/display/Flex/Getting+Started
http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
http://flex.org/showcase/
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Quali sono gli strumenti che un designer utilizza per realizzare prototipi e skin di un’applicazione?
Illustrator Photoshop
Fireworks Flash
Flash Catalyst
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Come primo passo per poter realizzare le skin con uno di questi software è bene installare le extensions di Flex , inoltre per facilitare il lavoro, Adobe mette a disposizione dei file che contengono tutti i set dei componenti di un’applicazione, che noi possiamo comodamente personalizzare.
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
http://download.macromedia.com/pub/developer/flex_skins_flash.zip
http://download.macromedia.com/pub/developer/flex_skins_photoshop.zip
http://download.macromedia.com/pub/developer/flex_skins_fireworks.zip
http://download.macromedia.com/pub/developer/flex_skins_illustrator.zip
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Extensions di Flex
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
File componenti Flex
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
E se vogliamo creare componenti ex-novo, basandoci sul layout fornito al cliente come prova grafica?
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Il layout è stato disegnato con Adobe Illustrator
Individuare tutti gli elementi da trasformare in componenti Flex
Realizzare le skin per ciascun elemento
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Come disegno un singolo elemento?
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Completato il design di tutti gli elementi si esportano come filmato SWF
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Questa operazione può essere eseguita con due modalità:
Esportando nel formato SWF direttamente dall’interno dell’applicazione utilizzata (Illustrator, Photoshop ecc.)
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Importando in Adobe Flash i simboli realizzati, ad esempio con Illustrator, per poter inserire altre proprietà ai componenti. Questo si può fare molto semplicemente facendo un Copia e Incolla degli elementi selezionati.
ATTENZIONE: prima di esportare il file SWF, controllate sempre che:
Design workflow nelle applicazioni RIA
1 I simboli abbiano le coordinate X e Y con valore 0, per evitare che, ad esempio nel caso di un bottone, questo possa spostarsi in uno degli stati Up, Over o Down
2 Ricordatevi di inserire per ciascun elemento a mano la proprietà Export for ActionScript
WWW.COMTASTE.COM
Workflow design di un’applicazione con l’arrivo di Adobe Flash Catalyst e Flex Gumbo
Realizzazione layout dell’applicazione con uno dei software della Adobe CS4 collection (Illustrator, Photoshop ecc.) In questa fase si salveranno tutti i simboli direttamente come componenti per poi permettere a Flash Catalyst di riconoscere i vari elementi (Button, Check Box, Accordionecc.)
Aperto il file .AI o .PSD direttamente dentro Flash Catalystandremo ad applicare tutti gli effetti sui componenti senza dover scrivere codice. Salvando la lavorazione daremo al developer un file .fxg con il quale lui può interagire senza nessuna difficoltà.
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Il fatto che un designer possa costruire un intero layout di un’applicazione senza dover ricorrere subito alla collaborazione di un developer, non avendo la necessità di dover scrivere righe di codice, significa rendere il flusso di lavoro di un progetto molto più scorrevole.
Il developer potrà interagire con un file che è fatto in realtà di codice, trovandosi di fronte a una gran parte del lavoro di “montaggio” del layout grafico già realizzato.
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Cosa cambierà con l’arrivo di queste nuove tecnologie?
Cosa non cambierà?Il fatto che un designer dovrà comunque cercare di capire la struttura di una RIA, non imparando a scrivere codice, ma almeno imparando quali sono gli elementi che la compongono e cosa è possibile realizzare con questi. Flash Catalyst non può fare proprio tutto al posto nostro
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
FORMAZIONE
Disegnare layout ed interfacce utente per Flex 3 ed Adobe AIR
http://www.comtaste.com/training.htm