Adobe XD: Sådan bruges den auto-animerede funktion

Sep 17, 2025

hvordan

(Billedkredit: Adobe)

På trods af sin sene adgang til prototypingspillet er Adobe XD en af de bedste og hurtigste wireframing og prototyping værktøjer til rådighed. Prototyping er en nøgleproces i designlivscyklusen, men spiller også en afgørende rolle i udviklingen ved at hjælpe designere og dev teams med workflow vedligeholdelse.

Som designere har vi ofte brug for mange værktøjer til at designe de forskellige faser af brugeroplevelsen Workflow. Adobe er aktivt innovation af et tværplatformværktøj, der kan bruges til testdesign, hvilket skaber wireframes, afleverer specs til dev teamet og også samarbejdsdesign (se vores liste over WireFrame Tools. for flere muligheder).

Den auto-animerede funktion betyder, at Adobe XD også kan bruges til at skabe sømløse mikrointeraktioner og animationer som værktøjer som princip. Dette hjælper designere til at lave rige prototypeoplevelser, fra onboardingstrømme, animationer til mobile karruseller, fremskridt indikatorer og mere. Den bedste del om denne funktion er, at det er nemt at lære og udføre.

I denne artikel vil jeg forklare, hvordan du opretter enkle mikro animationer ved hjælp af den automatiske animerede funktion. Vi vil se på både gestusbaserede og tap-baserede interaktioner.

Hvis du ikke har Adobe XD endnu, se vores Sådan Download Adobe XD. post, og tjek derefter vores favorit Adobe XD-plugins. .

01. Strygbevægelser for at tilføje til fav eller slet

Swipe-interaktioner er en af de mest almindeligt anvendte mikrointeraktioner på mobile apps. For dette eksempel, lad os se på en musikafspilningsliste. For det første Artboard skal vi oprette en afspilningsliste skærm med fem sange i den. Hver sang er et individuelt kort og i det væsentlige når hvert kort swiped venstre, skal det fjerne sangen fra afspilningslisten. Når et kort swiped rigtigt, skal det tilføje sangen til køen.

Lad os komme i gang og oprette det første kort. Du kan tilføje grundlæggende detaljer som navnet på sangen, navnet på kunstneren, længden af sangen og bedømmelsen. Grupper nu alle disse elementer i et enkelt lag. Duplikere det indtil fem af de tilsvarende kort er lavet. Du kan redigere dem baseret på din smag.

For det første kort - C1 - vil vi tilføje en venstre swipe for at slette handling. Så lad os oprette en lille plads med en rød baggrund, tilføj nogle slet tekst og et ikon som vist i skærmbilledet nedenfor. Gruppe alle disse varer i et lag kaldet A1. Kombiner nu C1 og A1 i et lag L - således at A1 er på højre side af C1.

02. Opret det andet kort

For det andet kort - C2 - vil vi tilføje en Tilføj til kø Højre-swipe-handling på en lignende måde. Opret en gruppe A2 med ikon, tekst og grøn baggrund. Tilsæt det til venstre for gruppen C2 og lav et kombineret lag, der hedder L2. Nu er det første Artboard (S1) færdig. Lad os duplikere hele Artboard to gange, i to stater - S2 og S3. Vi bruger S2 til Slet Swipe og S3 for Tilføj til kø Stryg. For at gøre det skal vi foretage nogle ændringer for hvert af disse tavler. Her er indstillingerne for begge swipes:

● S1 - Skift opacitet af A1 og A2 til 0% og arrangere L1, L2, så de er centraljusterede.

● S2 - Arranger L1-kortet, så den højre kant af L1 er justeret med de andre kort. Ændre opaciteten af A2 til 0%.

● S3 - Arranger L2-kortet, så den venstre kant af L2 er justeret med de andre kort. Ændre opaciteten af A1 til 0%.

03. ANIZE ARTBOARDS

Nu da kunstværelserne er helt oprettet, er det næste skridt at animere dem. Du kan gøre dette ved at gå ind i prototype-tilstanden på den øverste venstre side af værktøjet. Nu på S1 Artboard, klik på laget L1 og tilføj en interaktion på højre side af værktøjet ved at indstille trigger for at trække, handling til auto-animeret og destination til Artboard S2. Du kan også tilføje lempelse baseret på dine præferencer. Test denne interaktion ved at klikke på afspilningsknappen øverst til højre på værktøjet. På S1 Artboard skal du klikke på laget L2 og tilføje en lignende interaktion ved hjælp af de samme indstillinger, men i dette tilfælde indstil destinationen til S3. Denne interaktion vil skabe venstre swipe.

04. Udvid dine kort

Den anden interaktion, vi ser på, ses almindeligvis på de fleste apps og websteder, hvor du går gennem en liste eller et produktkatalog, og når du klikker på en af dem, bliver du taget til en ny side med flere detaljer om produktet . Automatisk animere gør det super simpelt at animere denne form for interaktion. For dette eksempel skal vi starte med at oprette en produktkatalogside. Du kan vælge et produkt som f.eks. En mobiltelefon (som vil være vores eksempel), beklædning osv. For det første Artboard (S1), opret en header bar med en hamburger menu og et profilikon.

