Bruk Adobe XD til å lage mikrointeraksjoner

Sep 14, 2025

hvordan

[1. 3]

(Bildekreditt: Adobe)

Adobe XD kan hjelpe med prototyping - en av de viktigste prosessene i designens livssyklus, som spiller en viktig rolle i utviklingen ved å hjelpe designere og dev-lag med vedlikehold av arbeidsflyt. Det har vært noen store endringer i prototyping landskapet nylig: designere er bortskjemt for valg.

Akkurat som mange andre disipliner, er det ingen enkelt design og prototypingsverktøy som kan oppnå alt. Ulike stadier krever et unikt sett med verktøy. Borte er dagene da designere pleide å stole utelukkende på Photoshop og Sketch. Selv om de er gode brukerdesignverktøy, har de ikke mulighetene for hurtige brukerflytene og wireframes (se vår topp Wireframe verktøy for flere wireframing alternativer).

Nå med den økende mengden interaksjoner i design - som animasjoner, bevegelser og talekontroll - er det vanskelig å finne et verktøy som kan oppnå alle disse prototypingskapasitetene og fortsatt holde ting enkelt. Koding er en måte å skape disse interaksjonene, men det er tidkrevende. Heldigvis har Adobe XD kommet til redning ved å frigjøre en oppdatering til sitt prototypingsverktøy som inneholder en praktisk funksjon kalt "Auto Animate". Det er langt det største tillegget til det kraftige verktøyet.

Få Adobe Creative Cloud

Ideen her er enkel: Auto Animate gjør det mulig for designere å bygge interaktive prototyper med nedsenkende animasjoner ved å bare duplisere et artjerm eller endre egenskapene til et objekt. Disse egenskapene kan være noe, for eksempel dimensjonene, posisjonen til x og y, opasitet, rotasjon. Tidligere tilbød Adobe XD grunnleggende interaksjoner som glidende, trykk og oppløses.

Med tillegg av de nye funksjonene kan designere enkelt lage bevegelsesbaserte animasjoner, som igjen vil hjelpe brukeren til å skape mentale modeller av informasjonsflyt når de navigerer mellom flere skjermer. Dette kan også brukes til å lage visuelle hierarkier, CTA eller meldinger som falmer inn eller ut av skjermen midlertidig.

I denne artikkelen vil jeg forklare hvordan du lager enkle mikroanimasjoner ved hjelp av denne nye Auto Animate-funksjonen i Adobe XD. Før vi begynner, er det noen ting å vurdere hvordan objekter må håndteres for auto animasjon:

Når et objekt eller et element ikke er på destinasjonsartordet, fyller den vanligvis når det forhåndsvises
Når et element ikke er tilstede i det første treningsplaten, har det en tendens til å falme inn
Koble alltid tennene når du er i prototype-modus, som vil skape interaksjonene
For å lage animasjoner, må du alltid sørge for at objekter og elementer har matchende navn i lagene og også navnet på gruppen de kan være i

Lag en statlig endring ved hjelp av Auto Animate

Adobe XD tutorial — Det kan høres enkelt, men du må begynne med to former (Bilde Kreditt: VAMSI Batchu)

La oss starte med å gjøre et enkelt eksempel på statlig endring ved hjelp av Auto Animate. I dette eksemplet er egenskapene som ville endres bredde, høyde og farge. For eventuelle auto animere overganger trenger du mer enn to typerbord.

På den første tavlen, tegne en form - i vårt eksempel er det et grønt rektangel på 500px x 200px. Dupliser denne tavle og velg rektangelet på den andre artbordet. Vi må endre egenskapene til rektangelet ved å øke bredden til 1000 og høyden til 500. Du kan også utføre ytterligere modifikasjoner som forandring av opaciteten til 50% eller lage fargen rosa.

Klikk nå på Prototype-fanen øverst til venstre. Velg den første treningsplaten og koble den til å bruke pilen til den andre andelen. Når du gjør dette, er det en interaksjonsfane til høyre for appen som kan brukes til å angi parametere som utløser, handling, destinasjon og lettelse. Hver parameter kan tilpasses etter dine behov. Det er fem typer trigger - inkludert trykk, dra og timet - som vil starte animasjonen.

Still inn fanen Handlings-fanen til Auto Animate, og fordi det bare er to tavler i vårt eksempel, angi destinasjonsfanen til Tavle 2. Det er også flere glatte overganger som kan velges og times. Klikk på Play-ikonet øverst til høyre for å se Auto Animate Gjør sin magi og animere rektangelet. Når det er mer enn to elementer som må endres samtidig, må du sørge for at navnene på disse elementene er de samme i begge tennene. Dette vil informere programmet om at disse to elementene trenger å være animert.

Utvid kort

La oss nå utvikle seg til et eksempel med mer interaktivitet og en som inneholder flere elementer. La oss begynne med å skape det første treningsplaten for dette, som består av et kort. Kortet vil ha elementer som en header, beskrivelse og en lenke på den nederste lesevisningshistorikken. Ved siden av linken vil det være et pilikon som vender nedover. Når brukeren klikker på lenken, åpnes kortet som en skuff for å vise tidligere oppføringer. Siden dette skjer på klikk / trykk-funksjonen, bør de forrige oppføringene ikke opprettes i den første treningsplaten.

Deretter kopierer vi dette artbordet og endrer noen få egenskaper på kortet. Den første tingen å gjøre er å øke høyden på det rektangulære kortet for å få det til å se ut som en utvidet tilstand. Overskriften og beskrivelsen nedenfor skal være uendret. Nå er det på tide å legge til disse oppføringene vi nevnte før.

