Tervetuloa Framer-opetusohjelman toiseen osaan. vuonna viimeinen artikkeli , opimme Framer-laitteen suunnittelun käyttämisen perusteista sekä siitä, miten kirjoitetaan yksinkertainen koodi, jotta mallimme heräävät eloon. Tässä kappaleessa keskitymme Framerin käyttöön mikrointeraktioiden ja animoitujen siirtymien luomiseen. Käymme läpi kuinka luoda seitsemän hyödyllistä vuorovaikutusta prototyypeillesi.

Miksi pienet vuorovaikutukset tulisi prototyyppiä?

Sujuva liike, tilamuutokset ja hienovaraiset siirtymät auttavat käyttäjää ymmärtämään käyttöliittymän käyttöä antamalla hänelle palautetta tietyistä toiminnoista. Usein nämä siirtymät toistavat reaalimaailman analogeja (kuten kytkinohjaimen liukuminen) tai käyttävät yleisiä laitetoimintamalleja (kuten napauttamalla laajennettavaksi). Tässä opetusohjelmassa keskitymme vuorovaikutuksiin, jotka lisäävät käyttöliittymään viimeisen silauksen ohjaamaan ymmärrystä ja herättämään iloa käyttäjälle.

Katso alla olevia esimerkkejä. Suunnittelijat ympäri maailmaa luovat näitä mikro-vuorovaikutuksia useissa tuotteissa.

• 
• 
• 

Seitsemän prototyyppiä

Tässä opetusohjelmassa annan sinulle yleiskuvan jokaisesta mikrointeraktiosta ja joistakin koodinpätkistä. Käytämme useita erilaisia ​​tekniikoita, joten pystyt valitsemaan tuotteellesi parhaiten sopivan. Framer Studion sisällä ei ole mitään 'oikeaa' tapaa luoda mitään - kuten mainitsin edellisessä artikkelissani, Framer antaa sinulle paljon vapautta luoda haluamallasi tavalla.

Oletko nähnyt tällaisia ​​vuorovaikutuksia aiemmin? Toki sinulla on! Näet ne päivittäin älypuhelimellasi. On aika luoda oma.

1. Toimintopainike

Toimintopainike edustaa usein nykyisen näytön päätoimintoa. Joskus se sisältää useita toimintoja sisällä. Luomme vuorovaikutusta toista tapausta varten. Lataa toimiva prototyyppi täältä: https://framer.cloud/ShBnH

Vaihe 1: Luo kolme ympyrän muotoista painiketta

Aloita luomalla yksi ympyrän muotoinen pääpainike, jonka sisällä on kuvake ja kaksi pienempää nappia pääpainikkeen alle. Älä unohda merkitä kaikkia näitä tasoja interaktiivisiksi suunnittelutilassa (kohdeindikaattorilla).

Vaihe 2: Suunnittele kaksi tilaa kaikille tasoille

Luo tasoille kaksi erilaista tilaa. Käytä alla olevaa koodia saadaksesi pienemmät painikkeet liikkumaan pääpainikkeen yläpuolelle ja kiertämään kuvaketta 45 °:

button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Vaihe 3: Lisää tapahtuma

Tämän prototyypin animoimiseksi meidän on lisättävä tapahtuma. Napauta toimintopainiketta napauttamalla kaikkien tasojen tiloja:

button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Vaihe 4: Kevään animaatio

Tässä vaiheessa animaatio näyttää hyvin mekaaniselta. Ihmisen kosketuksen lisäämiseksi lisäämme kevätanimaation kaikille tasoille:

button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Toimintopainike on käyttövalmis!

2. Interaktiiviset kytkimet

Seuraavien vaiheiden avulla voit luoda oman vuorovaikutuksen. Lataa toimiva prototyyppi täältä: https://framer.cloud/ieypV

Vaihe 1: Suunnittele kytkinleikkipaikka

Tarvitset vain kaksi asiaa: itse kytkimen, joka sisältää vähintään kaksi tasoa (tausta ja piste), ja joidenkin kerrosten animoimiseksi kytkimen käytön jälkeen.

Vaihe 2: Luo tiloja

Muistatko ensimmäinen artikkeli kuinka suunnitella tiloja suoraan Framer Studiossa? Suunnittele tilasi haluamallasi tavalla tai käytä asetuksiani:

