Adobe XD: Slik bruker du den automatiske animale funksjonen

Sep 10, 2025

hvordan

[1. 3]

(Bildekreditt: Adobe)

Til tross for sin sen oppføring i prototyping spillet, er Adobe XD en av de beste og raskeste wireframing og prototyping verktøyene som er tilgjengelige. Prototyping er en nøkkelprosess i designens livssyklus, men spiller også en viktig rolle i utviklingen ved å hjelpe designere og dev-lag med vedlikehold av arbeidsflyt.

Som designere trenger vi ofte mange verktøy for å designe de ulike stadiene av brukeropplevelsesflyten. Adobe er aktivt å innovere et tverrplattformsverktøy som kan brukes til å teste design, lage wireframes, gi av spesifikasjoner til Dev-teamet og også samarbeidende design (se vår liste over Wireframe verktøy for flere alternativer).

Den auto-anime-funksjonen betyr at Adobe XD også kan brukes til å lage sømløse mikro-interaksjoner og animasjoner som verktøy som prinsipp. Dette hjelper designere til å lage rike prototypeopplevelser, fra ombordstrømmer, animasjoner for mobilkaruseller, fremdriftsindikatorer og mer. Den beste delen om denne funksjonen er at det er enkelt å lære og utføre.

I denne artikkelen vil jeg forklare hvordan du lager enkle mikroanimasjoner ved hjelp av den automatiske animere funksjonen. Vi vil se på både gesturbaserte og trykkbaserte interaksjoner.

Hvis du ikke har fått Adobe XD ennå, se vår hvordan Last ned Adobe XD. post, og sjekk ut vår favoritt Adobe XD-plugins .

01. Sveipningsbevis for å legge til fav eller slette

Swipe-interaksjoner er en av de mest brukte mikrointeraksjonene på mobilapps. For dette eksemplet, la oss se på en musikkspilleliste. For den første treningsplaten skal vi lage en spilleliste skjerm med fem sanger i den. Hver sang er et individuelt kort og i hovedsak når hvert kort er swiped igjen, bør det fjerne sangen fra spillelisten. Når et kort er swiped riktig, bør det legge til sangen i køen.

La oss komme i gang og lage det første kortet. Du kan legge til grunnleggende detaljer som navnet på sangen, navnet på kunstneren, lengden på sangen og vurderingen. Grupper nå alle disse elementene i et enkelt lag. Duplisere den til fem av de lignende kortene er laget. Du kan redigere dem basert på din smak.

For det første kortet - C1 - vi skal legge til en venstre sveipe for slette handling. Så, la oss lage et lite torg med en rød bakgrunn, legge til litt slett tekst og et ikon som vist i skjermbildet nedenfor. Grupper alle disse elementene i et lag kalt A1. Nå kombinerer C1 og A1 i et lag L - slik at A1 er på høyre side av C1.

02. Opprett det andre kortet

For det andre kortet - C2 - vi skal legge til et legg til køen rett sveipe handling på lignende måte. Opprett en gruppe A2 med ikon, tekst og grønn bakgrunn. Legg det til venstre for gruppen C2 og opprett et kombinert lag som heter L2. Nå er den første artbordet (S1) fullført. La oss duplisere hele tavlen to ganger, i to stater - S2 og S3. Vi skal bruke S2 for Slett Swipe og S3 for ADD TO QUEUE SWIPE. For å gjøre det må vi gjøre noen endringer for hver av disse tavlene. Her er innstillingene for begge swipes:

● S1 - Endre opaciteten til A1 og A2 til 0% og ordne L1, L2 slik at de er senterjustert.

● S2 - Ordne L1-kortet slik at høyre kant av L1 er justert med de andre kortene. Endre opaciteten til A2 til 0%.

● S3 - Ordne L2-kortet slik at den venstre kanten på L2 er justert med de andre kortene. Endre opaciteten til A1 til 0%.

03. Animere artbordene

Nå som artbordene er helt satt opp, er neste trinn å animere dem. Du kan gjøre dette ved å gå inn i prototypemodus på øverst til venstre på verktøyet. Nå på S1-artjernen, klikk på laget L1 og legg til en interaksjon på høyre side av verktøyet ved å sette trigger for å dra, handling til auto-animate og destinasjon til ArtBoard S2. Du kan også legge til lettelse basert på dine preferanser. Test denne interaksjonen ved å klikke på PLAY-knappen på toppen av verktøyet. På S1-artjernen klikker du på laget L2 og legger til en lignende interaksjon med de samme innstillingene, men i dette tilfellet angir destinasjonen til S3. Denne samspillet vil skape venstre sveip.

04. Utvid kortene dine

