Co je základní mřížka?

Základní mřížku 4px používám již více než 2 roky a snažím se, aby ji můj tým začal používat. Konečně jsem překonal prokrastinaci a rozhodl jsem se o tom mluvit ve svém prvním článku. Těším se na vaši zpětnou vazbu k této metodě, tak se prosím podělte o své názory! 8pt Grid: Stroke and Markup

problém

Co mě přivádí k šílenství, je to, že textový ohraničovací rámeček téměř vždy přidává další prostor nad a pod skutečný text. Když se tedy ohraničovací rámeček použije k měření prostoru, bude nakonec větší, než jste očekávali. Čím vyšší je výška řádku, tím větší je problém. V níže uvedeném příkladu byl návrh vytvořen měřením prostoru mezi ohraničujícími rámečky. Když jsou všechny mezery nastaveny na 32px (na 1. kartě), vizuálně je vertikální rozestup ve skutečnosti mnohem větší než 32px (jak je znázorněno na 2. kartě), i když nastavením všech na 32px naznačujete, že jsou stejné. Fotografie od Max Delsid na Unsplash

rozhodnutí

1. Nastavím 4px mřížku na pozadí
2. Svážím všechny prvky rozhraní a základní řádky písma k základní mřížce
3. K měření vertikálního prostoru kolem textu používám mřížku namísto použití textového ohraničovacího rámečku. Konkrétně měřím prostor nad textem od čáry mřížky, která je nejblíže výšce velkého písmene písma, a prostor pod textem od účaří písma
4. Navíc jsem pro náš tým definoval sadu hodnot rozteče inspirovaných tímto článkem Medium: Rozestupy v designových systémech od Nathana Curtise

Aby byly zachovány všechny účaří na mřížce, tento přístup v podstatě zaokrouhlí vizuální výšku textu (výška velkého písmene k účaří) na násobek 4px (zobrazeno na obrázku níže). To může mít za následek chybu 1-2 pixelů; stále je to však přesnější než použití ohraničovacího rámečku k definování intervalů.

Změřte prostor nad textem od nejbližší mřížky k výšce velkého písmene

Existuje výjimka: Ikony nebo text v komponentě nebo kontejneru svisle vycentruji, ať už jsou na základní mřížce nebo ne, protože většinu času mohou vývojáři použít flexbox k vystředění prvku a je to pro obě strany jednodušší než použití statického rozvržení. intervaly pro centrování?.

Text v každém řádku tabulky je vycentrován pomocí příkazu “Zarovnat vrstvu na střed” v náčrtu a je normální, že se účaří nepřichytí k mřížce.

Proč

Základní mřížka se tradičně používá v tiskovém designu k vytvoření vertikálního rytmu. Při své každodenní práci na vývoji webových aplikací jsem se zřídkakdy setkal s případy, kdy je takové tempo očividně nutné pro zlepšení konzistence.

Pro mě je použití základní 4px mřížky rovnováhou mezi vizuální věrností (pro uživatele) a efektivitou designu (pro mě). V části Problém jsem mluvil o tom, jak odměřování od ohraničovacího rámečku textu vytvoří prostor navíc. Koneckonců, uživatel nemůže vidět ohraničující rámeček. Proto nemá smysl používat tento přístup, zvláště pokud vytváří vizuální nerovnováhu a neprospívá uživatelům. Na druhou stranu ignorováním ohraničovacího rámečku a měřením pomocí podkladové sítě se dosáhne lepší vizuální přesnosti. Níže uvádíme srovnání obou přístupů. Jak vidíme, když se použije stejná sada hodnot mezer (32px, 12px, 32px, 32px), návrh měřený pomocí základní mřížky mnohem přesněji odráží zamýšlené rozestupy.

Dalo by se říci, že pokud měření z ohraničujícího rámečku poskytuje příliš mnoho místa, pak na první kartě například zmenšením první hodnoty mezery z 32 pixelů na 28 pixelů nebo 24 pixelů bude horní a levá výplň slova „Seattle“ vypadat podobně. . Ale nikdy to nezjistíte jistě, pokud nespočítáte pixely. Na druhou stranu metoda mřížky 4px poskytuje přesnější a předvídatelnější způsob, jak zjistit, že jde o ~32px (s přihlédnutím k chybě 1–2px způsobené zaokrouhlováním).

