Korzystanie ze sposobu, w jaki ludzie przetwarzają informacje wizualne w projektowaniu stron internetowych

Projektowanie stron internetowych i interfejsów użytkownika stało się łatwiejsze w ciągu ostatnich kilku lat. Istnieje tak wiele narzędzi, które można wykorzystać, że bezcelowe jest uruchamianie od nowa przy tworzeniu interfejsów użytkownika (sprawdź naszą nową kompilację interfejsu użytkownika). Ale nie jestem tutaj, by spierać się o śmierć projektowania stron internetowych.

Zamiast tego spróbuję wyjaśnić podstawowe, oparte na psychologii koncepcje kryjące się za mnóstwem narzędzi do projektowania wizualnego (od najbardziej podstawowych zestawów CSS po najbardziej zaawansowane motywy premium). Nie tylko ich użyjesz, ale także zrozumiesz. Jestem przekonany, że ułatwi to również modyfikację już istniejących.

Przyjrzyjmy się, jak działa ludzki umysł i ciało, jeśli chodzi o przetwarzanie informacji wizualnych i jak ta wiedza jest interpretowana w projektowaniu dla sieci.

Zasady organizacji percepcyjnej

Według psychologii Gestalt, całość jest inna niż suma jej części. Wyznawcy tej szkoły myśli twierdzą, że istnieje kilka zasad dotyczących tego, jak ludzki umysł grupuje przedmioty. Nie są to po prostu teorie, ale faktyczne fakty dotyczące organizowania grup wizualnych.

Poniżej znajdziesz niektóre prawa oraz bardziej popularne i dobrze znane zastosowania tych zasad. Możesz nawet znaleźć nowe pomysły na swój następny projekt.

Prawo podobieństwa

Pierwsza zasada stwierdza, że małe obiekty podobne są postrzegane jako grupa, zamiast wielu wystąpień tego samego małego obiektu. Podobieństwo może być oparte na kształcie, kolorze, cieniowaniu lub innej jakości. Ta zasada jest podstawą wzór jak również wiele geometrycznych i minimalistycznych wzorów logo.

Na przykład to zdjęcie przedstawia okrągłe logo zamiast oddzielnych trójkątów. Trójkątny kształt na dole orła sprawia, że ​​myślimy, że kształt jest również częścią obrazu.

Prawdopodobnie wykorzystałeś to prawo nieświadomie, tworząc kilka, pudełka o tej samej wielkości na swojej stronie. Jeśli chcesz pokazać, że pewne elementy treści mają takie samo znaczenie lub udostępniają podobne informacje, w tym celu stwórz określony kształt. W ten sposób użytkownik natychmiast skojarzy ten konkretny kształt z określonym obszarem informacji.

Prawo bliskości

Zgodnie z tym prawem obiekty, które są bliżej do siebie nawzajem uważany za należący do tej samej grupy. Te same kwadraty, gdy są renderowane obok siebie w bliskiej, regularnej bliskości, tworzą poczucie grupowania.

Ta zasada została ostatnio w dużym stopniu wykorzystana w sieci, zwłaszcza podczas pracy pętle treści, na przykład na blogach i sklepach internetowych.

Możesz natychmiast pogrupować tytuł, wyróżniony obraz, metadane i fragment, nawet bez żadnych granic lub tła. Możesz usunąć niepotrzebne linie i kolory ze swojego projektu, aby uczynić go bardziej minimalistycznym, a jednocześnie w pełni zrozumiałym.

Dla Twojej wygody przytoczę również Wikipedię, która stwierdza:

Prawo dobrej formy

Prawo to, znane również jako Prawo Pragnanza lub Dobry Gestalt, stanowi, że mamy tendencję do grupowania obiektów razem, jeśli one tworzą wzór, który jest prosty, regularny i uporządkowany. Nasz umysł próbuje rozdzielić złożone i percepcyjnie trudne formy na wiele grup po prostu zrozumiałych kształtów; to prowadzi do znaczenie zwięzłości.

Jest to również jedna z możliwych przyczyn sukcesu projekt oparty na siatce a to sprawiło, że struktury sieci oparte na stołach i ramach (na szczęście rzeczy z ciemnych wieków projektowania) są tak popularne.

Pamiętając o tej zasadzie, prawdopodobnie nie stworzysz strony internetowej wypełnionej złożonymi kształtami bloków treści, które byłyby połączone z innymi prawami powyżej. Mimo to możesz grupuj swoje obiekty w ciekawy sposób, na przykład w kształcie diamentu lub latawca, ponieważ są one nadal postrzegane jako uporządkowane i zwięzłe kształty.

Teoria kolorów, percepcja i użycie

Widzenie kolorów i postrzeganie koloru to w dużej mierze subiektywne oparte na jak reagują mózgi widzów do fal świetlnych odbijanych przez kolorowe obiekty lub kształty. Zasada jest taka, że ​​różni ludzie, nawet bez wad wzroku, widzą ten sam obiekt w innym kolorze (możesz pamiętać sukienkę).

