Share
Prototyper bör vara ett snabbt och enkelt sätt att få förtroende för dina mönster. Betraktas inte längre som ett sätt att sprinkla rörelse magiska eller överpolska mönster, prototyper är ett kommunikationsverktyg. Vare sig att kommunicera med intressenter, designschefer eller användare, hjälper en bra prototyp att kommunicera designbeslut och testa idéer.
I denna handledning skapar vi en grundläggande "boarding-pass" prototyp i Atomic, som du kan förhandsgranska här. Prototypen börjar med en laddningstillstånd innan du kan bläddra bland dina kommande flyg och förhandsgranska din QR-kod för ombordstigning. För att skapa denna prototyp använder vi interaktiva komponenter, data, variabler och sidövergångar. Oroa dig inte! Jag hjälper dig genom varje steg.
Här är en demonstration av vad vi ska skapa:
Det finns några saker du behöver för att följa med:
atomic.ioOm du vid någon tidpunkt i hela handledningen har en fråga, gärna kontakta mig (@femkesvs) eller Atomic Support Team (@we_are_atomic) på Twitter.
Nu går vi!
Jag har skapat en provfil med de tillgångar som du behöver skapa din prototyp. Denna provfil är komplett med de tillgångar vi ska använda, liksom förbyggda komponenter.
Du kan komma åt tillgångarna här. För att använda tillgångarna måste du kopiera prototypen till ditt konto. Du kan göra detta genom att klicka på Kopiera och redigera längst ned till höger och välj sedan ett projekt som du vill kopiera det till. Jag föreslår att du skapar ett nytt projekt för denna handledning.
Innan vi börjar skapa vår prototyp måste vi först lägga till datakällan till Atomic. Jag har lagt ihop ett Google-ark med några grundläggande data som vi ska använda i vår prototyp.
Du kan komma åt data här. Med datakällan öppen, gå till Arkiv> Lägg till i min enhet (du behöver ett Google-konto för detta).
Därefter, med ditt projekt öppet i Atomic, välj Data flik. Härifrån klickar du på Importera data, och lokalisera datakällan via sökning. När du är lokaliserad välj datakällan. Du ser Atomic ladda data till ditt projekt. Denna datakälla kan nu nås och användas i någon prototyp inom projektet.
Vi är redo!
Låt oss börja montera vår prototyp genom att skapa laddningstillståndet. Vi gör det genom att skapa både en anpassad övergångs- och tidsbaserad sidahandling.
Välj först lastningskomponenten från sidan Assets för att kopiera (CMD-C och klistra in (CMD-V) den till sidan 1. Den blir stor och istället för att ändra storlek på den, placera den i startposition.
Kopiera sedan laddningselementet som du just placerat på sidan 1, klistra in det på sidan 2. Placera det i sitt slutliga tillstånd (roteras medurs 75 ° så att planet är placerat av höger sida av duken).
För att skapa vår övergång, hoppa tillbaka till sida 1. I den högra egenskapspanelen ser du en sektion som heter Sidansatser. Klicka på plus-knappen och ställ in följande:
Låt oss förhandsgranska och se vår övergång i åtgärd. Du ska se att planet glider från vänster till höger under två sekunder. Propert!
För att ta det vidare kan du också kopiera och klistra in Fly-logotypen till både sida 1 och sida 2 (under lastningskomponenten i sidpanelen och placerade bakom). Se till att du följer samma teknik för att placera den i start- och slutpositionen på varje sida. Du måste noggrant justera ordningen för dina lager så att den visas bakifrån.
Slutligen måste vi skapa en åtgärd som tar användaren automatiskt till sidan 3 från sidan 2. På sidan 2 lägger du till en annan åtgärdsaktivitet. Den här gången använder vi följande inställningar:
Tips: Om du vill staggera timing av de två elementen animerar kan du göra detta med hjälp av Advanced Motion Timeline.
Kopiera sedan de element som behövs för sidan 3 och klistra in dem på sidan 3. Du måste göra lite omarrangemang och justeringar så att de passar elementen på sidan efter behov.
Nästan alla element som behövs för denna sida är komponenter.
Komponenter i Atomic är som symboler. Vilken komponent som helst kan redigeras och återanvändas genom ett projekt. Alla ändringar som görs till en komponent uppdateras i varje fall. Komponenter kan också vara interaktiva och innehålla flera tillstånd av en symbol. Det gör det väldigt lätt att strukturera din prototyp.
Låt oss lägga till någon interaktivitet för boardingPasses-komponenten. För att öppna komponenten dubbelklickar du på komponentikonen i lagpanelen bredvid lagnamnet. När du är öppen ser du tre sidor. en som representerar varje flygning. För tillfället är dessa pass identiska, snart kommer vi att ändra detta.
Vi vet att användaren har tre flygningar och vi skulle vilja att de skulle kunna svepa igenom var och en. Det finns också en QR-kodikon som, när de interageras med, borde ta fram sitt boardingkort.
Om du tittar på lagpanelen märker du att varje sida är en förekomst av en komponent som heter "boardingCard". Låt oss öppna BoardingCard-komponenten nu för att se hur data har tillämpats.
BoardingCard-komponenten är en komponent inbäddad i en komponent. Detta gör det möjligt för oss att skapa en ombordstigningssymbol som kan återanvändas medan olika dataset visas.
Med BoardingCard-komponenten öppen ser du två sidor; fronten och baksidan av passet. Här är uppgifterna tilldelade de enskilda textelementen.
Data ärvt från föräldernVälj ABC-texten och kolla på Textegenskaper. Du kommer att märka följande:
Därefter om du tittar på Google-arket där den här dataen dras från visas en kolumn med titeln "Avgångskod". Det betyder att textelementet ABC kommer att visa vilken data som visas i kolumnen "Avgångskod".
All dynamisk text i denna komponent har blivit inställd på Inherit från föräldern. Detta gör det möjligt för oss att länka till databladet på en gruppnivå och därför visa och sortera igenom raden för rad. Vi kommer snart till det här.
Nästa lägger vi upp en sidbaserad övergång för att bläddra mellan pass och QR-kod. På frontsidan på boardingCard-komponenten trycker du på H att ta fram hotspotverktyget. Dra sedan en hotspot över QR-kodikonen på framsidan.
Hotspots tillåter dig att definiera interaktiva områden i din prototyp. Med din hotspot vald, ställer du in följande under interaktionspanelen:
Sedan, på baksidan, skapa en annan hotspot (H) som tar oss tillbaka till forsidan. Denna gång ritar den över stänga ikonen och ange följande:
Tiden för att testa din interaktion! I nedre högra hörnet trycker du på Förhandsvisning knapp. Förhandsgranskningsläge kan du testa dina övergångar och interagera med din prototyp via hotspots. Försök att klicka på QR-kortet eller stäng ikonen; kortet ska vända mellan de två tillstånden. Du kan stänga förhandsgranskningen genom att trycka på X.
Med detta boardingkort som en interaktiv komponent kan vi välja vilken data som visas dynamiskt, utan att behöva skapa flera tillstånd och interaktioner.
För att återvända, klicka på den lila tillbaka knappen upp längst upp till vänster. Nu borde du vara tillbaka i boardingPasses-komponenten. I denna komponent har vi tre pass som för närvarande visar samma data. Låt oss uppdatera det här nu.
Kom ihåg hur inuti BoardingCard-komponenten var data inställd på Inherit från föräldern? I detta fall är förälder komponentinstansen.
På flygningen 1 sida väljer du boardingCard-förekomsten. I komponentegenskaper lämna stat som det är. Under Data, välj datakällan och se till att Rad är satt till rad 1. Instansen ska nu visa data från den första raden i databladet.
Om du växlar raden märker du att de data som visas uppdateras. Låt oss hålla det på rad 1 för nu, men på flyg 2 och flyg 3 ställer detta för att visa data från rad 2 respektive rad 3.
För att göra det möjligt för användarna att svippa genom sina ombordstigningspass måste vi ställa in några swipe-interaktioner.
Skapa och rita en hotspot (H) på höger sida av flygningen 1 sida (se till att du lämnar lite utrymme överst för hotspotet över den stängande ikonen på baksidan av BoardingCard-komponenten och att det inte gör det " t täcka QR-koden på framsidan). Använd följande inställningar om du vill skapa en swipe-gest:
Gör detsamma på flygningen 2 sidan och lägg till en andra hotspot på vänster sida av flygningen 2 och flyg 3 sidor som är inställda på Tryck höger och Tryck vänster istället. Känn dig fri att trycka Förhandsvisning för att testa och interagera med komponenten och justera dina svepinställningar i enlighet med detta.
För att slutföra byggandet av prototypen måste vi skapa och använda en variabel. Denna variabel gör att våra komponenter kan prata med varandra medan de påverkar deras tillstånd.
Variabeln som vi ska skapa kommer att användas för att uppdatera framstegspunkterna baserat på vilket boardingkort som visas.
För att skapa en variabel trycker du på V att öppna Variabler Modal. Här klickar du på Skapa ny variabel och skriv "flightDisplayed" in i namn fält. Lämna standardvärdet tomt.
Bra, du har din variabel inställd! Stäng variablerna modala genom att trycka på X eller fly på ditt tangentbord.
Navigera tillbaka till prototypen. Om vi förhandsgranskar nu från startsidan bör du kunna svepa mellan korten och också interagera med QR-koden.
Medan vi nu kan dra igenom passen finns det ett par fler saker att konfigurera för att påverka framstegspunkterna för att uppdatera baserat på progressionen av ombordstigningspass.
För att göra detta öppnar du boardingPasses-komponenten. På sidan 1 kan vi skapa följande sidaåtgärd:
Upprepa detta på sidan 2 och 3, se till att värdet är inställt på 2 eller 3 för att återspegla sidan du är på.
Vi har faktiskt berättat komponentbordet om att uppdatera värdet på den variabla flightDisplayed, beroende på vilken sida som visas. Vi kan nu använda detta värde för att påverka statusen för framstegspunkterna.
Så här: Gå tillbaka till prototypen och öppna komponenten progressDots.
Du kommer att märka tre sidor (stater) som heter 1, 2 och 3. Denna namngivning matchar de värden som ställs in i flightDisplayed variabeln. Det är viktigt att dessa sidnamn matchar de inställda värdena.
Gå tillbaka till prototypen, välj komponenten progressDots och:
Vi har nu anslutit komponenten progressDots till variabel flightDisplayed. Det betyder att när värdet på variabeln ändras till ett värde, visar komponenten progressDots den sida som matchar variabelvärdet.
Försök att förhandsgranska din prototyp nu, interagera med ombordstigningspasserna genom att svepa och se om framstegen prickar uppdateras.
Slutligen kan du radera eller flytta sidan Assets för att se till att din delade förhandsgranskning öppnas på rätt startsida. Om du vill ta bort sidan väljer du hamburgermenyn på sid miniatyren och klickar på ta bort sida.
Tips: Se om du kan ta reda på hur du får promoCard-komponenten för att uppdatera sitt tillstånd baserat på det visade flyget. Du vill skapa en ny variabel som heter CardDisplayed.
Där har du det! Din egen Boarding Pass app. Om du hämtade iOS-appen kan du försöka öppna prototypen och interagera med den på din iPhone. Det borde känna sig som det riktiga.
Bra gjort för att följa denna handledning till slutet. Du borde nu ha en grundlig förståelse för hur du skapar din egen prototyp i Atomic. Om du har befintliga tillgångar i Sketch kan du importera dem med hjälp av Atomic Plugin for Sketch, eller konstruera inhemskt i Atomic om du önskar.
Frågor? Kommentarer? Lämna dem nedan eller nå ut till mig på Twitter (@femkesvs).
Accentsconagua