Anatomie síťky a proč byste ji měli používat

Webové aplikace a webové stránky všeho druhu velmi těžily z rámců založených na přísných principech gridu. Příklady takových rámců jsou bootstrap, foundation, skeleton atd.

Díky responzivnímu webdesignu se role gridů v digitálním UX výrazně zvýšila.

Návrháři a vývojáři již nemohou pracovat na stejné obrazovce. Rozmanitost zařízení nutí tvůrce přemýšlet v podmínkách dynamických mřížkových systémů namísto pevných šířek.

Digitální design se stále vyvíjí a mnozí se teprve učí používat mřížky. Návrháři a vývojáři by měli čerpat z minulých zkušeností, aby zvládli digitální design budoucnosti. Od vynálezu prvního tiskařského stroje uplynulo více než 500 let a od průmyslové revoluce zhruba 300 let. Mřížka prošla mnoha designovými trendy a přístupy. Navzdory této bohaté historii jsou gridové systémy v interakčním designu stále v plenkách.

Níže jsou uvedeny různé prvky, které tvoří mřížku. Některé termíny byly designérskou komunitou přijaty, některé nikoli. Existují zřejmé důvody, proč se některé terminologie z tiskového průmyslu v interakčním designu neujaly, ale stále je bude třeba vzít v úvahu v procesu vytváření nového interakčního jazyka.

Sloupce

Sloupce jsou vertikální dělení mřížky. Čím více sloupců v mřížce, tím je pružnější.

Struny

Řádky jsou vodorovné dělení mřížky. Ve webdesignu jsou často opomíjeny. Nazývají se mřížky s řádky a sloupci modulární mřížky.

Moduly

Moduly jsou jednotky prostoru vytvořené průnikem řádků a sloupců.

Oblasti

Oblasti jsou skupiny sloupců, řádků nebo modulů, které tvoří prvek kompozice.

Mezery

Sloupce a řádky jsou odděleny mezerami. Čím tenčí je mezera, tím větší vizuální tlak vzniká. Mřížky se širokými mezerami vytvářejí klidné a pohodlné uspořádání, protože prvky kompozice jsou vůči sobě volně umístěny.

Hranice

Ohraničení je prostor mimo sloupce a řádky mřížky. Nepleťte si ohraničení s výplní, což je prostor uvnitř řádků a sloupců.

Výrobní linka

Průtočné čáry se běžně používají k rozdělení částí kompozice. Tvoří výchozí a koncovou pozici v návrhu.

Popisovač

Značka je oblast, kde je umístěn sekundární obsah. V knihách jsou to obvykle názvy kapitol, čísla stránek atp.

Typy mřížek

Hierarchický

Hierarchická mřížka je intuitivně konstruovaná mřížka, která se zaměřuje na proporce prvků v návrhu. Tento typ mřížky se často používá, když obsah není standardizovaný a jednotný.

Rukopis

Rukopisná mřížka je nejstarší typ mřížky používaný v tištěných publikacích. Obvykle se jedná o standardizovaný obdélník, který obsahuje obsah na stránce nebo obrazovce.

Sloupcová mřížka

Sloupcová mřížka je nepochybně nejběžněji používaným typem mřížky ve webovém designu, protože šířka obrazovky je konečná, na rozdíl od výšky, která se může nekonečně rozšiřovat, pokud má uživatel možnost posouvat. Většina mřížek sloupců používaných na webu je 12-sloupcových, ale to by nemělo bránit návrhářům a vývojářům v hledání alternativ.

Modulární mřížka

Modulární mřížka se skládá z překrývajících se řádků a sloupců, které tvoří moduly. Modulární mřížka je nejsložitější typ mřížky. Mělo by se používat, když je vertikální a horizontální prostor stejně důležitý. Tento typ mřížky je stále populárnější v digitálních médiích pro různá zařízení, která jsou postavena na bázi „kartového“ rozhraní.

Sergey vytváří rozhraní již více než 15 let. Navrhoval pro mnoho významných značek, včetně Coca-Coly, Pepsi, Citroen, Intel, Baltika a Kamaz. Nedávno vyšla jeho nová přednáška, ve které analyzoval 7+ variant mřížek rozhraní a ukázal reálné příklady jejich použití. Připravili jsme shrnutí přednášek s abstrakty, vysvětlivkami a screenshoty z prezentace

Daria Wrightová
Vedoucí redaktor v Odi 2022-2024

Mřížka je způsob organizace prostoru formátu. Formát (fyzický nebo interaktivní) určuje, jak designér organizuje prostor.

Interaktivní formát se od fyzického liší tím, že má dvojí povahu. Na jedné straně je longread fyzický formát, protože můžete fyzicky pracovat s obrazovkou. Na druhou stranu longread existuje ve formě dlouhého kanálu, kterým uživatelé procházejí, to znamená, že je to interaktivní prostor.

Obrazovku je třeba chápat především jako formát. Je dobré si připomenout, že čím blíže je objekt k okrajům, tím je nehybnější, drží ho okraje formátu a čím blíže středu je umístěn, tím je dynamičtější.

