Kolor

Kolor jest ważnym elementem wizualnym większości interfejsów użytkownika. Poza czystą estetyką, kolor ma związane znaczenia i wywołuje emocjonalne odpowiedzi. Aby zapobiec nieporozumieniu w znaczeniu, kolor musi być używany spójnie. Aby uzyskać żądane odpowiedzi emocjonalne, należy odpowiednio użyć koloru.

Kolor jest często uważany za przestrzeń kolorów, gdzie RGB (czerwony, zielony, niebieski), HSL (odcienie, nasycenie, jasność) i HSV (odcienie, nasycenie, wartość) są najczęściej używanymi przestrzeniami kolorów.

Przestrzeń kolorów RGB można wizualizować jako sześcian.

Podczas gdy technologia wyświetlania używa wartości RGB, a w związku z tym deweloperzy często myślą o kolorach RGB, przestrzeń kolorów RGB nie odpowiada temu, jak ludzie postrzegają kolor. Jeśli na przykład dodasz czerwony do ciemnego cyjanu, wynik nie jest postrzegany jako bardziej czerwony, ale jako jaśniejszy cyjan.

W tym przykładzie dodanie koloru czerwonego do ciemnego cyjanu sprawia, że jest jaśniejszy, a nie bardziej czerwony. Przestrzeń kolorów RGB nie odpowiada temu, jak ludzie postrzegają kolor.

Przestrzenie kolorów HSL/HSV składają się z trzech składników: odcienia, nasycenia i jasności lub wartości. Te przestrzenie kolorów są często używane zamiast RGB, ponieważ lepiej pasują do tego, jak ludzie postrzegają kolor.

Przestrzeń kolorów HSL tworzy podwójny stożek, który jest biały na górze, na dole i neutralny w środku:

• Odcień: Kolor podstawowy w kole kolorów, od 0 do 360 stopni, gdzie zarówno 0, jak i 360 stopni są czerwone.

  

  Koło kolorów, gdzie czerwony jest 0 stopni, żółty jest 60 stopni, zielony jest 120 stopni, cyjan jest 180 stopni, niebieski jest 240 stopni, a magenta wynosi 300 stopni.

• Nasycenie: Jak czysty (a nudny) kolor jest, od 0 do 100, gdzie 100 jest w pełni nasycony i 0 jest szary.

• Jasność: Jak jasny jest kolor, od 0 do 100, gdzie 100 jest tak jasny, jak to możliwe (biały, niezależnie od odcienia i nasycenia) i 0 jest tak ciemny, jak to możliwe ().

  

  Przestrzeń kolorów HSL można wizualizować jako podwójny stożek.

Przestrzeń kolorów HSV jest podobna, z tą różnicą, że jej przestrzeń tworzy jeden stożek:

• Odcień: Kolor podstawowy w kole kolorów, od 0 do 360 stopni, gdzie zarówno 0, jak i 360 stopni są czerwone.

• Nasycenie: Jak czysty (a nudny) kolor jest, od 0 do 100, gdzie 100 jest w pełni nasycony i 0 jest szary.

• Wartość: Jak jasny jest kolor, od 0 do 100, gdzie 100 jest tak jasne, jak to możliwe (co jest połowę jaskrawości w przestrzeni HSL) i 0 jest tak ciemne, jak to możliwe (czarne).

  

  Przestrzeń kolorów HSV można wizualizować jako pojedynczy stożek.

W przestrzeniach HSL i HSV, jeśli nasycenie wynosi 0, jasność określa odcień szarości. W systemie Windows przestrzenie HSL i HSV są zwykle ponownie mapowane na skalę z zakresu od 0 do 240, dzięki czemu kolory mogą być reprezentowane z wartością 32-bitową.

Nuta: Wytyczne dotyczące czcionek i ułatwień dostępu są prezentowane w oddzielnych artykułach.

Pojęcia dotyczące projektowania

Efektywne użycie koloru może sprawić, że interfejs użytkownika programu będzie bardziej efektywny. Kolor może pomóc użytkownikom w zrozumieniu pewnych pojęć w skrócie. Kolor może również sprawić, że produkt będzie wyglądał bardziej estetycznie i wyrafinowany.

