Unikající Gridlock: Kdy a jak rozbít Grid Layout

Napsal Sean McGowan

Jedním z nejvíce neocenitelných nástrojů v sadě nástrojů návrháře uživatelského prostředí je kromě čerstvě vyčištěné tabule nebo nejnovější verze aplikace Sketch rozložení mřížky. Teorie starověku jako design je teorií mřížky první položkou v osnově Design 101 a prvním diagramem zkušeného veterináře UX.

O jeho užitečnosti svědčí nejen jeho všudypřítomnost, ale také její efektivita. Rozložení mřížky vytvořilo základ pro čistá a konzistentní rozhraní od tiskařského lisu. Nejenže jsou efektivní při organizaci informací, ale jsou natolik běžné v tisku i v digitálním designu, že uživatel instinktivně ví, jak procházet rozhraními, která je dodržují.

Nicméně, kvůli jejich popularitě, mřížka-založené designy mohou někdy vypadat uninspired, nebo vyrovnat plateplate. Kritici prohlašují, že oni mohou potlačit tvořivost a bránit více inovativním technikám designu, citovat (doslovné) hranice, které oni uloží.

Jedním ze způsobů, jak UXers rádi do svých návrhů vloží nějakou novost a vkus, je rozbití rozvržení mřížky. Správně, výsledkem může být poutavý, vizuálně úchvatný design uživatelského rozhraní. Hotovo náhodně a vy jste hodili klíč do svého rozhraní. V tomto článku se zabýváme čtyřmi různými technikami, které můžete použít k rozbití mřížky správným způsobem a vytvoření inovativního uživatelského prostředí.

Používání kontejnerů

To, že rozdělujete rozvržení mřížky, neznamená, že musíte obětovat organizaci obsahu a informací na stránce. Seskupením prvků do kontejnerů se můžete vymanit z mřížky při zachování čisté struktury a případně dokonce zachovat symetrii.

Screenshoty k Canatal

Podívejte se na Canatal, společnost vyrábějící a vyrábějící ocel, která překrývá své okraje tak, aby fungovaly jako kontejnery, jakož i dvě velké krabice vrstvené na sebe. Je snadné pochopit, jak by to mohlo být mnohem jasnější řešení, ale pouhým přerušením mřížky vstoupí Canatal do vizuálního zájmu.

Pečlivé vrstvení

Podobně jako u kontejnerů je vrstvení dalším účinným způsobem, jak ignorovat mřížku a zachovat soudržnost seskupením prvků dohromady. Na rozdíl od kontejnerů je však třeba s vrstvením více dbát zvýšené opatrnosti - je to víc než jen plácnutí hranatého okraje kolem komponentů a jejich seskupení.

Vrstvení může být složité, ale v moderním webdesignu je to stále docela běžná technika. Awwwards 'vážený Site Of The Day, denní reflektor mistrovského designu UX / UI, je posetý příklady stránek pomocí opatrného vrstvení. Moje nejoblíbenější parta je Cure Nails.

Zdroj obrázku: Cure Nails

Nemusí to být ten nejsnadněji použitelný zážitek, ale vrstvení jemných pastelových barev s fotografií ve vysokém rozlišení přispívá k ohromující estetice. Stejně jako dokonale pěstěné nehty to, co jí v užitečnosti chybí víc, než co do krásy.

Zdroj obrázku: Cure Nails

Hraní s mezerami

Pokud váš návrh na rozbití mřížky vypadá příliš nevyváženě, zvažte přidání nějakého prázdného místa do návrhu. Změnou množství a rozmístění mezer můžete drasticky zdůraznit nebo dokonce změnit zaostřovací bod.

Tato technika je užitečná zejména pro maloobchodníky online a další weby elektronického obchodu, zejména pokud chtějí zvýraznit barvu nebo vzhled svého produktu. Zde je příklad od obuvnické společnosti Volta, která přesně dělá:

Zdroj obrázku: Volta Footwear via SecretStache

Spolupráce New York Times se službou Google Cloud nabízí mnohem ambicióznější využití mezery, spárování s plovoucími černobílými obrázky a jednoduché teze, soustředěné tučně.

Zdroj obrázku: Google Cloud

Žlaby a zděný efekt

V teorii mřížky se „žlaby“ vztahují na mezery mezi kartami, dlaždicemi nebo jinými objekty, které vyplňují mřížku. Jejich úkolem je poskytnout dýchací místnost, působit jako nárazník mezi komponenty a zajistit, aby se design necítil stísněný nebo ucpaný.

Pro designéry je však stále populárnější, že si pohrávají s okapy, aby rozbili mřížku a přidali trochu čerstvosti zážitkům, zatímco někteří to dokonce úplně zbavili. Podívejte se na polský web Randstad, kvíz, který testuje „profesní naplnění“ uživatele.

Zdroj obrázku: Randstad

Když eliminujete okapy, je nezbytné jasně definovat prvky, aby nedošlo k nepořádku a záměně uživatelů. Randstad to dosahuje vysoce kontrastními jasnými barvami - hranice mezi prvky je nezaměnitelná.

Další metodou pro pohrávání se žlaby je vhodně pojmenovaný zdicí efekt, který umisťuje prvky způsobem, který se podobá zdivu. Toto rozvržení vzdorující mřížce, které popularizuje společnost Pinterest, udržuje organizaci mřížky a zároveň přináší něco okouzlujícího.

Zdroj obrázku: Pinterest

Uchopení mřížky

Existují i ​​jiné způsoby, jak se osvobodit od omezení mřížky. Čtyři zde diskutované techniky jsou pro začátek. Pro kontrolu se můžete od rozložení mřížky odchýlit:

  • Seskupení designových prvků do kontejnerů
  • Vytváření různých kombinací vrstvení
  • Používání mezer
  • Seřízení (nebo odstranění!) Okapů

Předtím, než se o ně pokusíte, byste však měli důkladně a důkladně porozumět návrhu založenému na mřížce.

Musíte se naučit a porozumět pravidlům, než je můžete porušit.

Chcete se dozvědět více?

Pokud vás zajímá průsečík mezi návrhem UX a UI, pak zvažte možnost absolvovat online kurz UI Design Patterns for Successful Software a alternativně Design Thinking: The Beginner's Guide. Pokud se na druhou stranu chcete seznámit se základy UX a Usability, můžete absolvovat online kurz User Experience (nebo jiné téma designu). Hodně štěstí na vaší výuce!

(Lead image: Depositphotos. Všechny ostatní fotografie v tomto článku jsou snímky obrazovky pořízené při návštěvě příslušných webových stránek. V tomto článku jsou zobrazeny pro účely vysvětlení.)

Původně publikoval na UsabilityGeek Sean McGowan, který je technický výzkumný pracovník a spisovatel v Codal, autor blogových příspěvků na témata od designu UX až po internet věcí. Ve spolupráci s vývojáři, designéry a obchodníky pomáhá Sean podporovat tým pro psaní, aby zajistil, že společnost Codal vytvoří poutavý webový obsah v nejvyšší kvalitě.