Citlivá flexibilná mriežka v náčrte pomocou skupín AutoLayout a Stack

Zdokonaľovanie konštrukčných systémov pre štruktúru, modularitu a mierku

Nástroje ako FlexBox v CSS, UIStackView v iOS a FlexboxLayout v systéme Android už dávno vývojárom poskytli potrebné pracovné postupy na zvládnutie množstva prispôsobivých a citlivých názorov, ktoré dnes existujú.

Pre dizajnérov však bol proces navrhovania rozloženia v niektorých našich obľúbených nástrojoch vždy manuálnejší, statickejší, únavnejší a všeobecne menej matematicky presný. Ale vďaka úžasnej práci ľudí v spoločnosti Anima môžeme čoskoro mať štruktúru a flexibilitu, ktorú potrebujeme na prekonanie tejto medzery.

Vďaka novej funkcii Stacks, ktorá je súčasťou najnovšieho doplnku Auto-Layout, máme teraz pracovný postup, ktorý lepšie prispôsobuje výstup používateľského rozhrania a umožňuje nám dosiahnuť väčšiu konzistentnosť a udržiavateľnosť v rámci našich konštrukčných systémov. (Zrieknutie sa zodpovednosti - Táto koncepcia je stále v počiatočnom štádiu. Nie každý typ rozloženia bude mať z tohto systému úžitok, takže sa môžete vzájomne kombinovať, ako uznáte za vhodné).

Demo

Vo videu nižšie som zostavil rozloženie flexibilnej mriežky s konceptom koncepcie, aby som vám ukázal úžasnosť Stackov. Je to umelecká tabuľa, ktorá odráža štruktúru základnej webovej stránky.

Zatiaľ čo v počiatočných fázach prieskumu sa do šablóny upečie táto funkčnosť:

  • Desktop na mobil pomocou niekoľkých kliknutí.
  • Kresby sú prispôsobiteľné a zarovnanie / distribúcia mriežky sa nezlomí
  • Mriežka štruktúrovaná podľa:
  • telo
     - Záhlavie
     - Hlavné
     - oddiely
     - - - riadkové skupiny (má súrodeneckú vrstvu)
     - - - - riadky
     - - - - - stĺpce
     - - - - - - moduly
     - - - - - - - komponenty (vnorené symboly s vnútornou logikou)
     - Päta
  • Použite vnorené symboly definované kombináciou vlastností Sketch Resize, Autolayout pinning a stack, aby ste vytvorili modulárny systém vymeniteľných komponentov.
  • Rozloženie sa prispôsobuje šírke kresleného dielu (obsah má maximálnu šírku 1 200 pixlov a mobil má vstavané odkvapy).
  • Rôzne rozloženie stĺpcov a ľahké zrútenie / úprava žliabkov.
  • a
    rastú a zmenšujú sa nezávisle od
    .
  • Zmeny výšky na
    tlačia
    dole v kresliarskej doske, zatiaľ čo okraje a výplne zostávajú nedotknuté, ako by to robila webová stránka.
  • Výška sa dá nastaviť tak, aby ovplyvňovala výšku podradených stĺpcov
  • Zarovnanie stĺpcov (horný, stredný, spodný, úsek) je možné definovať na úrovni riadkov.
  • Pridaním nového stĺpca (alebo odstránením jedného) z riadku sa automaticky upraví šírka súrodeneckých stĺpcov, aby sa zmestili.
  • Pridaním nového podradeného modulu do stĺpca sa tento stĺpec zväčší vertikálne (moduly obsahujú ľubovoľný počet typov obsahu, ako sú obrázky, text, zoznamy, tabuľky, skupiny a symboly)
  • Zarovnanie modulov (vľavo, stred, vpravo, úsek) je možné definovať na úrovni stĺpca.
  • symbol zamieňať komponenty za účelom nahradenia obsahu alebo pripnutia nových vrstiev k existujúcemu komponentu.
  • Umelecká tabuľa pracovnej plochy bola nastavená na používanie mriežky základnej línie 8pt.

Súbor náčrtu

Tu to je. Neváhajte ho akýmkoľvek spôsobom vylepšiť a dajte mi vedieť.
* DÔLEŽITÉ * - Súbor NEBUDE fungovať, pokiaľ nemáte najnovšie vydanie automatického rozloženia s podporou zásobníkov (od tohto písania .0.2.0).

https://cl.ly/2v2I373P2E1f

Konečné myšlienky

Dúfam, že to bolo pre niektorých ľudí užitočné. Viem, že preskúmam možnosti automatického rozloženia a stohov hlbšie. Od tejto verzie som si všimol pár malých vtipov s matematickým zaokrúhľovaním, ale dúfajme, že tie sa včas vyriešia. Medzi niektoré z požiadaviek, ktoré som navrhol pre devs, si myslím, že by to mohlo byť užitočné.

  • Schopnosť pridať pozadie do zoskupenej skupiny (nadradený riadok stĺpcov) bez ovplyvnenia logiky stohu. V HTML / CSS by sa to jednoducho robilo na úrovni alebo „div“, ale Sketch už teraz nedovoľuje spôsob, ako to urobiť.
    Existuje prístup, ako to urobiť teraz, ktorý zahŕňa zoskupenie vrstvy pozadia s naskladanou skupinou a pripnutie bg k hornej / ľavej / 100% šírke a výške, a zatiaľ čo pozadie rastie, aby sa prispôsobilo obsahu, nezmení sa, keď sa obsah je odstránený. Verím, že zmenšovanie je už na zozname TO-DO tímu.
  • Zavedenie bodov prerušenia v kresliarskej doske a výmena symbolov na základe kresleného plátna (výmena štvormiestneho navigačného prvku s ikonou hamburgerov, keď je kreslo <400px alebo ešte lepšie, pomocou prístupu dopytov po kontajneroch.
  • S uvedenými bodmi prerušenia je schopnosť prepínať medzi horizontálnymi a vertikálnymi naskladanými skupinami tak, že stĺpce sa stohujú jeden na druhého, keď nie je dostatok miesta. A pre zalamovanie stĺpcov, ak sú uvedené.
  • Schopnosť určiť percentuálnu šírku v stĺpci.
    (Aktualizácia - verzia tohto nápadu bola do doplnku implementovaná pomocou funkcie Weights)
  • Aj keď by to nevyhnutne nespadalo na tím Anima, Sketch by mal tiež zaviesť podporu pre premenné, najmä teraz s vlastnosťami, ako sú medzery, minimálna a maximálna výška, a ďalšie hodnoty, ktoré by sa mali udržiavať konzistentné vo viacerých vrstvách. Tieto premenné by sa mohli ďalej použiť na mapovanie farieb, a pomôcť pri procese odovzdávania Sass.

To je všetko, čo mám! Chcel som znova dať mužstvu Anima výkričník. Sú neuveriteľne talentovaní, pohotoví a láskaví, preto nezabudnite podporiť ich tvrdú prácu! Pripojte sa na ich stránku na Facebooku.

Ak máte nejaké otázky alebo (pekné!) Komentáre, neváhajte uverejniť príspevok nižšie alebo osloviť Twitter.