Niestety, kolor jest zbyt łatwy w użyciu nieskutecznie, zwłaszcza jeśli nie jesteś przeszkolony w projekcie wizualnym. Słabe wykorzystanie kolorów powoduje, że projekty wyglądają nieprofesjonalnie, datowane, mylące lub po prostu brzydkie. Słabe użycie koloru może być gorsze niż używanie koloru w ogóle.

W tej sekcji wyjaśniono, co należy wiedzieć, aby efektywnie używać kolorów.

Jak jest używany kolor

Kolor jest zwykle używany w interfejsie użytkownika do komunikowania się:

• Znaczenie. Znaczenie komunikatu można podsumować za pomocą koloru. Na przykład kolor jest często używany do komunikowania stanu, w którym czerwony jest problemem lub błędem, żółty jest przestroga lub ostrzeżenie, a zielony jest dobry.
• Stan. Stan obiektu można wskazać za pomocą koloru. Na przykład system Windows używa koloru do wskazywania stanów zaznaczenia i aktywowania. Linki na stronach sieci Web używają koloru niebieskiego dla nieodwiedzonych i fioletowych dla odwiedzonych.
• Różniczkowanie. Ludzie zakładają, że istnieje relacja między elementami tego samego koloru, więc kodowanie kolorów jest skutecznym sposobem rozróżnienia między obiektami. Na przykład w elemencie panelu sterowania okienka zadań używają zielonego tła, aby wizualnie oddzielić je od głównej zawartości. Ponadto program Microsoft Outlook umożliwia użytkownikom przypisywanie różnych kolorowych flag do wiadomości.
• Nacisk. Kolor może służyć do zwracania uwagi użytkowników. Na przykład system Windows używa niebieskich instrukcji głównych , aby ułatwić im wyróżnianie się od innego tekstu.

Oczywiście kolor jest często używany w grafice z czysto estetycznych powodów. Chociaż estetyka jest ważna, należy wybrać kolory elementów interfejsu użytkownika przede wszystkim na podstawie ich znaczenia, a nie sposobu ich wyglądu.

Interpretacja kolorów

Interpretacja koloru przez użytkowników jest często zależna kulturowo. Na przykład w Stanach Zjednoczonych strój ślubny dla panny młodej jest w dużej mierze związany z kolorem białym, podczas gdy jest związany z pogrzebami. Jednak dawno temu w Japonii symbolika koloru była po prostu przeciwieństwem: biały był dominującym kolorem na pogrzebach, a był uważany za kolor, który przynosi szczęście na wesela.

Oznacza to, że interpretacja koloru czerwonego, żółtego i zielonego dla statusu jest spójna globalnie. Wynika to z konwencji UNESCO w Wiedniu na temat znaków drogowych i sygnałów, która definiuje światową konwencję na potrzeby sygnalizacji świetlnej (gdzie czerwony środek zatrzymuje się, zielone środki kontynuują, a żółte środki postępują ostrożnie). Można używać tych kolorów stanu bez obaw o interpretacje zależne od kultury.

Poza kolorami stanu system Windows przypisuje znaczenie kolorom na podstawie konwencji, jak przedstawiono w sekcji Wytyczne w tym artykule. Upewnij się, że użycie kolorów programu jest zgodne z tymi konwencjami kolorów.

Ułatwienia dostępu do kolorów

Użycie koloru wpływa na dostępność oprogramowania dla najszerszych możliwych odbiorców. Użytkownicy z ślepotą lub niską wizją mogą nie być w stanie zobaczyć dobrze kolorów, jeśli w ogóle. Około 8 procent dorosłych mężczyzn ma jakąś formę zamieszania kolorów (często niepoprawnie określane jako "ślepota koloru"), z których najczęściej występuje zamieszanie koloru czerwonego zielonego.

Podstawowe kolory, jak widać z normalną wizją kolorów.

Podstawowe kolory, jak widać w Protanopii (1% populacji męskiej).

Podstawowe kolory, jak widać w Deuteranopia (6% populacji męskiej).

Podstawowe kolory, jak widać z Tritanopia (1% populacji męskiej).

Aby uzyskać więcej informacji, zobacz Czy użytkownicy Color-Blind zobacz Witrynę?

Używanie koloru do wzmacniania wizualnego

Najlepszym rozwiązaniem problemów z interpretacją kolorów i ułatwieniami dostępu jest użycie koloru w celu wizualnego wzmocnienia znaczenia jednej z następujących podstawowych metod komunikacji:

