Præsentationen af designs er et af de centrale krav i app-udvikling. Udviklere er afhængige af dine designs for at gennemføre appen med succes. I denne vejledning viser jeg dig, hvordan du nemt kan tilvejebringe dine designs i InVision, så dit designteam altid har adgang til de nyeste versioner. Med InVision sikrer du, at dine ideer bliver optimalt visualiseret og kommunikeret, samtidig med at du let kan integrere ændringer.
Vigtigste indsigt
- InVision muliggør en enkel synkronisering og præsentation af designs.
- Du kan eksportere dine designs direkte fra Sketch og uploade dem til InVision.
- Værktøjet tilbyder forskellige tilstande til visning og interaktion med prototyper.
- Feedback- og kommentarfunktioner understøtter samarbejdet mellem designere og udviklere.
Trin-for-trin vejledning
Trin 1: Opret nyt projekt i InVision
Først åbner du InVision og opretter et nyt projekt. Vælg muligheden for at oprette et “Prototype” og vælg iPhone-skabelonen for at præsentere dine designs optimalt til mobile enheder. Vælg “Mobility Stream Udemy” som projektnavn, og klik på “Opret”.
Trin 2: Eksportér designs fra Sketch
Efter du har sat dit projekt op, importerer du dine designs fra Sketch. Under denne proces skal du sikre dig, at du vælger de rigtige artboards og uploader dem til InVision. Du kan trække og slippe filerne direkte ind i InVision-projektet. Det er vigtigt at vælge det rigtige eksportformat fra Sketch for at undgå komplikationer.
Trin 3: Installer InVision-plugin
For at forenkle synkroniseringsprocessen bør du bruge InVision-plugin til Sketch. Installer plugin'et, log ind med din InVision-konto, og aktiver synkroniseringsmuligheden. Dette giver dig mulighed for at overføre designændringer direkte fra Sketch til dit InVision-projekt uden at skulle uploade filerne manuelt.
Trin 4: Tilføj grænseflader til artefakter
Nu kan du oprette brugergrænsefladen til din app og gøre de enkelte skærme interaktive. Klik på knapperne i Build Mode for at oprette hotspots, der simulerer navigationen i appen. Du kan vælge forskellige overgange som “Slide in” eller “Instant” for at repræsentere brugeroplevelsen realistisk.
Trin 5: Definér overgange
Når du har tilføjet interaktioner, er det vigtigt at definere de rigtige animationer for overgange mellem skærmene. Her kan du vælge typen af animation, der træder i kraft, når du skifter til en anden skærm. Sørg for, at disse detaljer præsenteres klart og præcist for udviklerne, så de kan implementere det ønskede adfærd.
Trin 6: Definér farver og baggrunde
Du bør også sikre dig, at alle baggrundsfarver og stilistiske detaljer stemmer. Ofte glemmes det at angive baggrundsfarver i Sketch-filerne. Gennemgå hver skærm og tjek, om de baggrunde, du har planlagt i designet, også vises i InVision. Sørg for, at alt ser harmonisk ud.
Trin 7: Synkronisering og opdatering
Når du har foretaget alle ændringer, er det tid til at synkronisere alt. Gem ændringerne i Sketch, og klik på synkroniseringsknappen i plugin'et. Dette opdaterer automatisk dine nye skærme og justeringer i InVision. Vær opmærksom på, at denne proces kan tage lidt tid.
Trin 8: Indsaml feedback
Brug kommentar- og feedbackfunktionen i InVision til at afklare generelle spørgsmål om dine designs. Du kan tilføje en kommentar direkte i prototypen, som så kan besvares af andre teammedlemmer. Dette er særligt nyttigt for at sikre, at dit design opfylder briefingen og at alle forventninger bliver mødt.
Trin 9: Afslut præsentationen
Til sidst bør du teste dine designs og sikre, at alt fungerer korrekt. Tjek alle hotspots, du har oprettet, og simuler interaktionen for at få oplevelser fra brugerens perspektiv. På den måde sikrer du, at det samlede billede er sammenhængende, inden du præsenterer det for dit team eller udviklerne.
Sammenfatning - Præsentér designs med succes i InVision
I denne vejledning har du lært, hvordan du trin for trin tilvejebringer dine designs i InVision. Du har erfaret, hvor nemt det er at arbejde med InVision, og hvordan du kan øge effektiviteten af dine designoverførsler. En grundig forberedelse og brug af nyttige funktioner vil hjælpe dig med at skabe succesfulde projekter og levere de nødvendige oplysninger til dine udviklere.
Ofte stillede spørgsmål
Hvordan installerer jeg InVision-plugin til Sketch?Download plugin'et fra InVision's hjemmeside og følg installationsvejledningen.
Hvordan synkroniserer jeg designs fra Sketch med InVision?Gem dine ændringer, og klik på synkroniseringsknappen i InVision-plugin'et for at uploade designsene.
Hvilke baggrunde bør bruges i designs?Brug unikke baggrundsfarver for alle skærme for at sikre, at de vises korrekt i InVision.
Kan jeg indsamle feedback direkte i InVision?Ja, du kan tilføje kommentarer til din prototype og modtage feedback fra andre teammedlemmer.
Hvad kan jeg gøre, hvis animationerne ikke fungerer korrekt?Tjek overgange og test hver skærm for at sikre, at alt fungerer som ønsket.
