AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 1 E lo schermo? Errori comuni Posizionamento e dimensionamento arbitrario.

Presentazione sul tema: "AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 1 E lo schermo? Errori comuni Posizionamento e dimensionamento arbitrario."— Transcript della presentazione:

1 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 1 E lo schermo? Errori comuni Posizionamento e dimensionamento arbitrario dei componenti posizionamento casuale e grandezza variabile dei bottoni, proporzionali alla lunghezza delle etichette bottoni grossi corrispondono a comandi più importanti di quelli piccoli? mancano gli allineamenti

2 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 2 Dimensione e aspetto delle icone non coordinato le icone e i bottoni sono presentati in array, quindi devono essere dimensionate in modo consistente per evitare i problemi di allineamento. spesso variano anche per layout, carattere tipografico, scala, punto di vista, densità delle immagini. E lo schermo? Errori comuni

3 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 3 Inconsistente presentazione dei controlli Questo problema è molto attenuato nello sviluppo di GUI per applicativi, ma molto urgente per il multimedia on e off line. Qui non esistono standard di ampia condivisione: il regno della creatività. E lo schermo? Errori comuni

4 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 4 Inconsistente linguaggio visivo Quando il linguaggio visivo non è applicato in modo consistente in tutto l’ambiente applicativo perde in forza comunicativa. Distacchi radicali dagli standard spesso producono effetti dannosi ben al di là del caso specifico. E lo schermo? Errori comuni

5 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 5 Grandezza e layout delle finestre variabili casuale il design programmato di finestre secondarie e di dialog box è raramente considerato. poiché compaiono sullo schermo isolatamente non sono considerati come parte di una serie. l’utente ne incontra decine se non centinaia al giorno, con grave danno funzionale ed estetico. E lo schermo? Errori comuni

6 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 6 E lo schermo? Errori comuni

7 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 7 La griglia canonica su schermo Creare dei layout sulla base di griglie I rapporti W/H più usati sono 4:3 e 16:9 Risoluzione 800 X 600 ancora lo standard Proibito lo scrolling orizzontale, ammesso quello verticale

8 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 8 La griglia canonica su schermo Ingombro esterno W max in orizzontale = 770 px H variabile secondo il rapporto scelto 4:3 770 566 16:9 770 425 Testate le vostre pagine su http://www.wpdfd.com/restest.htm

9 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 9 La griglia canonica su schermo Suddivisioni interne 1.Utlizzare il metodo dei rapporti costanti per definire il modulo-base orizzontale e verticale a.l’unità orizzontale ideale divide in 5-7 parti la larghezza della schermata. Può essere moltiplicata o suddivisa b.Il modulo orizzontale largo abbastanza per contenere la maggior parte delle labels di 1 parola. Almeno 3 volte l’unità verticale. c.L’unità verticale deve consentire una spaziatura appropriata tra controlli multi-linea e gruppi di controlli. Se le labels sono sopra invece che di fianco, l’unità verticale deve permetterlo

10 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 10 La griglia canonica su schermo Suddivisioni interne 2.Schizzare (anche a mano) un layout che si avvicina alle dimensioni, posizioni e orientamento degli elementi principali 3.Partire dalle pagine più affollate di informazioni: progettare quelle più scarne sarà più semplice 4.Identificare la grandezza minima (H e V) ammissibile è meglio che ri-calcolare il layout per grandezze (piccole) arbitrarie

11 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 11 Metodologia 5.Evitare l’impiego locale di moduli più piccoli del normale per accogliere una densità particolare di dati 6.Individuare elementi funzionali comuni che devono essere percepiti con chiarezza nelle diverse schermate 7.Le singole schermate devono assicurare la posizione consistente dei principali elementi strutturali (header, footer, nav_bar…)

12 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 12 La griglia canonica

13 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 13 Bibliografia Kevin Mullet, Darrel Sano, Designing Visual Interfaces, Prentice Hall, California (USA), 1995

14 AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 14 Casi studio esercitazione Il sito Web