Jak vytvořit FRONT END FRAMEWORK with Sketch

Front End Framework

Některé aspekty, které je třeba zvážit:

Když pracujeme s velkým týmem návrhářů současně ve stejném projektu, je obtížné sladit je, a ještě více, když je projekt ekosystémem aplikací, které musí dodržovat estetickou linii a splňovat určité pokyny, které specifikují chování a interakce.

Soubor náčrtu si můžete stáhnout zdarma
https://dribbble.com/shots/2882661-Styleguide

Jedním ze způsobů, kterými můžeme v rozhraní vytvořit „normalizaci“, je definovat průvodce stylem (myšlenka ze 100% vizuální perspektivy), která pomáhá celému projekčnímu týmu vyhnout se budoucím změnám, zbytečné pracovní době a zvýšit produktivitu, což umožňuje abychom se lépe zaměřili na chování komponent a interakce v aplikaci.

Všichni členové týmu, jako jsou vývojáři, vlastníci produktů, projektoví manažeři a dokonce i klient, musí přijmout dobrého průvodce stylem, který povede k lepší komunikaci a větší spolupráci mezi nimi. Pro tohoto „vyvinutého“ průvodce stylem nazýváme Front End Framework (FEF).

Před zahájením procesu vytváření FEF je důležité mít na paměti některé aspekty:

Musí být použitelná a musí být snadno integrovatelná do různých pracovních procesů.
Musí být vzdělávací a musí obsahovat příklady, které nám pomohou vytvářet nové komponenty a interakce.
Ve svých specifikacích musí být vizuální a jasný.
Musí spolupracovat, takže každý člen má možnost provádět změny a přidávat nové informace.
Musí být aktualizován, a proto by měl být vždy uložen v konkrétním úložišti a ten, kdo provede změny, by měl soubor aktualizovat.

Začněme implementovat FEF

Krok 1, Definování IA:

Prvním krokem je definování obsahu (na základě našeho projektu jej rozdělíme následovně):

  1. Styling: paleta barev, rodina fontů, typografie, ikony.
  2. Rozvržení a vzory stránek: různé kompozice, tabulky a hlavní navigace.
  3. Prvky navigace: odkazy, karty a stránkování.
  4. Modální okna: popovery, popisky, rozbalovací nabídky, dialogy zpráv.
  5. Zadávání textu: formuláře.
  6. Komponenty

Krok 2, vytvoření obsahu FEF:

Styling - První věcí je vytvoření primární, sekundární palety barev a doplňkových barev, s uvedením #HEX a kde by měla být použita.

Barevná paleta

Poté vytvořte styly v náčrtu, abyste mohli optimalizovat pracovní postup v budoucích návrzích.

Vytvořit nový sdílený styl

Čím lepší je nomenklatura složek v FEF, tím více byla tabulka stylů uspořádána v náčrtu.

Vytvořené styly

Tímto způsobem, pokud chceme rychle změnit barvu komponenty, můžeme to udělat z okna stylů a dbáme na to, abychom nepřidávali žádnou jinou barvu.

Výběr předdefinované barvy pozadí.

Stejný postup opakujeme i pro typografické styly:

Typografie
  1. Podrobně popisujeme písma, která budou použita v návrzích, primární a sekundární.
  2. Vytváříme styly v náčrtu i barvy
Vytvořené styly

Po vytvoření stylů pro typografie a barvy přidejte skupinu ikon, které budou použity, a převeďte každou z nich na symboly. Pokud ji tedy někdo upraví, bude stejná změna opakována na všech místech, kde je použita.

Rodinné ikony

Tip: Stejnou ikonu vytvořte v různých stavech a pojmenujte ji následujícím způsobem ComponentName / state / sub-state, budeme moci snadno přistupovat ke všem stavům z hlavní nabídky, aniž bychom museli měnit původní ikonu.

Stejný proces lze použít na součásti, které mají více stavů, například zaškrtávací políčka. V tomto případě by nomenklatura byla:

  1. zaškrtávací políčko / normální
  2. zaškrtávací políčko / vznášet se
  3. zaškrtávací políčko / zaostření / minus
  4. zaškrtávací políčko / ostření / zaškrtnutí
  5. zaškrtávací políčko / stisknuto
  6. zaškrtávací políčko / zakázáno / zaškrtnuto
  7. zaškrtávací políčko / zakázáno

