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 .