Właściwości koloru

Nadal istnieją trzy obiektywne właściwości koloru; odcień, wartość i intensywność.

Odcień to nazwa koloru oznaczonego na kole kolorów lub tęczy. Istnieje sześć (lub dwanaście, w zależności od tego, z kim rozmawiasz) podstawowe barwy: czerwony, pomarańczowy, żółty, zielony, niebieski i fioletowy.

Żółte, niebieskie i czerwone są podstawowa, pomarańczowy, zielony i fioletowy są wtórny barwy; także są trzeciorzędowy barwy będące bezpośrednimi mieszaninami dwóch odcieni pierwotnych i wtórnych (np. żółto-zielona lub czerwona fioletowa).

Wartość jest lekkością lub ciemnością koloru, określaną jako wysoka wartość dla jasnych kolorów lub niska wartość dla ciemnych kolorów.

Intensywność odnosi się do jasność lub ciemność koloru; oznacza to, że kolor o tym samym odcieniu i tej samej wartości może być nadal przyciemniany lub rozjaśniany przez zmianę intensywności i tworzenie różnych kolorów wyjściowych.

Najwyższą intensywnością każdego koloru jest odcień, który pokazują na kole kolorów (patrz poniżej), natomiast najniższy to kolor szary.

Kontrasty kolorów

Odnosząc się do wyżej wymienionych praw podobieństwa, umysły obserwatorów tworzą grupy małych obiektów, które oglądają w oparciu o podobne i różne właściwości - często kolory.

Kiedy wybierzesz paletę kolorów dla swojej witryny, zwłaszcza jeśli wybierzesz podejście minimalistyczne lub zaprojektujesz obszar treści o dużej gramaturze, np. blogi lub reklamy, powinieneś należy pamiętać o różnych kontrastach kolorów które mogą pomóc w znalezieniu właściwych wartości kolorów dla uzyskania najlepszego wyniku.

Johannes Itten ma 7 kontrastów kolorystycznych, chociaż wspomnę tylko 3.

1. Kontrast odcienia

Żółty, czerwony i niebieski przy pełnej intensywności są bezpośrednie i żywe kontrasty. Wtórne barwy powodują mniej ostre rozróżnienie, ale nadal działają, podobnie jak barwy trzeciorzędowe, chociaż żadne z nich nie tworzą tak niesamowite efekty, jak w przypadku podstawowych odcieni.

2. Kontrast uzupełniający

Dwa kolory mają uzupełniający się kontrast, jeśli po zmieszaniu tworzą neutralny szary. Są one również nazywane dziwne pary. Jeśli są przylegające, poprawiają wyrazistość i intensywność, a po wymieszaniu znoszą się nawzajem. Każdy kolor ma jeden i tylko jeden uzupełniający się; na kole kolorów pary są po przekątnej naprzeciwko siebie.

3. Jasny, ciemny kontrast

Jeśli chcesz eksperymentować z jednokolorową stroną internetową, używając różnych wartości tego samego odcienia może dać niesamowite rezultaty. Często używane w minimalistycznym projektowaniu stron internetowych, możesz również uzyskać wspaniałe wyniki na podstawie jasnego kontrastu, jeśli chcesz dostarczyć użytkownikowi opcje kolorów motywu. Ten kontrast jest również stosowany do projektowania w skali szarości.

Jeśli chcesz realizować pozostałe 4 kontrasty kolorów, możesz je znaleźć tutaj.

Tworzenie palet i sprawdzanie kontrastów

Znajomość teorii jest świetna, a interpretacja twoich pomysłów to zupełnie inna sprawa. Nie powinieneś się jednak martwić, ponieważ Internet zapewnia doskonałe wsparcie dla Twoich potrzeb związanych z żonglowaniem kolorami. Istnieje wiele narzędzi, które pomagają tworzyć niestandardowe wzory kolorów na podstawie reguł kontrastu kolorów, np. Paletton lub Adobe Kuler.

W celach internetowych możesz sprawdzić kontrasty, które wybrałeś na webAIM, na stronie Jonathana Snooka lub pobrać instancję Color Contrast Analyzer autorstwa The Paciello Group tutaj.

Wniosek

Kiedy zaczniesz pracować z nowym motywem lub zaczniesz modyfikować już istniejące, spróbuj przemyśleć zasady postrzegania, aby uporządkować treść i pamiętaj, aby rozważyć reguły kolorów podczas nadawania projektowi ostatecznej formy i odcienia.

Nota redaktora: Ten post gościa jest napisany dla Hongkiat.com przez Marton Fekete. Marton to węgierski programista witryn internetowych, który niedawno zajął się WordPress. Jest przeprojektowanym entuzjastą i niezależnym autorem tekstów, który lubi grać w RPG w wolnym czasie.