Your SlideShare is downloading. ×
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
FLSS: documento di design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

FLSS: documento di design

175

Published on

FLSS vuole essere un supporto tecnologico alla gestione della vita condivisa, semplice, giocoso e facile da usare, volto a rendere piacevole e formativo quel periodo della vita in cui giovani studenti …

FLSS vuole essere un supporto tecnologico alla gestione della vita condivisa, semplice, giocoso e facile da usare, volto a rendere piacevole e formativo quel periodo della vita in cui giovani studenti e lavoratori condividono un appartamento, soprattutto nelle grandi città dove i canoni d'affitto sono molto alti.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FLSS Flatemates’ Life Support System Design Documentation Università degli Studi di Milano Bicocca A.A. 2012/2013 Frantini Chiara Minoli Sara Vacca Matteo
  • 2. INDICE 1. Casi d’uso 2.Architettura logica 2.1. Diagramma dei dati 2.2. Diagrammi di attività 3. Strumenti utilizzati 3.1. Illustrator 3.2.Axure 4. Progettazione
  • 3. 1. Casi d’uso Di seguito riportiamo i diagrammi dei casi d’uso (Use Case Diagram), che descrivono le funzioni offerte dal nostro sistema, e come vengono percepite e utilizzate dagli utenti che interagiscono con esso. - Diagramma 1: casi d’uso - Diagramma 2: Gestione Profilo personale
  • 4. - - Diagramma 3: Gestione eventi - Diagramma 4: Lista spesa - Diagramma 5: Gestione spesa
  • 5. 2.Architettura logica del problema - Diagramma dei dati - Diagrammi di attività: Registrazione
  • 6. Login Creare una casa Cercare una casa Creare una lista della spesa
  • 7. Dividere una spesa Inserire una bolletta Estinguere un debito
  • 8. Cambiare lo stato dell’utente Richiedere l’iscrizione a una casa
  • 9. Creare una evento
  • 10. 3. Strumenti utilizzati e rassegna critica sulle tecnologie In questa sezione descriviamo i software da noi utilizzati nella fase di disegno e di costruzione di un prototipo, ovvero Adobe Illustrator e Axure. La scelta di questi sistemi è dipesa dalle funzionalità offerte e dalla praticità di utilizzo. >> Illustrator Adobe Illustrator è un’applicazione informatica prodotta dalla Adobe Systems Incorporated, specializzata nell’elaborazione di illustrazioni e grafica vettoriale. Il programma permette di costruire immagini vettoriali attraverso forme geometriche o attraverso degli strumenti di tracciatura. Un’immagine vettoriale non perde di definizione ingrandendola o riducendola. L’utilizzo di un vettore ha il pregio di non perdere alcuna informazione rispetto alla sua creazione. Effettuando un semplice l’ingrandimento (zoom) di un oggetto disegnato in illustrator, è possibile notare come la qualità di esso venga totalmente mantenuta, rendendolo usabile a qualsivoglia dimensione. Se si facesse un’operazione del genere in Photoshop, con un’immagine scattata da una fotocamera digitale, si noterebbe come nell’ingrandimento emergano i fastidiosi “pixel”, che rendono inutilizzabile l’immagine. I lavori più sviluppati attraverso Illustrator sono i seguenti: - costruzione di un logo, - prodotti pubblicitari (biglietti da visita,cartellonistica, scritte) - layout per siti web, o app mobile. - impaginazione tavole di architettura.
  • 11. Ci siamo avvalsi di questo software, nella fase di definizione e di elaborazione dei requisiti per disegnare i diagrammi di dominio e delle attività. Successivamente sarà fondamentale per realizzare il concept grafico definitivo del nostro sistema. Riposrtiamo due esempi di bozze di layout grafico, disegnati in Illustrator.
  • 12. >>Axure Axure è un software concepito appositamente per supportare l’attività del progettista di applicazioni web, web based e mobile. Gli ideatori di questo programma hanno saputo raccogliere le specifiche necessità dell’interaction designer e integrarle insieme in un unica interfaccia di editing. L’interfaccia visuale, integra i comuni oggetti presenti in un’interfaccia web ( form, select, radio button…); con un semplice trascinamento possono essere inseriti nel prototipo di progetto ed eventualmente personalizzati in colori e dimensioni, inoltre un versatile sistema di master permette la creazioni di oggetti di vario tipo per cui la gestione delle modifiche diventa centralizzata. Inoltre è semplice reperire nel web diverse librerie di pulsanti, box, frecce e form da incorporare alla libreria del software, espandendo così la possibilità di creare un prototipo personalizzato e unico. Ogni schermata e ogni elemento hanno relativi spazi per le annotazioni, ogni elemento può avere vari livelli di annotazione per creare specifici corpi di informazioni per il committente, per il grafico o per lo sviluppatore. Axure implementa un set di funzioni per implementare l’interattività nel prototipo che non necessità di conoscenze di programmazione; esiste poi la funzionalità per esportare il prototipo in HTML: delle vere e proprie pagine web dove le funzioni descritte possono essere effettivamente sperimentate. In queste pagine le note e le specifiche tecniche possono già essere visualizzate come tooltip a comparsa.
  • 13. 4. Progettazione Nel progettare il nostro sistema abbiamo seguito i criteri essenziali dello User Interface Design: 1) La struttura. L’interfaccia utente deve essere organizzata in modo efficace e utile in conformità a modelli chiari e coerenti, riconoscibili dagli utenti con evidenza, collocando insieme gli elementi collegati da una relazione, separando quelli scollegati tra loro. 2) Semplicità. Il nostro design deve facilitare le operazioni, comunicare in un linguaggio semplice e chiaro, fornendo suggerimenti per le operazioni più complicate. Di seguito descriviamo brevemente le varie fasi che hanno portato dall’idea alla realizzazione del prototipo. - Individuazione dei requisiti Individuata l’idea, abbiamo svolto un’analisi preliminare (questionario e stato dell’arte), che ci ha permesso di definire i requisiti del nostro sistema in base ai bisogni dei possibili utenti. - Wireframing Una volta chiarite le funzionalità del sistema, abbiamo realizzato dei wireframe prima su carta e poi digitali grazie all’uso del software Axure. Questa fase prevede la definizione degli spazi e dei contenuti della futura pagina web o app, e precede la declinazione grafica.
  • 14. - Prototipo Realizzare un prototipo serve a tracciare il flusso di interazione e a descrivere le modalità in cui l’interfaccia web reagisce agli input dell’utente, nei diversi casi d’uso. Questa fase è utile al fine di testare sugli utenti il funzionamento del sistema. - Concept grafico Testato il corretto funzionamento del sistema si può procedere con la realizzazione della grafica definitiva, che consentirà, con le debite modifiche, di ottenere un prototipo che si avvicina molto di più al risultato finale.

×