Spektrum możliwości: Przewodnik po kolorach Go-to UI

Nie da się tego obejść: kolor to najbardziej wpływowy element twórczy w projektowaniu wizualnym. Od czarujących, malowniczych scenografii po skomplikowane kompozycje sztuki pikselowej, solidne zrozumienie koloru jest głównym kluczem do przekonującej komunikacji. Potrzebujesz dowodu?

Kiedy uczestnicy niedawnego badania skoncentrowanego na marce musieli narysować logo 10 kultowych korporacji, tylko 16% było w stanie przypomnieć sobie dokładne kształty i cechy projektu. Jednak gdy poproszono o określenie palety kolorów marki, liczba poprawnych odpowiedzi wzrosła do 80%.

Kolor odgrywa również ważną rolę w świecie projektowania interfejsów użytkownika. Produkty cyfrowe, z którymi codziennie mamy do czynienia, opierają się na strategicznym wykorzystaniu koloru do przekazywania ważnych informacji, dlatego niezwykle ważne jest, aby projektanci UX i UI zrozumieli, jak mądrze posługiwać się kolorem.

W tym przewodniku:

• Zdemistyfikuj podstawy teorii koloru,
• Zapewnij solidne zasady pracy z kolorem w interfejsach cyfrowych,
• Udostępniaj przydatne zasoby do budowania świadomości kolorów i
• Daj projektantom interfejsu użytkownika możliwość tworzenia własnych niezwykłych schematów kolorów.

Celem tego przewodnika jest kompetencja kolorystyczna, a następnie pewność koloru, a wszystko to w celu uzyskania niesamowitego odwzorowania kolorów w interfejsach użytkownika, z którymi spotykamy się na co dzień.

Crash Course: teoria kolorów dla projektantów interfejsu użytkownika

Teoria kolorów to ekspansywna dziedzina nauki z własną terminologią, metodologią i podstawami naukowymi. To może być skomplikowane, ale nie tego chcemy. To, czego chcemy, to zrozumienie koloru, który można zastosować z błyskawiczną precyzją. Chcemy używać koloru tak, jak używamy kształtów — bez wysiłku, odważnie i skutecznie.

Aby używać koloru w ten sposób, projektanci interfejsu użytkownika muszą dobrze rozumieć te podstawowe koncepcje teorii kolorów:

• Kolor jest względny.
• Przeciążenie nasycenia zabija jaskrawość kolorów.
• Jednoczesny kontrast ma zalety i wady.
• Najlepsze są podstawowe schematy kolorów.
• Odcień zawsze wpływa na wartość.

Zagłębmy się.

Kolor jest względny

Kolor nigdy nie jest sam. Ponieważ ludzkie oko i mózg współpracują ze sobą, aby zobaczyć kolor, zawsze mają na nie wpływ:

• Światło świecące na kolor
• Inne kolory otaczające kolor

Sprawdź ten przykład z natury:

O: Mózg i oko współpracują ze sobą, aby pomóc nam zrozumieć, że kwiat jako całość jest w rzeczywistości jaskrawoczerwony.

B & C: Ciemnobrązowy cień kwiatu (B) sprawia, że ​​podświetlenie na grzbiecie płatka (C) wydaje się znacznie jaśniejsze niż matowy bordowy kolor, którym jest w rzeczywistości. Zasadniczo światło padające na grzbiet płatka i kolor cienia działają w tandemie, aby oszukać oko i wzmocnić rozświetlenie.

Oto kolejny przykład pokazujący, jak zwodniczy może być kolor:

W projektowaniu interfejsu użytkownika względność kolorów nie zawsze jest tak oczywista, więc kolory w ramach schematu powinny być testowane względem siebie. Czemu? Ponieważ ten pięknie zaaranżowany dobór kolorów w Twoim przewodniku stylistycznym może okazać się problematyczny w przypadku zastosowania do interfejsu.

Wielkie jedzenie na wynos? Nie rozpieszczaj swoich koncepcji kolorystycznych. Jeśli próbka akcentującego koloru żółtego wygląda bujnie, gdy jest otoczona białymi znakami w programie Sketch, ale koliduje z dominującym schematem kolorów interfejsu użytkownika, znajdź inne rozwiązanie.

Przeciążenie nasycenia zabija jaskrawość kolorów

Nasycenie kolorów jest integralną częścią jaskrawości kolorów. Jednak schemat zmontowany wokół niczego poza mocno nasyconymi kolorami przytłacza oko, a żywotność jest zmniejszona. Z kolorem mniej znaczy więcej. Silnie nasycony kolor staje się żywy, gdy jest używany w połączeniu z mniej nasyconymi kolorami.

Jednoczesny kontrast ma zalety i wady

