Presentation av design är ett av de centrala kraven inom apputveckling. Utvecklare är beroende av dina designer för att framgångsrikt genomföra appen. I denna guide visar jag dig hur du enkelt presenterar dina designer i InVision, så att ditt designteam alltid har tillgång till de senaste versionerna. Med InVision säkerställer du att dina idéer visualiseras och kommuniceras på bästa sätt, samtidigt som du enkelt kan göra ändringar.
Viktigaste insikter
- InVision möjliggör enkel synkronisering och presentation av designer.
- Du kan exportera dina designer direkt från Sketch och ladda upp dem i InVision.
- Verktyget erbjuder olika lägen för att se och interagera med prototyper.
- Feedback- och kommentarsfunktioner stöder samarbetet mellan designers och utvecklare.
Steg-för-steg-guide
Steg 1: Skapa nytt projekt i InVision
Först öppnar du InVision och skapar ett nytt projekt. Välj alternativet att skapa en "Prototyp" och välj iPhone-mallen för att presentera dina designer optimalt för mobila enheter. Välj projektets namn "Mobility Stream Udemy" och klicka på "Skapa".
Steg 2: Exportera designer från Sketch
Efter att du har ställt in ditt projekt, importerar du dina designer från Sketch. Under denna process måste du se till att du väljer rätt artboards och laddar upp dem i InVision. Du kan dra och släppa filerna direkt i InVision-projektet. Det är viktigt att välja rätt exportformat från Sketch för att undvika komplikationer.
Steg 3: Installera InVision-plugin
För att förenkla synkroniseringsprocessen bör du använda InVision-plugin för Sketch. Installera plugin, logga in med ditt InVision-konto och aktivera synkroniseringsalternativet. Detta gör att du kan överföra designändringar direkt från Sketch till ditt InVision-projekt utan att manuellt behöva ladda upp filerna.
Steg 4: Förse artefakter med gränssnitt
Nu kan du skapa användargränssnittet för din app och göra de olika skärmarna interaktiva. Klicka på knapparna i byggläge för att skapa hotspots som simulerar navigeringen i appen. Du kan välja olika övergångar som "Slide in" eller "Instant" för att realistiskt återge användarupplevelsen.
Steg 5: Ange övergångar
När du har lagt till interaktioner är det viktigt att ange rätt animationer för övergångarna mellan skärmarna. Du kan välja typ av animation som träder i kraft när du växlar till en annan skärm. Se till att dessa detaljer tydligt och precist framställs för utvecklarna så att de kan genomföra det önskade beteendet.
Steg 6: Ange färger och bakgrunder
Du bör också säkerställa att alla bakgrundsfärger och stilistiska detaljer stämmer. Ofta glöms det att ange bakgrundsfärger i Sketch-filerna. Gå igenom varje skärm och kontrollera att de bakgrunder som du har planerat i designen också visas i InVision. Se till att allt ser harmoniskt ut.
Steg 7: Synkronisering och uppdatering
Efter att du har gjort alla ändringar är det dags att synkronisera allt. Spara ändringarna i Sketch och klicka på synkroniseringsknappen i plugin. Detta kommer automatiskt att uppdatera dina nya skärmar och justeringar i InVision. Observera att denna process kan ta lite tid.
Steg 8: Samla feedback
Använd kommentars- och feedbackfunktionen i InVision för att klargöra allmänna frågor om dina designer. Du kan lägga till en kommentar direkt i prototypen som sedan kan besvaras av andra teammedlemmar. Detta är särskilt användbart för att säkerställa att din design överensstämmer med briefing och att alla förväntningar uppfylls.
Steg 9: Avslutning av presentation
Slutligen bör du testa dina designer och se till att allt fungerar felfritt. Kontrollera alla hotspots som du har skapat och simulera interaktionen för att få erfarenhet ur användarperspektiv. På så sätt säkerställer du att helhetsintrycket är sammanhängande innan du presenterar det för ditt team eller utvecklarna.
Sammanfattning - Lyckad presentation av designer i InVision
I denna guide har du lärt dig hur du steg för steg presenterar dina designer i InVision. Du har fått veta hur enkelt det är att arbeta med InVision och hur du kan öka effektiviteten i dina designöverföringar. Noggrant förberedelse och användning av hjälpsamma funktioner kommer att hjälpa dig att skapa framgångsrika projekt och ge dina utvecklare den information de behöver.
Vanliga frågor
Hur installerar jag InVision-plugin för Sketch?Ladda ner plugin från InVision-webbplatsen och följ installationsanvisningarna.
Hur synkroniserar jag designer från Sketch med InVision?Spara dina ändringar och klicka på synkroniseringsknappen i InVision-plugin för att ladda upp designerna.
Vilka bakgrunder bör användas i designerna?Använd tydliga bakgrundsfärger för alla skärmar för att säkerställa att de visas korrekt i InVision.
Kan jag samla feedback direkt i InVision?Ja, du kan lägga till kommentarer på din prototyp och få feedback från andra teammedlemmar.
Vad kan jag göra om animationerna inte fungerar korrekt?Kontrollera övergångsvalet och testa varje skärm för att säkerställa att allt fungerar som det ska.
