4 věci, které by měl každý návrhář vědět o prázdných místech
Bílý prostor (nebo "záporný prostor") je prázdný prostor mezi objekty na stránce a kolem nich. Prvky mezery v grafických uživatelských rozhraních jsou:
- Okraje, výplně a žlaby
- Prostor kolem obrazů a grafických objektů
- Rozteč řádků a rozteč písmen v textu
Ačkoli někteří lidé mohou považovat mezery za ztrátu cenného majetek obrazovky, je to zásadní prvek v designu. Ve skutečnosti jsou mezery stejně důležité jako obsah. Jak řekl Jan Tschichold:
Bílý prostor je třeba považovat za aktivní prvek, nikoliv za pasivní pozadí
Všechna dobrá uživatelská rozhraní obsahují správné hodnoty mezery pro všechny prvky stránky od shora dolů. Bílé místo na stránce může být stejně důležité jako prostor obsazený prvky UI, protože text, knoflíky, loga a jiné objekty potřebují prostor k dýchání.
V tomto článku zjistíte, jak používat bílé prostory ve svých návrzích, abyste jim dali čistý, nepoškozený pocit:
1. Zlepšit čitelnost textu
Whitespace dokáže číst mnohem jednodušší tím, že sníží množství textu, které návštěvníci vidí najednou. Chybějící bílé místo (přeplněná stránka) neznamená, že uživatelé chtějí obsah přečíst. Na druhou stranu bylo prokázáno, že řádně používané mezery zvyšují porozumění textu až o 20%, jak zdůraznil Dmitrij Fadeyev .
Dvě důležité věci, které je třeba mít na paměti při optimalizaci obsahu textu, jsou okraje odstavců a řádkování (mezery mezi jednotlivými řádky textu). Ty mohou drasticky zlepšit čitelnost textu. Obecně platí, že čím větší je vzdálenost, tím lepší je uživatelská zkušenost během čtení (i když příliš mnoho řádkování může způsobit odpojení linek).
2. Objasnění vztahů
Celé uspořádání vychází ze součtu jeho částí a obsahové vztahy jsou definovány okolními bílými oblastmi. Zákon blízkosti uvádí, že objekty v blízkosti sebe vypadají podobně. Bílá mezera se v tomto případě chová jako vizuální narážka. Podívejte se na obrázek níže:
Zákony Gestaltu diktují, že objekty v těsné blízkosti se objeví jako jedna "jednotka"; bílý prostor působí jako vizuální narážka.
Téměř všichni, kdo vidí tento obrázek, zaznamenávají dvě skupiny kruhů, spíše než jen 12 kruhů. Kruhy jsou všechny totožné a jediný rozdíl mezi nimi je množství mezery, které je odděluje.
Položky lze seskupovat tak, že mezi nimi zmenšíte mezeru a zvyšujete jejich prostor a další prvky na stránce.
U uživatelských rozhraní to znamená, že objekty v blízké blízkosti se objeví jako jedna "jednotka". Například v kontextu webových formulářů je vhodné umístit etikety blízko příslušných polí k vytvoření objektu. Když jsou štítky umístěny bližší k polím, je pro uživatele velmi jasný vztah mezi nimi.
Informace jsou oznamovány mnohem jasněji, když jsou štítky umístěny blíže k polím, ke kterým se vztahují.
3. Přilákat pozornost
Návrháři mohou pomocí prázdného prostoru komunikovat, co je na první pohled nejdůležitější. Existuje vztah mezi vzdáleností a pozorností; větší vzdálenost vyžaduje pozornost. Nedostatek dalších prvků pouze zvýší stávající prvky. Pro vaši výhodu je možné použít bílé písmo - kreslit bláznivé oči na určité prvky stránky. Extra polstrování kolem určitého segmentu obsahu přitahuje pozornost uživatelů na tuto oblast prostě proto, že na obrazovce není nic jiného, než je upozornit. Takže čím víc místa kolem objektu, tím více oko je přitahováno k němu.
4. Vytvořte vizuální hierarchii
Když se správně používá prázdná mezera, umožňuje stránku vytvořit obecný tok a rovnováhu, což napomáhá sdělit záměru návrhu. Whitespace může podporovat celkovou hierarchii. Vyrábí buď symetrii nebo asymetrii.
Symetrie vytváří paměť a harmonii:
Mailchimp, jak vidíte, je velkým obhájcem bílého prostoru v jejich designu. Když návštěvníci skenují domovskou stránku, tlačítko "Registrace zdarma" upozorní téměř okamžitě. Pomocí symetrie je možné vytvořit vyvážené uspořádání s stejně důležitou pravou a levou částí.
Zatímco asymetrie upozorňuje:
Asymetrie je skvělá pro upozornění na určitou oblast stránky.
Když prvek používá asymetrický prostor, vyniká proti jiným okolním prvkům.
Závěr
Bílý prostor není zbytečným prostorem, je to mocný návrhářský nástroj. Může být stejně důležitý jako prostor obsazený objektem snímků, textu nebo jiných uživatelských rozhraní, protože i prázdný prostor slouží účelu a podporuje vizuální integritu rozvržení.
I když se zdá, že je to jednoduché téma, může být špatné zvládnout mezery, protože aplikace mezery je jak umění, tak věda. Opravdu pochopit, kolik volných míst by mělo být použito k vytvoření dobrého uspořádání vyžaduje praxi.