Brug Adobe XD til at oprette mikrointeraktioner

Sep 14, 2025

hvordan

(Billedkredit: Adobe)

Adobe XD kan hjælpe med prototyping - en af de vigtigste processer i design livscyklusen, som spiller en afgørende rolle i udviklingen ved at hjælpe designere og dev teams med workflow vedligeholdelse. Der har været nogle store ændringer i prototypingslandskabet for nylig: Designere er forkælet for valg.

Ligesom mange andre discipliner er der ikke noget enkelt design og prototyping værktøj, der kan opnå alt. Forskellige faser kræver et unikt sæt værktøjer. Borte er de dage, hvor designere plejede at stole udelukkende på Photoshop og Skitse. Selv om de er gode UI-designværktøjer, har de ikke mulighederne for hurtig brugerstrømme og wireframes (se vores top WireFrame Tools. for flere wireframing muligheder).

Nu med den voksende mængde interaktioner i designs - såsom animationer, gestus og talekontrol - det er svært at finde et værktøj, der kan nå alle disse prototypingskapaciteter og stadig holde tingene simple. Kodning er en måde at skabe disse interaktioner, men det er tidskrævende. Heldigvis er Adobe XD kommet til redning ved at frigive en opdatering til sit prototypingsværktøj, der indeholder en praktisk funktion kaldet 'Auto Anit'. Det er langt den største tilføjelse til det kraftfulde værktøjssæt.

Få Adobe Creative Cloud

Ideen her er enkel: Automatisk animere gør det muligt for designere at opbygge interaktive prototyper med fordybende animationer ved blot at duplikere et tegnebræt eller ændre egenskaberne af et objekt. Disse egenskaber kan være noget, såsom dimensionerne, positionen af x og y, opacitet, rotation. Tidligere tilbød Adobe XD grundlæggende interaktioner som glidende, skubbe og opløses.

Med tilføjelsen af de nye funktioner kan designere nemt oprette bevægelsesbaserede animationer, hvilket igen vil hjælpe brugeren med at skabe mentale modeller af informationsstrøm, når de navigerer mellem flere skærme. Dette kan også bruges til at skabe visuelle hierarkier, CTA'er eller meddelelser, der falder ind eller ud af skærmen midlertidigt.

I denne artikel vil jeg forklare, hvordan du opretter enkle mikro animationer ved hjælp af denne nye Auto Anit-funktion i Adobe XD. Før vi begynder, er der et par ting at overveje, hvordan objekter skal håndteres til Auto Animation:

Når et objekt eller et element ikke er på destinationsstyrken, falder det normalt ud, når det forhåndsvisning
Når et element ikke er til stede i det oprindelige tavle, har det tendens til at falme ind
Altid ledning af kunstkortene, når du er i prototype-tilstand, hvilket vil skabe interaktionerne
For at skabe animationer skal du altid sørge for, at objekter og elementer har matchende navne i lagene, og også navnet på den gruppe, de måtte være i

Lav en statsændring ved hjælp af Auto Anit

Adobe XD tutorial — Det kan lyde simpelt, men du skal starte med to former (Billedkredit: Vamsi batchu)

Lad os begynde med at gøre et simpelt eksempel på statsændring ved hjælp af Auto Anit. I dette eksempel er de egenskaber, der ville ændre sig, bredde, højde og farve. For eventuelle auto animerede overgange har du brug for mere end to tavler.

På det oprindelige Artboard skal du trække en form - i vores eksempel, det er et grønt rektangel på 500px x 200px. Duplikere dette tegnebræt og vælg rektanglet på det andet Artboard. Vi skal ændre egenskaberne af rektanglet ved at øge bredden til 1000 og højden til 500. Du kan også udføre yderligere modifikationer, som f.eks. Ændring af opacitet til 50% eller gør farvenrosa.

Klik nu på fanen Prototype i øverste venstre hjørne. Vælg det første Artboard og link det ved hjælp af pilen til det andet Artboard. Når du gør dette, er der en interaktionsfane til højre for appen, der kan bruges til at indstille parametre som udløser, handling, destination og lempelse. Hver parameter kan tilpasses efter dine behov. Der er fem typer af trigger - herunder tryk, træk og timet - det vil starte animationen.

Indstil handlingsfanen Standard for Auto Anit, og fordi der kun er to tavler i vores eksempel, skal du indstille destinationsfanen til Artboard 2. Der er også flere glatte overgange, der kan vælges og times. Klik på PLAY-ikonet øverst til højre for at se Auto Animate Gør det magiske og animere rektanglet. Når der er mere end to elementer, der skal ændres samtidigt, skal du sørge for, at navnene på disse elementer er de samme i begge håndværkere. Dette vil informere ansøgningen om, at disse to elementer skal animeres.

Udvide kort

Lad os nu gå videre til et eksempel med mere interaktivitet og en, der indeholder flere elementer. Lad os starte med at oprette det første tavle til dette, der består af et kort. Kortet vil have elementer som en header, beskrivelse og et link i bundens læsningshistorik. Ved siden af linket vil der være et pilikon vendt nedad. Når brugeren klikker på linket, åbner kortet som en skuffe for at vise tidligere poster. Da dette sker på klik- / trykfunktionen, bør de tidligere poster ikke oprettes i det første tavle.

Derefter duplikere dette Artboard og ændrer et par egenskaber af kortet. Den første ting at gøre er at øge højden af det rektangulære kort for at få det til at ligne en udvidet tilstand. Hovedet og beskrivelsen nedenfor skal være uændret. Nu er det tid til at tilføje de poster, vi nævnte før.