dot.states.a = x: 50 backgroundColor: 'rgba(5,106,161,1)' switch_bg.states.a = backgroundColor: 'rgba(0,136,205,1)' icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Vaihe 3: Lisää tapahtuma

Jotta prototyyppi toimisi, joudumme lisäämään kytkimeen tapahtuman. Napauttamalla kytkintä muutamme kaikkien tasojen tilaa:

switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Vaihe 4: Säädä ajoitusta

Tee kaikesta luonnollisempaa säätämällä kaikkien tilojen aika ja viive:

dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Nyt prototyyppimme on valmis!

3. Luettelokohteen pyyhkäisytoiminto

Tämä on tyypillinen vuorovaikutus kohteiden poistamiseen, arkistointiin tai tallentamiseen luettelosta. Pyyhkäise vasemmalle tai oikealle, ja kohde tyhjennetään. Lataa prototyyppi täältä: https://framer.cloud/rzMWP

Vaihe 1: Luo prototyyppi suunnittelutilassa

Voit käyttää omaa suunnittelua, jos haluat. Sinun on vain säilytettävä sama kerrosten rakenne. Kuten yllä olevasta kuvasta näet, kaikkien luettelokohteiden alla on “Kumoa” -painike.

Vaihe 2: Tee kohteista vedettäviä

Yksinkertaisuuden vuoksi luomme vuorovaikutuksen vain ensimmäiselle luettelokohteelle. Tee ensin luettelokohde vedettäväksi: item.draggable = true.

Lukitse sitten pystyakseli: item.draggable.vertical = false.

Määritä vedettävän alueen rajoitukset: item.draggable.constraints

Ja lopuksi aseta koon nimikkeen koko: size: item.

Näin koko koodi näyttää:

item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Nyt voit pyyhkäistä vasemmalle ja oikealle, ja kohde palaa aina alkuperäiseen asentoonsa.

Vaihe 3: Luo tila

Luo seuraavaksi luettelokohteen tila, kun se poistetaan. Siirsin sen yksinkertaisesti ruudun ulkopuolelle käyttämällä x-akselia.

item.states.a = x: -360

Vaihe 4: Vaihda tilaa pyyhkäisyn jälkeen

Lopuksi meidän on luotava liipaisin vuorovaikutuksen aloittamiseksi. Kun vedämme kohteen näytön vasemmalle puolelle, se on poistettava. Koodi näyttää tältä:

item.onMove -> if item.x <-70 item.stateCycle('a')

Tässä tapauksessa käytämme ”jos” -lausetta. Yllä oleva koodi sanoo periaatteessa, että kun siirrämme tuotekerrosta yli 70 kuvapistettä, vaihdamme alkion tilaksi tilaksi 'a'. Voit lukea, jos Framer Studio -dokumentaatiossa olevat lauseet: https://framer.com/getstarted/programming/#conditional

Vaihe 5: Kumoa toiminto napautuksen jälkeen

Olemme melkein valmiit tähän vuorovaikutukseen. Ainoa asia on kumota tämä toiminto:

item_bg.onTap -> item.stateCycle('default')

Sinun tulisi tuntea tämä koodi edellisestä opetusohjelmasta.

Vaihe 6 (valinnainen): Säädä animaation ajoitusta

Halutessasi voit säätää animaation ajoitusta:

item.animationOptions = time: 0.75 curve: Spring

4. Nappikuormaaja

Tämä on erittäin hyödyllinen vuorovaikutus toiminnoissa, jotka edellyttävät käyttäjän lataamista tai odottamista. Kun luomme tämän vuorovaikutuksen, opit hallitsemaan monia animaatioita, jotka tapahtuvat yksitellen. Lataa prototyyppi täältä: https://framer.cloud/FxmHN

Vaihe 1: Luo prototyyppi suunnittelutilassa

Luo yksinkertainen painike, jossa on neljä alikerrosta: edistymispalkki ja kolme kuvaketta eri tiloille. Suunnittelin painikkeeni, jonka latauskuvake oli näkyvissä, etenemispalkki alhaalla, leveys 0, ja kaksi muuta piilotettua kuvaketta.

Vaihe 2: Lisää tapahtuma

Koko tämä prototyyppi voidaan tehdä kirjoittamatta yhtä riviä koodia, vain käyttämällä Framerin autokooditoimintoja.