• Tekst. Zwięzły tekst jest zwykle najbardziej efektywną komunikacją podstawową bezpośrednio w interfejsie użytkownika lub za pośrednictwem etykietki narzędzia.

W tym przykładzie tekst etykietki narzędzia służy do komunikowania znaczenia ikony.

• Projekt. Ikony są łatwo rozróżniane przez projekty, zwłaszcza ich kształt konspektu.

W tym przykładzie standardowe ikony są łatwo rozróżnialne na podstawie ich projektów.

• Lokalizacja. Można również użyć lokalizacji względnej, ale takie podejście jest słabsze niż alternatywy. Aby zapewnić skuteczność, lokalizacja powinna być standardowa i dobrze znana, podobnie jak w przypadku świateł drogowych.

Chociaż kolor jest najbardziej oczywistym atrybutem wielu projektów, zawsze musi być nadmiarowy.

Projektowanie z kolorem

Jak na ironię, najlepszym sposobem projektowania koloru jest rozpoczęcie od projektowania bez koloru, przy użyciu szkieletów lub monochromatycznych, a następnie dodać kolor później. Dzięki temu można zagwarantować, że informacje nie są przekazywane przy użyciu samego koloru. Pomaga to również zapewnić, że wydruki wyglądają świetnie na drukarkach monochromatycznych.

Używanie motywu lub kolorów systemowych

Chociaż istnieje wiele złożonych czynników w efektywnego używania koloru, w interfejsie użytkownika systemu Windows wybór koloru często sprowadza się do po prostu wybrania odpowiedniego koloru motywu lub koloru systemu zgodnie z kilkoma prostymi regułami. Użytkownicy mogą następnie wybierać i dostosowywać te schematy kolorów podczas wybierania.

Dzięki temu nie tylko można dostosować preferencje dotyczące kolorów wszystkich użytkowników, ale wyeliminować ciężar wyboru jednego idealnego schematu kolorów, który działa dla wszystkich smaków, stylów i kultur (co oczywiście jest niemożliwe).

Jeśli robisz tylko jedną rzecz...

Wybierz kolory, wybierając odpowiedni kolor motywu lub kolor systemu. Nigdy nie używaj koloru jako podstawowej metody komunikacji, ale jako metody pomocniczej, aby wzmocnić znaczenie wizualne. Projektowanie przy użyciu szkieletów lub monochromatycznych, aby zapewnić, że kolor jest pomocniczy.

Poprawnie używaj motywu lub kolorów systemowych

Załóżmy, że użytkownicy wybierają kolory motywu lub systemu na podstawie własnych potrzeb i że motyw lub kolory systemowe są odpowiednio skonstruowane. W oparciu o to założenie, jeśli zawsze wybierasz motyw lub kolory systemowe na podstawie ich zamierzonego celu i parowania pierwszego planu ze skojarzonymi tłami, kolory mają gwarancję czytelnego i szanowania życzeń użytkowników we wszystkich trybach wideo, w tym w trybie wysokiego kontrastu. Na przykład kolor systemu tekstu okna jest gwarantowany czytelny dla koloru systemu tła okna.

W szczególności zawsze:

• Wybierz kolory na podstawie ich przeznaczenia. Nie wybieraj kolorów na podstawie ich bieżącego wyglądu, ponieważ ten wygląd może zostać zmieniony przez użytkownika lub przyszłe wersje systemu Windows.
• Dopasuj kolory pierwszego planu ze skojarzonymi kolorami tła. Kolory pierwszego planu mają gwarancję, że będą czytelne tylko dla skojarzonych kolorów tła. Nie dopasuj kolorów pierwszego planu i nie dopasuj ich do innych kolorów tła, ani jeszcze gorzej, innych kolorów pierwszego planu.
• Nie mieszaj typów kolorów. Oznacza to, że zawsze dopasuj kolory motywu do ich skojarzonych kolorów motywu, kolory systemowe ze skojarzonymi kolorami systemu i stałe kolory z innymi kolorami na stałe. Na przykład kolor tekstu motywu nie gwarantuje czytelnego tła.
• Jeśli musisz używać kolorów hardwire, obsłuż tryb dużego kontrastu jako specjalny przypadek.

Jeśli robisz tylko jedną rzecz...