Den andre samspillet vi vil se på, er ofte sett på de fleste apper og nettsteder hvor du går gjennom en liste eller en produktkatalog, og når du klikker på en av dem, blir du tatt inn i en ny side med flere detaljer om produktet . Auto-animate gjør det super enkelt å animere denne typen interaksjon. For dette eksemplet, la oss starte med å opprette en produktkatalogside. Du kan velge et hvilket som helst produkt som for eksempel en mobiltelefon (som skal være vårt eksempel), klær, etc. For den første artbordet (S1), oppretter du en topptekst med en hamburger-meny og et profilikon.

05. Arbeid på bilder og detaljer

Nå, opprett et topptekstelement med antall katalogelementer. For hvert av produktene skal vi ha ett bilde, navnet på telefonen, prisen og karakterene. Vi kan ringe disse kortene C1 til C6. Den beste måten å gjøre dette på er å lage det første kortet (C1) og deretter bruke en fantastisk funksjon i XD kalt gjenta rutenett, som finnes øverst til høyre på verktøypanelet. Dette gjør at du kan duplisere gjenstander enkelt, og holde justeringen og avstanden intakt. Oppsettet av denne tavlen er fullført. Vi skal animere det andre kortet, så det er viktig å ungroup elementene på det kortet, så XD kan utføre auto-animate.

06. Design den andre artbordet

Nå for å komme på jobb på den andre andelen. Dupliserer de første trenings- og slettekortene C1, C3-C6. Vi skal bruke det eksisterende kortet C2 for å bygge denne siden, så navnene på lagene er de samme. For å utvide bakgrunnen til kortet slik at det dekker hele siden under overskriftslinjen. Vi kan nå arrangere de andre elementene på noen måte som vi ønsker - den grunnleggende ideen er at den skal være forskjellig fra hvordan kortet var i Tavle S1, fordi det er når du kan se overgangen. Av den grunn, la oss støte opp navnet på mobilen til 25px og gjøre den fet. På samme måte øk størrelsen på prisen og plasser den under mobilnavnet. Neste er den viktige delen - bildet av mobiltelefonen. Du må øke sin størrelse betydelig og også justere den i midten.

07. Bruk de ferdige detaljene

Å rydde alt opp og fullføre designet, ordne rangeringene og stjernene under alt og til venstre. Siden denne tavlen representerer den detaljerte versjonen av produktet, kan du nå inkludere tilleggsinformasjon om telefonen, for eksempel minne, tilgjengelige farger på telefonen, tilbehør gitt med telefonen og så videre, basert på dine preferanser. Alt annet vil følge når du ruller på tavlen. Du kan også endre overskriftsikonet til hamburgeren, slik at brukeren kan gå tilbake til forrige tavle S1. Husk å endre navnet på ikonet for å matche ikonavnet i den første treningsplaten.

08. Lag mikro-interaksjonen

La oss gå til prototypemodus nå for å lage mikro-interaksjonen. For å gjøre dette, velg kortet C2 i Tavle S1 og dra den blå pilen til tavlen S2. I interaksjonspanelet på høyre side, sett utløseren som trykk, handling som auto-animasjon og destinasjon som S2. For jevnere interaksjoner er det godt å gå med letthet for lettelse og en tid på 0,4 eller 0,6 sekunder. Klikk på Back Arrow-ikonet på Artboard S2 og dra pilen til S1. Du kan bruke de samme innstillingene for dette for å gjøre det konsistent. Klikk nå på S1 og spill prototypen for å se magien. Du vil observere en jevn animasjon når kortet C2 er tappet. Juster de lettende innstillingene for å gjøre animasjonen jevnere.

09. Gå utover det grunnleggende

Du har nå en grunnleggende ide om hvordan du lager enkle interaksjoner. Du kan også prøve Auto Animating ved å endre fargene på elementene, størrelsene og former for å se glatte overganger mellom flere typerbord. I tillegg til å trykke og dra utløsere, finnes det andre utløsere at designere kan eksperimentere med, for eksempel å bruke tastaturnøkler og gamepad-tastene for å utløse prototyper på en bestemt tastekran. Det er også en modus der du kan opprette og designe taleprototyper til Alexa, Siri og så videre, hvor du kan tilordne setninger og snakke dem for å få spesifikke svar.

Les mer:

De Beste nettstedbyggere
Adobe XD-snarveiene du burde vite (men sannsynligvis ikke)
Bygg prototyper med Adobe XD

Adobe XD: Slik bruker du den automatiske animale funksjonen

01. Sveipningsbevis for å legge til fav eller slette

02. Opprett det andre kortet

03. Animere artbordene

04. Utvid kortene dine

05. Arbeid på bilder og detaljer

06. Design den andre artbordet

07. Bruk de ferdige detaljene

08. Lag mikro-interaksjonen

09. Gå utover det grunnleggende

hvordan - Mest populære artikler

Hvordan kode Smart Text Effects med CSS

En veiledning til Googles skyvisjon

Lag et tegn med en sterk pose i Photoshop

Hvordan blande en Gouache Palette

15 Fantasy Portrait Tips

Hvordan skulptur i kino 4d

Mal en episk New York Scene

Hvordan male et levende floral stilleben

Kategorier