Kontrast jednoczesny występuje, gdy dopełnienia kolorów o dokładnie tej samej wartości są umieszczone obok siebie. Efekt jest tak intensywny, że powoduje wibrację lub pulsację punktu, w którym spotykają się dwa kolory.

Dla projektantów interfejsu użytkownika równoczesny kontrast może mieć pozytywne i negatywne skutki, dlatego ważne jest, aby zrozumieć, jak kontrolować siłę tego zjawiska wizualnego.

Na przykład w interfejsie zaprojektowanym z myślą o różnych odcieniach niebieskiego, użycie dopełniającego pomarańczy o tej samej wartości co niebieski kolor kotwicy byłoby świetnym sposobem na zwrócenie uwagi na ikony powiadomień.

Jednak ta sama pomarańczowa i niebieska kombinacja wywołałaby migrenę, gdyby została użyta do tekstu i tła menu rozwijanych.

Najlepsze są podstawowe schematy kolorów

Tęcze są piękne — w naturze. W projektowaniu interfejsu użytkownika kolor musi być używany bardziej selektywnie, w przeciwnym razie przytłacza wrażenia. Nawet jeśli marki mają efektowne palety z szeroką gamą opcji, najlepiej jest wykazać się powściągliwością i zbudować interfejs użytkownika wokół prostych schematów kolorów.

Oto dwa niezawodne plany budowy podstawowego schematu kolorów interfejsu użytkownika:

1. Analogowe schematy kolorów interfejsu użytkownika

• Te przyjemne dla oka schematy składają się z kolorów, które są ściśle pogrupowane na kole kolorów.
• Analogiczne schematy kolorystyczne są łatwe do znalezienia na zdjęciach środowisk naturalnych, zwłaszcza roślin, i zazwyczaj są uspokajające wizualnie.
• Różnorodność analogicznych schematów wynika z przesunięć nasycenia i jasności, a nie z dużych zmian odcienia.
• Korzystając z analogicznego schematu, spróbuj dodać jeden mocno nasycony kolor bezpośrednio z koła kolorów, aby wyróżnić się w interfejsie.

2. Uzupełniające schematy kolorów interfejsu użytkownika

• Uzupełniające się schematy kolorów opierają się na wzajemnym oddziaływaniu dopełniających się chłodnych i ciepłych kolorów, które występują naprzeciwko siebie na kole kolorów.
• Różnorodność kolorów uzyskuje się poprzez zmianę nasycenia i jasności pomiędzy dopełniającymi się ekstremami.
• Używanie zbyt wielu jasnych, mocno nasyconych kolorów osłabia wpływ komplementarnych schematów.

Odcień zawsze wpływa na wartość

Może to zabrzmieć dziwnie, ale kolory mają odpowiednie wartości szarości. Oto dowód:

Na powyższym obrazku mamy gamę odcieni o 100% jasności i nasyceniu, ale spójrz, co się stanie, gdy te kolory zostaną przekonwertowane na skalę szarości:

Bum! Ujawnia się cały zakres wartości szarości. Dlaczego ma to znaczenie dla projektantów interfejsu użytkownika? Jedno słowo: kontrast .

Zmień na chwilę swój umysł na skalę szarości. Jeśli chciałbyś stworzyć kontrast, czy kiedykolwiek użyłbyś 40% szarości do 50%? Oczywiście, że nie, ale właśnie to jest ryzykowne, gdy odcień jest pomijany w równaniu kontrastu kolorów.

Pamiętaj, odcień zawsze wpływa na wartość.

4 podstawowe zasady dotyczące kolorów w interfejsach cyfrowych

Teraz, gdy uprościliśmy teorię kolorów i powiązaliśmy jej podstawowe koncepcje z projektowaniem interfejsu użytkownika, nadszedł czas, aby bardziej skoncentrować się na roli, jaką kolor odgrywa w interfejsach cyfrowych. Są to cztery zasady dotyczące kolorów, które należy wziąć pod uwagę od najwcześniejszych wysiłków każdego projektu projektowania interfejsu użytkownika.

1. Kluczowy jest związek między tekstem a kolorem.
2. Nie można zignorować dostępności kolorów.
3. Kontrast jest niezbędny, ale nie jest to lekarstwo na wszystko.
4. Kolor działa najlepiej, gdy stosuje się go proporcjonalnie.

Związek między tekstem a kolorem jest kluczowy

Kolor wpływa na czytelność. Większość projektantów interfejsu użytkownika rozumie to w zasadzie, dlatego nie widzimy wielu interfejsów z zielonym tekstem głównym na czerwonym tle. Zamiast tego napięcie między tekstem a kolorem pojawia się subtelnie, wkradając się przez typowe komponenty interfejsu użytkownika, takie jak formularze, przyciski, nagłówki i ikony.

