Úvod do proporcí

Proporce má dlouhou historii definování krásy v umění a designu. Staří Egypťané používali pro své nástěnné umění systém mřížek, který pomáhal stanovit měřítko, proporce a znázorňovat hierarchii. Staří Řekové byli fascinováni proporcemi lidského těla. Zlatý řez byl použit k vytvoření „dokonalých“ proporcí pro Gutenbergovu bibli. O příklady pečlivého zvažování proporcí není nouze.

Dnes proporce žijí jako mocný princip designu, který pomáhá utvářet konzistenci, hierarchii, rytmus a celkovou krásu designu. V této lekci probereme, jak používat proporce v návrhu uživatelského rozhraní.

Velikost vs. měřítko vs. proporce

Chceme-li využít proporce v návrhu uživatelského rozhraní, musíme nejprve pochopit rozdíly mezi velikostí, měřítkem a proporcí. Všechny tři tyto pojmy spolu souvisejí, ale je třeba vzít v úvahu některé jasné rozdíly.

Velikost je skutečný rozměr prvku, často se měří v px, pt, em, rem atd.

Například velikost tohoto loga je 75px na výšku a 275px na šířku.

Škála je relativní rozměr prvku, často se měří v procentech nebo násobcích.

Příklad prvek může být škálován tak, aby byl větší nebo menší než jeho původní velikost.

Proporce je harmonický vztah mezi dvěma nebo více prvky měřítka.

Příklad pokud se zvětší jeden prvek, měly by se stejným tempem zvětšovat i zbývající prvky, aby zůstaly proporční.

Proporce v návrhu uživatelského rozhraní

Porovnání proporčního a neproporčního loga je jedna věc, ale pravděpodobně se ptáte: „Jak to funguje při návrhu uživatelského rozhraní?“. Vždyť při různých velikostech obrazovek a zařízení není možné zachovat proporcionální UI, že? Odpověď na tuto otázku zní: „Ano i ne.“

UI obvykle obsahuje kombinaci statických a fluidních prvků.

  • Statické prvky zůstávají stejně velké bez ohledu na to, jak velká nebo malá je obrazovka.
  • Fluidní prvky se škálují na určité procento svého kontejneru.

Podle definice by porovnání statických prvků s fluidními nikdy nevedlo k proporcionálnímu návrhu, protože se neškálují stejnou rychlostí. Uživatelé však obvykle při práci s vaším uživatelským rozhraním nepřepínají zařízení.

S ohledem na tuto skutečnost je možné proporce v návrhu uživatelského rozhraní použít. Jen to možná nebude tak, jak byste očekávali.

Měrné jednotky v návrhu uživatelského rozhraní

Pravděpodobně jste nejčastěji slyšeli termín „pixel“, který se používá jako měrná jednotka pro digitální produkty. To bylo obecně přijatelné až do roku 2010, kdy společnost Apple představila displej Retina.

Displej Retina změnil způsob uvažování o „velikosti“ tím, že na jeden čtvereční palec displeje se vešlo dvakrát více pixelů. Zatímco velikost prvku mezi displejem Retina a displejem bez Retiny se zdá být stejná, celkový počet pixelů, které tento prvek tvoří, se značně liší. Například tlačítko, které je na běžném displeji vysoké 48px, bude nyní na displeji Retina kvůli hustotě pixelů vysoké 96px.

Od té doby je k dispozici mnoho různých obrazovek s vysokou hustotou pixelů (HPD) mnoha různých značek a zařízení. Naštěstí jsou obrazovky HPD obvykle definovány tím, kolik pixelů se vejde na jeden čtvereční palec více než u standardního displeje s hustotou pixelů 1×.

Například většinu obrazovek lze popsat jako obrazovky s hustotou pixelů 1X, 2X nebo 3X.

Pro popis velikosti prvku je stále běžně přijímán termín „pixel“. Aby se však předešlo zmatkům, mnoho návrhářů raději používá termín „bod“ nebo „pt“, který popisuje velikost bez ohledu na hustotu pixelů obrazovky.

Po zbytek této lekce budeme termíny „pt“ a „px“ používat zaměnitelně jako měrnou jednotku pro popis vztahů mezi prvky v našem návrhu.

Systém mřížky 8pt