Zawsze wybieraj kolory motywu lub systemu na podstawie ich zamierzonego celu i paruj pierwszego planu ze skojarzonymi tłami.

Używanie innych kolorów

Chociaż motyw systemu Windows definiuje kompleksowy zestaw części motywu, może się okazać, że program potrzebuje kolorów, które nie są zdefiniowane w pliku motywu. Chociaż można hardwire takich kolorów, lepszym podejściem jest wyprowadzenie kolorów z motywu lub kolorów systemowych. Strategiczne użycie tego podejścia zapewnia wszystkie korzyści wynikające z używania motywu i kolorów systemowych, ale z znacznie większą elastycznością.

Załóżmy na przykład, że potrzebujesz tła okna, które jest ciemniejsze niż kolor tła okna motywu. W przestrzeni kolorów HSL, o ciemniejszy kolor oznacza kolor z niższą jaskrawością. W związku z tym można uzyskać ciemniejszy kolor tła okna, wykonując następujące kroki:

• Uzyskaj kolor motywu tła okna RGB.
• Przekonwertuj RGB na wartość HSL.
• Zmniejsz wartość jasności (na przykład 20 procent).
• Przekonwertuj z powrotem na wartości RGB.

Korzystając z tego podejścia, kolor pochodny ma gwarancję, że będzie postrzegany jako ciemniejszy odcień oryginalnego koloru (chyba że oryginalny kolor był bardzo ciemny, aby rozpocząć).

W tym przykładzie ciemniejszy kolor tła okna pochodzi z koloru motywu.

Testowanie kolorów

Aby ustalić, czy użycie koloru w programie jest dostępne i nie jest używane jako podstawowa metoda komunikacji, zalecamy użycie narzędzia ColorDoctor Firmy LubNarzędzia Vischeck do sprawdzania:

• Ogólna zależność od koloru przy użyciu filtru skali szarej.
• Konkretne problemy z zamieszaniem kolorów przy użyciu filtrów Protanopia, Deuteranopia i Tritanopia.

Aby określić, czy użycie koloru programu jest poprawnie zaprogramowane, przetestuj program w następujących trybach:

• Motywy włączone przy użyciu domyślnego motywu systemu Windows.
• Motywy włączone przy użyciu motywu innego niż domyślny.
• Motywy wyłączone ("Styl klasyczny systemu Windows" w ustawieniach motywu w elemencie Panel sterowania personalizacji).
• Motyw o wysokim kontraście (biały tekst na czarnym tle, znany jako wodnych w systemie Windows 11).
• Motyw High Contrast White (tekst na białym tle, znany jako Pustynia w systemie Windows 11).

Wszystkie elementy ekranu powinny być czytelne i wyświetlane zgodnie z oczekiwaniami, nawet natychmiast po zmianie trybu.

Wytyczne

Ogólne

• Nigdy nie używaj koloru jako podstawowej metody komunikacji, ale jako metody pomocniczej, aby wzmocnić znaczenie wizualne.

Używanie motywu i kolorów systemowych

• Jeśli to możliwe, wybierz kolory, wybierając odpowiedni kolor motywu lub kolor systemu. Dzięki temu zawsze można szanować preferencje dotyczące kolorów użytkowników.
• Wybierz motyw i kolory systemowe na podstawie ich przeznaczenia. Nie wybieraj kolorów na podstawie ich bieżącego wyglądu, ponieważ ten wygląd może zostać zmieniony przez użytkownika lub przyszłe wersje systemu Windows.
• Dopasuj kolory pierwszego planu ze skojarzonymi kolorami tła. Kolory pierwszego planu mają gwarancję, że będą czytelne tylko dla skojarzonych kolorów tła. Nie dopasuj kolorów pierwszego planu i nie dopasuj ich do innych kolorów tła, ani jeszcze gorzej, innych kolorów pierwszego planu.
• Nie mieszaj typów kolorów. Oznacza to, że zawsze dopasuj kolory motywu do ich skojarzonych kolorów motywu, kolory systemowe ze skojarzonymi kolorami systemu i stałe kolory z innymi kolorami na stałe. Na przykład kolor tekstu motywu nie gwarantuje czytelnego tła.
• Jeśli musisz użyć koloru, który nie jest motywem lub kolorem systemu:
  • Preferuj wyprowadzanie koloru z motywu lub koloru systemu na stałe jego wartość. Użyj procesu opisanego wcześniej w tym artykule w temacie Używanie innych kolorów.
  • Obsługa trybu dużego kontrastu jako specjalny przypadek.