Utrzymuj zdrową relację między tekstem a kolorem, przestrzegając tych prostych wskazówek:

• Zawsze unikaj niskiego kontrastu między tekstem a tłem.
• Nie używaj kolorów dopełniających dla tekstu i tła, zwłaszcza gdy kolory mają podobną jasność i nasycenie (np. żółty tekst na fioletowym tle).
• Nawet na białym tle nie ustawiaj tekstu podstawowego w jasnych kolorach. Najłatwiejsze do odczytania są czarne i ciemnoszare.

Nie można zignorować dostępności kolorów

Kolor jest komunikatywny, ale nie może być jedynym elementem projektu używanym do przekazywania informacji w interfejsie użytkownika. Dlaczego nie? Ponieważ niektórzy internauci postrzegają kolor inaczej (lub wcale) niż większość populacji.

Na przykład osoba, która cierpi na ślepotę barw, może nie być w stanie stwierdzić, kiedy ikona produktu jest „naciśnięta”, jeśli jedyną różnicą w ikonie jest zmiana koloru.

Ponadto niektórzy ludzie mają trudności z dostrzeżeniem ważnych elementów interfejsu użytkownika, które mają niski kontrast kolorów z tłem interfejsu. Witryny takie jak Colorable i Contrast Ratio pozwalają projektantom szybko przetestować szereg par kolorów pod kątem dostępności kontrastu.

Kontrast jest niezbędny, ale nie jest lekarstwem na wszystko

Tak, kontrast kolorów w projektowaniu interfejsu użytkownika jest ważny. Planuj, wdrażaj, korzystaj z tego. Ale nie oczekuj, że będziesz nim machał jak magiczną różdżką i naprawiał kiepski projekt.

Nie wolno ignorować kształtu, przestrzeni, rozmiaru i innych elementów projektu. Kontrast kolorów może sprawić, że okropny interfejs użytkownika będzie wyglądał atrakcyjnie, ale nie naprawi złego doświadczenia użytkownika.

Kolor działa najlepiej, gdy jest nakładany proporcjonalnie

Wyobraź sobie aplikację z wiadomościami, w której każde wystąpienie tekstu jest umieszczone w przypadku tytułów lub witrynę eCommerce zaprojektowaną na siatce obrazów 9x9. Oba byłyby okropne!

Doświadczeni projektanci interfejsu użytkownika stosują proporcjonalnie elementy projektu, takie jak typografia i powtarzanie, aby poprawić hierarchię projektu. Kolor zasługuje na taką samą przemyślaną uwagę. W projektowaniu interfejsu użytkownika używanie zbyt wielu kolorów myli sposób postrzegania informacji.

Zasoby kolorów dla ciągłego postępu

Oto niewygodna prawda: projektowanie z użyciem koloru to umiejętność, którą trzeba rozwijać. Większość projektantów interfejsu użytkownika ma wrodzone wyczucie, jakie kolory dobrze ze sobą współgrają (czyli smak koloru), ale nie zawsze przekłada się to na zastosowanie.

Aby naprawdę opanować kolor i zobaczyć jego pełny wpływ na projektowanie interfejsu użytkownika, projektanci muszą ćwiczyć. Na szczęście istnieje wiele zasobów, które pomogą w ciągłym uczeniu się kolorów i rozwijaniu umiejętności.

Ctrl+Farba

Jeśli jesteś projektantem interfejsu użytkownika, który chce natychmiast uzyskać pewność koloru, zacznij od ctrlpaint.com, strony internetowej poświęconej instrukcjom malowania cyfrowego. Malarstwo cyfrowe? Naprawdę?

Absolutnie. Profesjonalny artysta koncepcyjny Matt Kohr uczy cyfrowego korzystania z kolorów poprzez krótkie samouczki wideo i praktyczne ćwiczenia. Program nauczania jest cudownie prosty i koncentruje się na „malowaniu tego, co widzisz”, zarówno w świecie fizycznym, jak i wyobraźni.

Zacznij od darmowej biblioteki wideo (sekcja 11), zanim przejdziesz do bardziej intensywnych ćwiczeń w zestawie Color Starter Kit .

Josef Albers i interakcja aplikacji kolorystycznej

Współczesne rozumienie względności kolorów było intensywnie badane i rozwijane przez praktykę przed teorią podejścia artysty/edukatora Josefa Albersa.

Albers zasugerował, że jeden kolor może mieć „wiele twarzy” i zachęcił swoich uczniów do szerokiej zabawy i eksperymentów w nadziei, że „oczy zostaną otwarte”, aby zobaczyć, jak naprawdę zachowuje się kolor w prawdziwym świecie (w przeciwieństwie do kolorów symbolicznych, które sobie wyobrażamy w naszych umysłach).