Uvnitř rozbalovací nabídky Vložit v horním pruhu se zobrazí následující:

Vložit rozbalovací nabídku

Tímto způsobem je přechod z jednoho stavu do druhého mnohem jednodušší, přístupnější a vyhýbá se poruchám v designu.

Změna stylů

Krok 3, vytvoření součástí:

Po definování obecného stylu a nastavení stylů v náčrtu začněte pracovat na komponentách, které se budou opakovat v celém aplikačním ekosystému. (Například hlavní navigace, rozbalovací nabídky, popovery, datové sítě atd.). Hlavním důvodem je sladění mezi designéry týmu při vytváření nového rozhraní.

Zde jsou některé součásti, které ráda uvádím jako příklad:

Popisky

Popisy, pokud chce designér změnit barvu pozadí, je to tak snadné jako jít do okna stylů a vybrat odpovídající barvu.

Formuláře - Tip: Vytvořením textových polí jako symbolu skica dává možnost upravit obsah bez nutnosti přístupu k samotnému symbolu.

Ke každé komponentě musí být přiložen vysvětlující text (kdy použít a jaké chování musí mít). V případě potřeby můžete vpravo přidat sekci určující velikosti, okraje a styly.

PŘÍKLAD CORE-POPOVER

Specifikace jsou zaměřeny na poskytování informací vývojovému týmu, takže je lze přidat do stejného dokumentu nebo použít Zeplin jako komunikační nástroj. V něm můžete získat css hodnoty a stáhnout komponenty.

Náhled zeplinu.

Krok 4, chování:

V závislosti na mřížce, kterou používáme, dochází ke změnám jejich velikostí (šířka a výška), jako jsou datové seznamy nebo datové sítě. Pro tento typ komponent skica poskytuje řadu možností, které umožňují předdefinovat pozice každého prvku a pracovat na tom, co by bylo responzivní tabulkou.

Příklad responzivní datové mřížkyPříklad reagující na více sloupců

Jak dosáhnout tohoto responzivního chování? Ve verzi 39 náčrtu bylo přidáno nové okno se 4 možnostmi, které to umožňují.

Možnosti jsou:

Stretch (výchozí) - Při změně velikosti skupiny se bude hladina pohybovat a měnit její velikost (tato možnost by měla být použita pro rozdělení čar a obdélníků každého řádku).

Připnout do rohu - Automaticky připne novou vrstvu k nejbližšímu rohu. Při změně velikosti skupiny se velikost nezmění. (Tuto možnost by měly mít ikony vpravo nahoře a zaškrtávací políčka.)

Změnit velikost objektu - Změní velikost vrstvy a zachová původní polohu vrstvy při změně velikosti skupiny. (Textová pole musí mít tuto možnost, aby si udržely okraj s dělicí linií vlevo.)

Plovoucí na místě - hladina vrstvy se nezmění, ale její velikost je zachována i při změně velikosti skupiny. (Tato možnost by měla být použita na ikony, které musí být ve středu jejich sloupce.)

Další informace o vytvoření těchto tabulek doporučuji v následujícím článku: https://medium.com/sketch-app-sources/https-medium-com-megaroeny-resizing-tables-withsketch-3-9-2e02e6382d3d#. fsx0udd9v

Krok 5, odkazy

Konečně, kromě udržování jazykového designu ve všech aplikacích, struktura každého prvku se může lišit podle požadavků a potřeb produktu.

Z tohoto důvodu se doporučuje vytvořit poslední sekci, která ukazuje, jak se stejná komponenta používá na základě funkčních potřeb, aby návrhář mohl analyzovat a naučit se replikovat styly s jinou architekturou.

Komponenty

Společná budoucnost

Spolupráce všech členů týmu v komplexním projektu založeném na průvodci stylem může zlepšit kvalitu práce a spolupráce se může vyhnout otázkám jako „Jaké by bylo chování složky„ x “v menších rozlišeních?

Mnohokrát se můžeme soustředit na spuštění první verze produktu co nejrychleji, proto vznikají problémy, když je produkt již aktivní. V takových případech může FEF změnit a vyhnout se bolestem hlavy.

Soubor náčrtu si můžete stáhnout zdarma
https://dribbble.com/shots/2882661-Styleguide

Více ode mě najdete na adrese https://dribbble.com/sebamantel