Odzivna Flex Grid v Sketch z uporabo funkcije AutoLayout in Stack Groups

Izboljšanje oblikovalskih sistemov za strukturo, modularnost in obseg

Orodja, kot so FlexBox v CSS, UIStackView v iOS in FlexboxLayout v Androidu, razvijalcem že dajejo potrebne delovne tokove za obvladovanje množice prilagodljivih in odzivnih pogledov, ki obstajajo danes.

Za oblikovalce pa je bil postopek oblikovanja postavitve v nekaterih izmed naših najljubših orodij za oblikovanje vedno bolj ročen, statičen, bolj mučen in na splošno manj matematično natančen. Toda zahvaljujoč neverjetnemu delu, ki ga izvajajo ljudje na Animi, bomo morda kmalu dobili strukturo in prilagodljivost, ki jo potrebujemo za boljši premostitev te vrzeli.

Z novo funkcijo Stacks, ki je vgrajena v najnovejši vtičnik Auto-Layout, imamo zdaj delovni potek, ki bolje prilagaja izhod uporabniškega vmesnika in nam omogoča večjo doslednost in vzdrževanje v vseh naših sistemih oblikovanja. (Izjava o omejitvi odgovornosti - Ta koncept je še vedno v zgodnji fazi. Vsak sistem postavitve ne bo imel koristi od tega sistema, zato se mešajte in ujemajte, kot se vam zdi primerno).

Demo

V spodnjem videoposnetku sem sestavil prožno postavitev prilagodljive mreže, da bi pokazal osupljivost skladov. To je umetniška plošča, ki zrcali strukturo osnovne spletne strani.

Naslednja funkcionalnost je še v zgodnjih raziskovalnih fazah v predlogo:

  • Namizje za mobilne naprave v nekaj klikih.
  • Ploščice je mogoče spreminjati z velikostjo, poravnava / distribucija mreže pa se ne zlomi
  • Mreža strukturirana po:
  • Telo
     - Glava
     - Glavni
     - —oddelki
     - - - skupine vrstic (ima sloj velikosti škatlice)
     - - - - vrstice
     - - - - - stolpci
     - - - - - - moduli
     - - - - - - - komponente (ugnezdeni simboli z notranjo logiko)
     - Noga
  • Uporabite gnezdene simbole, definirane s kombinacijo lastnosti Sketch Resize, samodejnega pripenjanja in skupin, da ustvarite modularni sistem komponent, ki jih je mogoče zamenjati.
  • Postavitev se prilagodi širini umetniške plošče (vsebina ima največjo širino 1200 slikovnih pik, mobilni telefon pa ima vgrajene žlebove).
  • Raznolikost razdelitve stolpcev in enostavno sestavljanje / spreminjanje žlebov.
  • in
    rasteta in se zmanjšujeta neodvisno od
    .
  • Spremembe višine v
    potisnite
    navzdol v podokno, ob tem pa ohranite nedotaknjene robove in obloge, kot bi bila spletna stran.
  • Višino lahko nastavite tako, da vpliva na višino podrejenih stolpcev
  • Poravnava stolpcev (zgornji, srednji, spodnji, raztezni) je mogoče določiti na ravni vrstic.
  • Če dodate nov stolpec (ali ga izbrišete) iz vrstice, samodejno prilagodi širino stolpcev sorodnikov, da se ustrezno prilegajo.
  • Če dodate nov podrejeni modul v stolpec, bo stolpec navpično narasel (moduli vsebujejo poljubno število vrst vsebine, kot so slike, besedilo, seznami, tabele, skupine in simboli)
  • Poravnava modulov (levo, sredinsko, desno, raztezanje) je mogoče določiti na ravni stolpca.
  • simbol zamenjati komponente, da nadomestijo vsebino ali pripnejo nove plasti na obstoječo komponento.
  • Orodje namizja je bilo nastavljeno za uporabo 8pt osnovne mreže.

Datoteka za skico

Tukaj je. Prosim, da ga kakor koli izboljšate in me obvestite.
* POMEMBNO * - Datoteka NE bo delovala, razen če imate zadnjo izdajo samodejnega postavitve s podporo za zaloge (.0.2.0 od tega pisanja).

https://cl.ly/2v2I373P2E1f

Nekaj ​​končnih misli

Upam, da je bilo to koristno nekaterim. Vem, da bom globlje raziskal možnosti samodejnega izklopa in skladov. Po tej različici sem opazil nekaj majhnih prepirov z matematičnim zaokroževanjem, vendar upam, da se bodo te razrešile pravočasno. Med nekaterimi prošnjami, ki sem jih predlagal vražjem, mislim, da bi lahko bile koristne.

  • Možnost dodajanja ozadja v zloženo skupino (nadrejena vrstica stolpcev) brez vpliva na logiko sklada. V HTML / CSS bi to preprosto storili na ravni ali "div", vendar Sketch do zdaj ne dovoljuje načina za to.
    Obstaja pristop, da to storite zdaj, ki vključuje združevanje plasti ozadja z zloženo skupino in pripenjanje bg na vrh / levo / 100% širino in višino, in medtem ko ozadje raste, da sprejme vsebino, se ne zmanjša, ko vsebina je odstranjena. Verjamem, da se krčenje že pojavlja na seznamu ekip TO-DO.
  • Uvedba mejnih točk v umetniški plošči in zamenjava simbolov na podlagi umetniške plošče (zamenjava 4-elementne navzven z ikono hamburgerja, ko umetniška plošča <400px ali še bolje, z uporabo pristopa poizvedbe po vsebniku.
  • Z omenjenimi točkami preloma je možnost preklopa med vodoravnimi in navpičnimi zloženimi skupinami, tako da se stolpci zložijo drug na drugega, ko ni dovolj prostora. In za stolpce, ki jih je treba zaviti, če je določeno.
  • Možnost določitve odstotne širine na stolpec.
    (Posodobitev - Različica te ideje je bila pravkar izvedena v vtičniku s pomočjo funkcije Uteži)
  • Čeprav to ne bi nujno spadalo v ekipo Anima, bi moral Sketch uvesti tudi podporo spremenljivkam, še posebej zdaj z lastnostmi, kot so razmik, min in najvišja višina ter druge vrednosti, ki bi morale biti v več plasteh dosledne. Te spremenljivke bi bilo mogoče uporabiti tudi za preslikavo barv in pomoč pri postopku prenosa Sass.

No, to je vse, kar imam! Želel sem še enkrat vpiti ekipo pri Animi. So izjemno nadarjeni, odzivni in vabljeni, zato prosimo, da podprete njihovo trdo delo! Pridružite se njihovi Facebook strani.

Če imate kakršna koli vprašanja ali (lepe!) Komentarje, vas prosimo, da objavite spodaj ali se oglasite na Twitterju.