Zasady hierarchii wizualnej dla projektantów

Zasady hierarchii wizualnej dla projektantów to koncepcja projektowa, która służy do wskazywania, w jaki sposób oczy widza poruszają się po projekcie i określania, które elementy są najważniejsze lub atrakcyjne wizualnie.

Początkowo były to tablice kamienne, zwoje papirusowe i papier. Potem pojawiły się ekrany komputerowe i tablety elektroniczne. Wraz z ewolucją technologii wyświetlania stron projektanci zyskują jasny sposób organizowania treści. Ale co jest lepsze? W skrócie , hierarchia wizualna.

Oto definicja hierarchii wizualnej: Hierarchia wizualna to układ elementy graficzne w projekcie według ważności każdego elementu. Decyduje waga wizualna znaczenie elementu w hierarchii projektu, mówiąc widzowi, na czym ma się skupić i w jakiej kolejności.

Zasoby dla projektantów. 50 za darmo

Staje się to coraz ważniejszą kwestią, ponieważ responsywne frameworki zmuszają projektantów do myślenia o wielu różnych stronach jednocześnie. W obliczu gęstego tekstu i krótkiego czasu skupienia uwagi projektanci opracowali 6 zasad, które mają kierować wzrok czytelnika na najważniejsze informacje.

Te 6 zasad hierarchii wizualnej pomoże Ci zaprojektować wszystko, od broszur po aplikacje, zapewniając użytkownikowi końcowemu pozytywne wrażenia z czytania dla projektantów.

Wszystkie kultury czyta się od góry do dołu, a większość kultur czyta się od lewej do prawej. Ale chociaż ta wiedza jest ważna dla projekt stronyprojektanci wiedzą, że zadanie jest znacznie trudniejsze.

Ostatnie badania wykazały, że ludzie najpierw skanują stronę, aby sprawdzić, czy są nią zainteresowani, zanim ją przeczytają. Wzory skanowania przyjmują zwykle jeden z dwóch kształtów: „F” i „Z”, co można wykorzystać w swoim projekcie.

Wzory F. Zasady hierarchii wizualnej

Szablony F mają zastosowanie do tradycyjnych stron tekstowych, takich jak artykuły czy wpisy na blogu. Czytnik skanuje lewą stronę strona szuka interesujących słów kluczowych w nagłówkach wyrównanych do lewej strony lub w początkowych zdaniach tematycznych, a następnie zatrzymuje się i czyta (w prawo), gdy natknie się na coś interesującego. Wynik wygląda jak litera F (lub E, lub coś z jeszcze większą liczbą poziomych pasków, ale termin „F” utknął).

Jak możesz to wykorzystać? Wyrównaj ważne informacje do lewej strony i użyj krótkich, pogrubionych nagłówków, punktorów i innych podobnych elementów przyciągających uwagę, aby podzielić bloki akapitów.

Model Z. Zasady hierarchii wizualnej

Wzory Z mają zastosowanie do innych typów stron, takich jak reklamy czy strony internetowe, gdzie informacje nie są koniecznie prezentowane w postaci akapitów blokowych. Czytelnik najpierw skanuje górę strony, gdzie prawdopodobnie znajdzie się ważna informacja, następnie przechodzi po przekątnej do przeciwległego rogu i to samo robi na dole strony.

Projektanci stron internetowych zazwyczaj projektują swoje strony tak, aby wyraźnie pasowały do ​​tego zachowania, umieszczając najważniejsze informacje w rogach i orientując inne ważne informacje wzdłuż górnego i dolnego paska oraz łącząc przekątną.

Poniżej w projektowaniu konferencji montażowej 2010 ważnym elementem jest logo (w lewym górnym rogu), przycisk „zarejestruj się teraz” (w prawym górnym rogu) i lista głośników (na dole), które są strategicznie rozmieszczone w ładnych miejscach w kształcie litery Z.

2. Rozmiar ma znaczenie. Zasady hierarchii wizualnej
_

To całkiem proste: ludzie najpierw czytają ważne rzeczy. Jeśli Twój wzrok przyciągnie „przedstawienie”, zanim „rozdzielisz się” na poniższą reklamę Young Vic, powinieneś natychmiast skontaktować się z psychologiem percepcyjnym: prawdopodobnie możesz nieźle zarobić, poddając się testom jako rzadka anomalia.

Co ciekawe, tendencja ta jest w istocie na tyle silna, że ​​pozwala odrzucić zasadę odgórną. Na powyższym obrazku „hack” zastępuje „czas na działanie”, ponieważ jest większy i po lewej stronie (więc pomaga reguła od lewej do prawej).

Ale na kolejnej stronie Raportu Rocznego: Kampania na rzecz Praw Człowieka 2012 (opracowanego w piątej rubryce medialnej) czytamy obficie czcionka „Walka o równość na szlaku kampanii” przed tekstem bezpośrednio nad nią „Wybory 2012”. Zasady hierarchii wizualnej

„Wybory 2012” to porządek informacyjny najwyższego szczebla: mówi nam o ogólnym temacie, którego dotyczą poniższe informacje. Projektant uznał jednak, że tytuł artykułu będzie bardziej interesujący dla czytelników i dlatego ocenił go tak, aby został przeczytany jako pierwszy.

3. Przestrzeń i tekstura. Zasady hierarchii wizualnej

Innym sposobem na zwrócenie uwagi jest daj treści wystarczająco dużo miejsca na oddychanie . Jeśli wokół przycisku znajduje się znaczna ujemna przestrzeń lub linie w bloku tekstowym są szeroko stosowane, elementy te będą łatwiej widoczne dla czytelników.

Jak widać na obrazku poniżej (część witryny DrawtoClick), odstępy mogą być elegancką alternatywą lub uzupełnieniem używania rozmiaru. W tym przypadku informacja promocyjna „Notre agence vouscompagne…” jest napisana bardzo drobnym drukiem, ale otoczona dużą ilością białej przestrzeni, co wskazuje na jej znaczenie. Poniżej dodatkowo zaakcentowano frazy „Le Compendre”, „Le Réaliser” i „Le Partager”, oderwane od otaczającej przestrzeni.

Kiedy ludzie mówią o „teksturze” w odniesieniu do hierarchii wizualnej, nie mają na myśli graficznych efektów tekstury. Ten typ „tekstury” odnosi się raczej do ogólnego układu lub struktury przestrzeni, tekstu i innych szczegółów na stronie. Ten przykład z Bright Pink dobrze ilustruje tę koncepcję:

Na pierwszym zdjęciu słowo „Sport” jest wyżej w hierarchii niż „badminton”, ponieważ jest wyższe, większe i odważniejsze. Na obrazku 2 te dwa słowa są mniej więcej równoważne dzięki czarnemu prostokątowi, który wyróżnia „badmintona” i umieszcza go w jego własnej przestrzeni.

Na trzecim obrazie bazgroły w tle przerywają przestrzeń „Sport”, ale nie przestrzeń „badmintona”, co powoduje odwrócenie sytuacji, w której „badminton” jest najwyższy w hierarchii. Rozwój ten jest trudny do przewidzenia, dlatego projektanci często kojarzą go z holistycznym poczuciem „tekstury”.

4. Grubość czcionki i parowanie. Zasady hierarchii wizualnej

Wybór czcionki ma kluczowe znaczenie dla ustalenia hierarchii wizualnej. Do najważniejszych atrybutów czcionki należą grubość, szerokość pociągnięć tworzących litery oraz styl, taki jak szeryfowy i bezszeryfowy. Inne modyfikacje, takie jak kursywa, również mogą odgrywać rolę.

Zauważ jak Zestaw słuchawkowy wpływa na kolejność hierarchii słów w poniższym projekcie strony internetowej The Tea Factory: „idealne herbaty, które pomogą Ci się rozgrzać” to nazwa gry, ale różnice w grubości czcionki i kursywie, a także rozmieszczenie słów, tworzą bardziej dynamiczne, mniej liniowe wrażenia z czytania. "://azbyka.com.ua/foto/tea-factory.jpg" />

W niektórych przypadkach celem jest przedstawienie różnorodnych informacji jako równie pilnych. Ustawienie wszystkich na ten sam rozmiar i wagę zapewni równoważność, ale też sprawi, że będzie wyglądać monotonnie. Różnicowanie czcionek to jeden ze sposobów uniknięcia tego, jak pokazano na poniższej okładce magazynu Trendi. Zasady hierarchii wizualnej

Przygotowanie broszury do druku.

W tym przypadku pięć zwiastunów na obrzeżach strony ma taką samą hierarchię, ale można je urozmaicić, zmieniając dwie dobrze dobrane czcionki — jedną o średniej grubości szeryfowej, a drugą lekką, ale wysoką bezszeryfową.

5. Kolor i odcień. 

Oto kolejna oczywistość: jasne kolory wyróżniają się na tle stonowanych kolorów lub odcieni szarości, podczas gdy jaśniejsze odcienie wydają się bardziej „odległe” i dlatego znajdują się niżej w hierarchii niż bogatsze, ciemniejsze odcienie. Witryna Where Are They kontrastuje jasne światło i kolorowe podświetlenie z efektem czarno-białej siatki z efektem jasności:

Strona Guggenheima kolorem podkreśla ważne informacje, takie jak wybór lokalizacji, lista aktualnie oglądanych wystaw i linki do wystaw specjalnych. Zasady hierarchii wizualnej

Najlepsza czcionka do niestandardowych opakowań

Z kolei strona Whitney Museum ustala hierarchię w ramach jednej czcionki, gramatury i odcienia (czarny) za pomocą tinty (co oznacza dodanie bieli do tonu bazowego, dzięki czemu staje się jaśniejsza). „Cory Archanioł o popkulturze” plasuje się wyraźnie poniżej „Nowości w Whitney Stories” w wizualnej hierarchii, nie tylko ze względu na niższą pozycję, ale także dlatego, że ma jaśniejszy odcień, dzięki czemu jest mniej rzucający się w oczy na białym tle. Zasady hierarchii wizualnej

Kolor ma w nas szczególne znaczenie projekt mobilny aplikacje, w których mały rozmiar ekranu ogranicza możliwość stosowania innych strategii, takich jak zróżnicowanie rozmiaru i duże odstępy. W aplikacji Grainger Industrial Supply przycisk „Przejdź do kasy” ma kolor czerwony, dzięki czemu wyróżnia się na każdej stronie, na której się pojawia. Natomiast panel Wąskie wyniki wyszukiwania jest szary, co czyni go mniej więcej równoważnym w hierarchii innym elementom, takim jak pasek wyszukiwania i linki do produktów.

6. Kierunek dla projektantów.

Układy stron są zwykle projektowane tak, aby odpowiadały siatce pionowych i poziomych linii, zarówno zgodnie z konwencją, jak i dlatego, że jest to najbardziej czytelny format. W takim systemie istnieje nowy sposób ustalenia hierarchii: przełamanie siatki.

Tekst umieszczony wzdłuż krzywej lub po przekątnej automatycznie wyróżnia się na tle otaczającego tekstu zablokowanego siatką, zajmując centralne miejsce. Od dawna jest to skuteczna strategia w reklamach, takich jak plakat na przystankach autobusowych Frost Design.