Leverer profesjonelle design med InVision

Presentasjonen av design er et av hovedkravene i apputvikling. Utviklere er avhengige av dine design for å kunne implementere appen med suksess. I denne veiledningen viser jeg deg hvordan du enkelt kan gjøre designene dine tilgjengelig i InVision, slik at designteamet ditt alltid har tilgang til de nyeste versjonene. Med InVision sørger du for at idéene dine blir visualisert og kommunisert på best mulig måte, mens du samtidig kan legge inn endringer på en enkel måte.

Viktigste funn

• InVision gjør det mulig med enkel synkronisering og presentasjon av design.
• Du kan eksportere designene dine rett fra Sketch og laste dem opp til InVision.
• Verktøyet tilbyr ulike moduser for visning og interaksjon med prototyper.
• Tilbakemeldings- og kommentarfunksjoner støtter samarbeidet mellom designere og utviklere.

Trinn-for-trinn-veiledning

Trinn 1: Opprett et nytt prosjekt i InVision

Først åpner du InVision og oppretter et nytt prosjekt. Velg alternativet for å opprette en "Prototype", og velg iPhone-malene for å presentere designene dine optimalt for mobile enheter. Velg prosjektnavnet "Mobility Stream Udemy", og klikk på "Opprett".

Trinn 2: Eksporter design fra Sketch

Etter at du har satt opp prosjektet ditt, importerer du designene dine fra Sketch. I denne prosessen må du sørge for å velge de riktige artboards og laste dem opp til InVision. Du kan dra og slippe filene direkte inn i InVision-prosjektet. Det er viktig å velge riktig eksportformat fra Sketch for å unngå komplikasjoner.

Trinn 3: Installer InVision-pluginet

For å forenkle synkroniseringsprosessen bør du bruke InVision-pluginet for Sketch. Installer pluginet, logg inn med InVision-kontoen din, og aktiver synkroniseringsalternativet. Dette gjør at du kan overføre endringer i designet direkte fra Sketch til InVision-prosjektet ditt, uten å måtte laste opp filene manuelt.

Trinn 4: Gi grensesnitt til artefakter

Nå kan du lage brukergrensesnittet for appen din og gjøre de enkelte skjermene interaktive. Klikk på knappene i byggemodus for å opprette hotspots som simulerer navigasjonen i appen. Du kan velge ulike overganger som "Slide in" eller "Instant" for å gi en realistisk brukeropplevelse.

Trinn 5: Angi overganger

Når du har lagt til interaksjoner, er det viktig å angi de riktige animasjonene for overganger mellom skjermene. Du kan velge typen animasjon som skal brukes ved overgangen til en annen skjerm. Sørg for at disse detaljene er klare og presise til utviklerne, slik at de kan implementere ønsket atferd.

Trinn 6: Angi farger og bakgrunner

Du bør også sikre at alle bakgrunnsfarger og stildetaljer er korrekt. Det blir ofte glemt å angi bakgrunnsfarger i Sketch-filene. Gå gjennom hver skjerm og sjekk om bakgrunnene du har foreslått i designet også vises i InVision. Sørg for at alt ser harmonisk ut.

Trinn 7: Synkronisering og oppdatering

Etter at du har gjort alle endringer, er det på tide å synkronisere alt. Lagre endringene i Sketch og klikk på synkroniseringsknappen i pluginet. Dette vil automatisk oppdatere de nye skjermene og tilpasningene dine i InVision. Vær oppmerksom på at denne prosessen kan ta litt tid.

Trinn 8: Samle tilbakemeldinger

Bruk kommentars- og tilbakemeldingsfunksjonen i InVision for å avklare generelle spørsmål om designene dine. Du kan legge til en kommentar direkte i prototypen, som deretter kan besvares av andre teammedlemmer. Dette er spesielt nyttig for å sikre at designet ditt samsvarer med briefingen og at alle forventninger blir oppfylt.

Trinn 9: Avslutning av presentasjonen

Til slutt bør du teste designene dine og sørge for at alt fungerer feilfritt. Gå gjennom alle hotspots du har laget, og simuler interaksjonene for å få erfaring fra brukerens perspektiv. På denne måten kan du sikre at helhetlig inntrykk er sammenhengende, før du presenterer det for teamet eller utviklerne.

Oppsummering - Presentere designene vellykket i InVision

I denne veiledningen har du lært hvordan du steg for steg kan presentere designene dine i InVision. Du har oppdaget hvor enkelt det er å jobbe med InVision, og hvordan du kan øke effektiviteten til designoverføringene dine. En nøye forberedelse og bruk av nyttige funksjoner vil hjelpe deg med å lykkes med prosjektene dine og gi utviklerne de nødvendige informasjonene.