Adobe XD: Auto-animate-ominaisuuden käyttäminen

Sep 10, 2025

Miten tehdään

(Kuva luotto: Adobe)

Huolimatta sen myöhästymisestä prototyyppiseen peliin, Adobe XD on yksi parhaista ja nopeimmista langallisista ja prototyyppien työkaluista. Prototyyppi on keskeinen prosessi suunnittelun elinkaaren elinkaaressa, mutta sillä on myös tärkeä rooli kehityksessä auttamalla suunnittelijoita ja dev-tiimiä työnkulun ylläpitoon.

Suunnittelijoina me usein tarvitsemme paljon työkaluja käyttäjän työnkulun eri vaiheiden suunnitteluun. Adobe on aktiivisesti innovoiva ristiprofiilin työkalu, jota voidaan käyttää testaamaan malleja, luomalla kantoja, jotka luovuttavat tiedot Dev-tiimiin ja myös yhteistyökumppaneihin (ks. Wireframe Työkalut Lisää vaihtoehtoja).

Auto-animaatio-ominaisuus tarkoittaa, että Adobe XD: tä voidaan käyttää myös saumattomien mikro-vuorovaikutusten ja animaatioiden, kuten välineiden, kuten periaatteen mukaisesti. Tämä auttaa suunnittelijoita käsitelemään rikas prototyyppikokemuksia, laivalla, animaatiot mobiilikarouseleille, edistymisindikaattoreita ja paljon muuta. Paras osa tästä ominaisuudesta on, että se on helppo oppia ja suorittaa.

Tässä artikkelissa selitän, miten voit luoda yksinkertaisia mikro-animaatioita automaattisen animaatioominaisuuden avulla. Tarkastelemme sekä gesture-pohjaisia että kosketusperusteisia vuorovaikutuksia.

Jos sinulla ei vielä ole Adobe XD: tä, katso miten Lataa Adobe XD Post, ja tarkista sitten suosikkimme Adobe XD-laajennukset .

01. Pyyhkäise eleitä lisäämään fav tai poista

Pyyhkäisevät vuorovaikutukset ovat yksi yleisimmin käytetyistä mikro-vuorovaikutuksista mobiilisovelluksissa. Tässä esimerkissä katsotaanpa musiikin soittolistaa. Ensimmäisen artikkelin osalta aiomme luoda soittolistan näytön viidellä laululla. Jokainen kappale on yksittäinen kortti ja olennaisesti kun jokainen kortti pyyhkäisee vasemmalle, sen pitäisi poistaa kappale soittolistalta. Kun kortti on pyyhkäisemällä oikeassa, sen pitäisi lisätä kappale jonoon.

Aloitetaan ja luovat ensimmäisen kortin. Voit lisätä perustietoja, kuten kappaleen nimen, taiteilijan nimen, kappaleen pituuden ja luokituksen. Ryhmitä kaikki nämä elementit yhdeksi kerrokseksi. Duplicate se kunnes viisi vastaavaa korttia tehdään. Voit muokata niitä makuunne mukaan.

Ensimmäisen kortin osalta - C1 - Aiomme lisätä vasemman pyyhkäisyn poistettavaksi. Joten, luodaan pieni neliö punaisella taustalla, lisää joitakin Poista teksti ja kuvake alla kuvatussa kuvakaappauksessa. Ryhmä kaikki nämä kohteet kerros nimeltä A1. Nyt yhdistyvät C1 ja A1 kerrokseksi L - niin, että A1 on oikealla puolella C1.

02. Luo toinen kortti

Toiselle kortille - C2 - aiomme lisätä lisää jonon oikeaan pyyhkäisytoimintaan samalla tavalla. Luo ryhmä A2, jossa on kuvake, teksti ja vihreä tausta. Lisää se ryhmän C2 vasemmalle vasemmalle ja luo yhdistetty kerros nimeltä L2. Nyt ensimmäinen artboard (S1) on valmis. Katsotaanko koko artboard kahdesti, kahteen valtioon - S2 ja S3. Käytämme S2: tä poistamaan pyyhkäisyn ja S3: n lisätäksesi jonon pyyhkäisemiseen. Jotta voimme tehdä, meidän on tehtävä muutoksia jokaiselle näistä ohjeista. Seuraavassa on molempien pyyhkimien asetukset:

