Domanda

Ho un paio di progetti personali in cui sono l'unico designer/programmatore e passo troppo tempo a modificare l'interfaccia utente per renderla più facile da usare da utenti reali ed evitare giallo brillante e verde questo è così comune nei progetti "programmatori".

Hai consigli su come scegliere una combinazione di colori quando non hai un grafico a portata di mano?Come si evita di creare la tipica interfaccia da "programmatore"?

È stato utile?

Soluzione

Kuler ha molte combinazioni di colori inviate dagli utenti

modificare:mi sono appena ricordato...prova anche colorlovers

Altri suggerimenti

Lascia che ti racconti una storia.

Non ho assolutamente fiducia nella mia capacità di fare scelte estetiche: basta guardare il modo in cui mi vesto per capire che la mia mancanza di fiducia è giustificata.Comunque, anni fa mi è stato assegnato l'incarico di scrivere la GUI per un nuovo prodotto (il "Clip Editor" in Cineon, per chiunque lo sappia).Ho abbozzato un disegno, ma ho chiesto aiuto al mio capo, al responsabile delle vendite e del marketing e a vari "specialisti dell'applicazione" per la scelta dei colori.Nessuno ha risposto, quindi ho detto "al diavolo tutto", e ho scelto uno schema di colori così brutto che sono sicuro che i beta tester si sarebbero tirati indietro con orrore e avrebbero chiesto un cambiamento.Ma non l'hanno fatto, quindi è stato spedito con esso.E ho sentito che i clienti amato i "colori audaci".E non solo, ma qualche anno dopo un concorrente aggiunse al suo prodotto un programma che sembrava una copia diretta del mio Clip Editor e copiarono il mio schema di colori!

Per le app desktop, ottieni i colori dal sistema operativo.Personalmente, desidero che tutte le mie app abbiano lo stesso aspetto e la stessa sensazione del mio sistema operativo.

Per le app Web, non ne sono davvero sicuro.

Tieni presente che quasi il 10% della popolazione maschile del mondo soffre di una forma significativa di daltonismo.Dovresti sempre tenerne conto quando scegli i colori dell'interfaccia (soprattutto se hai bisogno di capitale - indovina un po'?1 investitore maschio su 10 potrebbe non vedere i punti rossi sul grafico con sfondo verde che mostra il rischio rispetto al rendimento!).

MSDN ha una visione ragionevole di questo, e ce ne sono diversi filtri del sito web che ti mostrano come appare il tuo sito (o qualsiasi sito) data qualsiasi forma di daltonismo.

A parte questo, mi piace molto COLOURovers - Non solo hanno una vasta selezione di combinazioni di colori definite e taggate dall'utente, ma te le forniscono in vari modi e puoi accedere e tenere traccia dei tuoi preferiti (o dei produttori dei tuoi schemi di colori preferiti).

Andate a dare un'occhiata ai temi autunnali!Non puoi sbagliare con i colori del Michigan quando le foglie cambiano...

-Adamo

Le guide ai colori come Kuler sono un ottimo inizio se non hai idea di come scegliere i colori.

Alcune considerazioni fondamentali:

Usa il contrasto e non il colore per differenziarti nel tuo design.Questo per accogliere gli utenti daltonici e ipovedenti.

Usa una tavolozza di colori quanto più limitata possibile.Scegli un colore come "tema" e scegli le sfumature di quel colore, e poi magari uno o due colori contrastanti per abbinarlo.

Chiedi consiglio: non deve necessariamente provenire da un designer, potresti comunque conoscere qualcuno che ha un buon occhio per queste cose.Inoltre, feedback più ampio: chiedi ad alcune persone la loro opinione, questo può aiutare.

Ultimamente sto utilizzando il seguente sito web: http://www.nickherman.com/colormatch/per aiutarmi (anche io che non sono un designer) a scegliere le combinazioni di colori corrispondenti.Di solito trovo un colore abbastanza gradevole, quindi utilizzo i colori corrispondenti da questo sito web.