Forestil dig, at der er tre poster for kortet. Hver post har et indgangsnavn, indgangsdato og en knap som vist i hovedbilledet. Du kan oprette en post og duplikere det to gange for at oprette en gruppe af indgange. Arranger dem som vist i hovedbilledet og læg venligst visningshistoriktekstforbindelsen under disse poster. Fordi det er i en udvidet tilstand, drej pilikonet, så den vender opad. Det er det. Du har gennemført opsætning af Artboards.

For at oprette animationen skal du gå til det første Artboard og klikke på fanen Prototype fra øverste venstre hjørne. Klik nu på linket Vis History på det første Artboard og træk prototypeforbindelsen til det andet Artboard. Dette gør visningshistorikken linker udløseren. Skift egenskaberne i fanen Interaktion til højre ved at indstille udløseren for at trykke og handling for Automatisk ANIMATE. Test det for at se den glatte skuffe animation. Gør ændringer i den lette indstilling i fanen Interaktion, hvis du finder animationen ikke er glat nok.

Gør drag animationer

Træk er en af de mest almindelige animationer, når det kommer til mobile interaktioner. Lad os prøve et simpelt eksempel med to tavler. For det første tavle, start med at skabe en cirkel af enhver farve og dimensioner. Opret nu et rektangel med en bredde på 250px og en højde på 25px. Duplikere dette rektangel otte gange, opretholde et rum på 20px mellem hver duplikat, så det skaber en stak. Placer cirklen oven på det første rektangel, før du duplikerer dette tavle.

Der er ikke meget tilbage at gøre for det andet tavle. Du skal blot reducere kløften mellem hver af de duplicerede rektangler, så det føles, at det er komprimeret. Ligesom det første tavle skal du placere cirklen oven på det første rektangel. Det sidste trin er at prototype det ved at klikke på fanen Prototype fra øverste venstre hjørne. Klik nu på cirklen fra det første Artboard og gør det til en trigger. Ligesom de tidligere eksempler skal du ændre egenskaberne i fanen Interaktion til højre ved at indstille udløseren til at trække og handling for Automatisk ANIMATE. Når du klikker på afspilningsknappen for at forhåndsvise animationen, kan du se en glat handling som om blokken bliver komprimeret af kuglen.

Opret uendelige læsser animationer

En af de bedste funktioner i Adobe XD er, at Auto Anit kan anvendes mellem flere tavler. For at gøre en sådan animation skal du bare foretage enkle ændringer til en af ejendommene.

Lad os oprette en loading animation, hvor et batteri bliver fyldt op. Nøglen til at få dette perfekt er at håndværk det første kunstkort korrekt. Det første Artboard har en batteristyrholder som vist på billedet. Det kan oprettes ved hjælp af rektangulære former. For det egentlige batteri inde i pladsholderen skal det første tavle være tomt (hvilket repræsenterer 0%). Duplikere dette tavle og lav et grønt rektangel med en 50px højde, der passer perfekt inde i pladsholderen. Opret lignende duplikater, så batteriets højde i det tredje tegnebræt øges med 50px og så videre. Fortsæt, indtil tavlen er helt fyldt.

Nu skal vi skabe en uendelig løkke mellem disse tavler, så det skaber en synkronindlæsnings animation. For dette skal du gå til prototype-tilstand, klikke på det første tegnebræt og trække prototypepilen til det andet tavle. Skift egenskaberne i interaktionspanelet, ved at indstille udløseren til TIME og derefter indstille forsinkelsen til 0 sekunder, hvilket vil anime sig til det andet Artboard, når den forhåndsvisning. Udfør de samme ændringer i alle Artboards, ved at forbinde den anden til den tredje og så videre, før du endelig forbinder det sidste Artboard til den første. Vi har med succes forbundet alle Artboards for at danne en uendelig loop. Skift indstillingerne for lempelses- og varighed i henhold til dit krav om at gøre lasten glattere.

Selv om der er tonsvis af variationer, der kan prøves ved hjælp af Adobe XD, er værktøjets aktuelle kapaciteter begrænset og stadig regelmæssigt opdateres af udviklingsholdet. Så i forhold til værktøjer som princip, kan du føle, at XD har et begrænset værktøjssæt. Adobe har dog gjort et fremragende arbejde med at gøre værktøjet nemt at lære og bruge. At skabe komplekse interaktioner kan tage lidt tid og kræfter, men de er helt opnåelige ved hjælp af XD's Auto Anit-funktion. Nøglen er at forstå det grundlæggende i at flytte objekter, ændre størrelsen på dem og tilføje lag og bruge udløsere.

Denne artikel fremkaldte oprindeligt udstedelse 326 af net , verdens førende magasin til webdesignere og udviklere. Købe Udgave 326. eller Abonner her .

Læs mere:

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

Brug Adobe XD til at oprette mikrointeraktioner

Lav en statsændring ved hjælp af Auto Anit

Udvide kort

Gør drag animationer

Opret uendelige læsser animationer

hvordan - Mest populære artikler

5 ting du har brug for til oliemaleri

Level up spillet tegn med kreativ montering

Sådan laver de lækre teksturer med blyanter

Simuler en spøgelsesraner transformation

Opret en hældningsvandseffekt i realflow

Sådan skaber du manga-stil hår i bevægelse

Kombiner traditionelle og digitale færdigheder til at oprette et tegneserie

15 Tips til optimering af tværføring

Kategorier