Vastuvõtlik Flex Grid visandil, kasutades AutoLayout ja Stack Groupsi

Projekteerimissüsteemide täiustamine struktuuri, modulaarsuse ja ulatuse jaoks

Tööriistad nagu CSS-is olev FlexBox, iOS-is UIStackView ja Androidi FlexboxLayout on juba pikka aega andnud arendajatele vajalikud töövood tänapäeval esinevate kohanemis- ja reageerimisvaadete paljususe käsitlemiseks.

Mõnede meie lemmikkujundustööriistade kujundusprotsess on disainerite jaoks alati olnud aga käsitsi manustatum, staatilisem, tüütum ja matemaatiliselt vähem täpne. Kuid tänu Anima rahva hämmastavale tööle võib meil varsti olla struktuur ja paindlikkus, mida vajame selle tühimiku paremaks ületamiseks.

Uue virnade funktsiooni abil, mis on komplekteeritud uusimasse automaatse paigutuse pistikprogrammi, on meil nüüd töövoog, mis hõlbustab paremini kasutajaliidese väljundit ja võimaldab meil saavutada suurema järjepidevuse ja hooldatavuse meie disainisüsteemides. (Kohustustest loobumine - see kontseptsioon on alles algusjärgus. See süsteem ei saa kasu igat tüüpi paigutusele, nii et segage ja sobitage vastavalt oma vajadustele).

Demo

Allolevas videos olen kokku pannud kontseptsiooni tõestuse paindliku ruudustiku paigutuse, et näidata virnade suurepärasust. See on artboard, mis peegeldab põhilise veebilehe struktuuri.

Olles alles uurimistöö varajases staadiumis, on malli sisse paigutatud järgmine funktsionaalsus:

  • Lauaarvuti mobiilile mõne klõpsuga.
  • Artboards on muudetava suurusega ja võre joondamine / jaotamine ei purune
  • Võrgu struktureeritud:
  • Keha
     - Päis
     - Peaasi
     - —lõiked
     - - - ridade rühmad (sellel on õdede-vendade suuruse kiht)
     - - - - read
     - - - - - veerud
     - - - - - - moodulid
     - - - - - - - komponendid (pesastatud sümbolid sisemise loogikaga)
     - jalus
  • Kasutage vahetatavate komponentide modulaarsüsteemi loomiseks pesastatud sümboleid, mis on määratletud sketšisuuruse atribuutide, automaatse väljundi sidumise ja pinu rühmade kombinatsiooniga.
  • Paigutus kohandub artboardi laiusega (sisu maksimaalne laius on 1200 pikslit ja mobiilil on sisseehitatud vihmaveetorud).
  • Erinevad kolonni jaotused ja vihmaveerennide lihtne kokkuvarisemine / muutmine.
  • ja kasvavad ja kahanevad
    -st sõltumatult.
  • Kõrguse muutmisel väärtuseks
    lükake jalg ülaosas alla, hoides samal ajal veeriseid ja polstri puutumata nagu veebileht.
  • kõrgust saab reguleerida, et mõjutada lapsesammaste kõrgust
  • Veergude (ülemine, keskmine, alumine, venitatav) joondamist saab määratleda rea ​​tasemel.
  • Uue veeru lisamine (või kustutamine) reas reguleerib õdede-vendade laiuse vastavalt sellele.
  • Uue alammooduli lisamine veergu suurendab seda veergu vertikaalselt (moodulid sisaldavad suvalist arvu sisutüüpe, näiteks pilte, teksti, loendeid, tabeleid, rühmi ja sümboleid)
  • Moodulite (vasak, keskel, paremal, sirutus) joondamist saab määratleda veeru tasemel.
  • sümboli vahetuskomponendid sisu asendamiseks või uute kihtide kinnitamiseks olemasolevale komponendile.
  • Töölaua artboard on seadistatud kasutama 8pt baasjoone ruudustikku.

Visandifail

Siin see on. Julgelt seda paremaks muuta ja andke mulle sellest teada.
* TÄHTIS * - fail EI tööta, kui teil pole uusimat virnade toe automaatse paigutuse versiooni (.0.2.0 alates sellest kirjutamisest).

https://cl.ly/2v2I373P2E1f

Mõned lõplikud mõtted

Loodan, et see oli mõnele inimesele kasulik. Ma tean, et uurin Autolayouti ja Stacks'i võimalusi sügavamalt. Selle versiooni alguses olen märganud väheseid keerutusi matemaatika ümardamisega, kuid loodetavasti saavad need õigel ajal korda. Mõnede soovituste hulgas, mida ma olen esitanud Devile, arvan, et need võivad olla väärtuslikud.

  • Võimalus lisada virnastatud rühmale tausta (veergude vanemrida), ilma et see mõjutaks virna loogikat. HTML / CSS-is saaks seda teha lihtsalt või “div” tasemel, kuid Sketch ei võimalda seda praegu teha.
    Praegu on olemas lähenemisviis selle tegemiseks, mis hõlmab taustakihi grupeerimist virnastatud rühmaga ja bg-i nööpimist üles / vasakule / 100% laiusele ja kõrgusele ning kuigi taust kasvab sisu mahutamiseks, ei kahane see, kui sisu eemaldatakse. Usun, et kahanemine on juba meeskonna TO-DO nimekirjas.
  • Murdepunktide sisseviimine artboardil ja sümbolite vahetamine artboardi alusel (4-elemendilise navigatsiooni vahetamine hamburgeriikooniga, kui artboard on <400 pikslit või veel parem, kasutades konteineri päringute lähenemisviisi.
  • Nimetatud murdepunktide korral on võimalus liikuda horisontaalsete ja vertikaalsete virnastatud rühmade vahel nii, et veerud virnastavad üksteise peale, kui ruumi pole piisavalt. Ja veergude mähkimiseks, kui täpsustatud.
  • Võimalus määrata veeru protsentuaalset laiust.
    (Värskendus - selle idee versioon on pistikprogrammis äsja rakendatud funktsiooni Kaalud abil)
  • Ehkki see ei peaks tingimata kuuluma Anima meeskonnale, peaks Sketch kasutusele võtma ka muutujate toetamise, eriti nüüd selliste omadustega nagu vahekaugus, minimaalne ja maksimumkõrgus ning muud väärtused, mida tuleks mitme kihi korral järjepidevana hoida. Neid muutujaid saab kasutada ka värvide kaardistamiseks ja Sassi käibevahetuse protsessis abistamiseks.

Noh, see on kõik, mis ma sain! Tahtsin lihtsalt Anima meeskonnale veel kord karjuda. Nad on uskumatult andekad, vastutulelikud ja kutsuvad, nii et toetage kindlasti nende rasket tööd! Liituge nende Facebooki lehel.

Kui teil on küsimusi või (toredaid!) Kommentaare, palun kirjutage allpool või sirvige Twitterisse.