Tenk deg at det er tre oppføringer for kortet. Hver oppføring har et oppføringsnavn, inngangsdato og en knapp som vist i hovedbildet. Du kan opprette en oppføring og duplisere det to ganger for å lage en gruppe oppføringer. Ordne dem som vist i hovedbildet og plasser teksten Vis historikkliste under disse oppføringene. Fordi det er i en utvidet tilstand, roter du pilikonet slik at det vender oppover. Det er det. Du har fullført å sette opp artbordene.

For å lage animasjonen, gå til den første treningsplaten og klikk på fanen Prototype fra øverste venstre hjørne. Klikk nå Vishistorikk-lenken på den første treningsplaten og dra prototypen-lenken til den andre andelen. Dette gjør visningshistorikken lenke avtrekkeren. Endre egenskapene i fanen Interaksjon til høyre ved å sette avtrekkeren for å trykke og Handling til Auto Animate. Test det for å se den glatte skuffen animasjonen. Gjør endringer i det lette alternativet i fanen Interaksjon Hvis du finner animasjonen, er ikke jevn nok.

Gjør dra animasjoner

Dra er en av de vanligste animasjonene når det gjelder mobile interaksjoner. La oss prøve et enkelt eksempel med to typerbord. For den første tavlen, start ved å lage en sirkel av hvilken som helst farge og dimensjoner. Opprett nå et rektangel med en bredde på 250px og en høyde på 25px. Dupliser dette rektangelet åtte ganger, opprettholder en plass på 20px mellom hver duplikat, slik at den skaper en stabel. Plasser sirkelen på toppen av det første rektangelet før du dupliserer denne tavlen.

Det er ikke mye igjen å gjøre for det andre artbordet. Bare reduser gapet mellom hver av de dupliserte rektanglene, så det føles som om det er komprimert. I likhet med den første treningsplaten, plasser sirkelen på toppen av det første rektangelet. Det endelige trinnet er å prototype det ved å klikke på fanen Prototype fra øverste venstre hjørne. Klikk nå på sirkelen fra den første treningsplaten og gjør den til en utløser. Akkurat som de forrige eksemplene, endrer du egenskapene i fanen Interaksjon til høyre ved å sette avtrekkeren for å dra og handle til Auto Animate. Når du klikker på avspillingsknappen for å forhåndsvise animasjonen, kan du se en jevn handling som om blokken blir komprimert av sfæren.

Opprett uendelig laster animasjoner

En av de beste funksjonene i Adobe XD er at Auto Animate kan brukes mellom flere typerbord. For å gjøre en slik animasjon, trenger du bare å gjøre enkle endringer i en av egenskapene.

La oss lage en lasting animasjon der et batteri blir fylt opp. Nøkkelen til å få dette perfekt er å lage den første tavlen riktig. Den første artbordet har en batteriplassholder som vist på bildet. Den kan opprettes ved hjelp av rektangulære former. For det faktiske batteriet i stedetholderen, bør den første tavlen være tom (som representerer 0%). Dupliser dette tavle og opprett et grønt rektangel med en 50px høyde som passer perfekt inne i stedetholderen. Lag lignende duplikater slik at høyden på batteriet i det tredje tavlen økes med 50px og så videre. Fortsett til tavlen er fullstendig fylt.

Nå må vi lage en uendelig sløyfe mellom disse tavlene, slik at det skaper en synkron lastingsanimasjon. For dette, gå til prototypemodus, klikk på den første treningsplaten og dra prototypilen til den andre andelen. Endre egenskapene i interaksjonspanelet, ved å sette avtrekkeren til tid, og sett deretter forsinkelsen til 0 sekunder, som vil animere til det andre annendretten når det forhåndsvises. Utfør de samme endringene til alle tavler, ved å koble den andre til den tredje og så videre før du endelig kobler den siste artbordet til den første. Vi har vellykket koblet alle tavlene for å danne en uendelig sløyfe. Endre lette og varighetsinnstillingene i henhold til kravet ditt for å få lasting jevnere.

Selv om det er tonnevis av variasjoner som kan prøves med Adobe XD, er de nåværende funksjonene til verktøyet begrenset og blir fortsatt vanlige oppdatert av utviklingslaget. Så, sammenlignet med verktøy som prinsipp, kan du føle deg som om XD har et begrenset verktøysett. Adobe har imidlertid gjort en utmerket jobb med å gjøre verktøyet enkelt å lære og bruke. Å skape komplekse interaksjoner kan ta litt tid og krefter, men de er helt oppnåelige ved hjelp av XDs Auto Animate-funksjon. Nøkkelen er å forstå grunnleggende om å flytte objekter, endre størrelsen på dem, legge til lag og bruke utløsere.

Denne artikkelen oppstod opprinnelig utgave 326 av nett , verdens ledende magasin for webdesignere og utviklere. Kjøpe utgave 326. eller Abonner her .

Les mer:

40 Brilliant Wordpress Tutorials
11 fantastiske JavaScript-rammer
Er Neumorphism virkelig 2020s heteste trend?

Bruk Adobe XD til å lage mikrointeraksjoner

Lag en statlig endring ved hjelp av Auto Animate

Utvid kort

Gjør dra animasjoner

Opprett uendelig laster animasjoner

hvordan - Mest populære artikler

Krita Tutorials: Lær det grunnleggende om den digitale kunstprogramvaren

6 Hurtige tips for å forbedre børstepennens tegning

Hvordan legge til energi i livet tegninger

Bygg en AI-Powered Chatbot

Enkel posing teknikker for 3D-modeller

Hvordan lage et digitalt oljemaleri ved hjelp av Artrage

Lag realistiske planter i kino 4d

Hemmeligheten til å male som Monet

Kategorier