Longread se skládá z vertikálního a horizontálního. Vodorovnou čáru vidíme okamžitě, to znamená, že známe její délku, chápeme, kde je její začátek a konec. S vodorovnou čarou můžete pracovat rytmicky: rozdělte ji na dva, tři, deset nebo podle toho, kolik sloupců vám vyhovuje. Vodorovná čára je rytmická organizace dlouhého čtení.

Návrh mřížky začíná zónováním. Zónování je rozdělení na funkční nebo sémantické zóny. Jsou tam například obrázky a text. Podle toho můžete obrazovku rozdělit na dvě části: umístěte obrázky nalevo a text napravo. Pokud je polovina obrazovky příliš velká pro text, můžete obrazovku rozdělit na tři části a jeden sloupec přidělit textu a další dva obrázky.

Další fází je detailování. Detailing je proces rozdělení sloupu na několik částí tak, aby se uvnitř mřížky vytvořila další mřížka.

Vertikální – časová osa, která při posouvání postupně zobrazuje řetězec událostí/bloků dlouhého čtení. Vertikál je zodpovědný za rychlost vnímání obsahu uživatelem. Vzhledem k tomu, že člověk při sledování dlouhého čtení roluje, kompozice v interaktivním formátu se snaží o jednoduchost. Složitá kompozice v pohybu se jednoduše rozpadne.

Modulární longread je soubor logických nebo funkčních bloků s téměř stejnou mírou důležitosti, které návrhář rozmístí po celé šířce formátu.

Vzhledem k tomu, že v modulárním longreadu není žádná vizuální hierarchie, designér umisťuje drobné akcenty, aby se uživatel neztratil v prostoru a věnoval pozornost jednotlivým modulům.

7+ možností mřížky pro interaktivní formát

Mřížka „Panelka“

Ozone a Yandex používají tuto mřížku na svých webových stránkách.

Existují tři varianty mřížky Panelu.

První verze „Panelky“: maximální podobnost modulů.

Druhá možnost „Panelky“: vzhled speciálního bloku, který zabírá dvakrát více místa než všechny ostatní. Protože je větší, bude mu uživatel věnovat pozornost jako první.

Třetí verze „Panelu“: rytmický vzor, ​​který bude získán pomocí obrázků libovolných proporcí.

Příklady použití mřížky „Panelka“:

Síťovina „Hřeben“

Existují čtyři varianty sítě Comb.

První možností je zadat speciální blok, který je vertikálně větší než ostatní. Ve srovnání s jinými typickými bloky přitáhne více pozornosti.

Druhou možností je „Hřeben“: výška modulu bude záviset na délce textu a výšce samotného obrázku.

Třetí možností je „Hřeben“: taková mřížka vytváří ornament, to znamená, že působí proti monotónnosti a rovnoměrnosti.

Čtvrtá možnost „Hřeben“: hřeben je nahoře, když je linie zarovnání modulů dole.

Příklady použití mřížky „Hřeben“:

Mřížka „Offset“ nebo „Ladder“

Existují dvě varianty mřížky „žebřík“.

První verze „žebříku“: linka je rozdělena na dvě, to znamená, že v řadě jsou dvě patra a 6 modulů po 5 sloupcích. V tomto případě dochází k posunu hmoty zleva doprava.

Příklad použití první verze mřížky „žebřík“:

Druhá verze „žebříku“: Uživatel prohlíží longread diagonálně. Tomu odpovídá přirozený pohyb pohledu: zleva doprava, shora dolů. V tomto případě úhlopříčka vylepšuje design, takže je pohodlnější a konzistentnější se vzorem chování, který používá čtenář.

Příklad použití druhé verze mřížky „žebřík“:

síťovina „guma“

V tomto případě zůstává celková šířka modulů stejná, ale při pohybu shora dolů se mění počet modulů v řadě. Pokud se počet modulů sníží, objeví se další místo, které se používá pro mezisloupce. Tato mřížka pomáhá bojovat proti efektu slepoty a únavy uživatele, pokud tráví dlouhou dobu sledováním dlouhého čtení.

Příklady použití „Gumové“ sítě:

Sloupcová mřížka

Obsahuje dva typy modulů: běžný/standardní a speciální blok přes celou šířku sloupu. Tato možnost umožňuje dát mřížce nerovnoměrný vzhled. Výhodou takové mřížky je, že můžete umístit obrázky s libovolnými proporcemi.

Příklady použití sloupcové mřížky:

Síťovina „Hřeben (horizontální)“

V této verzi je šířka modulu libovolná a závisí na šířce obrázku. Výsledkem je volný okraj a rytmus.

Příklady použití mřížky „Hřeben (horizontální)“:

Mřížka „algoritmická“

Flexibilní, komplexní mřížka, která je vhodná pro módní a architektonická témata, muzea a designové agentury. Neobsahuje sloupy, místo nich jsou svislé čáry, na které projektant zavěšuje moduly.

Příklady použití „algoritmické“ mřížky: