Adobe XD: n avulla voit luoda mikro-vuorovaikutuksia

Sep 13, 2025

Miten tehdään

(Kuva luotto: Adobe)

Adobe XD voi auttaa prototyyppiä - yksi tärkeimmistä prosesseista suunnittelun elinkaaren, jolla on keskeinen rooli kehityksessä auttamalla suunnittelijoita ja dev joukkueita työnkulun ylläpitoon. Prototyyppausmaisemassa on ollut joitain merkittäviä muutoksia äskettäin: suunnittelijat ovat pilaantuneet valinta.

Aivan kuten monet muut tieteenalat, ei ole yksittäistä muotoilua ja prototyyppistä työkalua, joka voi saavuttaa kaiken. Eri vaiheet vaativat ainutlaatuista työkaluja. Mennyt ovat päivät, jolloin suunnittelijat ovat käyttäneet luottaa yksinomaan Photoshopiin ja Sketchiin. Vaikka ne ovat suuria UI-suunnittelutyökaluja, heillä ei ole valmiuksia nopeille käyttäjävirroille ja Wireframeille (ks Wireframe Työkalut Lisää langallisia vaihtoehtoja).

Nyt kasvavilla vuorovaikutuksilla malleissa - kuten animaatiot, eleet ja ääniohjaus - on vaikea löytää työkalu, joka voi saavuttaa kaikki nämä prototyyppiset ominaisuudet ja edelleen pitää asiat yksinkertaisina. Koodaus on yksi tapa luoda nämä vuorovaikutukset, mutta on aikaa vievää. Onneksi Adobe XD on tullut pelastamiseen vapauttamalla päivitys prototyyppiin työkaluun, joka sisältää kätevän ominaisuuden nimeltä "Auto Animate". Se on ylivoimaisesti suurin lisäys tehokas työkalu.

Hanki Adobe Creative Cloud

Ajatus tässä on yksinkertainen: Auto Animate antaa suunnittelijoille mahdollisuuden rakentaa interaktiivisia prototyyppejä, joissa on impersiivisiä animaatioita yksinkertaisesti kopioimalla artboard tai muokkaamalla esineen ominaisuuksia. Nämä ominaisuudet voivat olla mitä tahansa, kuten Mitat, X: n ja Y: n, läpinäkyvyyden, pyörimisen sijainnin. Aiemmin Adobe XD tarjosi vuorovaikutusta, kuten liukuvaa, työntöä ja liukenemista.

Uusien ominaisuuksien lisääminen suunnittelijat voivat helposti luoda liikepohjaisia animaatioita, jotka puolestaan auttavat käyttäjää luomaan henkisiä tietovirtoja, kun ne navigoidaan useiden näytön välillä. Tätä voidaan käyttää myös visuaalisten hierarkioiden, CTA: n tai viestien luomiseen, jotka häivyvät tilapäisesti näytöllä tai ulos.

Tässä artikkelissa selitän, miten luoda yksinkertaisia mikro-animaatioita käyttämällä tätä Adobe XD: n uutta automaattista animaatioominaisuutta. Ennen kuin aloitamme, on olemassa muutamia asioita harkita, miten esineitä on käsiteltävä auto-animaatiolle:

Kun esine tai elementti ei ole kohde-artboardissa, se yleensä haalistuu esikatseksi
Kun elementti ei ole läsnä alkuperäisessä artikkelissa, se pyrkii haalistumaan
Käännä aina artboards kun olet prototyyppisessä tilassa, joka luo vuorovaikutusta
Animaatioiden luomiseen varmistaa aina, että esineet ja elementit ovat vastaavia nimiä kerroksissa ja myös ryhmän nimi, jonka ne voivat olla

Tee valtion muutos automaattisen animaatin avulla

Adobe XD tutorial — Se voi kuulostaa yksinkertaisesta, mutta sinun on aloitettava kahdella muodolla (Kuva luotto: VAMSI Batchu)

Aloitetaan tekemällä yksinkertainen esimerkki valtion muutoksesta automaattisen animaatin avulla. Tässä esimerkissä ominaisuudet, jotka muuttaisivat, ovat leveys, korkeus ja väri. Kaikki automaattiset animoivat siirtymät tarvitset enemmän kuin kaksi taidetta.

Alkuperäisessä artikkelissa piirrä muoto - esimerkissämme, se on 500px x 200px: n vihreä suorakulmio. Kopioi tämän artboardin ja valitse suorakulmio toisella tasolla. Meidän on muokattava suorakulmion ominaisuudet lisäämällä leveys 1000 ja korkeus 500: een. Voit myös suorittaa muita modifikaatioita, kuten läpikuultavuuden muuttaminen 50 prosenttiin tai väri vaaleanpunaiseksi.

Napsauta nyt vasemmassa yläkulmassa olevaa Prototype-välilehteä. Valitse ensimmäinen artboard ja liitä se nuolen käyttämällä toista artikkelia. Kun teet tämän, sovelluksen oikealla puolella on vuorovaikutus-välilehti, jota voidaan käyttää asettamaan parametreja, kuten liipaisinta, toimintaa, määränpäätä ja keventämistä. Jokainen parametri voidaan räätälöidä tarpeidesi mukaan. On viisi laukaisua - mukaan lukien napauta, vedä ja ajastettu - joka aloittaa animaation.

Aseta Toiminto-välilehti Oletus Auto Animate ja koska esimerkissä on vain kaksi artboardia, aseta kohde-välilehti artboardiin 2. On myös useita sileitä siirtymiä, jotka voidaan valita ja ajoitettu. Napsauta toistokuvaketta oikeassa yläkulmassa nähdäksesi Auto Animate Tee sen taika ja animoida suorakulmio. Kun on olemassa enemmän kuin kaksi elementtiä, jotka on vaihdettava samanaikaisesti, varmista, että näiden elementtien nimet ovat samat sekä artboardissa. Tämä ilmoittaa hakemuksesta, että nämä kaksi elementtiä on animoitu.

Laajenna kortteja

Nyt edistyminen esimerkkinä enemmän vuorovaikutteisemmalla ja se, joka sisältää useita elementtejä. Aloitetaan luomalla ensimmäisen artikkelin, joka koostuu kortista. Kortilla on elementtejä, kuten otsikkoa, kuvausta ja linkkiä alareunassa lukemisen katseluhistoriassa. Linkin vieressä on alaspäin nuolikuvaus alaspäin. Kun käyttäjä napsauttaa linkkiä, kortti avautuu kuin laatikko näyttää edelliset merkinnät. Koska tämä tapahtuu napsautuksella / napaustoiminnossa, edellisiä merkintöjä ei pitäisi luoda ensimmäisessä artikkelissa.

Seuraavaksi päätämme tämän artboardin ja muuta muutamia kortin ominaisuuksia. Ensimmäinen asia on lisätä suorakulmaisen kortin korkeutta, jotta se näyttäisi laajennetulta tilalta. Otsikko ja alla oleva kuvaus tulee olla muuttumaton. Nyt on aika lisätä kyseiset merkinnät ennen.

Kuvittele kortille kolme merkintää. Jokaisella merkinnällä on merkintänimi, syöttöpäivä ja painike pääkuvauksen mukaisesti. Voit luoda yhden merkinnän ja kopioida sitä kahdesti luodaksesi merkintöryhmän. Järjestä ne päärakennuksen mukaisesti ja aseta näkymähistorian tekstin linkki näiden merkintöjen alapuolelle. Koska se on laajennetussa tilassa, kierrä nuolikuvake siten, että se on ylöspäin. Se siitä. Olet suorittanut artboardsin määrittämisen.

Jos haluat luoda animaation, siirry ensimmäiseen artikkeliin ja napsauta PROTOTYPE-välilehteä vasemmassa yläkulmassa. Napsauta nyt ensimmäisessä artikkelissa olevaa Näytä historian linkkiä ja vedä prototyyppi-linkki toiseen artikkeliin. Tämä tekee näkymän historiasta liipaisimen. Muuta Ominaisuudet vuorovaikutus-välilehdessä oikealla asettamalla liipaisin napauttamalla ja toimimaan automaattiseen animaatioon. Testaa se sileä laatikko animaatio. Tee muutokset intervaction-välilehden helpottamaan vaihtoehtoa, jos löydät animaation, ei ole tarpeeksi sileä.

Tee vedä animaatioita

Vedä on yksi yleisimmistä animaatioista, kun kyseessä on liikkuvien vuorovaikutusten. Kokeile yksinkertainen esimerkki kahdesta taudasta. Ensimmäisen artikkelin osalta alkaa luomalla minkä tahansa värin ja mittojen ympyrän. Luo nyt suorakulmio, jonka leveys on 250px ja korkeus 25px. Duplicate tämä suorakulmio kahdeksan kertaa, ylläpitää 20px tilaa jokaisen kaksoiskappaleen välillä, jotta se luo pinon. Aseta ympyrä ensimmäisen suorakulmion päälle ennen kuin kopioit tätä artikkelia.

Toiselle tasolle ei ole paljon jäljellä. Yksinkertaisesti pienentää kukin päällekkäistä suorakulmiota, joten se tuntuu, että se pakataan. Samoin kuin ensimmäinen artboard, aseta ympyrä ensimmäisen suorakulmion päälle. Lopullinen vaihe on prototyyppi napsauttamalla Prototyyppi-välilehteä vasemmassa yläkulmassa. Napsauta nyt ympyrää ensimmäisestä artikkelista ja tee se liipaisimesta. Samoin kuin edelliset esimerkit, vaihda oikeanpuoleisen vuorovaikutuksen välilehden ominaisuudet asettamalla liipaisin vetämällä ja toimimaan automaattiseen animaatioon. Kun napsautat toistopainiketta esikatsella animaatiota, voit nähdä tasaisen toiminnan, ikään kuin lohko pakataan pallolla.

Luo ääretön kuormaimen animaatioita

Yksi Adobe XD: n parhaista ominaisuuksista on se, että automaattinen animaatio voidaan käyttää useiden ohjeiden välillä. Voit tehdä tällaisen animaation, sinun tarvitsee vain tehdä yksinkertaisia muutoksia johonkin kiinteistöön.

Luotaan lastausanimaatio, jossa akku täytetään. Avain saada tämä täydellinen on käsityö ensimmäinen artboard oikein. Ensimmäisessä artikkelissa on akun paikkamerkki, kuten kuvassa on esitetty. Se voidaan luoda suorakulmaisten muotojen avulla. Varsinainen akku paikkamerkin sisällä, ensimmäinen artboard on tyhjä (mikä edustaa 0%). Kopioi tämän artboard ja luo vihreä suorakulmio, jossa on 50px korkeus, joka sopii täydellisesti paikkamerkin sisälle. Luo samankaltaiset kaksoiskappaleet, joten kolmannen artboardin akun korkeus kasvaa 50px: llä ja niin edelleen. Jatka kunnes artilaat täytetään kokonaan.

Nyt meidän on luotava ääretön silmukka näiden ohjeiden välillä niin, että se luo synkronisen lastausanimaation. Siirry tähän Prototype-tilaan napsauttamalla ensimmäistä artikkelia ja vedä prototyyppi nuoli toiseen artikkeliin. Muuta kiinteistöjä vuorovaikutuspaneelissa asettamalla laukaisu aika ja asettamalla viive 0 sekunniksi, mikä animoi toiselle settälle esikatseltaan. Suorita samat muutokset kaikkiin artboardiin yhdistämällä toinen kolmanteen ja niin edelleen ennen viimeisen artikkelin yhdistämistä ensimmäiseen. Olemme onnistuneesti yhdistäneet kaikki artboardit muodostamaan ääretön silmukka. Muuta keventämistä ja kestoasetuksia vaatimuksen mukaan, jotta lastaaminen tasaisempi.

Vaikka on olemassa tonnia muunnelmia, joita voidaan kokeilla Adobe XD: n avulla, työkalun nykyiset ominaisuudet ovat rajoitettuja, ja kehitysryhmä päivitetään edelleen säännöllisesti. Joten, kun verrataan sellaisia työkaluja, kuten periaate, saatat tuntea kuin XD: llä on rajoitettu työkalu. Adobe on kuitenkin tehnyt erinomaisen työn, jossa työkalu on helppo oppia ja käyttää. Monimutkaisten vuorovaikutusten luominen voi kestää jonkin aikaa ja vaivaa, mutta ne ovat täysin saavutettavissa XD: n Auto Animate -ominaisuuden avulla. Avain on ymmärtää liikkuvien esineiden perusteet, koontaa ne, lisäämällä kerrosten ja laukaisurien avulla.

Tämä artikla ilmestyi alun perin asiasta 326 netto , maailman johtava aikakauslehti web-suunnittelijoille ja kehittäjille. Ostaa Julkaisu 326 tai Tilaa täältä .

Lue lisää:

40 Brilliant WordPress Tutorials
11 Amazing JavaScript -kehys
Onko neuumorfismi todella 2020-luvun kuumin trendi?

Adobe XD: n avulla voit luoda mikro-vuorovaikutuksia

Tee valtion muutos automaattisen animaatin avulla

Laajenna kortteja

Tee vedä animaatioita

Luo ääretön kuormaimen animaatioita

Miten tehdään - Suosituimmat artikkelit

Miten leijonan piirtäminen

Lisää digitaaliset värit lyijykynälle

Rakenna ristikkäiset mobiilisovellukset Googlen flutter

Lisää elävöitä öljymaalauksiin näillä huippuvihjeillä

Miten maalata fantasiaeläimiä

Kuinka luoda realistinen CG-kangas

Rakenna skaalautuvia reagoivia komponentteja

Kuinka saada lisää digitaalisista tekstuureista

Luokat