it-swarm.it

Avvisi con codice colore

Sto riscontrando alcuni problemi con i colori di avviso di un progetto.

Sto avendo due casi che avvia un avviso.

Uno è se il valore è superiore a 40 e uno è superiore a 45.

Raggiungere il valore 40 è davvero negativo e arrivare a 45 è anche peggio.

Il problema è che non posso usare l'arancione per oltre 40 perché è davvero importante e necessita di azioni da intraprendere immediatamente.

Attualmente uso il rosso chiaro e il rosso intenso ma temo che non si differenzino abbastanza bene.

Qualche suggerimento per favore?

enter image description here

10
Cristian Negraia

Quando si dubita di come differenziare gli elementi grafici, un buon strumento è testare tutti i contrasti visivi nel design.

Contrasto di forma

Shape contrast

Contrasto dimensionale

Size contrast

Contrasto della trama

Texture contrast

Contrasto di colore

Se il contrasto cromatico non è sufficiente o non è consentito, prova il mix con colore e trama:

color contrast

Contrasto di peso

Weight contrast

Contrasto figura/terreno

Figure/ground

Contrasto di stile

style

Contrasto spaziale

enter image description here

Per completare la risposta, c'è un altro contrasto, ma penso che non si applichi in questo design.

Contrasto di posizione

Position


Infine c'è un altro tipo di contrasto che spesso escludiamo come tale:

Contrasto della linea temporale

timeline

35
Danielillo

Sembra che dovresti usare solo una sfumatura di rosso, lo sfondo della scatola e l'opacità.

Ecco un esempio di alcuni stati diversi che utilizzano un colore rosso. L'opacità viene utilizzata una sola volta, sull'esempio 42, ed è lo sfondo al 50%.

In questi, gli utenti devono solo essere in grado di vedere la differenza tra nero, rosso e rosso al 50%.

enter image description here

15
moot

Se la tua UI è altrimenti luminosa, potresti usare una tonalità di rosso più scura per differenziarla come "molto brutta" - vedi la legenda con i colori in basso:

image demonstrating the different colors

7
iHaveacomputer

Gli avvisi di incendi boschivi australiani utilizzano strisce per indicare la massima gravità.

Bushfire warning scale

Esempio:

enter image description here

7
Ahmad

enter image description here Puoi provare a mantenere i tuoi colori e durante la codifica, se ha un valore superiore a 40, attiva un punto esclamativo, magari in un triangolo o in un cerchio. All'interno della scatola sul lato destro opposto al triangolo. O anche fuori dagli schemi. Come per lo spettro della luce visibile che va dall'arancione al rosso, mostrare un numero di gravità crescente è un buon modello di progettazione come hai fatto tu. Ma un'icona aggiuntiva attivata sul segno 40+ insieme ai colori può rendere questo componente di design più chiaro per l'utente ...

5
mastablasta

Direi che non c'è alcun vantaggio nel designarli diversamente. Anche se hai detto che 47 è peggio di 42, hai anche affermato che qualsiasi cosa sopra 40 richiede un'azione immediata.

Sembra che l'azione che l'utente deve intraprendere sia per 42 e/o 47 sia lo stesso (agire immediatamente). Pertanto, non vedo alcun problema con lo stesso stile.

Se l'argomento è che 47 è più importante di 42, beh ... questo è già evidente dal numero stesso, quindi non è necessario che stili diversi lo dimostrino.

In breve, rosso può significare "intraprendere un'azione immediata" e quindi il numero indica l'ordine di priorità (prima il più alto).

2
musefan

Ti suggerisco di usare un "giallo" più chiaro oltre al rosso se non devi usare un colore più scuro.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

O in alternativa consiglierei i contorni esterni lampeggianti preferibilmente con lo stesso colore con i caratteri.

mockup

scarica la fonte bmml

E come ultima alternativa è la combinazione di quei due sopra

mockup

scarica la fonte bmml

Nota: non ho provato a creare la stessa forma geometrica poiché l'editor non la offre di default, ma ti preghiamo di considerarla indipendente dalla forma della tua domanda e la mia risposta è più di colore prospettica.

1
Erhan Yaşar