Share
Börja från början varje gång du mockar är en design slöseri med tid, speciellt när man bygger på en befintlig produkt. På Envato Market har vi redan ett etablerat visuellt utseende och vi arbetar med en stilguide för att samla alla våra användargränssnitt.
Det vi behöver är ett enkelt sätt att skapa en klickbar prototyp med vårt UI-bibliotek. En mall med alla Lego-stycken som redan finns där, redo att byggas.
Under denna handledning använder jag mina egna erfarenheter med Envato Market för att visa processen. Men alla tekniker som diskuteras kommer att vara tillämpliga på din egen situation.
Steg ett i mitt fall var att skapa mallen efterliknande vår stil guide.
Jag började med att lägga till alla våra ikon typsnitt: Med tanke på att vi hade en ikon typsnitt som vi ville använda i vår skiss skisser, först måste ikon font skrivas in:
Det bästa sättet att närma sig detta är att öppna teckensnittet i Font Book. "Repertoarvyn" (⌘ + 2) måste vara aktiv för att se alla tillgängliga glyfer. Kopiera varje glyph och lägg till dem på en tavla i Sketch.
Nästa handgjorda jag alla olika UI-element. Varje element läggs till sin egen tavla och sparas därefter som en symbol:
Jag ger varje namn ett namn. Namnen råkar sammanfalla med de klasser som används i själva byggnaden, men det är upp till dig hur du närmar dig detta:
Träffa Stiga på. Gjort.
Jag upprepade denna process för varje typ av större UI-element som vi för närvarande har katalogiserat i stilguiden. Resultatet av detta mödosamma arbete var skapandet av 89 symboler totalt.
Den sista delen av pusslet var typografi. Vi har 17 olika typografiska variationer, så var och en omvandlades till en textstil inom Sketch.
Gör så här lägg till en textruta och stil texten med hjälp av alternativ i sidofältet:
Därefter gör du det till en textstil:
När vi är alla färdiga sparar vi genom att gå Arkiv> Spara som mall ...
Nu är vi redo att rock'n roll!
När jag först hade alla ikoner, var stora UI-element och typografi beredda att vi var redo att börja håna saker.
Att skapa en ny fil med Envato Market Style Guide-mallen ger oss alla tavlor, symboler, ikonfonter och typografiska stilar som vi skapade.
För att börja en ny mockup tar jag först bort alla tavlor. De tidigare skapade symbolerna är fortfarande tillgängliga eftersom de är inbäddade i mallen. Jag använder Font Book för att snabbt kopiera alla ikoner för användning i mockup. Tillsammans betyder det att jag kan börja med en ren skiffer och fortfarande ha snabb tillgång till alla tillgångar jag behöver. Zen bliss!
Nästa lägger jag till en ny tavla:
Nu är jag redo att börja lägga till våra byggstenar.
bom! Där är det:
Flytta den på plats:
Lägg sedan till sidfoten för att slutföra inställningen av den tomma sidan. voila!
Låt oss nu fylla på dummy-sidan med ett formulär som länkar till en bekräftelsessida. Senare lägger vi till detta i ett InVision-projekt där vi kan få feedback från kollegor och testa flödet genom att skicka en länk till användare som testar det nya gränssnittet.
Detta tar nästan ingen tid och det bästa är att ingen av dessa element behöver skräddarsys för gränssnittet. Det handlar helt enkelt om att använda de byggstenar vi gjort i mallen.
Låt oss exportera dessa som bilder genom att välja tavlor och gå till Arkiv> Exportera:
Det sista och viktigaste steget är att ladda upp mockups till InVision och dela länken med kollegor och testa användarna för att samla in feedback.
Här har jag skapat ett nytt InVision-projekt och laddat upp mina exporterade mockups till den. Klicka, till exempel, på målsidan för att öppna den:
Med hjälp av byggverktyget skapar jag en hotspot för att länka till bekräftelsessidan:
Slutligen delar jag prototypen med andra genom att säga något som:
"Hej om du har en stund skulle jag gärna höra din åsikt om detta nya bekräftelsessida flöde jag har jobbat på. Kolla in det på http://invis.io/RG1XC6XPA "
Ja, du kan följa den länken för att leka med mockupen.
Det är allt! Vår första återkopplingscykel är klar.
Det här är den bästa processen jag hittat hittills när det gäller att snabbt få en prototyp på någons skärm.
Med detta sagt är det fortfarande inte idealiskt. Så snart vårt användarbibliotek ändrar någon (för tillfället själv) måste vi uppdatera sketchmallen manuellt. Den ideala processen skulle vara en där vi kunde använda HTML och CSS för att skapa Sketch-symboler som gör det möjligt att hålla stilguiden och Sketch-mallen i perfekt synkronisering.
Accentsconagua