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


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


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


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


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


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


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


Extensions di Flex

WWW.COMTASTE.COM


File componenti Flex

WWW.COMTASTE.COM


E se vogliamo creare componenti ex-novo, basandoci sul layout fornito al cliente come prova grafica?

WWW.COMTASTE.COM


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


Come disegno un singolo elemento?

WWW.COMTASTE.COM


Completato il design di tutti gli elementi si esportano come filmato SWF

WWW.COMTASTE.COM


Questa operazione può essere eseguita con due modalità:

Esportando nel formato SWF direttamente dall’interno dell’applicazione utilizzata (Illustrator, Photoshop ecc.)

WWW.COMTASTE.COM


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:


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


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


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


FORMAZIONE

Disegnare layout ed interfacce utente per Flex 3 ed Adobe AIR

http://www.comtaste.com/training.htm

Designing Flex and AIR applications

Technology

Transcript of Designing Flex and AIR applications