Kuinka suunnitella reagoivia asetteluita Frameriin

Avainarvoobjektien käyttäminen usean laitteen prototyyppien luomiseen.

Jos työskentelet riittävän kauan Framer-prototyyppien kanssa, kohtaat lopulta ongelman, kuinka muokata prototyypin asettelua useiden laitteiden ja suuntausten käsittelemiseen. Sen sijaan, että luodaan erillinen prototyyppi jokaiselle tilanteelle - esimerkiksi yksi iPhonelle pystysuunnassa ja yksi iPadille vaakasuunnassa -, on mahdollista suunnitella reagoiva prototyyppi, joka mukauttaa metriansa tilanteen vaatimalla tavalla. Tämä vaatii jonkin verran asennusta, mutta prosessia voidaan huomattavasti yksinkertaistaa objektina tunnetulla tietorakenteella.

Objekti on epämääräinen termi, joka voi viitata moniin asioihin. Täällä me käytämme sitä viitaten avain-arvo-parien kokoelmaan. Nämä toimivat kuin muuttujat: Näppäimellä voit viitata pariin nimen mukaan, kun taas arvo pitää siihen liittyvät tiedot.

CoffeeScript-kielellä, jota käytetään Framer-prototyyppien valmistukseen, voit rakentaa objektin, kuten:

objectName =
    avain: arvo
    elseKey: anotherValue

(Huomaa, että yhtälömerkki seuraa kohteen nimeä, mutta kaksoispistettä käytetään erottamaan avaimet ja arvot.)

Sisäkkäisten kohteiden avulla on mahdollista edistyneempiä hierarkioita, jolloin asiat kiinnostavat:

objectName =
    keySet1:
        avain: arvo
        elseKey: anotherValue
    keySet2:
        avain: arvo
        elseKey: anotherValue

On helppo nähdä, kuinka tämä voi johtaa ratkaisuksi asetteluongelmaan:

koko =
    iPhone:
        viewSidePadding: 20
    ipad:
        viewSidePadding: 40

Mutta miten pääsemme näihin arvoihin? CoffeeScript tarjoaa kätevästi kaksi menetelmää: pistemerkinnät ja hakasulkemerkinnät. Pistemerkinnöissä aloitamme objektinimellä ja siirrymme sitten hierarkiaa alaspäin erottamalla viitteet pisteillä:

tulosta mitoitus.iphone.viewSidePadding

Suluhakemerkinnällä käärimme sen sijaan jokaisen viittauksen suluissa ja lainausmerkeissä:

tulostuskoko ["iphone"] ["viewSidePadding"]

(Huomaa, että objektin nimeä ei ole kääritty mihinkään.)

Lainausmerkit vaikuttavat aluksi vaivalta, mutta itse asiassa ne ovat korvaamattomia. Niiden avulla voimme rakentaa avaimien nimet lausekkeiden avulla. Voit esimerkiksi tehdä jotain tällaista:

tulostuskoko ["iphone"] ["näkymä" + "SidePadding"]

Toistaiseksi siitä ei ole enää hyötyä, mutta saatat alkaa nähdä, kuinka nämä viitteet voidaan jakaa ja rekonstruoida tarpeen mukaan.

Voit myös sekoittaa ja sovittaa nämä merkinnät haluamallasi tavalla:

tulostuskoko ["iphone"]. viewSidePadding
tulosta koko / matkapuhelin ["viewSidePadding"]

Jotta tämä lähestymistapa reagoiviin asetteluihin toimisi, tarvitsemme kolme asiaa:

  1. Menetelmä laitetyypin määrittämiseksi.
  2. Menetelmä laitteen suunnan määrittämiseksi.
  3. Menetelmä näitä vastaavan arvon tarttumiseksi.

Lyhyyden vuoksi tarkastellaan tässä vain ensimmäistä ja viimeistä kohtaa. (Yksi liitetyistä prototyypeistä lopussa osoittaa koko paketin.)

Luo uusi prototyyppi Frameriin ja lisää seuraava koodi:

# tekniset tiedot
koko =
    viewTopPadding: 30
    iPhone:
        viewSidePadding: 20
        itemMargin: 16
        itemSize: 250
    ipad:
        viewSidePadding: 40
        itemMargin: 64
        itemSize: 400

(Huomaa, että jotkut avain-arvoparit elävät korkeimmalla tasolla. Nämä ovat yhteisiä sekä iPhonelle että iPadille, ja niiden arvot eivät muutu laitteiden kanssa.)

Lisää seuraavaksi toiminto laitteen tyypin tunnistamiseksi. Eteneminen tapa riippuu siitä, missä haluat prototyyppisi näkyvän, mutta tässä on Framerin sisällä toimiva menetelmä:

# Hanki laitetyyppi
checkDevice = (deviceType = "iphone") ->
    framerDevice = Framer.Device.deviceType
    deviceType = "iphone", jos _. sisältää (framerDevice, "iphone")
    deviceType = "ipad", jos _. sisältää (framerDevice, "ipad")
    palauta laiteTyyppi
