Reagoiva joustava ruudukko luonnostelussa käyttämällä AutoLayout- ja Pino-ryhmiä

Suunnittelujärjestelmien parantaminen rakenteen, modulaarisuuden ja mittakaavan suhteen

Työkalut, kuten CSS: n FlexBox, iOS: n UIStackView ja Androidin FlexboxLayout, ovat jo pitkään antaneet kehittäjille tarvittavat työnkulut käsitellä nykyään monia mukautuvia ja reagoivia näkymiä.

Suunnittelijoille joidenkin suosikkisuunnittelutyökalujemme ulkoasuprosessit ovat kuitenkin aina olleet manuaalisempia, staattisempia, tylsiä ja yleensä vähemmän matemaattisesti tarkkoja. Mutta Animan ihmisten uskomattoman työn ansiosta meillä saattaa pian olla rakenne ja joustavuus, jota tarvitsemme tämän kuilun parantamiseksi paremmin.

Uudessa Stacks-ominaisuudessa, joka on mukana viimeisimmässä automaattisen asettelun laajennuksessa, meillä on nyt työnkulku, joka mukauttaa käyttöliittymän tuotokset paremmin ja antaa meille mahdollisuuden saavuttaa enemmän johdonmukaisuutta ja ylläpidettävyyttä suunnittelujärjestelmissämme. (Vastuuvapauslauseke - Tämä konsepti on vielä varhaisessa vaiheessa. Kaikentyyppiset asettelut eivät hyöty tästä järjestelmästä, joten sekoita ja sovittaa mielesi mukaan).

Demo

Alla olevassa videossa olen koonnut konseptikontrollisen joustavan ruudukon asettelun esittelemään pinojen mahtavaa. Se on kuvataulu, joka heijastaa perussivun rakennetta.

Seuraavat toiminnallisuudet on palattu malliin vielä varhaisessa tutkimusvaiheessa:

  • Pöytätietokone matkapuhelimeen muutamalla napsautuksella.
  • Käsikirjoituslevyjä voi muuttaa, ja ruudukon kohdistaminen / jakautuminen ei hajoa
  • Ruudukon järjestäjä:
  • ruumis
     - Otsikko
     - Pää
     - —osio
     - - - riviryhmät (sisältää sisaruksen laatikkokoon)
     - - - - riviä
     - - - - - sarakkeet
     - - - - - - moduulit
     - - - - - - - komponentit (sisäkkäiset symbolit sisäisellä logiikalla)
     - Alatunniste
  • Käytä sisäkkäisiä symboleja, jotka määritetään yhdistelmällä Sketch Resize -ominaisuuksia, Autolayout-kiinnitystä ja pino-ryhmiä muodostamaan modulaarinen järjestelmä vaihdettavista komponenteista.
  • Asettelu mukautuu taulun leveyteen (sisällön enimmäisleveys on 1200 kuvapistettä ja mobiililaitteissa on sisäänrakennetut kouruet).
  • Erilaisia ​​pylväsjakaumia ja kourujen helppo romahtaminen / muokkaaminen.
  • ja kasvavat ja kutistuvat riippumatta
    .
  • Korkeuden muutokset arvoon
    painavat alas kuvataulussa pitäen reunat ja pehmusteet ehjinä kuin verkkosivut.
  • -korkeutta voidaan säätää vaikuttamaan alasarakkeiden korkeuteen
  • Pylväiden (ylä, keskimmäinen, ala, venytys) kohdistus voidaan määrittää rivitasolla.
  • Uuden sarakkeen lisääminen (tai poistaminen) riviltä säätää sisarusarakkeiden leveyden automaattisesti sopimaan.
  • Uuden lapsimoduulin lisääminen sarakkeeseen saa sen kasvamaan pystysuunnassa (moduulit sisältävät minkä tahansa määrän sisältötyyppejä, kuten kuvia, tekstiä, luetteloita, taulukoita, ryhmiä ja symboleja)
  • Moduulien (vasen, keskimmäinen, oikea, venytys) kohdistus voidaan määrittää sarakkeen tasolla.
  • symbolinvaihto komponentit korvataksesi sisällön tai kiinnittääksesi uusia tasoja olemassa olevaan komponenttiin.
  • Pöytäkoneen kuvataulu on asetettu käyttämään 8pt: n perustaso-ruutua.

Luonnos

Tässä se on. Voit parantaa sitä millään tavalla ja ilmoittaa minulle.
* TÄRKEÄÄ * - tiedosto EI toimi, ellei sinulla ole viimeisintä julkaisua Automaattinen asettelu pinon tuella (.0.0.0 tästä kirjoituksesta lukien).

https://cl.ly/2v2I373P2E1f

Jotkut viimeiset ajatukset

Toivon, että se oli hyödyllinen joillekin ihmisille. Tiedän, että tutkin syvällisemmin Autolayout- ja Stacks-mahdollisuuksia. Tästä versiosta lähtien olen huomannut muutaman pienen sirin matematiikan pyöristyksellä, mutta toivottavasti ne selvitetään ajoissa. Joidenkin niiden esittäjille esittämien pyyntöjen joukossa mielestäni nämä voivat olla arvokkaita.

  • Mahdollisuus lisätä tausta pinottuun ryhmään (sarakkeiden vanhemmat rivit) vaikuttamatta pinon logiikkaan. HTML / CSS: ssä tämä tapahtuisi yksinkertaisesti tai “div” -tasolla, mutta Sketch ei salli tapaa tehdä se nyt.
    Tätä varten on olemassa lähestymistapa, joka liittyy taustakerroksen ryhmittämiseen pinottuun ryhmään ja bg: n kiinnittämiseen ylös / vasemmalle / 100% leveydelle ja korkeudelle. Vaikka tausta kasvaa sisällön mukauttamiseksi, se ei kutistu, kun sisältö poistetaan. Uskon, että kutistuminen on jo joukkueen TO-DO-luettelossa.
  • Mittauspisteiden käyttöönotto kuvataulussa ja symbolien vaihtaminen taulun perusteella (vaihtaminen 4-kappaleisella navilla hampurilainen-kuvakkeella, kun kuvataulu on <400 kuvapistettä tai vielä parempi, käyttämällä konttikyselyjen lähestymistapaa.
  • Mainituilla väliaikoilla kyky siirtyä vaaka- ja pystysuunnassa pinottujen ryhmien välillä siten, että pylväät pinottuvat päällekkäin, kun tilaa ei ole riittävästi. Ja sarakkeiden käärimiseen, jos ne on määritelty.
  • Mahdollisuus määrittää prosentuaalinen leveys saraketta kohti.
    (Päivitys - Tämän idean versio on juuri otettu käyttöön laajennuksessa Painot-ominaisuuden avulla)
  • Vaikka tämä ei välttämättä kuulu Anima-tiimiin, Sketchin tulisi myös ottaa käyttöön tuki muuttujille, etenkin nyt ominaisuuksilla, kuten etäisyys, min ja max-korkeudet, ja muilla arvoilla, jotka tulisi pitää yhdenmukaisina useissa kerroksissa. Näitä muuttujia voitaisiin käyttää edelleen myös värien kartoittamiseen ja avuksi Sass-yhteysvastuun vaihtoprosessissa.

No, se on kaikki mitä sain! Halusin vain huutaa taas Animan joukkueelle. He ovat uskomattoman lahjakkaita, reagoivia ja kutsuvia, joten muista tukea heidän kovaa työtä! Liity heidän Facebook-sivulleen.

Jos sinulla on kysyttävää tai (mukavaa!) Kommenttia, lähetä viesti alla tai tavoita Twitter.