• Obsługa zmian motywu. Zmiany motywu są obsługiwane automatycznie przez okna ze standardowymi ramkami okien i typowymi kontrolkami. System Windows z niestandardowymi ramkami okien, kontrolkami niestandardowymi lub kontrolkami rysowania właściciela i innym użyciem koloru musi jawnie obsługiwać zmiany motywu.
  • Deweloperzy: Zdarzenia zmiany motywu można odpowiedzieć, obsługując komunikat WM_THEMECHANGED.

Znaczenie koloru

• Chociaż należy używać kolorów motywu i systemu (lub kolorów pochodnych) zawsze, gdy to możliwe, upewnij się, że inne użycie koloru jest zgodne z następującym użyciem koloru w systemie Windows.

• Aby uniknąć komunikowania się z poprzednimi znaczeniami, wybierz kolory o wysokiej średniej do niskiej nasycenia i wysokiej lub niskiej jasności. Użytkownicy kojarzą poprzednie znaczenia z kolorami, które mają pełne lub wysokie nasycenie i jasność na średnim poziomie, dzięki czemu można uniknąć tych skojarzeń, wybierając różne odcienie.

W tym przykładzie istnieją trzy różne odcienie żółtego, ale tylko bardzo nasycony, środkowy odcień jaskrawości komunikuje się z ostrzeżeniem. Ikona żółtego folderu nie przypomina ostrzeżenia.

Używanie koloru z danymi

• Gdy jest to przydatne, przypisz kolor do danych, aby ułatwić użytkownikom ich odróżnienie. Należy pamiętać, że użytkownicy przyjmą, że dane z podobnymi kolorami mają podobne znaczenie.

• Przypisz kolory domyślnie, które są łatwe do odróżnienia. Ogólnie rzecz biorąc, kolory są łatwe do odróżnienia, jeśli są dalekie od siebie w przestrzeni kolorów HSL/HSV, przy zachowaniu dużego kontrastu z ich tłem:

  • W przypadku wybierania kolorów preferuj harmonie triad lub odcienie uzupełniające, ale nie sąsiadujące odcienie.

    

    W tym przykładzie, jeśli pierwsze przypisanie koloru jest czerwone, następny kolor powinien być niebieski, zielony lub cyjan, ale nie magenta, purpurowy, pomarańczowy lub żółty.

  • Kolory mają duży kontrast, jeśli istnieje duża różnica w ich odcieniu, nasyceniu lub jaskrawości.

    

    W tym przykładzie jasnoniebieski kolor podstawowy kontrastuje z tłami z dużymi różnicami w odcieniach, nasyceniu lub jaskrawości.

  • Użycie białego lub bardzo jasnego tła sprawia, że kontrastujące kolory pierwszego planu są łatwiejsze do odróżnienia.

    

    W tym przykładzie kolory białego i jasnego tła ułatwiają odróżnienie koloru pierwszego planu.

• Zezwalaj użytkownikom na dostosowywanie tych przypisań kolorów , ponieważ wybór koloru jest subiektywny i osobisty. Jeśli istnieje wiele skoordynowanych kolorów, zezwól użytkownikom na zmianę ich jako grupę przy użyciu schematów kolorów.

• Zezwalaj użytkownikom na etykietowanie tych przypisań kolorów. Dzięki temu łatwiej je zidentyfikować i znaleźć.

• W przeciwieństwie do kolorów interfejsu użytkownika dane nie powinny zmieniać się po zmianie kolorów systemowych.

Dokumentacja

• Odwoływanie się do elementów interfejsu użytkownika według ich nazw, a nie kolorów. Takie odwołania nie są dostępne, a kolory systemowe mogą ulec zmianie. Jeśli nazwa elementu interfejsu użytkownika nie jest wystarczająco znana lub nie jest wystarczająco opisowa, pokaż zrzut ekranu, aby wyjaśnić.

poprawna:

niepoprawne:

W niepoprawnym przykładzie komunikat odwołuje się do paska informacyjnego programu Windows Internet Explorer według jego koloru zamiast nazwy.