Jak používat změnu velikosti symbolů Skica jako šéfa

ÚPRAVA: Tento článek byl napsán před vydáním Skici 44. V té době existovaly 4 režimy: Roztáhnout, Připnout do rohu, Změnit velikost objektu a Plovoucí na místě. Teď je to trochu jiné, takže mějte na paměti, že tento tutoriál je mírně zastaralý. Nyní existuje mnohem čistší způsob, jak vyřešit problém s indikátorem průběhu. Soubor ke stažení byl odpovídajícím způsobem aktualizován, proto se podívejte, jak je vytvořen. Díky za všechny odpovědi a laskavé komentáře;)

Od doby, kdy navrhuji aplikace, jste mě viděli stěžovat si jednou nebo dvakrát na návrhářské programy, zejména na jejich nedostatek funkcí, které směřují k interakci a chování. Opravdu bychom měli navrhovat skutečné systémy, které mohou reagovat na kontext (např. Velikosti obrazovky, obsah, pokyny pro značku ...), spíše než vytvářet nudné obrázky, které jsou opravdu jen pixely. Nejen, že je to pohodlnější, ale také nám umožňuje vyjádřit naše skutečné záměry v našich pracovních souborech, aby byly jasnější pro všechny.

Naštěstí je nyní vytváření systémů možné mnohem pokročilejším způsobem než před rokem, a to díky bohémskému kódování a jejich nezastavitelné aplikaci Sketch. Tihle kluci to pochopí.

Ačkoli jsme se Symboly už nějakou dobu dobře obeznámili, byla to jen část řešení. V poslední době však vývojáři Sketch přinesli návrhářům dvě úžasné funkce, které jsou skutečnými měniči her: vnořené symboly a symboly pro změnu velikosti. Zatímco první z nich umožňuje uživatelům dlouho očekávané pohodlí, do kterého se nebudu kopat, druhá je podle mého názoru skutečná revoluce ve světě designu uživatelského rozhraní. Je to schopnost designérů ponořit se do světa omezení vývojářů a ukázat lepší pocit, jak je element členěn. To je obrovské!

Přemýšlejte o tom: nyní prvek UI není jen obraz nebo vektor, stal se součástí, jejíž instance se mohou odlišně přizpůsobit kontextu, ve kterém jsou zobrazeny. Například stejný navigační pruh lze použít na kreslicí plátno velikosti iPhonu nebo iPadu a / nebo může mít na různých obrazovkách různé názvy. Instance položek z pohledu mřížky mohou mít svůj vlastní text a obrazový obsah a vypadat odlišně, zatímco se odkazují na tento jeden hlavní prvek nebo symbol, který definuje chování. Proveďte úpravy tohoto symbolu a budou použity všude. Upravte jednu instanci najednou a přidejte kontext. Vítejte v bodě, kde je konečně vzrušující!

Výukový program: responzivní přehrávač YouTube

Než se dostaneme do praxe, chtěl bych se omluvit za poměrně honosný název tohoto článku.

Začněme! Ukážu vám například, jak jsem vytvořil přehrávač YouTube pomocí aplikace Sketch 39 a nové funkce změny velikosti symbolu. Ujistěte se, že se podělím o několik pěkných tipů. Něco z toho bylo vlastně docela výzva, takže se zaměřte! Mohu vás jen povzbudit, abyste si prohlédli úvod k pravidlům pro změnu velikosti, než půjdete dál.

Soubor je k dispozici ke stažení zdarma, přímo zde. Jsem si jistý, že pro ně ve svých webových projektech najdete nějaké využití, takže neváhejte!

Pokud již tyto nástroje znáte, přejděte prosím do části Progress Bar. Tam je skutečný úlovek. Pokud si nejste jisti a chcete si vzít nějaké další tipy, můžete se jimi řídit!

Budování hráče

Před použitím jakýchkoli pravidel vytvořme a složíme konečnou komponentu, jako byste normálně v aplikaci Sketch, ve výchozí velikosti. Pro lepší přesnost je použití snímku obrazovky určitě dobrý nápad. Vytvořte ikony, ukazatel průběhu, vložte obdélník s obrázkem nastaveným na vyplnění obsahu (viz obrázek níže), a to je v podstatě to! Pokud jsou prvky určitého druhu v číslech, například v tomto případě ikony, vytvořte pro usnadnění sdílený styl.

V tomto okamžiku z něj udělejte symbol. Upravíte ji na stránce Symboly a otestujete ji na jakékoli stránce, kterou chcete zobrazit. Může být hned vedle hlavního symbolu. Konečná kompilace by měla vypadat takto:

Příprava vrstev

Další krok: vytvořte hranice pro sjednocení glyfů. Ikony jsou podobné typografickým znakům. Nemají nutně stejnou velikost samy o sobě, ale jsou implicitně zahrnuty do neviditelných polí, které mají stejné rozměry. Říkám těmto krabicím Bounds. Obvykle definuji stejný obdélník kolem každé ikony (zde, 36x36px) a každou ikonu seskupuji s ohraničovacím rámečkem individuálně. V tomto případě to pomohlo pochopit rozvržení ovládacích prvků přehrávače a pomocí prázdného prostoru kolem nich jako mřížky. Všechny hraniční vrstvy musí být neviditelné, takže vytvářím sdílený styl nazvaný _Bounds, který má deaktivovanou výplň a ohraničení.

Je důležité si uvědomit, že i když tento krok nepředstavuje vizuálně nic, bude mít svou roli v pravidlech, která se chystáme aplikovat: předcházení nechtěným kompenzacím při změně velikosti symbolu.

