La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

USO DEL COLORE Estratto dalle slides di Roberto Polillo.

Presentazioni simili


Presentazione sul tema: "USO DEL COLORE Estratto dalle slides di Roberto Polillo."— Transcript della presentazione:

1 USO DEL COLORE Estratto dalle slides di Roberto Polillo

2 Che cosè il colore Sensazione ottica variabile, a seconda della lunghezza donda della luce che colpisce locchio

3 IL COLORE: Che cosè e come lo vediamo

4 Luce bianca e luce monocromatica Un fascio di luce bianca viene scomposto da un prisma in fasci di luce monocromatica, cioè di lunghezze donda fissata (i colori delliride)

5 Lo spettro visibile

6 Come locchio vede i colori Noi vediamo la luce riflessa dagli oggetti Un oggetto rosso è un oggetto che riflette la luce di lunghezza donda corrispondente al rosso e assorbe tutte le altre luce bianca luce rossa oggetto rosso riflettività lung donda

7 Il colore che vediamo Un oggetto bianco riflette tutte le lunghezze donda Un oggetto nero assorbe tutte le lunghezze donda

8 Caratteristiche spettrali Un colore e la sensazione visiva prodotta da una specifica distribuzione spettrale che raggiunge la retina Se si misura la luce con un spettrofotometro si ottiene lo spettrogramma, che rappresenta la funzione di stimolo del colore, ie., la distribuzione dellenergia radiante sullo spettro di frequenze del visibile.

9 Come locchio vede i colori I coni sono di tre tipi, ciascuno sensibile a luce di lunghezza donda diversa bastoncelli rosso verde-giallo blu-violetto

10 Esempio

11 Sensibilità relativa La sensibilità al blu è ridotta rispetto a rosso e giallo-verde

12 Mescolanza di colori Quando due luci di lunghezza donda diversa vengono mescolate, noi non vediamo più due colori, ma un nuovo colore (mescolanza additiva)

13 Tristimolo Tutti i colori percepibili possono essere sintetizzati mescolando in varia misura tre colori detti primari: Rosso, Verde, Blu (RGB) Differenti distribuzioni spettrali possono dare origine alla stessa sensazione visiva di colore (metemerismo)

14 Mescolanze additive (fasci di luci che si sommano) rosso verde blu giallo magenta cyan bianco

15 Sintesi additiva Modello additivo: creazione degli altri colori mediante la combinazione additiva dei colori primari RGB. –Es.: R + G = giallo –se riduco lintensità del verde mantenendo quella del rosso allora ho un arancione GR Y GR Y

16 La somma di due colori primari produce un colore secondario –Es.: R+G= giallo, R+B=magenta, B+G=ciano Ciano (C), magenta (M) e giallo (Y) sono colori secondari o complementari Miscelando i tre primari o un secondario con il suo primario opposto, nella giusta intensità, produce bianco. Vedi Sintesi additiva

17 La ruota dei colori

18 RGB Color Display 1 pixel = 3 fosfori R,G,B, illuminati con intensità variabile

19 Esempio

20 Come descrivere un colore Sono necessarie tre grandezze; si possono anche scegliere: Tonalità o Tinta(Hue) Saturazione (Saturation) Luminosità o Intensità(Lightness)

21 Tonalità (o Tinta) Corrisponde a ciò che solitamente chiamiamo colore, e cambia al mutare della lunghezza donda della luce

22 Saturazione Quantità di luce monocromatica pura che deve essere mescolata alla luce bianca per produrre il colore percepito Non basta la ruota dei colori, occorre una seconda dimensione: Il cerchio dei colori

23 Esempio Tonalità costante, saturazione decrescente

24 Lo spazio dei colori Luminosità Intensità della luce Non basta il cerchio dei colori, occorre una terza dimensione:

25 Il valore più elevato della funzione stimolo fornisce informazione sulla tinta del colore. Più elevato e scoscesa è la curva in prossimità del valore massimo, più puro è il colore associato. Caratteristiche spettrali

26

27 Power Point

28 Sintesi Additiva/Sottrativa Sintesi additiva: somma di onde luminose di diversa frequenza che raggiungono il nostro occhio –Esempio: TV e monitor. Sintesi sottrativa: la luce bianca (emessa dal una sorgente luminosa) colpisce il pigmento e ne viene selettivamente riflessa (ovvero selettivamente assorbita). –Esempio: un pigmento giallo assorbe il blu e riflette rosso e verde.

29 Ecco perché non otteniamo il bianco quando mescoliamo i pigmenti: la sintesi è sottrattiva !