Z hlediska efektivity návrhu se to může zdát náročnější na práci, ale s mřížkou může nástroj pro navrhování (Sketch nebo Figma) pomoci zachycovat prvky na místo a vložit do mřížky základní linii, takže zarovnání a rozestupy se stávají relativně jednoduchým úkolem. Níže je můj pracovní postup pomocí základní mřížky k umístění textu.

Můj pracovní postup pomocí základní mřížky k umístění textu

Případně můžete mřížku přeskočit a měřit ručně z výška velkých písmen (jak je znázorněno na obrázku níže), ale bude to vyžadovat změnu měřítka pixelová mřížka. Také velikost kontejneru, ve kterém je uložen váš text, nesmí být násobkem 4 pixelů.

Výše je alternativní pracovní postup, který měří mezery přímo z výšky velkých písmen

Předání projektu vývojářům

Hodnoty rozestupů získané pomocí přístupu základní sítě se objeví náhodné, když vývojáři testují návrh v návrhářských nástrojích (InVision/Zeplin/Figma). Níže uvedený návrh byl vytvořen pomocí základní mřížky. Čísla ukazují, co při takové kontrole uvidíte.

Výše jsem zmínil článek Intervaly v návrhových systémech. Hovoří o tom, jak mohou být hodnoty mezer reprezentovány pomocí tříd CSS, což pomáhá zajistit konzistenci pro návrháře i vývojáře. Bohužel při použití přístupu základní mřížky je téměř nemožné reprezentovat hodnoty mezer jako sadu tříd CSS kvůli náhodnosti, která přichází s různými kombinacemi písem.

Podívali jsme se také na oblíbenou techniku ​​navrhovanou mnohými ke zmírnění problému náhodnosti, kterou je použití pseudoprvků CSS ::before a ::after k „oříznutí“ ohraničovacího rámečku (který v podstatě aplikuje úpravu mezery na řádek ). Můj přítel Chris Caruso mi však řekl:

Používání pseudoprvků CSS ::before a ::after není ideální, protože není kompatibilní s různými fonty, prohlížeči, operačními systémy a dokonce ani rozlišeními obrazovky. Zaměření na jednu kombinaci může vést k problémům s rozestupem v jiných. Z pohledu vývojáře se tato metoda neřídí osvědčenými postupy kódování, protože používá záporné okraje a aplikuje na DOM cizí prvky, což může vést k nezamýšleným vedlejším účinkům. Proto by tato metoda neměla být používána ve výrobních aplikacích.?

A co lokalizace?

Jednou jsem provedl průzkum lokalizace a podíval se na 8 abeced a písem (latinka, čínština, azbuka, dévanágarí, řečtina, hangul, kana a thajština), které náš produkt podporuje. Pak jsem si uvědomil, že bez ohledu na to, jakou metodu měření používáte, na konci dne je to mezera ohraničujícího rámečku, kterou vývojář vezme z nástroje pro návrh a vloží do CSS. V závislosti na písmu, které používáte pro jiné jazyky, i když je proklad stejný, vizuální výška písma může být větší nebo menší než u písmen latinky. Jejich základní linie se také mohou změnit. Bez ohledu na to, jakou metodu měření použijete, lokalizace vždy mírně změní interval. Jak je však ukázáno v příkladu níže, text ve všech jazycích zůstal i přes tyto drobné změny relativně vycentrován v bílém prostoru.

(Stále toho moc neumím o jiných než latinských abecedách, ale chci se dozvědět více. Prosím, dejte mi vědět, pokud je některá z výše uvedených úvah nesprávná nebo by se dala zlepšit. Umím pouze anglicky a čínsky. Moc děkuji, moji kolegové, kteří pomohli přeložit tento řádek do jiných jazyků!)

Design vytvořený v angličtině a lokalizovaný do 7 jazyků. Fotografie od Joshua Sortino na Unsplash

Otázky?

Napište prosím své komentáře, dotazy, zpětnou vazbu nebo nejlepší řešení! Dlouho jsem dělal výzkum na toto téma, takže mě zajímá váš názor! Pokud si chcete popovídat, neváhejte mě kontaktovat přímo prostřednictvím e-mailu (ethanw@microsoft.com)!