4 rzeczy, które każdy projektant powinien wiedzieć o białych obszarach
Biała przestrzeń (lub "przestrzeń ujemna") to pusta przestrzeń pomiędzy obiektami strony i wokół nich. Elementy białych znaków w graficznych interfejsach użytkownika to:
- Marginesy, podkładki i rynny
- Przestrzeń wokół obrazów i obiektów graficznych
- Odstępy między wierszami i odstępy między literami w treści tekstu
Chociaż niektórzy ludzie mogą uważać białe przestrzenie za cenne miejsce na ekranie, jest to niezbędny element w projekcie. W rzeczywistości białe spacje są tak samo ważne jak treść. Jak powiedział Jan Tschichold:
Białe spektrum należy traktować jako element aktywny, a nie pasywny
Wszystkie dobre interfejsy użytkownika zawierają właściwe wartości białych znaków do wszystkich elementów strony od góry do dołu. Białe spacje na stronie mogą być równie ważne, jak przestrzeń zajmowana przez elementy interfejsu użytkownika, ponieważ tekst, przyciski, logo i inne obiekty wymagają miejsca, by odetchnąć.
W tym artykule dowiesz się, jak wykorzystać białe spacje w swoich projektach, aby nadać mu czysty i niezakłócony charakter:
1. Popraw czytelność tekstu
Whitespace znacznie ułatwia czytanie, zmniejszając liczbę użytkowników tekstu widzianych jednocześnie. Brak białych znaków (zagracona strona) nie powoduje, że użytkownicy chcą czytać treść. Z drugiej strony okazało się, że odpowiednio wykorzystana biała spacja zwiększa zrozumienie tekstu nawet o 20%, jak zauważyliśmy Dmitry Fadeyev .
Dwie ważne rzeczy, o których należy pamiętać podczas optymalizacji treści tekstu, to marginesy akapitu i odstępy między wierszami ( odstępy między wierszami w tekście). Te ostatnie mogą drastycznie poprawić czytelność treści tekstu. Ogólnie rzecz biorąc, im większy odstęp, tym lepsze wrażenia użytkownika podczas czytania (chociaż zbyt duża odległość między liniami może spowodować odłączenie linii).
2. Wyjaśnienie związków
Cały układ powstaje z sumy jego części, a relacje treści są definiowane przez otaczające białe spacje. Prawo bliskości stwierdza, że przedmioty znajdujące się blisko siebie są podobne. W tym przypadku biała spacja działa jako wizualna wskazówka. Spójrz na obrazek poniżej:
Prawa Gestalt nakazują, że obiekty znajdujące się w pobliżu pojawią się jako jedna "jednostka"; biała przestrzeń działa jak wizualna wskazówka.
Prawie każdy, kto widzi ten obraz, widzi dwie grupy okręgów, a nie tylko 12 kręgów. Kręgi są identyczne, a jedyną różnicą między nimi jest ilość białych znaków, które je oddzielają.
Można grupować elementy, zmniejszając odległość między nimi i zwiększając odległość między nimi a innymi elementami na stronie.
W przypadku interfejsów użytkownika oznacza to, że obiekty znajdujące się w pobliżu będą wyświetlane jako jedna "jednostka". Na przykład w kontekście formularzy internetowych dobrze jest umieścić etykiety blisko odpowiednich pól, aby utworzyć obiekt. Kiedy etykiety są umieszczane bliżej pól, sprawia to, że relacje między nimi są dla użytkowników jasne.
Informacje są komunikowane o wiele jaśniej, gdy etykiety są umieszczone bliżej pól, których dotyczą.
3. Przyciąganie uwagi
Projektanci mogą używać białych znaków do komunikowania najważniejszych informacji na pierwszy rzut oka. Istnieje związek między odległością i uwagą; większy dystans zmusza do skupienia uwagi. Brak innych elementów tylko sprawi, że istniejące elementy wyróżnią się bardziej. Możliwe jest użycie spacji na swoją korzyść - aby narysować wędrujące oczy na pewnych elementach strony. Dodatkowe wypełnienie wokół określonego segmentu treści zmusza użytkowników do skupienia się na tym obszarze, po prostu dlatego, że nie ma nic na ekranie, aby zwrócić na siebie uwagę. Im więcej białych znaków wokół obiektu, tym więcej przyciąga do niego oko.
4. Utwórz Visual Hierarchy
Odpowiednie użycie białych znaków pozwala stronie generować ogólny przepływ i równowagę, co z kolei pomaga w przekazywaniu intencji projektu. Białe spacje mogą obsługiwać ogólną hierarchię. Generuje symetrię lub asymetrię.
Symetria tworzy pamięć i harmonię:
Mailchimp, jak widać, jest wielkim zwolennikiem białej przestrzeni w swoich projektach. Gdy użytkownicy przeglądają stronę główną, przycisk "Zarejestruj się za darmo" zwraca ich uwagę niemal natychmiast. Za pomocą symetrii można stworzyć zrównoważony układ z równie ważną częścią prawą i lewą.
Podczas gdy asymetria zwraca uwagę:
Asymetria świetnie nadaje się do zwracania uwagi na konkretny obszar strony.
Kiedy element wykorzystuje przestrzeń asymetryczną, wyróżnia się na tle innych otaczających elementów.
Wniosek
Białe spacje nie są zmarnowaną przestrzenią, to potężne narzędzie do projektowania. Może być równie ważne, jak przestrzeń zajmowana przez obiekty obrazów, tekstu lub innych interfejsów użytkownika, ponieważ nawet puste miejsce służy celowi i wspiera wizualną integralność układu.
Chociaż wydaje się to prostym tematem, białe spacje mogą być trudne do opanowania, ponieważ zastosowanie białych znaków jest zarówno sztuką, jak i nauką. Prawdziwe zrozumienie, ile białych znaków należy zastosować do stworzenia dobrego układu, wymaga praktyki.