W 1963 Albers jest autorem Interaction of Color , podręcznika, który nadal ma duży wpływ na światową edukację artystyczną i projektową. Aby uczcić 50. rocznicę publikacji książki, Uniwersytet Yale wydał interaktywną aplikację na iPada, która zawiera pełny tekst, ale także pozwala użytkownikom bawić się i eksperymentować z kolorowymi płytami Albersa.

Projektantom interfejsu użytkownika aplikacja Interaction of Color daje możliwość wypróbowania analogowych ćwiczeń kolorystycznych w środowisku cyfrowym i zobaczenia z pierwszej ręki, jak względność kolorów wpływa na interfejsy użytkownika.

Andrzeja Loomisa

W pierwszej połowie XX wieku Andrew Loomis był wybitnym ilustratorem i instruktorem w American Academy of Art w Chicago, ale jego trwałą spuścizną jest dziedzictwo autora. Loomis napisał sześć książek na temat sztuki komercyjnej i projektowania i obejmował szereg tematów, od rysowania postaci po lokowanie produktu.

W swoich książkach Creative Illustration i Eye of the Painter (oba dostępne na archive.org) Loomis upuszcza wiele trwałych linii, które pozostają istotne dla współczesnej dziedziny projektowania interfejsu użytkownika:

Największym błędem koloru, który powoduje brak jedności i harmonii, jest zbyt duża ilość kolorów na palecie.

Dowolne dwa kolory będą harmonijne, gdy jeden lub oba zawierają część drugiego.

Kolor nadaje się do eksperymentowania bardziej niż jakikolwiek inny element piękna.

Interfejsy innych projektantów

Po osiągnięciu podstawowego poziomu kompetencji kolorystycznych tworzenie schematów kolorystycznych zamienia się w fascynujące dążenie. Każdy napotkany interfejs staje się okazją do nauki i krytyki, a obserwacji obfituje.

Jest to etap rozwoju projektanta interfejsu użytkownika, na którym odwoływanie się do pracy innych projektantów staje się inspirujące. Jak to? Ponieważ odwoływanie się przemieszcza się od celu do podróży, od punktu końcowego do inspiracji.

Projektanci UI na wszystkich poziomach zaawansowania mogą czerpać korzyści z ciągłego rejestrowania znalezionych schematów kolorów UI. Rób zrzuty ekranu, prowadź fizyczny dziennik kolorów, uruchamiaj moodboard — wszystko, czego potrzeba, aby utrwalić chwile kolorowego oświetlenia do przyszłej implementacji.

Kolor jest zbyt ważny, aby go zignorować

Jeśli chodzi o projektowanie interfejsów cyfrowych, kolor nie jest kwestią opcjonalną. Nawet w interfejsach użytkownika, które wykorzystują minimalną ilość kolorów (lub tych, które są całkowicie czarno-białe), konieczne jest, aby projektanci interfejsu użytkownika rozumieli, dlaczego kolor jest lub nie jest używany i jak wpływa to na wrażenia użytkownika.

Ważne jest również, aby projektanci interfejsu użytkownika mieli możliwość generowania i implementowania oryginalnych schematów kolorów. Odwoływanie się do pracy innych projektantów i produktów cyfrowych jest wartościową praktyką, ale staje się to ograniczające, gdy jest to jedyna metoda eksploracji kolorów podejmowana podczas procesu projektowania. Możliwość uchwycenia par kolorów widzianych w świecie rzeczywistym lub okiem umysłu ma ogromną wartość.

Jeśli jesteś projektantem, który ma problemy z umiejętnym wykorzystaniem koloru lub kiedykolwiek myślałeś: „Nie mam talentu do koloru”, nie zniechęcaj się. Projektowanie z użyciem koloru nie jest jakąś formą kreatywnego czarowania ani specjalnego prezentowania; jest to praktyczna dyscyplina oparta na prostych technikach, które można powtarzać i ulepszać.

Pamiętaj, że kolor jest głównym kluczem do jasnej i przekonującej komunikacji projektowej. Niezależnie od tego, czy jest wdrażany z rozwagą, czy z lekkomyślnym porzuceniem, wpływa na konwersję, świadomość marki i wrażenia użytkownika. Dla projektanta interfejsu użytkownika kolor jest potężnym narzędziem, którego po prostu nie można zignorować.

• • •

Dalsza lektura na blogu Toptal Design:

1. Rola koloru w UX
2. Tworzenie przewodnika po stylu UI dla lepszego UX
3. UX i znaczenie dostępności w sieci
4. Sztuka kontra design – ponadczasowa debata
5. Projektowanie dla środowisk interaktywnych i inteligentnych przestrzeni