Reaguojantis „Flex“ tinklelis eskize naudojant „AutoLayout“ ir „Stack“ grupes

Tobulinamos konstrukcijos, moduliškumo ir mastelio projektavimo sistemos

Tokie įrankiai kaip „FlexBox“ CSS, „UIStackView“ „iOS“ ir „FlexboxLayout“ „Android“ jau seniai suteikė kūrėjams būtinas darbo eigas, kad būtų galima tvarkyti daugybę šiandien egzistuojančių adaptyvių ir reaguojančių rodinių.

Vis dėlto dizaineriams kai kurių mėgstamiausių projektavimo įrankių maketavimo procesas visada buvo rankinis, statiškesnis, nuobodus ir paprastai matematiškai ne toks tikslus. Tačiau dėl nuostabaus „Anima“ žmonių darbo netrukus gali prireikti struktūros ir lankstumo, reikalingo geriau užpildyti tą spragą.

Naudodami naują „Stacks“ funkciją, integruotą į naujausią „Auto-Layout“ papildinį, dabar turime darbo eigą, kuri geriau pritaiko vartotojo sąsajos išvestį ir leidžia pasiekti didesnį nuoseklumą ir palaikymą mūsų projektavimo sistemose. (Atsakomybės atsisakymas - ši koncepcija vis dar yra pradinėje stadijoje. Ne kiekvienam maketo tipui bus naudinga ši sistema, todėl sumaišykite ir suderinkite, kaip jums atrodo tinkama).

Demonstracija

Žemiau esančiame vaizdo įraše pateikiau koncepcijos įrodymo „flex grid“ išdėstymą, kad parodyčiau „Stacks“ nuostabumą. Tai yra iliustracija, atspindinti pagrindinio tinklalapio struktūrą.

Dar pradiniame žvalgymo etape į šabloną įtraukiamos šios funkcijos:

  • Keliais paspaudimais galite naudoti stalinį kompiuterį.
  • Pakabinamų lentų dydis yra keičiamas, o tinklelio suderinimas / paskirstymas nesutrinka
  • Tinklelis sudarytas pagal:
  • kūnas
     - Antraštė
     - Pagrindinis
     - —sekcijos
     - - - eilučių grupės (turi brolių ir seserų dydžio dydį)
     - - - - eilutės
     - - - - - stulpeliai
     - - - - - - moduliai
     - - - - - - - komponentai (įterpti simboliai su vidine logika)
     - Poraštė
  • Norėdami sukurti modulinę keičiamų komponentų sistemą, naudokite įdėtus simbolius, apibrėžtus eskizo dydžio keitimo ypatybių, automatinio išsidėstymo susiejimo ir rietuvių grupių deriniu.
  • Išdėstymas prisitaiko prie artilerijos pločio (turinio maksimalus plotis yra 1200 pikselių, o mobiliajame yra įmontuoti latakai).
  • Įvairūs kolonų pasiskirstymai ir lengvas latakų griūtis / modifikavimas.
  • ir
    auga ir traukiasi nepriklausomai nuo
    .
  • Aukščio pokyčiai į
    pastumkite pėstį
  • aukštį galima reguliuoti taip, kad jis paveiktų vaikų kolonų aukštį
  • Stulpelių (viršaus, vidurio, apačios, ruožo) išlyginimą galima apibrėžti eilutės lygyje.
  • Pridėjus naują stulpelį (arba išbraukus) iš eilutės, automatiškai nustatomas brolių ir seserų stulpelių plotis.
  • Jei stulpelyje pridėsite naują antrinį modulį, stulpelis augs vertikaliai (moduliuose yra daugybė turinio tipų, tokių kaip vaizdai, tekstas, sąrašai, lentelės, grupės ir simboliai).
  • Modulių (kairysis, vidurinis, dešinysis, ruožas) suderinimas gali būti apibrėžtas stulpelio lygyje.
  • Norėdami pakeisti turinį arba prisegti naujus sluoksnius prie esamo komponento, pakeiskite simbolius.
  • Stalinis darbalaukio skydelis buvo nustatytas naudoti 8 taškų bazinę tinklelį.

Eskizinis failas

Štai jis. Nedvejodami patobulinkite tai bet kokiu būdu ir praneškite man.
* SVARBU * - Failas neveiks, nebent turite naujausią automatinio išdėstymo su „Stacks“ palaikymu versiją (.0.2.0 nuo šio rašymo).

https://cl.ly/2v2I373P2E1f

Keletas paskutinių minčių

Tikiuosi, kad tai buvo naudinga kai kuriems žmonėms. Aš žinau, kad giliau ištirsiu „Autolayout“ ir „Stacks“ galimybes. Įvertinęs šią versiją pastebėjau keletą mažų keiksmažodžių su matematikos apvalinimu, tačiau tikiuosi, kad jie laiku susitvarkys. Aš manau, kad iš kai kurių prašymų, kuriuos aš pasiūliau naujiems padaliniams, jie gali būti vertingi.

  • Galimybė pridėti foną sukrautoje grupėje (pagrindinė stulpelių eilutė) nepažeidžiant kamino logikos. HTML / CSS tai paprasčiausiai būtų atliekama arba „div“ lygiu, tačiau eskizas neleidžia to padaryti jau dabar.
    Šiuo metu yra būdas tai padaryti: grupuoti fono sluoksnį sukrauta grupe ir prisegti bg į viršų / kairę / 100% pločio ir aukščio. Nors fonas auga, kad tilptų turinys, jis nesitraukia, kai turinys pašalinamas. Manau, kad susitraukimas jau yra komandos TO-DO sąraše.
  • Įtvirtinimo taškų įtraukimas į lentelę ir simbolių mainai, remiantis grindų lenta (keičiant 4 elementų navigaciją su mėsainio piktograma, kai artboard <400 pikselių ar dar geriau, naudojant konteinerių užklausų metodą).
  • Esant minėtiems lūžio taškams, galimybė pereiti tarp horizontalių ir vertikalių sukrautų grupių taip, kad stulpeliai sukrauti vienas ant kito, kai nėra pakankamai vietos. Ir jei reikia, stulpelius apvynioti.
  • Galimybė nurodyti procentinį stulpelio plotį.
    (Atnaujinimas - šios idėjos versija ką tik buvo įdiegta papildinyje naudojant „Svorio“ funkciją)
  • Nors tai nebūtinai priklausys „Anima“ komandai, „Eskizas“ taip pat turėtų įdiegti kintamųjų palaikymą, ypač dabar, kai naudojamos tokios savybės kaip tarpai, mažiausias ir maksimalus aukštis ir kitos vertės, kurios turėtų būti nuoseklios keliuose sluoksniuose. Šie kintamieji galėtų būti toliau naudojami ir spalvoms susieti bei padėti atlikti Sass perdavimo procesą.

Na, viskas, ką aš gavau! Tiesiog norėjau dar kartą šaukti komandos „Anima“ komandai. Jie yra nepaprastai talentingi, jautrūs ir kviečiantys, todėl būtinai palaikykite jų sunkų darbą! Prisijunkite prie jų „Facebook“ puslapio.

Jei turite klausimų ar (malonių!) Komentarų, nedvejodami rašykite žemiau arba susisiekite su „Twitter“.