5 Techniki precyzyjnego dostrajania UX z kolorem
Kolor jest jednym z kluczowych elementów w każdym systemie projektowania. Na stronach internetowych lub w aplikacjach kolor może być używany na wiele sposobów: czasami kolor może być użyty do stworzenia punktu ogniskowego poprzez kontrast lub poprzez ograniczenie koloru do wybranego miejsca; kolor może również pomóc w ustaleniu hierarchii, a zatem wpływać na to, gdzie użytkownik patrzy.
W tym artykule porozmawiamy o tym, jak strategicznie używać kolorów.
1. Tworzenie punktu ostrości za pomocą proporcji
Dobrym przykładem proporcji kolorów jest projekt Viporte . Podczas przewijania strony głównej każda sekcja jest ozdobiona dużą literą pośrodku. Litera jest wypełniona pięknym kolorem przed wkroczeniem animacji sekcji. Kolor różnych animowanych obrazów jest związany z kolorem liter. Centralnym punktem jest z pewnością centrum sekcji, częściowo dzięki skoncentrowanemu wykorzystaniu kolorów. Proporcje różnią się - czasami jest trochę koloru, a czasem jest go dużo. Tak czy inaczej, proporcje są wykorzystywane do przyciągnięcia uwagi do punktu centralnego. Jeśli kolor był bardziej widoczny w każdym miejscu w obrębie każdej sekcji, punkt centralny nie byłby tak wyraźny.
2. Łapanie uwagi przez kontrast
Inną rzeczą, którą może manipulować kolor, jest kontrast. Kiedy kolory ogólnego projektu są spokojne lub łagodne, dodanie kontrastującego koloru przyciągnie wiele uwagi do zdjęć.
Tak właśnie dzieje się w projekcie Thinx . Na stronie głównej ogólny schemat kolorów interfejsu jest w rzeczywistości czarny i biały. Jednak projekt opiera się głównie na wielu zdjęciach. Szczególnie na górze strony głównej zdjęcia bielizny mają ciemnoczerwone tło. W porównaniu ze wszystkim innym na stronie, to dość odważne. Bez wątpienia rzeczą, która wyróżnia się tutaj jest ciemnoczerwona. Czerwony ma znacznie wyższy kontrast w stosunku do czarno-białego schematu kolorów. Lubię używać Thinx jako przykładu, ponieważ pokazuje on, że jasne i neonowe kolory nie są jedynymi odpowiednimi do przyciągnięcia uwagi przez kontrast. To naprawdę tylko balansowanie dwoma kolorami, które pozwolą jednemu z nich naprawdę się wyróżnić.
3. Używanie koloru do tworzenia wzorców UX
Najlepszym sposobem tworzenia wzorców wizualnych jest spójność. Wzory tworzą z kolei relacje, do których użytkownik może się przyzwyczaić. W ten sam sposób użytkownicy są przyzwyczajeni do oznaczania ikon związanych z określonymi czynnościami, co oznacza, że kosz oznacza usunięcie. Kolory są dużo bardziej subiektywne, ponieważ każda witryna lub aplikacja może nadać własny sens kolorom.
Przyjmijmy związek z kolorem niebieskim na Strona portfolio firmy Underbelly . To prosty przykład i idealnie nadaje się do tego celu. Wszystko, co można kliknąć na stronie internetowej firmy Underbelly, jest niebieskie. Korzystając z witryny przez kilka sekund, szybko staje się jasne, że ich łącza są niebieskie. I w ten sposób tworzysz wzory poprzez kolor. Wzorce są dobre, ponieważ pozwalają użytkownikom i użytkownikom łatwo rozpoznać coś. Im łatwiej rozpoznać, tym mniej ludzi myśli, a teraz wszyscy wiemy, jak bardzo się to cieszy Steve Krug .
4. Tworzenie hierarchii poprzez kolor
Kolejną rzeczą, której kolor może być dobry, jest ustawienie hierarchii. Na Strona produktu Skore , prawie każda sekcja ma elementy zielone. Nie tylko zielony, powtarzalny - co tworzy rozpoznawalny wzór - pomaga także odróżnić ważne części danej sekcji. Często bardzo łatwo jest wyjaśnić hierarchię poprzez rozmiar takiej czcionki. Ale intensywność koloru, a także montowanie używanego koloru, może być również świetnym sposobem na ustawienie hierarchii.
W przykładzie Skore zielony ma dobry kontrast z szarym tekstem i białym tłem. To się wyróżnia. Ponadto ich kolorystyka nie opiera się na innych akcentowanych kolorach, które sprawiają, że zielony kolor podstawowy. Wszystko to przyczynia się do sposobu, w jaki każda sekcja może wyświetlać hierarchię. Dlatego zielony kolor pomaga skierować wzrok użytkownika na ważne elementy, zapewniając ładną hierarchię w każdej sekcji. Zielone elementy informują użytkownika, gdzie powinien wyglądać pierwszy.
5. Wykorzystywanie podobieństw koloru
Poza różnymi rzeczami, które robimy z kolorem jako projektantem, najczęściej używamy go i ponownie używamy, aby zachować spójność w projekcie. Rzućmy okiem Koniec roku InVision wstęp. U góry strony znajduje się różowy i fioletowy gradient używany jako obraz tła. W dalszej części strony różowy i fioletowy są również używane w kolorach przycisków. Ponadto strona docelowa ponownie przyjmuje biały kolor na różowo-fioletowym tle. Wykorzystuje również czarny i szary kolor tekstu na białym tle. Jeśli kolory za każdym razem były inne, nie wyglądałoby to tak dobrze.
Rzućmy okiem na inny przykład, konkretnie Współ-ruch . Na swojej stronie głównej studio kreatywne używa kilku różnych kolorów. Ale wszystkie są wystarczająco podobne w swoim tonie, aby zapewnić spójny przepływ. W tym przykładzie nie ma nic, co wyróżniałoby się konkretnie, co również może być dobrym celem. W tym przypadku nacisk na kolor jest dokonywany na dobrym i spójnym przepływie strony, w którym próbujesz utrzymać użytkownika w ruchu i przewijać.
Wniosek
Kolor może być wspaniałym narzędziem pomagającym osiągnąć różne cele projektowe. Kolor może pomóc w zdefiniowaniu i ustaleniu hierarchii oraz zapewnieniu punktu skupienia. Podkreślenie koloru ma różne formy. Tak czy inaczej, praca z kolorem może być świetną zabawą. Wywieranie wpływu na to, gdzie oczy odwiedzającego lub użytkownika jest łatwiejsze, może być łatwiejsze dzięki strategicznej kolorystyce.