Skica Návody

Jak změnit svůj design za chodu

Naučte se, jak rychle provést změny v konstrukčních prvcích v žádném okamžiku

Toto je část Frames for Sketch - série krátkých konzultací o osvědčených postupech, které jsme použili k tomu, aby se Frames Kit stal opravdu užitečným nástrojem. Na příkladu jednoduchého tlačítka se podíváme na to, jak můžete učinit každou změnu méně bolestivou, a generovat neomezené variace svých návrhů.

Pokud nemáte zájem číst všechna tato slova, můžete si zde stáhnout soubor s tutoriálem - Dynamic Buttons Tutorial

Pokud jste jako já, velká část vašeho času se věnuje drátovým modelům, které je vždy nutné projednat před přechodem na design s vysokou věrností. Všichni víme, jak důležitá je tato fáze, při vytváření webových stránek a aplikací je rozhodující čas pro výběr správných prvků a nastavení jejich pozice ve zvoleném rozvržení.

V tuto chvíli si většina designérů představí, jak budou vypadat ta ozdobná zaoblená tlačítka sem a tam po jejich božském dotyku, jak krásný bude tento obrázek vypadat s trochou rozostření v hrdinové sekci atd. Ale pokud jde o realitu, může finalizace jednotlivých detailů přinést různé hypotézy a spory o tvarech prvků, barvách, obrázcích, textech, ikonách a všem ostatním, na čem záleží našim zákazníkům, uživatelům a sobě samým.

Spousta designérů se často k vybranému stylu designu tolik připojí, že každá nová změna pro ně může být mnohem bolestivější.

Ale proč by to mělo být bolestivé, proč nemůže být zábavnější?

No, může to být. Použitím kombinací jednoduchých technik skici můžete dosáhnout požadované flexibility při práci s drátovými rámy a rozvrženími, stejně jako vytvářet neomezený počet variací designu v žádném okamžiku, a zůstat po celý den zdravý a chladný.

Co by se mělo dělat?

Aplikace Skica umožňuje vytvářet přizpůsobitelné komponenty a znovu je používat nekonečně mnoho času. Aby správně fungovaly, musíte nejprve udělat tyto jednoduché kroky k přípravě všech prvků, než se přesunete:

  1. Definujte sadu všech prvků uživatelského rozhraní, které budou použity v projektu, jako jsou tlačítka, ikony, text, avatar, makety atd. Pokuste se vymyslet tyto prvky jako něco, co lze kódovat a použít mimo soubor náčrtu.
  2. Vytvořte samostatný symbol pro každou instanci vizuálních parametrů, jako je barva, tvar nebo stav. (Například pokud váš projekt používá 16 různých barev, musíte pro každou z nich vytvořit symbol).
  3. Najděte správnou rovnováhu mezi počtem parametrů a prvky uživatelského rozhraní, do kterých jsou distribuovány. (Práce s rozbalovací nabídkou potlačení může být někdy docela únavná, proto je důležité udržovat rovnováhu mezi počtem parametrů a pohodlím interakce s nimi).
Vypadá to jako spousta práce, možná to tak je, ale tento přístup vám v dlouhodobém horizontu odměňuje a umožňuje vám ušetřit stovky hodin za vytvoření nového souboru s designem, když máte všechny ingredience vždy připravené k vaření.

Pojďme mít jednoduchý příklad

Zvážíme vytvoření jedné z těchto komponent pomocí příkladu jednoduchého tlačítka, doufám, že tuto techniku ​​budete moci použít pro své budoucí projekty. Nejprve musíte stáhnout tento demonstrační soubor.

Jak to udělat?

Aby naše tlačítko bylo užitečné a mohli jsme si vyměnit jeho parametry, musíme do našeho jediného tlačítka vložit všechny správné podřízené symboly. Pojďme se tedy podívat na tyto symboly:

  • Text - Nastavte šířku symbolu tak, aby odpovídala velikosti tlačítka, a nastavte výšku tak, aby zůstala pevná uprostřed tlačítka. Chcete-li změnit barvu textu, měli byste pro tento prvek vytvořit požadovaný počet barev.
  • Tvar - Toto je také rodičovský symbol, který v sobě zahrnuje symboly státu a barvy. Slouží k přepínání mezi zaoblenými a základními tvary a aplikováním různých barev a stavů, jako jsou vznášení, zaostření nebo lisování.
  • Ikona - Ve výchozím nastavení je ikona skrytá, můžete ji zobrazit a odstranit text tlačítka, abyste vytvořili tlačítko ikony. Pokud je to nutné, můžete bez obav změnit barvu. Nezapomeňte nastavit šířku a výšku tak, aby zůstala pevná i po změně velikosti. Slouží k vytvoření plovoucích akčních tlačítek nebo jednoduchých sociálních tlačítek.

Nyní můžete vygenerovat téměř neomezenou variantu těchto tlačítek jednoduše přidáním více tvarů, barev, ikon a možná i několika dalších stavů pro tlačítka v náčrtu.

A to je vše. Doufám, že to bude užitečné.

Než odjedete, nezapomeňte:

  • Stáhněte si freebie výše!
  • Pomozte nám šířit slovo o Frames for Sketch a získejte 25% slevu. Stačí nám poslat e-mail / tweet / DM nám odkaz na váš příspěvek a my se vám ozveme co nejdříve.
  • Sledujte Robowolfa na Twitteru pro další úžasné freebies a návody.