Podstawowa teoria kolorów mówi nam, że paleta kolorów zielonego, żółtego i czerwonego jest śmiesznie brzydka, są to kolidujące ze sobą kolory. Jeśli weźmiemy zielony jako wybitny kolor, analogiczne kolory, które się z nim wiążą, to czerwony i niebieski - w takiej kolorystyce nie ma miejsca na żółty.
Czy jest więc jakiś sposób na połączenie zieleni, żółci i czerwieni w schemacie kolorów bez oślepiania użytkowników?
Jako mój przykład mam stronę w witrynie, w której te kolory są używane do pomiaru wymaganego poziomu umiejętności projektu w stosunku do faktycznego poziomu tej umiejętności danego użytkownika. Kolor zielony spełnia lub przekracza ten poziom, kolor żółty oznacza nieznaczny niedobór oczekiwań, a kolor czerwony oznacza, że albo nie są wystarczająco dobre, albo zupełnie nie posiadają danej umiejętności.
Oto mój przykład (zignoruj pomarańczowe i szare pola wokół litery, nie są one powiązane).
Wszyscy możemy z pewnością zgodzić się, że wygląda to dość okropnie, ale to jest ten format, którego muszę przestrzegać, cała sprawa zielono-czerwono-żółta. : /
Jako programista, w przeciwieństwie do projektantów grafiki / stron internetowych, moje rozumienie teorii kolorów i doświadczenia użytkownika jest ograniczone.
Aby to podkreślić, moje pytanie brzmi: w jaki sposób można ustalić tradycyjnie sprzeczną kolorystykę bez uszczerbku dla doświadczenia użytkownika?
(Jeśli moje pytanie jest nieodpowiednie, usunę je, nie byłem pewien, gdzie to zadać, wydawało się najbardziej odpowiednie)
źródło
Odpowiedzi:
Zielony, żółty i czerwony nie pasują do siebie? Etiopczycy muszą być strasznie obrażeni. Google dla zielonych, żółtych i czerwonych zdjęć i myślę, że znajdziesz kilka atrakcyjnych przykładów (wraz z brzydkimi).
To, jak dobrze pasuje dowolny zestaw kolorów, zależy od dokładnych współrzędnych kolorów, względnych pozycji, kształtów, rozmiarów kolorowych obiektów i efektu, jaki chcesz uzyskać (np. Uspokajające kontra ekscytujące, zabawne kontra poważne, odważne i subtelne. ). Nie mam dla ciebie żadnych ostrych i szybkich zasad, ale oto kilka rzeczy, z którymi możesz eksperymentować.
Kompromis nasycenia wielkości
Aby uniknąć wstrząsającego efektu (zakładając, że tego nie chcesz), rozmiar kolorowego obiektu powinien być odwrotnie proporcjonalny do jego nasycenia kolorów. Twój przykład miał dość wysokie nasycenia, więc wypróbuj albo niższe nasycenia kolorów (np. Pastele), albo pokoloruj coś innego niż tło. Na przykład możesz pokolorować tekst i pozostawić tło neutralne, lub możesz pokolorować mały kształt lub symbol obok tekstu. Ten ostatni byłby okazją do użycia kształtu do nadmiarowego kodowania dopasowania umiejętności dla ułatwień dostępu i drukowania czarno-białego (zielony znacznik wyboru dla Zadowolony, żółty wykrzyknik dla Niedoboru i czerwony symbol „nie wchodź” dla Niezadowalającego) .
Rozstaw
Wygląd kolorów zależy od ich bliskości. Kolory niż zderzają się, gdy sąsiednie wyglądają dobrze z niewielkim odstępem. Spróbuj umieścić neutralną ramkę wokół każdej komórki, aby bardziej oddzielić kolory (tak jak masz w nagłówkach), chyba że ma to jakiś sens mieszanie się komórek o tym samym kolorze, aby być postrzeganym jako pojedynczy obiekt. Wypróbuj różne grubości. Spróbuj oddzielić każdą komórkę białymi ramkami, wybierając kafelki.
Wzór
To, jak dobrze kolory idą w parze, zmienia się również wraz ze wzorem, jaki tworzą kolory, więc upewnij się, że oceniasz makiety z typowymi proporcjami i położeniami kolorów. Na przykład, jeśli przez większość czasu wszystko jest zielone, a najważniejsze jest, aby użytkownicy wzięli udział w „podświetlaniu” żółci i czerwieni, wówczas wybierz kolor zielony, który stanowi dobre tło (np. Niskie nasycenie, światło) oraz żółty i czerwone wydają się znajdować „na górze” (np. wyższe nasycenie, ciemność). Weź pod uwagę, że estetyka wzoru może również komunikować się i motywować użytkownika. Jeśli użytkownik ma szczególnie nieodpowiedni lub niezrównoważony zestaw umiejętności, być może potrzebujesz brzydkiego wzoru. Najbardziej atrakcyjny wzór powinien odpowiadać stanowi, który jest najbardziej korzystny dla użytkownika.
Użyteczność
Twoje pytanie dotyczy estetyki, ale wybór kodowania kolorami ma również znaczący wpływ na użyteczność. Wybrane kolory powinny być:
Wizualnie różnią się od siebie, szczególnie jeśli są używane w pogorszonych warunkach wizualnych (np. Na telefonie komórkowym w świetle słonecznym).
Zapewnij dobry kontrast z tłem (jeśli jest to pierwszy plan) lub z pierwszym planem (jeśli jest to tło). Na przykład czarny tekst na czerwonym tle nie jest tak dobry. Zasadniczo pierwszy plan i tło potrzebują różnych poziomów jasności.
Upewnij się, że kolory są zgodne z tym, co kodują. Na przykład rzeczy, które użytkownik powinien zrobić, aby bardziej kontrastować z tłem i innymi kolorami.
Zapewnij dostępność i druk, gdzie każdy kolor ma również inny poziom ciemności, z ciemnością skalowaną do stopni (czerwony bardziej niż żółty bardziej niż zielony). Spraw, aby twoja zieleń była nieco niebieskawa i / lub czerwona nieco pomarańczowa, aby użytkownicy czerwono-zielony, ślepy na kolory (najczęstszy rodzaj ślepoty na kolory) nadal dostrzegali różnice kolorów.
Użyj kodowania kolorami tylko dla jednej zmiennej. Nie wiem, do czego używasz szarości i pomarańczy, ale może to powodować zamieszanie i utrudniać użytkownikom używanie czerwonych, zielonych i żółtych kolorów. Za każdym razem, gdy masz więcej niż trzy kolory, trudno jest zachować użyteczność. Znajdź inny sposób kodowania dowolnego kodu szarego i pomarańczowego (np. Użyj rozmiaru lub grubości czcionki lub linii przerywanych dla granic komórek; zobacz Umieszczanie G w GUI ).
W jednym projekcie, nad którym pracowałem, kolory, które otrzymałem, to # E00000, # FF8400 i # C0FFE0 (niezbyt żółty żółty, ale i tak działał).
Mam więcej do wyboru kodów kolorów, w tym jak obliczyć kontrast kolorów i jasności w Breaking the Color Code .
źródło
#C0FFEEkod szesnastkowy. :)Spróbuj użyć pasteli zamiast rzeczywistych kolorów RGY. Przy zmniejszonym nasyceniu powinno być łatwiej patrzeć na informacje.
Pastelowy czerwony hex: # F7977A RGB: 246-150-121
Pastelowy zielony szesnastkowy: # 82CA9D RGB: 130-202-156
Pastelowy żółty hex: # FFF79A RGB: 255-247-153
źródło
Widzę trzy podstawowe wyzwania związane z tymi trzema kolorami.
Mogę tylko wymyślić kilka opcji, zakładając, że nie lubisz pop-artu, który wpływa na duże obszary nasyconego koloru. Oba te minimalizują wpływ nasycenia poprzez zanikanie kolorów.
Jest jeszcze jedno wyzwanie, które nie ma nic wspólnego z estetyką. Czerwony obezwładni pozostałe dwa kolory i spowoduje zwrócenie uwagi na negatywne znaki na stronie. Jeśli to jest twój cel, jesteś dobry. Jeśli chcesz, aby twoja mapa miała pozytywny charakter, będziesz walczył.
źródło
„Czerwony”, „Żółty”, „Zielony” pozostawia wiele miejsca na interpretację, więc masz dużą szansę na znalezienie kombinacji, która działa dobrze.
Dla twojego problemu estetycznego wziąłem twój „czerwony” i „zielony” kolor i włożyłem go do blendera kolorów . Następnie wybrałem pHSL jako model kolorów do mieszania. To już poprawiło zestaw kolorów.
Następnie spróbowałem różnych „czerwonych” i „zielonych”, aby jeszcze bardziej poprawić wrażenie. Nieco ciemniejsza, bardziej nasycona / mocniejsza czerwień. Kolor zielony z odrobiną więcej żółtego i wyższym nasyceniem.
OK, nieźle, ale też jeszcze nie gotowe.
W przypadku problemu z użytecznością pamiętaj, że istnieje hierarchia (względna) luminancji, odcienia i nasycenia, która kieruje naszą uwagę. Ponieważ kolor żółty ma naturalnie najwyższą wartość luminancji, pola te najbardziej przyciągnęłyby naszą uwagę. Zaimportowałem więc kolory do konwertera kolorów, aby dostosować każdy kolor osobno. W moim przykładzie podałem „żółte” i „zielone” równe wartości luminancji. Niższa luminancja dla żółtego lub wyższa luminancja dla zieleni wydawały się problematyczne z estetycznego punktu widzenia.
Próbowałem mojej kombinacji w Photoshopie i zdałem sobie sprawę, że białe (odstępy) obramowania robią dobre wrażenie. Poleciłbym więc białe odstępy dla komórek i co najwyżej jedną cienką czarną linię do podziału każdej linii wpisów.
Korzystając z wyżej wymienionych narzędzi, możesz znaleźć kombinację kolorów, która jeszcze lepiej zaspokoi Twój osobisty gust lub wymagania (np. Wyższe nasycenie zieleni)
źródło
Podczas używania kolorów jako tła należy zachować ostrożność, ponieważ może to utrudnić czytelność i odwrócić uwagę użytkownika od wiadomości. tj. czerwone tło i czarna czcionka.
Konwersja koloru na skalę szarości zwykle pomaga zrozumieć, które kolory najlepiej kontrastują. tzn. po przekształceniu czerwieni w skalę szarości kolor jest ciemnoszary. Dlatego jest to zły kolor do użycia jako tło, gdy czcionka jest czarna. Musisz wybrać kolor, który zapewni ci dobry kontrast.
Jeśli jednak chcesz szybko zrozumieć użytkownikowi, co próbujesz zrobić, sugeruję pozostawienie pustych komórek (jasny kolor) i dodanie małego symbolu wskazującego status (kwadratowy lub 5% lub komórkę wypełnioną kolor)
W ten sposób użytkownik może szybko przeczytać tekst i zobaczyć kategorię, do której należy.
Jeśli jednak chcesz łączyć kolory, sugeruję zakup książki „Indeks kolorów”. Znajdziesz tam tysiące kombinacji, które dobrze do siebie pasują i zaoszczędzisz trochę czasu.
źródło
Jeśli znajdziesz odpowiednie odcienie kolorów, z pewnością możesz użyć razem czerwieni, żółci i zieleni.
Polecam zajrzeć na niektóre z tych stron, na których można znaleźć dobre kombinacje:
http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
Lub spróbuj samodzielnie utworzyć niektóre z nich:
http://colorschemedesigner.com/
To, co naprawdę polecam, to po wybraniu kombinacji kolorów zapytaj inną osobę, co o tym myślą. Czasami nie mamy dość zewnętrznego wyglądu i po prostu lubimy kolory razem, nawet jeśli wcale nie są dobre.
Nie zapomnij pomyśleć o kontraście i widoczności tekstu, wybierając odpowiednie odcienie.
Polecam użycie jaśniejszego żółtego, ponieważ używasz go jako całkiem neutralnego koloru.
źródło
Oto trzy schematy, mam nadzieję, że Ci się spodoba.
źródło