Kom i gang med prototyping i Adobe XD

Sep 14, 2025
hvordan

Etter hvert som etterspørselen etter UX Design fagfolk fortsetter å vokse, ser designere ut til å bruke brukervennlige verktøy som er kraftige nok til å skape protyper av høy kvalitet, men det føles kjent for verktøyene de allerede bruker hver dag.

Adobe XD. (Forhåndsvisning) gjør nettopp det, slik at brukerne enkelt kan opprette, redigere og sosialisere prototyper for mobile design, alt innen ett program. Nye funksjoner blir jobbet hele tiden, men for nå, vil disse hurtige opplæringene hjelpe deg med å komme i gang med prototyping i Adobe XD.

01. Lag en prototype fra en wireframe

Creating prototypes is easy with Adobe XD

Opprette prototyper er enkelt med Adobe XD

For å lage en prototype fra en wireframe, følg disse enkle trinnene:

  • Klikk Prototype på Top eller Command-fanen
  • Klikk på Kommando A for å vise interaksjoner, og klikk deretter Preview for å koble prototype
  • Klikk gjennom til skjermbildene på prototypen for å se samlet navigasjons- og overgangsmessig

02. Opprette interaksjoner

To create an interaction from one screen to another select an object and drag the blue arrow to the art board you want to link to

Slik lager du en interaksjon fra en skjerm til en annen Velg et objekt og dra den blå pilen til kunstbordet du vil koble til

Det første du vil se er et blått hjemme-knappikon øverst til venstre på skjermen, som angir startskjermbildet. Du kan endre det ved å klikke på en annen tittel og deretter klikke på det grå hjemmeikonet som er koblet til skjermen, vil du være din nye startskjermbilde.

Slik lager du en interaksjon fra en skjerm til en annen Velg et objekt og dra den blå pilen til kunstbrettet du vil koble til. Du kan fjerne en interaksjon ved å klikke på den blå pilen og dra den til et tomt rom. Når du oppretter en interaksjon, gir dialogboksen automatisk muligheten til å definere segs, lettelse og varighetstype. Kommando Klikk kan enkelt gjøre dette fra en prototype.

Trykk på Kommando Enter for en forhåndsvisning. Uten å lukke forhåndsvisningsvinduet kan du redigere ved å klikke på den blå pilen for samspillet og endringen derfra

03. Deling prototyper

Publish to share online by simply clicking share online in the upper right corner of the screen

Publiser for å dele online ved å bare klikke på Del online i øvre høyre hjørne av skjermen

Med forhåndsvisningsvinduet er det fortsatt åpent, trykk på Record og klikk gjennom interaksjonene på prototypen din. Når du er ferdig, hit Record igjen og lagre filmfilen på skrivebordet ditt. Når kollegaer ser filmfilen, er det visuelle markeringer for å indikere hotspots hvor du klikket når du tar opp.

Du kan også publisere for å dele online ved å bare klikke på Del online i øvre høyre hjørne av skjermen, skriv inn en tittel i rommet som er oppgitt og dra et bilde fra Finder til det oppgitte rommet for å opprette et forhåndsvisningspanel og deretter opprette en lenke. Adobe XD oppretter automatisk en skarp lenke som kan vises i en hvilken som helst nettleser. Markører indikerer automatisk de varme stedene hvis revurdering ikke klikker på en bestemt tidsperiode.

Du kan også gjennomgå på en mobil enhet ved å lime den samme linken til mobilnettleseren din. De visuelle indikatorene vises ikke når du tester på en mobil enhet for å gi en mer realistisk opplevelse.

Hvis du lagrer nettadressen på startskjermen, vises ikonet automatisk som miniatyrhåndsvisningsbildet du valgte tidligere

Du kan foreta nødvendige endringer i Adobe XD. Hvis du vil dele revidert versjoner, klikker du bare på Del igjen. Du vil bli gitt muligheten til å oppdatere den opprinnelige lenken, eller for å opprette en ny lenke. Å administrere lenker. Klikk på Administrer koblinger gjennom Creative Cloud Eiences-kontoen din. Alle protyper lagres online i Protype-delen din for enkel administrasjon.

Ord: Demian Borba

Demian Borba er produktleder for Adobe XD. .

hvordan - Mest populære artikler

Lag en tilpasset slakk bot

hvordan Sep 14, 2025

[1. 3] (Bilde Kreditt: Webdesigner) Slack er et stadig mer populært verktøy for bedrifter og lag som trenger å komm..

Hvordan bygge en blogg med Jekyll

hvordan Sep 14, 2025

[1. 3] (Bilde Kreditt: Net) Denne opplæringen er for folk som har hørt om statiske nettverksgeneratorer og har beste..

Lær å modellere en 3D-person i Zbrush og Maya

hvordan Sep 14, 2025

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Hvordan lage stilisert spill Artwork

hvordan Sep 14, 2025

[1. 3] Art Style of First Person Survival Video Game Lang mørk kan være villedende vanskelig å fange. Stilen fra..

Hvordan male et bybilde med blokkene av farge

hvordan Sep 14, 2025

[1. 3] Fantastisk utsikt, fantastiske Skylines og vakre bybilder gjør gode fotografier, men kan være ganske skremmende fra kunst..

Introduksjon til brukervennlighet Testing

hvordan Sep 14, 2025

Et vellykket webprodukt møter ikke bare behovene til organisasjonen din, men også behovene til brukerne. Brukbarhetstesting - Ferdig tidlig og ofte - er en kritisk måte å sjekke interesse..

Bruke vektorverktøy: En webdesigners tilnærming

hvordan Sep 14, 2025

Hvis du er en webdesigner, er det en god sjanse for at Photoshop er åpent og kjører på datamaskinen din. La oss innse det - Photoshop har alltid vært arbeidshest og de facto-standarden fo..

Lag interaktive diagrammer i ionisk 2

hvordan Sep 14, 2025

[1. 3] Når du jobber i et lite lag, har det en tendens til å være vanskelig å skrive og vedlikeholde separat kode for Android,..

Kategorier