Jak vybrat správnou velikost mřížky pro ikony

Proč na velikosti mřížky záleží

Když začínáte navrhovat ikony, první rozhodnutí je zásadní. Mřížka určuje, jak přesná bude vaše práce, jak snadno se budou ikony upravovat a především jak budou vypadat v reálném použití. Není to jen teoretické rozhodnutí — volba mřížky ovlivňuje každý pixel, který nakreslíte.

Představte si, že navrhujete sadu ikon pro webovou aplikaci. Jedna ikona se bude zobrazovat v menu (16px), další v hlavičce (24px) a další v banneru (32px). Když všechny začnete s jinou mřížkou, výsledky budou vypadat nekonzistentně — některé budou ostré, jiné rozmazané.

Nejčastější velikosti a kdy je použít

16px

Malé ikony

Použijte pro formuláře, seznamy a inline ikony v textu. Je to nejmenší rozumná velikost, kde je ikona stále rozpoznatelná.

Tloušťka čar: 1–1,5px

24px

Standardní ikony

Zlatý střed. Používá se v navigaci, toolbarech a jako obecné UI prvky. Většina ikon se rodí v 24px mřížce.

Tloušťka čar: 1,5–2px

32px

Velké ikony

Pro plochy, kde chcete, aby ikona dominovala. Hero bannery, výsledky vyhledávání, ikonické tlačítka.

Tloušťka čar: 2–2,5px

Jak funguje mřížka uvnitř

Mřížka není jen čtvereček, ve kterém nakreslíte ikonu. Je to systém, který vám pomáhá udržet proporce. 24px mřížka se obvykle dělí na menší jednotky — nejčastěji 4px nebo 8px. To znamená, že když máte 24px čtverec, můžete ho rozdělit na 6 nebo 3 stejné části.

Proč je to důležité? Když pracujete s takovým systémem, všechny vaše ikony budou mít stejný “rytmus”. Tlustší čáry, okraje, prostory uvnitř — všechno se bude shodovat s vaší mřížkou. Výsledek? Ikony budou vypadat jako rodina, nikoli náhodná sbírka.

Praktický příklad: pokud máte ikonu se čtvercovým otvorem (okno), a váš čtverec má 4px strany, pak bude přesně zarovnaný s mřížkou. Když ji později zmenšíte, nebude se deformovat.

Škálování a konzistence

Když máte systém postavený na 24px, můžete ho snadno škálovat. Ikona nakreslená v 24px mřížce bude vypadat dobře v 32px (zvětšení o 33%) a také v 16px (zmenšení o 33%). To není náhoda — je to důsledek správného systému.

Ale pozor: ne všechny ikony se škálují stejně. Ikona se tenkými čarami v 24px může vypadat příliš jemně v 16px. Proto si někdy musíte připravit mírné úpravy — například trochu silnější čáry pro malé verze.

To se nazývá “optical adjustments” a je to normální součást profesionálního designu ikon. Matematické zvětšení není vždy to nejlepší řešení.

Praktické tipy na výběr mřížky

Pohleďte na konkurenci

Jaké velikosti používá Material Design, Apple, nebo vaši konkurenti? Pokud všichni používají 24px, je to z dobrého důvodu. Není třeba vymýšlet kolo.

Vzít v úvahu vaši aplikaci

Mobilní aplikace obvykle potřebují větší ikony (24px+). Web může pracovat s 16px. Desktop aplikace se mohou dovolovat i 48px. Vezměte v úvahu, kde se budou ikony používat.

Testujte na skutečných zařízeních

Nejlepší mřížka je ta, která vypadá dobře tam, kde se budou ikony opravdu používat. Exportujte, vložte do aplikace a podívejte se. Teorie je fajn, ale realita je důležitější.

Používejte sudá čísla

16, 24, 32, 48, 64px. Sudá čísla se lépe škálují bez artefaktů. 17px nebo 25px jsou problematické — vyhýbejte se jim.

Závěr: Správná volba od začátku

Výběr mřížky není složitý, ale je důležitý. Když začnete s 24px jako standardem a máte pod sebou 4px nebo 8px pomocné dělení, vytvořit konzistentní sadu ikon je jen otázka času a pozornosti. Nebojte se začít s klasikou — existuje důvod, proč jsou určité velikosti tak populární.

Nejdůležitější je být konzistentní. Zvolte si mřížku, držte se jí a pokud později zjistíte, že byste potřebovali jinou velikost, není problém — lze ji změnit v jakékoli chvíli. Ale během designu byste měli zůstat věrní jedné mřížce. To vám ušetří čas a vašim ikonám poskytne jednotný vzhled.

Jak vybrat správnou velikost mřížky pro ikony

Tomáš Kovács

Proč na velikosti mřížky záleží

Nejčastější velikosti a kdy je použít

Malé ikony

Standardní ikony

Velké ikony

Jak funguje mřížka uvnitř

Škálování a konzistence

Praktické tipy na výběr mřížky

Pohleďte na konkurenci

Vzít v úvahu vaši aplikaci

Testujte na skutečných zařízeních

Používejte sudá čísla

Závěr: Správná volba od začátku

Poznámka k tomuto článku

Jak vybrat správnou velikost mřížky pro ikony

Tomáš Kovács

Proč na velikosti mřížky záleží

Nejčastější velikosti a kdy je použít

Malé ikony

Standardní ikony

Velké ikony

Jak funguje mřížka uvnitř

Škálování a konzistence

Praktické tipy na výběr mřížky

Pohleďte na konkurenci

Vzít v úvahu vaši aplikaci

Testujte na skutečných zařízeních

Používejte sudá čísla

Závěr: Správná volba od začátku

Poznámka k tomuto článku

Související články

Stavy ikon: Hover, Active, Disabled a více

Tloušťka čar: Kdy použít 1px, 2px nebo 3px

Udržování vizuální konzistence v rozsáhlých systémech ikon