Lisää ensin tapahtuma. Käynnistämme koko vuorovaikutuksen napauttamalla nappikerrosta:

Tämä on koodi, jonka Framer kirjoitti sinulle:

button.onTap (event, layer) ->

Vaihe 3: Suunnittele animaatiot

Kaikkien animaatioiden suunnittelussa käytämme Framerin autokooditoimintoja:

Olen suunnitellut neljä animaatiota eri ajoituksella:

• Ensimmäinen animaatio muuttaa etenemispalkin leveyttä.
• Toinen on latauskuvakkeen piilottaminen läpinäkymättömyydellä.
• Kolmas pyörii ja näyttää latauskuvakkeen.
• Viimeinen näyttää ja skaalaa tarkistuskuvaketta.

Tässä on koodi, jonka Framer kirjoitti jokaiselle näistä animaatioista:

# change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Vaihe 4: Nollaa animaation lataaminen

Kuten olet ehkä huomannut, emme piilottaneet latauskuvaketta animaation valmistuttua. Viimeistele tämä prototyyppi käynnistämällä toinen animaatio käyttämällä tätä tapahtumaa: load.onAnimationEnd ->

load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Päivitä vetämällä

Lähes jokainen tuote, jonka sisällä on luettelo, käyttää tällaista vuorovaikutusta. Käyttäjä vetää koko luettelon alas päivittääksesi sen. Se on erittäin helppo luoda. Lataa prototyyppi täältä: https://framer.cloud/DgMDw

Vaihe 1: Suunnittele yksinkertainen luettelo päivityskuvakkeella

Voimme hypätä suoraan suunnittelutilaan. Tarvitsemme kahta asiaa: luettelon ja päivityskuvakkeen. Tärkeintä tässä on piilottaa päivityskuvake peittävyydellä ja laittaa se luetteloomme:

Vaihe 2: Luo vierityskomponentti

Haluamme tehdä luettelostamme vieritettävän. Voit tehdä tämän käyttämällä vierityskomponenttia ja lisäämällä siihen luettelotason:

scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Vaihe 3: Tee päivityskuvake näkyväksi

Luo kuvakkeelle yksinkertainen tila:

icon.states.a = opacity: 1

Vaihe 4: Lisää tapahtuma vetämisen jälkeen

Luettelomme on vieritettävissä juuri nyt. Tämä tarkoittaa, että kun vieritämme ylös- tai alaspäin, koko vierityssisältö liikkuu y-akselilla. Tämän tiedon avulla voimme luoda tapahtuman:

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a')

Jälleen käytämme ”jos” -lausetta. Jos luettelo vedetään alas (siirretään y-akselilla) yli 180 kuvapistettä, käynnistämme toiminnon. Tässä tapauksessa animoimme kaksi tasoa: luettelon ja päivityskuvakkeen.

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Käytämme “animoida” siirtämään luetteloa alaspäin 210 kuvapistettä ja kiertämällä päivityskuvaketta 360 °.

Vaihe 5: Nollaa kaikki tilat

Prototyyppi on melkein toimiva, mutta meidän on nollattava kaikki kerrokset päivitysanimaation jälkeen. Tätä varten käytämme tapahtumaa animaation päättymisen jälkeen:

icon.onAnimationEnd ->

Animoimme päivityskuvakkeen kiertämisen takaisin alkuperäiseen asentoonsa ja palautamme tilasyklin avulla luettelon ja kuvakkeen taustan tilan:

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle('default') icon.stateCycle('default')

Se siitä!

6. Vuorovaikutus

Oletko koskaan huomannut, että kun vedät kohdetta sovelluksen sisällä, itse tuotteella tapahtuu aina jotain? Joskus kohde kutistuu, ehkä muut kohteet ovat epätarkkoja tai peittävyys muuttuu. Oppitaan kuinka luoda tällainen vuorovaikutus. Lataa toimiva prototyyppi täältä: https://framer.cloud/YstiW

Vaihe 1: Suunnittele yksinkertainen ristikko laatoilla

Luo ruutujen ruudukko ja varmista, että ne ovat pääelementin sisällä.

Vaihe 2: Käytä ”for” -silmukkaa kohdistaaksesi kaikki laatat

“for loop ”saattaa kuulostaa pelottavalta, mutta se on todella yksinkertaista. Jos et tunne for silmukoita, voit ensin lukea hieman taustaa: https://framer.com/getstarted/programming/#loops-and-arrays

Käytämme for silmukka kohdistaa kaikki laatat ruudukon sisällä:

for item in grid.subLayers

Tällä yksinkertaisella koodirivillä kohdistat kaikki ruudukkokerroksen sisällä olevat kerrokset.

Vaihe 3: Tee laatat vedettäviksi

Tee jokaisesta ruudukon sisällä olevasta kohteesta vedettävä:

for item in grid.subLayers item.draggable = true

Vaihe 4: Suunnittele vetotila

Kaikilla kohteilla tulisi olla tila, kun niitä vedetään. Sinun on aloitettava koodista, mutta myöhemmin voit muokata tätä tilaa tasoeditorissa:

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Vaihe 5: Vedä tapahtumia

Meidän on luotava tapahtumia käynnistämään eri tilat, kun kohdetta vedetään. Ensimmäinen tapahtuma laukaisee toiminnon, kun alamme vetää:

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a')

Käytin this.bringToFront() varmistaaksesi, että kohde on aina muiden tasojen yläpuolella.

Toinen liipaisin palauttaa kohteen tilan:

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default')

Tässä vaiheessa meillä on toimiva prototyyppi.

Vaihe 6 (valinnainen): Pelaa ajastuksella

Vuorovaikutus tapahtuu aina aikajanalla. On hyvä säätää aikajanaa täydellisen vaikutuksen saavuttamiseksi:

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default') item.animationOptions = time: 0.3 curve: Spring

7. Useita “like” -painikkeita (edistynyt)

Tässä prototyypissä käytämme kehittyneempiä tekniikoita näyttämään sinulle erilainen tapa kohdistaa tasoja Framer Studiossa, joka rakentaa entistä reagoivampia vuorovaikutuksia lyhyemmällä ajanjaksolla. Jos et ole perehtynyt peruskoodaukseen, kehotan sinua lukemaan tämä artikkeli ensin: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Tätä vuorovaikutusta varten ohitamme suunnitteluosan ja käytämme prototyyppiä, jonka olen luonut nimenomaan tähän artikkeliin: https://framer.cloud/SZMCH

Vaihe 1: Luo taulukot

Katso kerrosten rakennetta Framer Studion sisällä:

Meillä on 'painike' 'rivin' sisällä 'luettelo' -ryhmässä. Luomme vuorovaikutuksen painikekerroksille, joten meidän on kohdistettava ne. Mutta ensin on löydettävä kaikki rivikerrokset ja laitettava ne taulukon sisään:

rows = list.children buttons = []

Olen myös luonut tyhjän taulukon kaikille painikkeen tasoille: buttons = [].

Vaihe 2: Lisää alikerros taulukkoon

Aloitetaan 'for loop':

for i in rows buttons.push(i.children[0])

Kerrosten lisäämiseksi taulukkoon käytämme: buttons.push(). Tämä tarkoittaa, että laitamme jokaisen 'rivi' -ryhmän ensimmäisen kerroksen taulukon sisään.

Vaihe 3: Luo tila ja tapahtuma

Nyt luomme tilan tykkää-painikkeillemme ja lisätään niihin tapahtuma napauttamalla:

for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Tämän tekniikan avulla voit luoda kaikki aiemmat prototyypit ja tehdä niistä monimutkaisempia.

Viimeinen huomautus

Kun luot mikrointeraktioita, keskityt pienimpiin yksityiskohtiin. Voit luoda animaatioita minkä tahansa toiminnan laukaisemana ja tehdä niistä täysin täydellisiä. Muista, että on olemassa satoja tapoja luoda sama prototyyppi, ja sinun tulisi käyttää menetelmää, joka sopii taitoihisi ja tuotesuunnittelusi tarpeisiin.

• • •

Lue lisää ApeeScape Design Blogista:

• eCommerce UX - yleiskatsaus parhaista käytännöistä (infografiikan kanssa)
• Ihmiskeskeisen suunnittelun merkitys tuotesuunnittelussa
• Parhaat UX-suunnittelijoiden salkut - inspiroivia tapaustutkimuksia ja esimerkkejä
• Heuristiset periaatteet mobiililiittymille
• Ennakoiva suunnittelu: Kuinka luoda maagisia käyttökokemuksia