● S1 - Vaihda A1: n ja A2 - 0%: n läpinäkyvyys ja järjestää L1, L2, jotta ne ovat keskipisteitä.

● S2 - Järjestä L1-kortti niin, että L1: n oikea reuna on kohdakkain muiden korttien kanssa. Muuta A2 - 0%: n opasiteetti.

● S3 - Järjestä L2-kortti niin, että L2: n vasen reuna on kohdakkain muiden korttien kanssa. Muuta A1 - 0%: n opasiteetti.

03. Animoi taidetarvikkeet

Nyt kun arvila on täysin perustettu, seuraava vaihe on animoida ne. Voit tehdä tämän siirtymällä prototyyppitilaan työkalun vasemmassa yläkulmassa. Napsauta S1-artboardissa kerroksessa L1 ja lisää vuorovaikutus työkalun oikealla puolella asettamalla liipaisinta vetämään, toiminnon automaattiseen animaatioon ja kohteeseen Art Board S2. Voit myös lisätä kevyitä asetusten perusteella. Testaa tämä vuorovaikutus klikkaamalla Toistopainiketta työkalun oikeassa reunassa. Napsauta S1-artboardissa kerroksessa L2 ja lisää samanlainen vuorovaikutus samoilla asetuksilla, mutta aseta tässä tapauksessa kohde S3: een. Tämä vuorovaikutus luo vasemman pyyhkäisyn.

04. Laajenna korttisi

Toinen vuorovaikutus, jota tarkastelemme, on yleisesti nähtävissä useimmissa sovelluksissa ja verkkosivustoissa, joissa olet käynyt luettelon tai tuotteiden luettelon kautta ja kun napsautat jotakin niistä, olet ottanut uuden sivun lisätietoja tuotteesta . Auto-animaatti tekee siitä erittäin yksinkertaisen animoida tällaista vuorovaikutusta. Tämän esimerkin osalta aloitamme luokaamme tuotekatalogi-sivun. Voit valita minkä tahansa tuotteen, esimerkiksi matkapuhelimen (joka tulee olemaan esimerkki), vaatteet jne. Ensimmäisen Artin (S1) luodaan otsikkopalkki hampurilaisvalikosta ja profiilikuvaketta.

05. Tee kuvia ja yksityiskohtia

Luo nyt otsikon tekstielementti luetteloiden määrästä. Jokaisesta tuotekortista meillä on yksi kuva, puhelimen nimi, hinta ja luokitukset. Voimme soittaa näihin kortteihin C1 - C6. Paras tapa tehdä tämä on luoda ensimmäinen kortti (C1) ja käyttää sitten hämmästyttävää ominaisuutta XD: n nimeltä Repeat Grid, joka löytyy työkalupaneelin oikeassa yläkulmassa. Tämän avulla voit kopioida kohteita helposti, pitämällä kohdistus ja etäisyys ehjänä. Tämän artikkelin asetus on valmis. Aiomme animoida toisen kortin, joten on tärkeää avata kyseisen kortin elementit, joten XD voi suorittaa automaattisen animaatin.

06. Suunnittele toinen artboard

Nyt päästä töihin toisella tasolla. Kopioi ensimmäisen artikkelin ja poistaa kortit C1, C3-C6. Aiomme käyttää olemassa olevaa korttia C2 rakentaaksesi tämän sivun, joten kerrokset ovat samat. Ensin laajenna kortin tausta siten, että se kattaa koko sivun otsikkopalkin alapuolella. Voimme nyt järjestää muut kohteet millään tavalla, jota haluamme - perusajatus on, että sen pitäisi olla erilainen kuin kortti oli artboard S1, koska se on silloin, kun näet siirtymisen. Tästä syystä kohdataan matkapuhelimen nimi 25px: iin ja tehdä sen rohkeaksi. Vastaavasti lisää hintansa kokoa ja aseta se mobiilimen alapuolelle. Seuraava on tärkeä osa - matkapuhelimen kuva. Sinun on lisättävä sen kokoa merkittävästi ja kohdista se myös keskelle.