Přidání pravidel pro změnu velikosti nebo omezení

Vlastně jsme již začali, když jsme obrázek na pozadí přepnuli do režimu výplně. Toto není v aplikaci Sketch nic nového, ale stále docela užitečné. Alternativně můžete použít režim Fit podle toho, čeho chcete dosáhnout (mimochodem režim Fit je nový). Tyto režimy zajišťují, že obraz bude při změně velikosti vždy vyplňovat nebo přizpůsobit dostupnou oblast.

Poté musí všechny ikony a ovládací prvky skládající se z hráče zůstat ve stejné vzdálenosti od nejbližšího rohu a musí zachovat stejnou velikost, pokud je jeho nadřazená velikost změněna. Máme jen tu věc! Použijte možnost Připnout do rohu místo výchozí možnosti Roztáhnout v inspektoru vpravo. Pokud je seskupíte, ujistěte se, že tyto skupiny jsou také nastaveny na Připnout do rohu. Zkontrolujte, zda je velikost dostatečná, takže každá položka je umístěna blízko rohu a není stejně vzdálená od dvou rohů, nebo se bude držet uprostřed nich.

Pokud jde o přechod, chcete, aby změnil velikost celé komponenty, takže jej nastavte na objekt Změnit velikost. Tak jednoduché!

Takže obrázek na pozadí se bude chovat pomocí výplně nebo přizpůsobení, ovládací prvky se přilepí na nejbližší rohy a gradient bude dynamicky měnit velikost. Dobrá práce! Ale až dosud žádné překvapení.

Indikátor průběhu

Počkejte, stále je tu tento ikonický červený ukazatel průběhu, se kterým se musíme vypořádat. YouTube by bez něj nebyla YouTube!

Zde je požadované chování: průběžné a nakládací pruhy se musí držet vlevo pomocí vždy stejného okraje. Stejné pro dno s jinou pevnou hodnotou. Volitelně musí představovat stejné procento pokroku v jakékoli velikosti. Celkový pruh musí být vystředěn vodorovně, za použití stejného pevného okraje na obou stranách a v jakékoli velikosti. Stejné pro dno.

Jinými slovy, potřebujeme, aby pruty měly vodorovnou velikost, ale ne svisle, a držely se vždy ve stejné vzdálenosti od levého a pravého okraje a spodního okraje.

Věc je, že se čtyřmi dostupnými možnostmi, které pro nás Sketch obsahuje (Stretch, Pin to corner, Resize object a Float in place), byla moje první myšlenka: to nelze udělat. Věř mi, zkusil jsem.

Ale takhle to bude zajímavé: můžete udělat kombo! Nebylo by skvělé použít trochu obou pravidel? No, vlastně to vlastně není možné, ale s trochou kurva se mi podařilo najít řešení. Zde je vysvětlení:

Nejprve musíme definovat oblast, která udržuje stejnou vzdálenost od levého a pravého okraje za všech okolností. Rovněž musí mít pevnou vzdálenost od spodního okraje. A to je to, co dělá objekt Resize. Takže vytvořte obdélník, který vyplní obrazovku, mínus 12px okraj vlevo, stejný vpravo a 37px dole (proč ne 36px, YouTube?). Seskupte jej a nastavte skupinu na Změnit velikost objektu. Zkus to. Měl by se chovat takto:

Nyní, když máme základy, udělejme tuto oblast neviditelnou. Chceme, aby pruty vždy zůstaly na dně této oblasti, udržovaly své rozměry vodorovně, ale měly pevnou výšku. To znamená, že je chcete natáhnout do nově definované oblasti bez ovlivnění její výšky. To není možné při použití obyčejných tvarů, jako jsou obdélníky, ale jednoduchá čára s definovaným tahem (v tomto případě 3px) nebude mít v tloušťce velikost - až do bodu, spíše extrémně: <152px. Není si úplně jistý proč. Ale nestarej se o to.

Umístěte průběh, laodování a globální pruhy jako čáry tahu uvnitř oblasti skupiny a ujistěte se, že zaklapávají na dno. Ve výchozím nastavení jsou nastaveny na Stretch. To by mělo dělat svou práci!

Nyní můžete upravit velikost instancí a dokonce i obsah pomocí přepsání - uplynulý čas, globální čas, obrázek na pozadí.

Tento případ je docela specifický, stále existuje řešení. Nemusí to být tak pro každou situaci, ani pro nejelegantnější, ale můžete si ji nechat fungovat. Klobouky před Bohemian Coding, který udělal první verzi těchto omezovacích nástrojů velmi šikovný a poměrně snadno použitelný i přes malou dobu adaptace. Kdo ví, jaké možnosti budou moci v budoucnu přidat? Citlivý design je konečně ve správné fázi a je to určitě nejlepší!

Pokud jste soubor stáhli, možná jste si všimli, že jsem vytvořil tři verze stejného přehrávače: vložený, vložený kurzor a přehrává se. Tři verze, tři symboly. I když můžete upravovat obsah každé instance a měnit šablonu přepínáním symbolu, bylo by skvělé mít možnost nastavit více složení stejného symbolu, skrýt nebo zobrazit příslušné skupiny v rámci symbolu, podobně jako kompasy na vrstvě Photoshopu . To by přidalo další dimenzi chování komponenty.

Po tom co vím, vím, jak tito kluci rádi udržují Sketch tak uklizenou, komplexní a přímočarou, jak jsou, a jsou to odborníci. Musím za to milovat!

Těšíme se na další funkce a vylepšení! Uvidíme se pro další průlomovou funkci;)