Příprava ikon pro práci v návrhovém systému.
Kdo jsem a proč o tom píšu?
Ahoj, jmenuji se Andrey Nasonov, jsem návrhář UI/UX, pracuji jako vedoucí designového oddělení společnosti Elonsoft. Tvoříme softwarové produkty a pomáháme společnostem z různých průmyslových odvětví rozšiřovat jejich podnikání.
Navrhuji od roku 2008, začínal jsem jako grafik, ale od roku 2015 pracuji jako webový designér.
Zajímám se o vývoj návrhů služeb, návrh návrhových systémů a automatizaci návrhů a obchodních procesů.
V této sérii článků bych se chtěl podělit o své zkušenosti s budováním návrhových systémů a navrhnout nějaké nápady. pro automatizaci. V prvním článku si povíme o poměrně jednoduchém, ale důležitém tématu – ikonách. Pojďme!
Vložte ikony do rámečků
Protože všechny ikony mají kvůli svým geometrickým vlastnostem různé velikosti, musí být všechny umístěny do rámečků stejné velikosti.
Řekněme, že máme tři ikony: 22x15px, 18x20px a 10x5px. Každá z nich musí být v rámci 24x24px.
To vám pomůže rychle nahradit jednu ikonu jinou pomocí funkce „Instance“.
Aby fungovalo nahrazení prostřednictvím instance, musí být komponenty ikony ve stejném rámci ( více o tom později).
Ikony jsou nejlépe označeny v angličtině. Pokud jste stáhli ikonu, která již má název v angličtině, nepřejmenovávejte ji.
Takže si rychle zapamatujete název ikon a snadno je najdete na zdrojích, kde je získáte.
Zároveň se naučte nová slova v angličtině, pokud s nimi máte potíže, jako já . 😄
Ukládání ikon
Článek 224, zbavení svobod …… .. v pořádku 😄
Jeden projekt může obsahovat ikony různých velikostí. Například standardní 24x24px, 16x16px nebo 20x20px pro menší položky.
Ukládáme hlavní ikony 24x24px na kreslicí ploše „Icons 24“. Zbytek ikon, jejichž velikost je větší nebo menší než 24 pixelů, je uložen v části „Další ikony“. Obvykle jich není příliš mnoho.
K uložení různých verzí ikon je potřebná kreslicí plocha „Ikony koše“. Například vyberete nebo nakreslíte tři ikony chatu, vyberete jednu z nich a umístíte ji na kreslicí plochu Icons 24 a další dvě verze ikony přesunete na kreslicí plochu Ikony koše. Pokud si to rozmyslíte a chcete změnit svůj výběr, nemusíte je znovu hledat.
Pozadí a barva
Abyste zabránili zobrazování nepotřebných barev v nastavení Výplň při výběru komponent s ikonou, odstraňte bílé pozadí z komponenty, i když je deaktivována.
Také doporučuji okamžitě použít barevný styl na ikonu , takže během další práce bude pohodlnější měnit barevné ikony.
Barevný styl je nutný, abyste při výměně prostřednictvím instance nezapomněli znovu vymalovat ikona v požadované barvě.
Doporučuji vám vybrat chytlavou barvu, kterou na projektu zřídka používáte. Ponechání ikony černé nebo šedé je pravděpodobné, že ji zapomenete znovu vymalovat. Vybral jsem hnědou.
Omezení
Upravte svislý a vodorovný střed vrstvy pomocí ikony omezení. To je nutné v případě, že chcete zmenšit nebo zvětšit komponentu ikony, ale aby ikona sama nezměnila svou velikost.
Důležité! Сonstraints je třeba upravit speciálně pro vrstvu s ikonou, a ne pro celou komponentu.
Hromadné akce s ikonami
Všechny výše uvedené akce lze provádět s několika ikonami najednou.
Chcete-li vybrat vrstvy s ikonou ve všech komponentách ikony najednou – vyberte všechny komponenty ikon a stiskněte klávesu Enter.
Odpadky v ikonách
V rámečku komponenty by nemělo být nic kromě ikony. Nezapomeňte odstranit všechny skryté vrstvy z rámečku ikon.
Například ikony materiálového designu mají bílou vrstvu pozadí.
Výsledkem je, že komponenta ikony by měla obsahovat pouze jednu vrstvu (vrstva s ikonou) . Mohou však existovat výjimky, například dvoubarevné ikony.
V případě jednobarevné ikony musí být všechny prvky spojeny do jedné vrstvy.
Po sloučení vrstev nezapomeňte na sloučený tvar použít Obrysový hřeben.
To vše je potřeba, aby ikony vážily méně, kód SVG je mnohem menší a srozumitelnější a vývojáři neměli problémy s překreslením ikon.
Takto vypadá kód SVG ikony, když má komponenta ikony několik vrstev a nejsou sloučeny do jedné. Ukázalo se, že kód je velmi dlouhý a má až 7 parametrů „Fill“ pro různé prvky ikony. To nemůžete udělat.
A takto vypadá SVG kód ikony, když jsou všechny vrstvy sloučeny. Kód je mnohem menší a má pouze 2 parametry výplně. Jeden pro pozadí kontejneru, druhý pro barvu ikony. Můžete to udělat.
Po exportu ikony ji můžete dále komprimovat pomocí tohoto webu.
Po komprimaci se kód ikony vyrovnal menší, ale vnější vzhled ikony se nezměnil.
Zdroje s ikonami
A nakonec , několik zdrojů, kde můžete získat ikony.
Komunita ikon materiálového designu
Obrovská sada ikon, která obsahuje oficiální ikony Material Designu i ikony vytvořené komunitou z průvodců Material Design. Podle mého názoru je to v tuto chvíli nejlepší sada. Pokrývá 90% mých potřeb.
Figma má vyhrazený plugin.
Ikony materiálového designu
Oficiální ikony materiálového designu. Ikony na tomto webu bohužel obsahují několik zvláštních značek. Z tohoto důvodu nelze některé ikony najít pomocí vyhledávání. A soubor ikon obsahuje další vrstvu s bílým pozadím, což podle mého názoru není nutné.
Plugin ve Figmě.
Boxicons
K ikonám z předchozích zdrojů existují dobré alternativy. Ale ne všechny ikony jsou dokonalé pixely.
Ve Figmě je také plugin.
Feathericon
Pěkná sada kvalitních ikon obrysu. Ikony jsou vytvářeny tahem, který umožňuje měřítko a změnu tloušťky čáry samotných ikon.
Doplněk Figma
Ikony IBM
Ikony IBM vytvořené společností a komunitou.
Děkuji
Pokud jste se dozvěděli něco nového nebo byl článek pro vás užitečný – stiskněte ^