05. Arbejde på billeder og detaljer

Opret nu et header tekstelement med antallet af katalogartikler. For hvert af produktkortene skal vi have et billede, navnet på telefonen, prisen og bedømmelserne. Vi kan kalde disse kort C1 til C6. Den bedste måde at gøre dette på er at oprette det første kort (C1) og derefter bruge en fantastisk funktion af XD kaldet Gentag Gitter, som findes øverst til højre på værktøjspanelet. Dette gør det muligt at kopiere genstande med lethed, holde justeringen og afstanden intakt. Opstillingen af dette tegnebræt er færdig. Vi vil animere det andet kort, så det er vigtigt at udgrave elementerne på det kort, så XD kan udføre auto-animeret.

06. Design det andet Artboard

Nu for at komme på arbejde på det andet Artboard. Duplikere det første tegnebræt og slette kort C1, C3-C6. Vi skal bruge det eksisterende kort C2 til at opbygge denne side, så navnene på lagene er de samme. Først skal du udvide baggrunden for kortet, så det dækker hele siden under headerbaren. Vi kan nu arrangere de andre varer på nogen måde, som vi ønsker - den grundlæggende idé er, at det skulle være anderledes end, hvordan kortet var i Artboard S1, fordi det er, når du kan se overgangen. Af den grund, lad os støde på mobilens navn til 25px og gøre det modigt. Tilsvarende øge størrelsen af prisen og læg den under mobilnavnet. Næste er den vigtige del - billedet af mobiltelefonen. Du skal øge sin størrelse betydeligt og også justere den i midten.

07. Anvend efterbehandlingerne

At rydde alt op og færdiggøre designet, arrangere ratings og stjernerne under alt og til venstre. Da dette Artboard repræsenterer den detaljerede version af produktet, kan du nu indeholde yderligere oplysninger om telefonen som hukommelse, de tilgængelige farver på telefonen, tilbehør, der gives med telefonen og så videre, baseret på dine præferencer. Alt andet vil følge, når du ruller tavlen. Du kan også ændre Hamburgerens overskriftsikon, for at give brugeren mulighed for at gå tilbage til det forrige Artboard S1. Husk at ændre navnet på ikonet for at matche ikonnavnet i det første tavle.

08. Opret mikro-interaktionen

Lad os gå til prototype-tilstanden nu for at skabe mikro-interaktionen. For at gøre dette skal du vælge kortet C2 i Artboard S1 og trække den blå pil til Artboard S2. I interaktionspanelet på højre side skal du sætte udløseren som tryk, handling som auto-animeret og destination som S2. For glattere interaktioner er det godt at gå med lette for at lette og en tid på 0,4 eller 0,6 sekunder. Klik på ikonet på bagsiden på Artboard S2 og træk pilen til S1. Du kan bruge de samme indstillinger for dette for at gøre det konsistent. Klik nu på S1 og afspil prototypen for at se magien. Du vil observere en jævn animation, når kortet C2 er tappet. Juster de lette indstillinger for at gøre animationen glattere.

09. Gå ud over det grundlæggende

Du har nu en grundlæggende ide om, hvordan du opretter enkle interaktioner. Du kan også prøve Auto ANIMATING ved at ændre farverne på elementer, størrelser og former for at se glatte overgange mellem flere tavler. Udover at trykke og trække udløsere er der andre udløsere, som designere kan eksperimentere med, f.eks. Ved hjælp af tastaturtaster og gamepad-nøgler til at udløse prototyper på et bestemt nøglehåndtag. Der er også en tilstand, hvor du kan oprette og designe stemmeprototyper til Alexa, Siri og så videre, hvor du kan tildele sætninger og tale dem for at få specifikke svar.

Læs mere:

Det Bedste Website Builders.
Adobe XD-genveje, du bør vide (men sandsynligvis ikke)
Byg prototyper med Adobe XD

Adobe XD: Sådan bruges den auto-animerede funktion

01. Strygbevægelser for at tilføje til fav eller slet

02. Opret det andet kort

03. ANIZE ARTBOARDS

04. Udvid dine kort

05. Arbejde på billeder og detaljer

06. Design det andet Artboard

07. Anvend efterbehandlingerne

08. Opret mikro-interaktionen

09. Gå ud over det grundlæggende

hvordan - Mest populære artikler

Sådan vælger du et websteds navn til din virksomhed

Cloud Storage til billeder og billeder: Sådan vælger du den bedste sky for dit arbejde

Byg terræn i Houdini 17

5 måder at øge dit websteds SEO

Tegn en dårlig røv Geisha

Mal et munch-stil portræt i Photoshop CC

Sådan forbedres udførelsen af e-handelswebsteder

Opret et responsivt instrumentbræt med FIGHA

Kategorier