Při práci s návrhovým softwarem, jako je Illustrator, Photoshop, Sketch, XD, Figma atd. je velmi běžné, že návrháři používají mřížky nebo sloupce, které jim pomáhají při práci s návrhem. Pomocí mřížek nebo sloupců lze dosáhnout mnoha principů designu probíraných v tomto kurzu, takže není divu, že jsou oblíbeným nástrojem ve výbavě designéra.

Existuje však jedna konkrétní strategie, která výjimečně dobře funguje pro proporce. Tato strategie je známá jako systém mřížek 8pt.

Systém mřížek 8pt byl poprvé představen ve specifikaci Material Design společnosti Google. Naštěstí je poměrně snadno pochopitelný. V podstatě chcete použít mřížku, která se skládá ze čtverců 8 x 8 pt. Při návrhu na této mřížce budete chtít zajistit, aby se všechny prvky k mřížce přichytily.

Výsledkem jsou prvky s rozměry, které jsou vždy dělitelné 8. Při navrhování tímto způsobem je snadné zachovat proporce prvků a zároveň vytvořit pocit vertikálního rytmu v celém návrhu.

Proč 8 bodů?

Systém 8 bodů je nejrozšířenější ze dvou hlavních důvodů:

  • Nejběžnější rozměry obrazovky jsou dělitelné 8, takže vaše návrhy jsou na většině zařízení velmi ostré a jasné (žádné rozdělené pixely).
  • Doporučená základní velikost písma na webu je 16px. To umožňuje vývojářům škálovat prvky na webové stránce v jednotkách REM a přitom zůstat věrní systému mřížky.

Všeobecně lze říci, že použití 8 bodů má pro mřížku více výhod než jakékoli jiné číslo. Pokud vám to však lépe vyhovuje, můžete použít číslo 10 nebo 12 bodů.

Proč ne 4 body?

Specifikace Material Designu od Googlu DOPORUČUJE používat 4 body pro „menší komponenty, jako je ikonografie a typografie“. Většinu prvků uživatelského rozhraní však stále zvládne systém 8 bodů, takže je pro začátek populárnější.

Zlatý řez

Systém mřížky 8 bodů má v návrhu uživatelského rozhraní své jasné výhody, ale když si v Googlu rychle vyhledáte „Proportion in UI Design“, čeká vás první stránka plná výsledků týkajících se zlatého řezu.

Zlatý řez má hodnotu 1:1,618 a je považován za průsečík matematiky a estetické krásy. Mnoho designérů zcela ignoruje mřížkové systémy ve prospěch vytváření proporcí pomocí zlatého řezu.

Existuje spousta příkladů, jak byl zlatý řez použit pro vše od Gutenbergovy bible přes moderní design loga až po jevy v přírodě. Existují však i jiní, kteří se domnívají, že krása zlatého řezu je prostě mýtus.

Nezávisle na tom nelze popřít, že mnozí jsou zlatým řezem okouzleni, takže určitě stojí za to se o něm v této lekci zmínit.

Použití zlatého řezu v návrhu uživatelského rozhraní

V lekci 4 tohoto kurzu jsme probírali, že návrh by neměl mít více než 3 až 4 úrovně hierarchie v určité části uživatelského rozhraní. S ohledem na tuto skutečnost můžete v návrhu použít zlatý řez podle následujících jednoduchých kroků:

Definujte výšku obdélníku a vynásobte toto číslo číslem 1,618, abyste zjistili šířku. Tím vytvoříte „zlatý obdélník“.

Ve výše uvedeném příkladu je naše výchozí číslo 350pt, ale můžete použít libovolné číslo.

Rozdělte svůj zlatý obdélník na dokonalé čtverce. Výsledkem každého dokonalého čtverce bude nový, menší Zlatý obdélník.

Pokračujte v dělení Zlatého obdélníku, dokud nebudete mít 3-4 různé dokonalé čtverce různých velikostí.

Velikost každého čtverce použijte jako „zástupný symbol“, který vám pomůže rozčlenit rozvržení a sdělit hierarchii v návrhu.

Ve výsledku získáte estetický a proporcionální návrh. Podívejte se na tento příklad z Prototypr.io.

Začínáme s omezeními

Teď, když jsme se zabývali některými metodami pro stanovení proporcí v návrhu uživatelského rozhraní, probereme několik skvělých výchozích bodů. Začneme-li nejprve s omezeními, bude snazší vytvořit uživatelské rozhraní na základě těchto omezení.

