Share
In deze zelfstudie leer ik je hoe je een geanimeerd prototype van je mobiele applicatieontwerp maakt. Het prototype ziet eruit en voelt aan als een echte applicatie op je telefoon; je kunt navigeren en scrollen door je ontwerp, met behulp van gebaren en aangepaste animaties.
Aan het einde van deze tutorial kunt u een geanimeerde prototype-versie van elk toepassingsontwerp maken met behulp van Pixate. Laten we beginnen!
Voor deze zelfstudie hebt u drie dingen nodig om te volgen:
Naar mijn mening is Pixate de beste tool die beschikbaar is voor ontwerpers om volledig functionele, aangepaste geanimeerde prototypen voor mobiele applicaties te maken, zonder een enkele regel code te schrijven.
In tegenstelling tot andere tools voor prototypen, zoals Flinto of Marvel, kun je met Pixate lagen van elkaar scheiden en interacties insluiten, zoals slepen, tikken, dubbeltikken, scrollen, knijpen en meer.
Het prototype zelf bestaat op het web. Tijdens deze tutorial zullen we de webversie van Pixate gebruiken, maar we zullen de eindresultaten krijgen in een native applicatie op onze telefoon, die een geweldige vloeiende ervaring biedt.
Voordat we ons eerste prototype kunnen maken, moeten we een nieuw project opzetten in Pixate.
Nadat u bent ingelogd op uw account, klikt u op de Nieuw project knop en selecteer vervolgens de Nieuw prototype keuze.
Hier kunnen we het specifieke type apparaat selecteren waarvoor we ontwerpen. Laten we in dit geval de iPhone 6 kiezen, omdat we de fitness-app voor dat apparaat hebben ontworpen in Sketch.
Notitie: we kunnen ook smartwatch-schermgroottes selecteren, zoals de Apple Watch, LG G Watch of de Moto 360.
Met Pixate kunnen we elk afzonderlijk object in ons prototype animeren, gebaseerd op verschillende gebeurtenissen en interacties, zoals het laden van het scherm, tikken, dubbel tikken of scrollen. Dit betekent ook dat we de elementen die we willen animeren in ons prototype afzonderlijk moeten exporteren.
Laten we ons Sketch-bestand openen en elk element één voor één exporteren. Als je naar het laatste prototype kijkt, zie je dat ik in het geval van het "GO-scherm" afzonderlijk de navigatiebalk, de tabbalk, elke kolom van de weersvoorspelling en de doelcirkels heb geëxporteerd..
U moet in PNG exporteren, omdat het van cruciaal belang is om transparante lagen te hebben.
Tip: focus altijd op één scherm per keer. Op dit punt in het proces zou u alleen de lagen van het "GO-scherm" moeten exporteren, zodat het gemakkelijker is om te werken en indien nodig dingen aan te passen indien nodig.
Het importeren van items in Pixate is een kwestie van het laten slepen en neerzetten van de geëxporteerde PNG-bestanden in het browservenster:
Nu is het tijd om ons scherm opnieuw te bouwen in Pixate. Dit werk kan veel sneller worden gedaan als we het over de Inspecteur paneel beide in Pixate en Sketch. Wanneer dit het geval is, hoeven we alleen maar de X- en Y-waarde van elk element te kopiëren en te plakken.
Notitie: Houd er rekening mee dat ons schetsontwerp is gemaakt met @ 2x resolutie, terwijl we in Pixate werken met @ 1x resolutie. Dit betekent dat we elk getal van Sketch by 2 moeten splitsen voordat het wordt toegepast op Pixate.
Laten we de Pixate-app openen op onze iPhone, waar we kunnen zien dat ons ontwerp is begonnen samen te komen. Vanaf nu wordt elke keer dat we iets wijzigen in de webtoepassing, deze automatisch gesynchroniseerd met onze telefoons.
Na het selecteren van de eerste kolom van de weersvoorspelling, kunnen we links in onze browser de soorten animaties zien. Laten we het slepen en neerzetten Animatie vervagen aan de andere kant, de rechterzijbalk.
Nu moeten we aangeven wanneer we deze animatie willen laten verschijnen. Stel de Gebaseerd op waarden voor * SCREEN *, geladen.
Dit betekent dat onze animatie meteen na het laden van het eerste scherm wordt afgespeeld, wat meteen gebeurt wanneer we het prototype uitvoeren.
Aangezien ons doel is om een vervaging in effect te hebben, laten we de aanvankelijke dekking op zetten 0% op de Eigenschappen paneel, en naar 100% op de Deelvenster Animaties.
Aan de onderkant van de Deelvenster Animaties we kunnen ook de versnellingscurve, de duur en de vertragingswaarden instellen.
U moet de duur instellen tussen 0.2-0.4s, maar er is geen officieel hier, dus ik moedig je aan om met deze waarden te spelen totdat je voelt dat ze precies goed zijn.
Notitie: in mijn prototype gaf ik er de voorkeur aan iets langzamere animaties te gebruiken, zodat je ze duidelijker kunt zien. In een echt project zou ik een snellere en subtielere beweging aanraden.
Laten we nu de tweede kolom van de weersvoorspelling selecteren en precies hetzelfde instellen Animatie vervagen zoals we eerder deden, met slechts één verschil: deze keer stelde de animatie vertraging In de buurt zijn 0.1-0.3s. Op deze manier worden de animaties in een reeks afgespeeld.
Ga verder met exact dezelfde methode voor alle elementen waaraan u een fade-animatie wilt toevoegen, maar vergeet niet om de waarde van de animatie-vertraging voortdurend te verhogen.
Laten we nu de interactie tussen de cirkels in de doelsectie instellen. Om horizontaal tussen de doelringen te kunnen scrollen, moeten we deze als drie afzonderlijke PNG-bestanden importeren.
Nadat we ze in hun juiste positie hebben geplaatst, laten we het doen maak een nieuwe laag in Pixate; nodig om horizontaal scrollen in te schakelen. Op de Eigenschappen paneel zorg ervoor dat je het uiterlijk instelt op Geen afbeelding ingesteld. Voordat we een interactie aan deze laag toevoegen, voegen we de PNG-doelbestanden toe aan de nieuwe laag op de Lagen paneel. In eenvoudige termen is dit vergelijkbaar met de Groep hulpmiddel in Sketch.
Nu kunnen we een toevoegen Interactie slepen naar deze nieuwe laag en stel in Horizontaal scrollen met minimale positie: -255pt en maximale positie: 120pt op de Deelvenster Animaties.
Voor het kleine stuiterende effect tijdens de horizontale schuif, heb ik een aangepaste animatie gemaakt met speciale voorwaarden. Voeg om te beginnen een toe Verplaats animatie naar de nieuwste laag, die alle ringlagen bevat.
Nu, in de animaties paneel stelt de Gebaseerd op waarde voor Doelinstellingen en Sleep Release.
Voor het eerst IF conditie Ik heb de volgende formule gebruikt: goal_settings.x> -255 && goal_settings.x < -67, wat betekent dat als de positie van de doelgroeplaag (layer-ID: goal_settings) hoger is dan -255 pt en kleiner dan -67 pt, het verplaatst de linkerkant van de laag naar de -67 pt punt.
Voor de animatie gebruikte ik een Veerverlichtingscurve met een wrijving waarde van 25 en spanning van600.
Mijn tweede IF-conditie is: goal_settings.x <= -67 && goal_settings.x > -255, verplaats vervolgens de linkerkant van de laag naar -255 pt.
De derde voorwaarde is: goal_settings.x> -67 && goal_settings.x < 150, verplaats vervolgens de linkerkant van de laag naar 150 pt.
Last, but not least, de laatste IF-statement is: goal_settings.x < 150 && goal_settings.x > -67, waarmee de linkerkant van de laag wordt verplaatst -67 pt.
Notitie: Ik weet dat dit voor het eerst een beetje ingewikkeld lijkt, maar ik moedig je aan om mijn oplossing te kopiëren en plakken en het uit te proberen, dan iets te veranderen en het opnieuw te proberen. Mijn voorwaarden zijn op geen enkele manier perfect, dus je kunt ze zelfs verbeteren en aanpassen, totdat ze goed voor je zijn.
Zoals we deden met de doelringen, laten we nog een nieuwe laag maken en elke laag plaatsen die we tot nu toe hebben. We groeperen nu alleen de lagen van het "GO-scherm".
Voordat we het 'Challenges-scherm' in Pixate gaan importeren en opnieuw opbouwen, moeten we een nieuwe laag maken, die zal fungeren als de groepslaag voor elk element op dit scherm. Laten we dit naast het "GO-scherm" plaatsen zonder enige opvulling of ruimte ertussen.
Nadat we ons scherm laag voor laag hebben geïmporteerd en opnieuw opgebouwd, moeten we de verticale schuif voor de kaarten met uitdagingen instellen.
Laten we maak een nieuwe laag zonder afbeeldingachtergrond en voeg onze kaartenlagen eraan toe. Verticaal scrollen is zelfs gemakkelijker dan horizontale scroll, omdat het enige wat we moeten doen is om een Scroll interactie naar deze nieuwe laag.
Om het 'Challenges-scherm' ook op onze iPhone te zien, moeten we teruggaan naar ons 'GO-scherm' en een nieuwe rechthoeklaag toevoegen bovenaan de Uitdagingen-knop op de tabbladbalk.
Stel het uiterlijk in op geen afbeeldingsvulling en voeg een toe Tik op interactie ernaar toe. Laten we nu teruggaan, selecteer onze groepsklasse Uitdagingen, die elk element op het scherm 'Uitdagingen' bevat en voeg een toe Verplaats animatie ernaar toe.
De enige overgebleven dingen die we moeten doen, is het instellen van de Gebaseerd op evenement naar de knop die we onlangs hebben toegevoegd aan ons "GO-scherm" met Tik op interactie en stel de Verplaatsen naar waarde voor 0 pt. Wanneer we vervolgens op de knop 'Uitdagingen' op het 'GO-scherm' drukken, wordt de groeplaag Uitdagingen naar de juiste plaats verplaatst.
Om de kaarten met uitdagingen te animeren, gebruiken we tegelijkertijd twee animaties, een Fade en een Move. Zorg ervoor dat u de Gebaseerd op waarde voor de knop Uitdagingen.
Voor de Fade-animatie gebruiken we dezelfde techniek als bij het GO-scherm, dus laten we de Dekking tot 0% op de eigenschappen paneel en de Vervaag naar waardetot 100% op de animaties paneel. Voor de duur die ik gebruikte 0.5s met een 0,2 s vertraging.
Notitie: vergeet niet om de waarde van de vertraging voor elke kaart voortdurend te verhogen.
Onze tweede animatie is een Verplaats animatie. Net als in het geval van de Fade-animatie, laten we de Gebaseerd op waarde voor de Challenges-knop en gebruik exact dezelfde animatieduur en vertraging als in het geval van de Fade-animatie. Stel nu de Verplaats naar boven waarde voor 10px, waarmee onze uitdagingskaart 10 px naar boven wordt verplaatst, wanneer de animatie begint.
Aangezien aan het einde van de animatie elke uitdagingskaart 10px omhoog zal zijn, moeten we ze 10px naar beneden verplaatsen op ons Pixate canvas.
Laten we opnieuw een nieuwe laag maken, die het gedeelte Uitdagingen bladeren zal bevatten. Zoals in het geval van het gedeelte Mijn uitdagingen, laten we er een toevoegen Scroll interactie ernaar toe.
Om te kunnen schakelen tussen de secties Mijn uitdagingen en Bladeren door uitdagingen, moeten we een nieuwe laag maken bovenaan de titel Uitdagingen voor bladeren, die als een knop zal werken. Zet de laagvulling op Geen afbeelding ingesteld en voeg een toe Tik op interactie ernaar toe.
Als we nu teruggaan naar de groeplaag Bladeren in onze uitdagingenstekst (gemaakt in de vorige stap), kunnen we een Animatie vervagen ernaar gebaseerd op deze nieuwe knop. Dus totdat we op de knop Uitdagingen doorbladeren drukken, is de dekking van het gedeelte met browse-uitdagingen 0% en na de tik 100%.
Als laatste stap heb ik een toegevoegd Animatie schalen en vervagen naar de voortgangsbalk van de tijdlijn in de sectie Uitdagingen browsen.
Notitie: vergeet niet om exact dezelfde animatieduur en vertragingswaarden te gebruiken voor de Fade en Scale animaties.
Voordat we het activiteitenscherm gaan animeren, moeten we een paar stappen herhalen die we hebben uitgevoerd in het geval van het scherm 'Uitdagingen'..
Laten we een nieuwe laag maken vlak naast het "Uitdagingen-scherm" zonder enige opvulling. Deze laag wordt de groepslaag voor de elementen op het scherm "Activiteiten".
Laten we nu teruggaan naar ons "GO-scherm" en een nieuwe laag maken bovenaan de Activiteiten knop op de tabbalk. Voeg een ... toe Tik op interactie naar deze nieuwe laag.
Ga terug naar onze laag Activiteitengroep en voeg een toe Verplaats interactie ernaar gebaseerd op onze nieuwe knop.
Voeg nu een toe Animatie vervagen voor elk resultaat op het scherm Activiteiten met een 0.4s duur van de animatie en een 0.1s animatie vertraging tussen de resultaten.
Notitie: vergeet niet om de Gebaseerd op waarde voor de knop "Activiteiten", die we hebben geplaatst op het "GO-scherm".
Maak een andere groepslaag en plaats elke trainingssessie erin, behalve de eerste. We zullen dit nodig hebben voor de Verplaats animatie, aangezien het naar beneden verplaatsen van slechts één laag veel gemakkelijker is dan zes of zeven lagen tegelijkertijd omlaag verplaatsen.
Voeg nu een toe Tik op interactie naar de eerste trainingssessie, voeg dan een toe Verplaats animatie naar de groepslaag die we zojuist hebben gemaakt. Stel op het paneel Animaties de Gebaseerd op waarde voor de eerste trainingssessie en voeg een toe Verplaats naar boven waarde rond 277pt. Wanneer we op de eerste trainingssessie tikken, gaan alle andere items op het scherm omlaag.
Voor de detailweergave van de training die ik alleen heb gebruikt Vervagen en verplaatsen animaties gebaseerd op het tikken op de eerste trainingssessie.
Aan het begin, gewoon vervagen en verplaatsen op de achtergrond, dan de grafiek en ten slotte de specifieke nummers en details van de training.
Je moet hier een beetje spelen met de duur van de animatie en vertragingen.
Je bent geweldig! U hebt zojuist uw eerste volledig functionerende, aangepaste geanimeerde Pixate-prototype gemaakt. Ik heb deze tutorial gevolgd en ik hoop dat u meer vertrouwen hebt in het gebruik van Pixate voor prototypen van mobiele applicaties.
Ik ben benieuwd naar uw mening over deze tutorial en stel gerust vragen in de comments, ik zal hier zijn om te helpen en ze te beantwoorden.
Accentsconagua