30 Colori primari in tipografia Si usano normalmente YMC (stampa in tricromia) A volte si usa un quarto colore acromatico (bianco o nero) (stampa in quadricromia)

31 Linee guida per luso del colore: Aspetti percettivi Aspetti cognitivi Aspetti culturali

32 ASPETTI PERCETTIVI

33 Aspetti percettivi: punti importanti Messa a fuoco Colori caldi e colori freddi Accostamenti di colori Disturbi nella percezione dei colori

34 Messa a fuoco LENTE Blu Verde Rosso A B C FUOCO SULLA RETINA LUCE BIANCA Difficoltà di messa a fuoco contemporanea di colori diversi agli estremi dello spettro (es.: rosso-blu; giallo-porpora) (per diversoangolo di rifrazione sul cristallino)

35 Da questo esempio si vede la difficoltà di messa a fuoco contemporanea del rosso e del blu: da molti le righe di questi due colori vengono viste, per i motivi descritti, come se fossero collocate a distanze diverse dagli occhi. Questo fenomeno non si verifica se si usano due colori che si trovino fra loro più vicini sullo spettro visibile, come si può facilmente verificare da questo secondo esempio, che non dovrebbe presentare leffetto tridimensionale di cui sopra. Messa a fuoco Difficoltà di messa a fuoco contemporanea di colori lontani sullo spettro

36 Esempio di rosso e blu in uno stesso testo

37 Colori caldi e freddi I colori caldi tendono ad avanzare, i colori freddi a recedere colori freddi colori caldi

38

39

40 Accostamenti di colori Locchio desidera i colori complementari rosso verdeviola giallo arancione blu

41

42 Accostamento di colori Colori adiacenti possono influenzarsi

43 Uso di bordi Usare bordi per separare meglio zone di diverso colore (Per una agevole messa a fuoco, oltre a differenza di colore è necessaria anche una differenza di luminosità)

44

45

46

47

48 Il colore del testo Scegliere con cura il colore del testo in relazione al colore dello sfondo caratteri chiari su sfondo scuro tendono ad apparire più grandi caratteri scuri su sfondo chiaro tendono ad apparire più sottili

49 Caratteri scuri su fondo chiaro Caratteri chiari su fondo scuro Caratteri scuri su fondo chiaro Caratteri chiari su fondo scuro

50 Alcune linee guida Testo chiaro su sfondo scuro Sfondo:colori scuri agli estremi dello spettro; Testo:colori chiari non saturi, al centro dello spettro Testo scuro su sfondo chiaro Sfondo:colori chiari non saturi Testo:colori scuri, evitando il blu

51 Il blu Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo (Bassa - e calante con letà - sensibilità al blu dellocchio umano; difficoltà di messa a fuoco)

52 Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

53

54 Disturbi nella percezione dei colori

55 Daltonismo Disturbi nella percezione del colore sono presenti: –nel 9% dei maschi (1 ogni 12) –nel 0,5% delle femmine (1 ogni 165) Sono dovuti a difetti di pigmentazione dei coni della retina I disturbi più frequenti riguardano la capacità di distinguere il rosso dal verde (circa nel 5% delle persone), ma ci sono diversi tipi di disturbi Non assumere che tutti gli utenti possano distinguere correttamente i vari colori!

56 Un semplice test: quale numero? (Ishihara) Visione normale: 5; Daltonismo per rosso/verde: 2

57 Altri test: quale numero?

58 Tipi di daltonismo: esempio

59

60

61

62

63