Se tutto il resto fallisce, chiedo anche a mia moglie!

Mi piace usare ColourSchemer E EasyRGB.

Alcune risorse aggiornate che utilizzo:

Colorotate.org è un sito ben progettato con tavolozze di varie dimensioni fornite dagli utenti (a differenza di Kuler che fornisce solo 5 colori per tavolozza).Ti consente di vedere come appaiono le combinazioni a vari tipi di persone con problemi di colore.

colorischemedesigner.com genera tavolozze coerenti per te utilizzando vari algoritmi (complemento, triade, tetrade...)

Quello di Adobe Kuler il sito web contiene molte combinazioni di colori create dagli utenti e caricate dai designer.Normalmente cerco prima gli schemi di livello più alto.

Ci sono molti "selettore di temi di colore" sul web.Se li usi, i tuoi colori sembreranno almeno che stiano insieme.Il primo che ho guardato su Google: http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?

Punta a colori pastello leggermente più scuri rispetto alle loro controparti in piena regola, ad es.ad esempio, un rosso pastello è più scuro di un rosso (255,0,0).Prova a selezionare i colori dalla stessa tavolozza, un modo ingannevole per determinare le combinazioni di colori che utilizzo è fare uno screenshot di un'app di Office 2007, di solito Excel, e incollare alcuni colori dalle tavolozze coordinate utilizzando lo strumento contagocce in un app come Paint.NET.In effetti questo approccio ingannevole deve essere esteso al "prendere in prestito" schemi di colori da applicazioni già disponibili che hanno schemi di colori che ammiri :-)

Se scegli un colore "tema" per la tua app, puoi utilizzare Kuler per aiutare a arricchire la tavolozza.

Articolo correlato:

Tendo a usare molti grigi, insieme al bianco e nero, mantengo le cose semplici ed evito qualsiasi tipo di colore fastidioso e brillante.Mi sembra che sia quello che hanno fatto i ragazzi della SO.

I segnalibri essenziali di Vitaly Friedman per web designer e sviluppatori web ne elencano molti online strumenti per il colore, anche un versione condensata

C'è anche un elenco di strumenti colore su twiki.org che ha alcuni siti aggiuntivi.

Ti consiglio di iniziare leggendo la teoria computazionale dei colori.Wikipedia è in realtà un bel posto per istruirsi sull'argomento.Prova a cercare un colore per nome su Wikipedia.Troverai più di quanto ti aspetti.Esci da lì finché non avrai una sinossi del campo.

Mentre sviluppi il tuo occhio analitico, concentrati sulla comprensione dei colori e delle tavolozze dell'interfaccia preferite (o più disprezzate) in termini delle loro varie rappresentazioni in diversi spazi colore:RGB, HSB, HSL.Mantieni Photoshop/GIMP aperto in modo da poter abbinare l'esperienza soggettiva delle tavolozze ai loro aspetti quantificabili.Guarda come vengono resi i tuoi colori su monitor scadenti.Nota cosa rimane sempre leggibile e quali combinazioni di colori tendono a produrre risultati poco carismatici o illeggibili.Presta attenzione alle informazioni emotive trasmesse da tavolozze specifiche.Vedrai rapidamente emergere dei modelli.Ad esempio, ti renderai conto che è meglio evitare i colori ad alta saturazione nei componenti dell'interfaccia utente, tranne che per scopi speciali.

Alla fine, sarai in grado di analizzare l'output dei generatori di tavolozze consigliati qui e svilupperai le tue teorie su ciò che rende una buona corrispondenza e quanto contrasto è necessario per funzionare bene sulla maggior parte dei display.

(Per evitare potenziali frustrazioni, potresti voler passare al test gratuito di percezione del colore di Pantone.È meglio prenderlo su un display calibrato a colori.Se dice che hai una scarsa percezione del colore, allora l'analisi numerica è estremamente importante per te.)

Perché i programmatori pensano di non poter avere competenze di progettazione?È una mia piccola scocciatura.È un'abilità che si apprende, proprio come qualsiasi altra cosa.

http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top