Jos prototyyppisi on tarkoitettu esikatseluun mobiililaitteissa, Screen.widthin havaitseminen voi osoittautua luotettavammaksi menetelmäksi.

CheckDevice () -toiminto palauttaa joko merkkijono “iphone” tai “ipad.” Avaimen toimittaminen avain-arvo-parissa on kaikki, joka meidän on lisättävä saadaksesi numeeriset tekniset tiedot. Esimerkiksi tämä toimii nyt:

deviceType = checkDevice ()
value = "viewSidePadding"
tulostuskoko [deviceType] [arvo]

Voimme laajentaa tämän yleiskäyttöön, joka hyväksyy avaimen nimen ja palauttaa nykyiselle laitteelle sopivan arvon. Voit käyttää alla olevaa koodia, mutta muista se kaksi asiaa:

  • Objektihierarkian syvemmät arvot ohittavat korkeammat arvot. Jos määrität käyttöympäristöjen välisen määritelmän arvon, on parasta olla toistamatta tätä arvoa laitetasolla.
  • Jos vastaavia arvoja ei löydy, toiminto tulostaa virheilmoituksen.
# tarkista eritelmä
getSpec = (spec) ->
    if! spec, tulosta sitten "Tarvitsetko spesifikaation nimen".

    deviceType = checkDevice ()
    haku = _.osoita ({}, koko, koko [deviceType])
    tulos = _.get (haku, spec)

    Jos! tulos, tulosta sitten "Arvoa ei löydy nimelle # {spec} nimikkeestä # {deviceType}."

    palauttaa tuloksen

Kun nämä toiminnot ovat paikoillaan, meidän on vain soitettava getSpec (“ourKeyName”), jossa “ourKeyName” on haluamamme arvon avainnimi. Siten getSpec (“viewSidePadding”) palauttaa 20 iPhonessa, mutta 40 iPadilla. getSpec (“viewTopPadding”) palaa 30 kumpaankin suuntaan.

Voimme nopeasti lyödä PageComponent-pohjaisen esineiden karusellin eritelmämme avulla ja korvaava toiminto vaatii mitä tahansa mitoista:

karuselli = uusi sivukomponentti
    leveys: näytön leveys
    x: getSpec ("viewSidePadding")
    y: getSpec ("viewTopPadding")
    korkeus: getSpec ("itemSize")
    leveys: getSpec ("itemSize")
    leike: väärä
    scrollVertical: väärä
i: lle [0..4]
    carouselItem = uusi kerros
        vanhempi: karuselli.sisältö
        leveys: getSpec ("itemSize")
        korkeus: getSpec ("itemSize")
        x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))

Tämä riittää rakentamaan asetteluja, jotka vastaavat laitetyypin muutoksiin. Jos haluat mukautua myös suuntaan, sinun on tunnistettava suunta ja piirrettävä sitten kaikki tasot uudelleen aina, kun muutos tapahtuu. Yksinkertaisin tapa saavuttaa tämä on kääri kaikki kerrosluomut asettelutoimintoon. Kaikkien suuntausmuutosten tulisi ensin tuhota kaikki tasot ja kutsua sitten asettelutoiminto rakentamaan ne uudelleen, tai muuten asettelutoiminto pystyy käsittelemään itse kerrosten tuhoamisen ensimmäisenä askeleena.

Jos olemassa olevia tasoja ei tuhota suuntauskytkimessä, lopputuloksena on pino kopioita tasoja, kun asettelutoimintoasi kutsutaan toistuvasti.

Karuselli-luomistyön kääriminen asettelutoiminnossa voi näyttää siltä:

# näkymän asettelutoiminto
doLayout = () ->
    # tuhota kaikki kerrokset päällekkäisyyksien välttämiseksi
    kerrokselle Framer.CurrentContext.layers -kerroksessa
        layer.destroy ()
    
    # luoda karuselli
    karuselli = uusi sivukomponentti
        leveys: näytön leveys
        x: getSpec ("viewSidePadding")
        y: getSpec ("viewTopPadding")
        korkeus: getSpec ("itemSize")
        leveys: getSpec ("itemSize")
        leike: väärä
        scrollVertical: väärä
    
    # täyttää karuselli soluilla
    i: lle [0..4]
        carouselItem = uusi kerros
            vanhempi: karuselli.sisältö
            leveys: getSpec ("itemSize")
            korkeus: getSpec ("itemSize")
            x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))
# alusta
doLayout ()

Voit kokeilla prototyyppejä ja nähdä kuinka nämä mekanismit toimivat yhdessä, lataa yksinkertaisempi prototyyppi ja lataa sellainen, jossa on suuntakytkimen tuki.

Toinen lähestymistapa on tallentaa iPadikohtaiset mitoitustiedot erilliseen, ohitusobjektiin. Lataa ohitusprototyyppi nähdäksesi menetelmä käytännössä.

Tilaa BPXL Craft ja seuraa Black Pixel Twitterissä saadaksesi lisää näkemyksiä suunnittelusta ja kehityksestä.

Black Pixel on luova digitaalisten tuotteiden toimisto. Lisätietoja osoitteessa blackpixel.com.