64 Alcune indicazioni Non usare mai rosso e verde vicini Normalmente il giallo e il blu vengono riconosciuti bene Usare colori brillanti Accostare i colori a uno sfondo appropriato: –rosso e bianco –verde e nero –turchese e nero –magenta e nero Le linee guida sono complesse, ma oggi esistono strumenti automatici per verificare come una immagine verrebbe vista da un daltonico: usarli per verificare le scelte cromatiche (es.

65 Pagina originale

66 Pagina elaborata da vischeck.com (deuteranopia)

67 Pagina originale

68 Pagina elaborata da vischeck.com (deuteranopia)

69 ASPETTI COGNITIVI

70 QUANTI COLORI? Usare pochi colori contemporaneamente (5 +/- 2)

71 Esempi (negativi)

72

73

74 Semantica dei colori Associare i colori ai vari significati in modo consistente

75 Associazione Usare lo stesso colore per raggruppare oggetti simili

76 Focus Usare colori brillanti e saturi per attirare lattenzione

77 Aspetti cognitivi: punti importanti Usare i diversi colori in modo consistente, associando a colori diversi significati diversi Usare comunque pochi colori contempora- neamente (5 2)

78 ASPETTI CULTURALI

79 Aspetti culturali: punti importanti Usare i colori in modo coerente con le associazioni normali in una determinata cultura

80 Codici familiari: esempio ROSSO:stop, pericolo, caldo, fuoco GIALLO:attenzione, rallentamento VERDE:avanti, ok, sicurezza, vegetazione GRIGIO, BIANCO: neutralità

81 STOP EXIT PERICOLO ! AVANTI

82

83

84

85 Colori caldi e freddi Freddi Caldi

86 Colori caldi e freddi COLORI CALDI azione, urgenza richiesta di risposta, vicinanza COLORI FREDDI lontananza, tranquillità, informazioni di stato

87 Ma le associazioni possono cambiare nelle diverse culture!

88 Culture diverse hanno associazioni diverse (Russo & Boor, 1993)

89 GESTALT

90 Nella percezione visiva, il tutto è più della somma delle sue parti Luci in movimento

91 S.Dalì, 1935

92 Le leggi della gestalt (M.Wertheimer, 1923) Legge della vicinanza Legge della somiglianza Legge della chiusura Legge della curva buona Legge della buona forma Legge dellesperienza

93 Legge della vicinanza Le parti di un insieme percettivo vengono raccolte in unità conformi alla minima distanza, a parità di altre condizioni

94 Legge della somiglianza Di fronte a una moltitudine di elementi diversi, vengono raccolti in gruppo gli elementi fra loro simili - a parità di altre condizioni

95 Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono, a parità di altre condizioni

96 Legge della chiusura: esempio Con separatori Senza separatori

97 Legge della chiusura: esempio Con separatori Senza separatori

98

99

100 Legge della curva buona Quelle parti di una figura che formano una curva buona o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre

101 Legge della buona forma Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costi- tuite secondo un medesimo principio in tutte le loro parti

102 Legge dellesperienza Lesperienza modella le nostre impressioni

103 Ambiguità visiva

104 Ambiguità

105

106

107

108

109 Nel design delle interfacce occorre evitare lambiguità

110 BOTTONI O TITOLI?

111

112

113 Tipografia

114 Il nostro primo obbiettivo nelluso delle fonti Massimizzare la leggibilità e la comprensibilità

115 Leggibilità?

116 Lettura su carta e sul video Il testo a video (72 dpi) è di qualità molto inferiore al testo a stampa ( dpi) Alcuni caratteri vengono resi male sul video, a causa dell effetto sega causato dalla rappresentazione a pixel Leggiamo più lentamente e più faticosamente sul video che sulla carta Uno studio del 1987 (ma la tecnologia migliora velocemente…): la lettura sullo schermo è del 25% circa più lenta della lettura sulla carta (poichè le fissazioni sono il 15% in più per riga)

117 Antialiasing

118 Tipi di fonti New York, corpo 28 Normale, neretto, corsivo, sottolineato Helvetica, corpo 28 Normale, neretto, corsivo, sottolineato Courier, corpo 28 Normale, neretto, corsivo, sottolineato con grazie (serif) senza grazie (sans serif) spaziatura proporzionale spaziatura fissa

119 Con o senza grazie? Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa. Fonti senza grazie sono più leggibili in testi brevi o titoli. Ma sul video?

120 Una prova di leggibilità sul video Arial 10 Arial 12 (senza grazie) Times New Roman 10 Times New Roman 12 (con grazie) Tempo di lettura in sec * *

121 Le font preferite: risultati di un esperimento Verdana Courier Arial Times (Bernard et al, 2001)

122 Corsivo Il corsivo comunque si legge male sul video, perchè enfatizza leffetto sega

123 Maiuscole e minuscole Luso delle minuscole associa ad ogni parola un pattern riconoscibile

124 Sopra e sotto

125 Maiuscole o minuscole? È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMEN- TE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI È possibile verificare con esperimenti che la leggibilità di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli

126 In sintesi La leggibilità sul video dipende fortemente dal tipo di font, e dalla sua dimensione Normalmente si raccomanda sul video di utilizzare fonti senza grazie, evitando comunque per quanto è possibile il corsivo Poichè la lettura sul video è faticosa, occorre comunque evitare per quanto è possibile testi lunghi Testi lunghi in caratteri maiuscoli vanno comunque sempre evitati Usare poche fonti contemporaneamente, e usarle in modo consistente per veicolare informazione


Scaricare ppt "USO DEL COLORE Estratto dalle slides di Roberto Polillo."

Presentazioni simili


Annunci Google