Share
Prototyping moet een snelle en eenvoudige manier zijn om vertrouwen te krijgen in uw ontwerpen. Niet langer puur beschouwd als een manier om motion magic of over-polish designs te strooien, prototyping is een communicatie-instrument. Of het nu gaat om communicatie met belanghebbenden, ontwerpmanagers of gebruikers, een goed prototype helpt ontwerpbeslissingen over te brengen en ideeën te testen.
In deze zelfstudie maken we een basisprototype "instapkaart" in Atomic, dat u hier kunt bekijken. Het prototype begint met een laadstatus voordat u kunt bladeren naar uw aankomende vluchten en een voorbeeld van uw QR-code voor instappen bekijkt. Om dit prototype te maken, gebruiken we interactieve componenten, data, variabelen en pagina-overgangen. Geen zorgen! Ik zal je helpen bij elke stap.
Hier is een demo van wat we gaan maken:
Er zijn een paar dingen die je nodig hebt om te volgen:
atomic.ioAls je op enig moment tijdens de tutorial een vraag hebt, neem dan gerust contact met me op (@femkesvs) of het ondersteuningsteam van de Atomic (@we_are_atomic) op Twitter.
Laten we gaan!
Ik heb een voorbeeldbestand gemaakt met de elementen die u nodig hebt om uw prototype te maken. Dit voorbeeldbestand is compleet met de items die we gaan gebruiken, evenals vooraf gebouwde componenten.
U kunt hier toegang krijgen tot de activa. Als u de items wilt gebruiken, moet u het prototype naar uw account kopiëren. U kunt dit doen door te klikken op Kopiëren en bewerken rechtsonder en selecteer vervolgens een project waarnaar je het wilt kopiëren. Ik stel voor een nieuw project voor deze zelfstudie te maken.
Voordat we aan de slag gaan met het maken van ons prototype, moeten we eerst de gegevensbron aan Atomic toevoegen. Ik heb een Google-spreadsheet samengesteld met enkele basisgegevens die we in ons prototype zullen gebruiken.
U kunt hier toegang krijgen tot de gegevens. Ga met de gegevensbron open naar Bestand> Toevoegen aan mijn schijf (hiervoor hebt u een Google-account nodig).
Vervolgens, met je project open in Atomic, selecteer je de Gegevens tab. Klik hier vanaf Data importeren, en zoek de gegevensbron via zoeken. Eenmaal gevonden selecteert u de gegevensbron. Je zult zien dat Atomic de gegevens in je project laadt. Deze gegevensbron kan nu worden geopend en gebruikt in elk prototype binnen het project.
Wij zijn klaar!
Laten we beginnen met het assembleren van ons prototype door de laadstatus te creëren. We doen dit door zowel een aangepaste overgang als een op tijd gebaseerde paginaactie te maken.
Selecteer eerst het laadonderdeel van de Assets-pagina om het te kopiëren (CMD-C en plak (CMD-V) het op de pagina 1. Het zal groot zijn en plaats het niet in grootte om het in de beginpositie te plaatsen.
Kopieer vervolgens het laadelement dat u zojuist op pagina 1 hebt geplaatst en plak dit nu op pagina 2. Verplaats het in de uiteindelijke staat (75 ° gedraaid met de wijzers van de klok mee zodat het vlak zich aan de rechterkant van het canvas bevindt).
Als u onze overgang wilt maken, gaat u terug naar pagina 1. In het deelvenster met rechtseigenschappen ziet u een sectie met de naam Pagina Acties. Klik op de plusknop en stel het volgende in:
Laten we een voorbeeld bekijken en onze overgang in actie zien. Je zou het vliegtuig in twee seconden van links naar rechts moeten zien glijden. Netjes!
Om verder te gaan, kun je ook het Fly-logo kopiëren en plakken naar zowel pagina 1 als pagina 2 (onder het laadcomponent in het paneel van de pagina's en erachter). Zorg ervoor dat je dezelfde techniek volgt om het op elke pagina in de begin- en eindpositie te plaatsen. U moet waarschijnlijk de volgorde van uw lagen aanpassen om deze van achteren te laten verschijnen.
Ten slotte moeten we een actie maken die de gebruiker automatisch naar pagina 3 vanaf pagina 2 brengt. Voeg op pagina 2 nog een actie met een getimede pagina toe. Deze keer gebruiken we de volgende instellingen:
Tip: als je de timing van de twee elementen wilt animeren, kun je dit doen met de Geavanceerde bewegings-tijdlijn.
Kopieer vervolgens de elementen die nodig zijn voor pagina 3 en plak deze op pagina 3. U moet een beetje herschikken en aanpassen zodat de elementen op de pagina passen als dat nodig is.
Bijna alle elementen die voor deze pagina nodig zijn, zijn componenten.
Componenten in Atomic zijn als symbolen. Elk onderdeel kan gedurende een project worden bewerkt en hergebruikt. Alle bewerkingen die aan een component worden aangebracht, worden in elk geval bijgewerkt. Componenten kunnen ook interactief zijn en meerdere statussen van een symbool bevatten. Dit maakt het heel eenvoudig om uw prototype te structureren.
Laten we wat interactiviteit toevoegen aan de boardingPasses-component. Als u de component wilt openen, dubbelklikt u op het componentpictogram in het deelvenster Lagen naast de naam van de laag. Eenmaal geopend, ziet u drie pagina's; één die elke vlucht vertegenwoordigt. Voorlopig zijn deze passen identiek, binnenkort zullen we dit veranderen.
We weten dat de gebruiker drie vluchten heeft en we zouden graag willen dat ze door elk van hen kunnen vegen. Er is ook een QR-code-pictogram dat, wanneer er interactie mee is, de instapkaartcode moet weergeven.
Als u in het deelvenster Lagen kijkt, ziet u dat elke pagina een exemplaar is van een onderdeel genaamd "boardingCard". Laten we het boardingCard-onderdeel nu openen om te zien hoe de gegevens zijn toegepast.
Het boardingCard-onderdeel is een component ingebed in een component. Hiermee kunnen we een instapkaartsymbool maken dat opnieuw kan worden gebruikt terwijl verschillende gegevenssets worden weergegeven.
Met het boardingCard-onderdeel open, ziet u twee pagina's; de voor- en achterkant van de pas. Dit is waar de gegevens worden toegewezen aan de afzonderlijke tekstelementen.
Gegevens geërfd van ouderSelecteer de ABC-tekst en bekijk de Teksteigenschappen. U zult het volgende opmerken:
Als u vervolgens naar het Google-blad kijkt waar deze gegevens uit worden gehaald, ziet u een kolom met de naam "vertrekcode". Dit betekent dat het tekstelement ABC de gegevens toont die in de kolom "vertrekcode" worden getoond.
Alle dynamische tekst in dit onderdeel is ingesteld op Overnemen van ouder. Dit stelt ons in staat om op groepsniveau naar het gegevensblad te linken en daarom de rij per rij te bekijken en te sorteren. We komen hier snel op terug.
Vervolgens stellen we een op pagina's gebaseerde overgang in om te schakelen tussen de pas en de QR-code. Op de voorpagina van het boardingCard-onderdeel drukt u op H om de hotspot-tool te openen. Teken vervolgens een hotspot via het QR-codesymbool op de voorpagina.
Met hotspots kunt u interactieve delen van uw prototype definiëren. Selecteer uw hotspot en stel onder het deelvenster Interacties het volgende in:
Maak vervolgens op de achterpagina een andere hotspot (H) die ons terugbrengt naar de voorpagina. Deze keer teken het over de dichtbij pictogram en stel het volgende in:
Tijd om uw interactie te testen! Klik in de rechterbenedenhoek op de Voorbeeld knop. In de voorbeeldmodus kunt u uw overgangen testen en via hotspots communiceren met uw prototype. Probeer te klikken op de QR-kaart of sluit het pictogram; de kaart moet tussen de twee toestanden draaien. U kunt het voorbeeld sluiten door op te drukken X.
Met deze instapkaart als een interactieve component kunnen we selecteren welke gegevens dynamisch worden getoond, zonder dat er meerdere toestanden en interacties hoeven te worden gemaakt.
Om terug te keren, klik op het paarse terug knop links bovenaan. Nu zou je terug moeten zijn in het onderdeel boardingPasses. In deze component hebben we drie passen die momenteel dezelfde gegevens weergeven. Laten we dit nu bijwerken.
Weet je nog hoe binnen het boardingCard-onderdeel de data was ingesteld Overnemen van ouder? In dit geval is de bovenliggende instantie de componentinstantie.
Selecteer op de vlucht 1-pagina het instapkaart-exemplaar. In de component eigenschappen het verlof Staat zoals het is. Onder Gegevens, selecteer de gegevensbron en zorg voor de Rij is ingesteld op rij 1. De instantie moet nu gegevens van de eerste rij van het gegevensblad weergeven.
Als u de rij inschakelt, ziet u dat de weergegeven gegevens worden bijgewerkt. Laten we het nu op rij 1 houden, maar op vlucht 2 en vlucht 3 stelt u dit in om gegevens uit respectievelijk rij 2 en rij 3 te tonen.
Om gebruikers in staat te stellen om hun instapkaarten te doorlopen, moeten we enkele swipe-interacties instellen.
Creëer en teken een hotspot (H) aan de rechterkant van de vlucht 1-pagina (zorg ervoor dat u wat ruimte overlaat aan de bovenkant voor de hotspot via het pictogram Sluiten op de achterpagina van de boardingCard-component, en dat dit niet gebeurt t dekt de QR-code op de voorpagina). Gebruik de volgende instellingen om de veegbeweging te maken:
Doe hetzelfde op de vlucht 2-pagina en voeg een tweede hotspot aan de linkerkant van vlucht 2 en vlucht 3 pagina's ingesteld op Druk naar rechts en Druk op Links in plaats daarvan. Voel je vrij om op te drukken Voorbeeld om het onderdeel te testen en ermee te werken en uw veeginstellingen dienovereenkomstig aan te passen.
Om het prototype te bouwen, moeten we een variabele maken en gebruiken. Deze variabele stelt onze componenten in staat om met elkaar te praten en hun toestand te beïnvloeden.
De variabele die we zullen maken, zal worden gebruikt om de voortgangspunten bij te werken op basis van de instapkaart die wordt weergegeven.
Druk op om een variabele te maken V om de te openen Variabelen Modaal. Klik hier Maak een nieuwe variabele en typ "flightDisplayed" in de Naam veld. Laat de standaardwaarde leeg.
Geweldig, je hebt je variabele ingesteld! Sluit de variabelen modaal door op te drukken X of ontsnappen op je toetsenbord.
Navigeer terug naar het prototype. Als we nu een voorbeeld van de startpagina bekijken, kunt u tussen de kaarten vegen en ook de QR-code gebruiken.
Hoewel we nu door de passen kunnen vegen, zijn er nog een aantal dingen die moeten worden geconfigureerd om de voortgangspunten te beïnvloeden die moeten worden bijgewerkt op basis van de voortgang van instapkaarten..
Open hiervoor het onderdeel boardingPasses. Laten we op pagina 1 de volgende pagina-actie maken:
Herhaal dit op pagina 2 en 3 en zorg ervoor dat de waarde is ingesteld op 2 of 3 om de pagina weer te geven waarop u zich bevindt.
We hebben de component boardingPass effectief verteld om de waarde van de variabele vlucht die wordt weergegeven bij te werken, afhankelijk van de weergegeven vlucht (pagina). We kunnen deze waarde nu gebruiken om de status van de voortgangspunten te beïnvloeden.
Hier is hoe: ga terug naar het prototype en open de component progressDots.
U zult drie pagina's (toestanden) met de namen 1, 2 en 3 opmerken. Deze naam komt overeen met de waarden die zijn ingesteld in de variabele flightDisplayed. Het is belangrijk dat deze paginanamen overeenkomen met de ingestelde waarden.
Ga terug naar het prototype, selecteer de component progressDots en:
We hebben de component progressDots nu verbonden met de variabele flightDisplayed. Dit betekent dat wanneer de waarde van de variabele in een waarde verandert, de component progressDots de pagina weergeeft die overeenkomt met de variabelewaarde.
Probeer nu een voorbeeld van uw prototype, interactie met de instapkaarten door te vegen en te zien of de voortgangspunten worden bijgewerkt.
Ten slotte kunt u de pagina Activa verwijderen of verplaatsen om ervoor te zorgen dat uw gedeelde voorbeeld op de juiste startpagina wordt geopend. Om de pagina te verwijderen, selecteert u het hamburgermenu op de paginaminiatuur en klikt u op pagina verwijderen.
Tip: Kijk of je kunt achterhalen hoe je de promoCard-component kunt krijgen om de status bij te werken op basis van de weergegeven vlucht. U wilt een nieuwe variabele maken genaamd cardDisplayed.
Daar heb je het! Uw eigen instapkaart-app. Als je de iOS-app hebt gedownload, probeer dan het prototype te openen en ermee te werken op je iPhone; het zou net als het echte ding moeten voelen.
Goed gedaan voor het volgen van deze tutorial tot het einde. Je zou nu een goed begrip moeten hebben van hoe je je eigen prototype in Atomic kunt maken. Als u bestaande items in Sketch hebt, kunt u deze importeren met behulp van de Atomic-plug-in voor Sketch of desgewenst native ontwerpen in Atomic.
Vragen? Opmerkingen? Laat ze hieronder staan of neem contact met mij op via Twitter (@femkesvs).
Accentsconagua