Mobile First Design

Slovní spojení „Mobile First“ vymyslel Luke Wroblewski ve své stejnojmenné knize. Tento termín si získal oblibu u designérů jako způsob, jak bojovat proti nutkání nacpat do uživatelského rozhraní více věcí jen proto, že je k tomu dostatek prostoru.

Soustředěním se na mobilní design v první řadě musí designéři obejít omezení mobilních zařízení a zaměřit se na to, co je skutečně důležité. Výsledkem je, že uživatelský zážitek zůstává na různých zařízeních konzistentní, protože hlavní účel uživatelského rozhraní zůstává středem pozornosti.

Velikost písma

Jak již bylo zmíněno, výchozí velikost písma pro hlavní text na webu je ve většině hlavních prohlížečů 16px. Cokoli menšího než tato hodnota může na mobilních zařízeních Apple vyvolat neočekávané chování při zvětšování. V důsledku toho se obecně doporučuje ponechat 16px jako základní velikost písma a podle toho určit zbývající velikosti písma (nadpisy, drobný text, titulky, popisky atd.).

Tyto velikosti písma můžeme definovat s ohledem na proporce tak, že se budeme řídit specifikací designu Google Material a zvolíme velikosti s přírůstkem 4pt, jako je například průvodce styly Bootstrap pro velikost písma.

Poznámka: zvyšování velikosti písma podle zlatého řezu se nedoporučuje, protože rozdíly mezi jednotlivými velikostmi písma by byly příliš velké. Pokud byste například začali se základní velikostí písma 16 a vynásobili každou úroveň nadpisu číslem 1,618, vznikl by nadpis H1 o velikosti 177,4 bodů, což by bylo velmi obtížné pro čitelnost.

Velikost tlačítka

Dalším omezujícím faktorem, který je třeba vzít v úvahu, je přesnost vstupní metody, která se používá ve vašem návrhu. V tomto konkrétním případě máme na mysli prsty, palce, kurzory a stylusy.

Prsty a palce jsou mnohem širší a méně přesné než kurzory nebo stylusy. S ohledem na to je důležité, abyste pečlivě zvolili rozměry tlačítek, vstupů, ikon nebo jiných dotykových bodů s ohledem na tato omezení.

Design materiálů společnosti Google doporučuje, aby dotykové body na mobilních zařízeních nebyly menší než 48pt na výšku a 48pt na šířku a aby mezi nimi nebylo méně než 8pt.

Šířka obsahu

Obsah je tekutý, což znamená, že vyplňuje tolik horizontálního a vertikálního prostoru, kolik je schopen. I přes tuto vlastnost je dobré definovat minimální a maximální šířku obsahu.

Minimální šířku obsahu lze určit podle minimální šířky obrazovky, kterou bude váš návrh podporovat. Nejmenší rozlišení obrazovky, které většina návrhářů podporuje, je 320px (tedy při šířce 1x). Minimální šířku byste však měli zvolit na základě skutečných údajů uživatelů, pokud jste schopni je získat. Dobrým místem pro hledání tohoto typu dat je služba Google Analytics.

Přestože šířka obsahu může vyplnit tolik obrazovky, kolik je jí dáno, obecně se nedoporučuje, aby se obsah rozkládal na více než 52 znaků na řádek. To by naznačovalo, že maximální šířku obsahu lze určit pomocí skutečného textu těla při jeho běžné velikosti písma a nalezením pohodlné šířky obsahu, která odpovídá tomuto rozsahu.

Závěr

Závěrem lze říci, že proporce jsou užitečnou zásadou návrhu. I přes kombinaci statických a tekutých prvků lze proporcionálního uživatelského rozhraní dosáhnout použitím systému mřížky 8pt, zlatého řezu nebo jiné metody. Když začínáte definovat rozměry prvků, je běžnou praxí začít s omezeními, jako je zařízení, velikost písma, velikost tlačítek a šířka obsahu. Po definování základních rozměrů je mnohem snazší prvky odpovídajícím způsobem škálovat.

Další lekce
Zásady návrhu: Bílý prostor

Předchozí lekce
Zásady designu: Zpětná vazbaJak lze tuto lekci vylepšit? Zanechte prosím svou zpětnou vazbu níže!

.