07. Käytä viimeistelyä kosketukset

Siitä kaikki ylös ja viimeistelemään suunnittelu, järjestä luokitukset ja tähdet kaiken ja vasemmalle. Koska tämä Artboard edustaa tuotteen yksityiskohtaista versiota, voit nyt sisältää lisätietoja puhelimesta, kuten muistista, puhelimen käytettävissä olevista väreistä, puhelimitse ja niin edelleen asetusten perusteella. Kaikki muu seuraa, kun selaat artboardia. Voit myös muuttaa hampurilaisen otsikkokuvaketta, jotta käyttäjä voi palata edelliseen artikkeliin S1. Muista muuttaa kuvakkeen nimeä vastaamaan kuvaketta ensimmäisessä artikkelissa.

08. Luo mikro-vuorovaikutus

Mennään prototyyppitilaan nyt luomaan mikro-vuorovaikutus. Voit tehdä tämän valitsemalla kortin C2-kortin S1 ja vedä sininen nuoli artboard S2: een. Aseta oikeanpuoleisen vuorovaikutuspaneeliin liipaisimen napautukseksi, toiminto automaattisena animaationa ja määränpäänä S2: ksi. Siksi pehmeämpi vuorovaikutus on hyvä mennä helposti helpottamaan ja aikaa 0,4 tai 0,6 sekuntia. Napsauta Art Board S2: n takaa arrow -kuvaketta ja vedä nuoli S1. Voit käyttää samoja asetuksia, jotta se olisi yhdenmukainen. Napsauta nyt S1 ja toista prototyyppi nähdäksesi taikuuden. Huomaat sileä animaatio, kun kortti C2 on tapoitu. Säädä helpottavat asetukset animaation tasaisemmaksi.

09. Mene perusasioiden ulkopuolelle

Sinulla on nyt perusajatusta siitä, miten voit luoda yksinkertaisia vuorovaikutuksia. Voit myös kokeilla automaattista animaatiota muuttamalla elementtien, koon ja muotojen värit nähdäksesi sileät siirtymät useiden arvion välillä. Sen lisäksi, että napauttamalla ja vetämällä laukaisee, on muita laukaisimia, joita suunnittelijat voivat kokeilla, kuten näppäimistönäppäimillä ja GamePad-näppäimillä, jotta voit liittää prototyyppejä tietyllä avaimella. On myös tila, jossa voit luoda ja suunnitella äänen prototyyppejä Alexa, Siri ja niin edelleen, jossa voit määrittää lauseita ja puhua heitä saadaksesi erityisiä vastauksia.

Lue lisää:

The Paras verkkosivujen rakentajat
Adobe XD-pikakuvakkeet sinun pitäisi tietää (mutta luultavasti ei)
Rakenna prototyyppejä Adobe XD: llä

Adobe XD: Auto-animate-ominaisuuden käyttäminen

01. Pyyhkäise eleitä lisäämään fav tai poista

02. Luo toinen kortti

03. Animoi taidetarvikkeet

04. Laajenna korttisi

05. Tee kuvia ja yksityiskohtia

06. Suunnittele toinen artboard

07. Käytä viimeistelyä kosketukset

08. Luo mikro-vuorovaikutus

09. Mene perusasioiden ulkopuolelle

Miten tehdään - Suosituimmat artikkelit

Luo mukautettu slack bot

Kuinka luoda 3D-skannaus todellisuuden kaappauksella

Miten rakentaa bloggauspaikka Gatsbyn kanssa

14 ZBRUSH WORKFLOW Vihjeitä

Luo interaktiivinen parallax-kuva

Kuinka luoda aito manga-sarjakuva

Kuinka suunnitella reagoivia ja laitteiden agnostisia muotoja

Miten työskennellä HTML-videota

Luokat