Gebruik Framer X om interactieve prototypes

Als ontwerpers is er altijd de vraag welke prototypinghulpmiddelen u voor uw project moet gebruiken. Er is veel software die er zijn voor taken zoals Wireframing (zie onze top Wireframing-tools en uitstekend Website-bouwers ), prototyping en bouwcomplex interacties; Maar heel weinig gereedschap zijn in staat om al deze te hanteren. Framer is één tool met al deze functies en versnelt het proces van het maken van kleine animaties en interacties.

De nieuwste iteratie, Framer x , nu gebruikt react en javascript in plaats van coffeescript te gebruiken voor het ontwikkelen van micro-interacties en animatie. Dit helpt bij het leveren van snellere laadtijden en betere prestaties. Bovendien betekent het gebruik van reageercomponenten dat gebruikers meer mogelijkheden hebben om toe te voegen en te verlengen, inclusief inbedding van media-spelers, real-time gegevens en grafieken binnen prototypen.

Testen is een kerngedeelte van het PROTOTYPE-bouwproces en terwijl Framer X geweldig is in het maken van interactieve prototypes, het heeft hulp nodig om te zien hoe goed zijn creaties zijn. Bekijk onze Gebruikers testen POST voor enkele van de beste tools om Framer te complementeren en help real-world prototypes te bouwen en ervoor te zorgen dat u het beste gebruikt web hosting Service voor jou.

Hoe een app te maken met Framer X

Om de kracht van Framer X volledig te waarderen, creëren we een real-life project: een eenvoudige kookrecept toepassing met wat inhoud en media (activa die een back-up zijn cloud opslag ​Het eerste ding om te bouwen is de startpagina. We zullen dingen eenvoudig houden met de volgende elementen:

• Standaard zoekbalk om recepten te vinden
• Recente activiteit om de nieuwste recepten te laten zien bekeken
• Receptenkaarten die dingen tonen zoals de meest populaire recepten
• Een gedetailleerde weergave van het recept maken met video- en delen van delen

Om aan de slag te gaan, moet u een nieuw frame (een artboard) maken door op het Pictogram + op de linker Navbar te klikken. Selecteer een artboardstijl uit een lijst met standaard iPhone / Android-sjablonen op de rechterbalk. Nu ben je klaar om te gaan.

01. Bouw een zoekbalk

Laten we beginnen met het bouwen van de zoekbalk. In plaats van een rechthoek te maken en een zoekpictogram toe te voegen, zoals wij normaal gesproken, kunnen we daadwerkelijk snelle herbruikbare componenten in Framer X gebruiken, deze worden pakketten genoemd. Er zijn duizenden pakketten die te vinden zijn in de linkernavigatiebalk in de winkel. Klik op de winkel, zoek naar Android Kit en Voorbeeld Kit en installeer ze vervolgens.

Deze pakketten bevatten elementen zoals kaarten, knoppen, toetsenborden, schuifregelaars, ingangen en navigatie-menu-items. Zodra u deze pakketten installeert, kunt u de elementen in het menu Componenten aan de linkerkant gebruiken.

Zoek de gewenste elementen door in het filter te zoeken - in dit geval een zoekbalk, die wordt gevonden in Voorbeeld Kit. Sleep het eenvoudig op het frame. Nu kunt u eigenschappen wijzigen, zoals tijdelijke aanduidingstekst, lettergrootte en kleur met behulp van de rechterbalk.

02. Maak een inhoudstack

Voeg voor dit recente activiteitenblok eerst de tekst 'Recente activiteit' toe, wat vrij eenvoudig is. Nu kunnen we een nieuw kenmerk van Framer X genaamd Stacks gebruiken. Dit kan worden gedaan door op het pictogram + te klikken en Stack S uit het menu te selecteren. Nadat u de stapel hebt geselecteerd, sleept u een oppervlakte van 600 x 300 op het werkframe om een ​​stapel te maken. Deze stapel wordt weergegeven als blauw.

Laten we nu teruggaan naar het gedeelte Componenten en onder Android-kit, zoek naar het element van de kaart-5 en slepen het naar de stapel die we zojuist hebben gemaakt. Dupliceer deze kaarten twee keer en zorg ervoor dat alle drie kaarten in de stapel staan.

Zolang ze zich in de stapel bevinden, kunnen deze drie kaarten gemakkelijk worden herschikt zonder dat u zich zorgen hoeft te maken over de afstand. Als u de afstand tussen de kaarten wilt verhogen, kunt u de breedte van de gehele stapel vergroten. Zo simpel is het. U kunt deze kaarten ook personaliseren door de naam van de titel en de achtergrond te wijzigen op basis van uw smaak.

Nu we een stapel hebben gemaakt, laten we het schuifbaar maken. Verplaats het uit het frame / artboard. Klik op het + -pictogram van de linker NAV en klik op de optie Scroll. Net zoals we een gebied met de stapel hebben gemaakt, maak dan een schuifbaar gebied op het frame / artboard dat dezelfde grootte is als de stapel.

Wijzig nu het eigendom van de scroll in de rechterbalk door de richtingspijlen te wijzigen om het een horizontale scroll te maken. Nadat onze scrollcontainer is gemaakt, hebben we inhoud voor nodig, die wordt geserveerd door de stapel die we eerder hebben gemaakt. Sluit dus eenvoudig de scrollcontainer aan op de stapel met behulp van de pijl-prompt op de scrollcontainer. Het werkt door de muisaanwijzer naar de stapel te slepen.

03. Maak een verticale stapel

Voor de receptenkaarten moet u een methode volgen die lijkt op stap 2, maar in plaats van een horizontale scroll van kaarten te maken, creëert u een vergelijkbare verticale die in wezen een lijst is van de meest populaire recepten met miniaturen. Voor deze oefening heeft elke kaart voor een recept vier elementen - een afbeelding thumbnail, rating, naam van het recept en de tijd die nodig is om het voor te bereiden.

Maak je geen zorgen over de details van elke kaart. Ze kunnen worden gepersonaliseerd op basis van uw ontwerpsmaak. Volg dezelfde methode voor het gebruik van een kaart uit de componenten, dupliceert ze en voeg ze allemaal toe aan een stapel met verticale scroll.

04. Maak een nieuwe pagina

Laten we nu een nieuwe pagina maken om in de details van een bepaald recept te gaan. Laten we bijvoorbeeld het geval van de tweede kaart hier innemen: Franse pasta. Als u deze nieuwe pagina wilt maken, maakt u een nieuw frame / artboard en introduceert u de elementen die we nodig hebben voor meer informatie over het Franse pasta-recept. Deze nieuwe pagina kan worden opgesplitst in een video, een titel, de beoordeling, de tijd die nodig is om het te maken en een paar actieknoppen, zoals opslaan in lijst en delen met sociale media.

Ga voor het toevoegen van video naar de winkel en installeer het YouTube-pakket, waarmee u moeiteloos video's aan uw prototype kunt toevoegen. Ga nu naar het paneel van uw componenten en sleep het YouTube-element van onder de YouTube-component in het frame.

Pas de breedte van de miniatuur aan zodat het past bij de breedte van het frame. In het deelvenster Rechts Eigenschappen kunt u de URL van de video invoegen die u in het prototype wilt spelen. Als je wilt, is er ook een manier om video's via het selectievakje in het paneel van de eigenschappen te sturen.

Onder deze video kunt u de titel, beoordeling en verschillende pictogrammen toevoegen. Om pictogrammen voor ons voorbeeld toe te voegen, maakte ik gebruik van het onderdeel van de Icon Generator Store. Het is een eenvoudig proces: sleep het basispictogram eenvoudig op het frame en verander dan het pictogram met de naam op het rechterkant van de rechterkant naar 'Heart' en 'Share'. Dit zal de basispictogrammen in respectievelijk de Pictogrammen opslaan en delen. Hun kleuren kunnen ook eenvoudig worden gewijzigd met behulp van het rechterpaneel.

Om dingen gemakkelijk voor bezoekers te maken, kunt u een sectie toevoegen die ingrediënten worden genoemd, die alle ingrediënten die nodig zijn voor ons recept - in dit geval, in dit geval, de Franse pasta vermelden.

05. Introduceer interacties

Laten we nu ons ontwerp maken om interacties voor een knop toe te voegen. Idealiter, wanneer u op het aandelenpictogram klikt, moet u worden gevraagd met een scherm om het recept te delen in verschillende sociale mediakanalen. Laten we bouwen die een nieuw frame gebruiken.

Zorg ervoor dat de breedte en hoogte van dit frame dezelfde breedte en hoogte is als de andere twee frames die we hebben gemaakt. Het idee is voor dit nieuwe deelvenster om omhoog te schuiven en het huidige scherm te vervangen wanneer het aandelenpictogram is geklikt.

Om het scherm te helpen onderscheiden, laten we een kleur toevoegen en vullen het met sociale media-iconen zoals Facebook, Instagram, WhatsApp en e-mail. Dit aandeelscherm moet ook een X-pictogram toevoegen dat eraan is toegevoegd, die wanneer geklikt het terug naar de oorspronkelijke staat zou brengen.

Zorg ervoor dat alle pictogrammen in een stapel zijn gerangschikt. Zodra het X-pictogram is inbegrepen, is de volgende stap om dit frame te koppelen, zodat deze verschijnt wanneer u op het pictogram aandeel klikt.

Om dit te doen, selecteert u het frame dat het aandelenpictogram bevat. In het paneel aan de rechterkant is er een eigendom genaamd Link. Nadat u hierop klikt, biedt de applicatie-interface u een pijl die u kunt slepen naar het nieuwe aandelenkader dat we hebben gemaakt. Dit maakt een link op de achtergrond.

Nu, wanneer u het aandelenpictogram selecteert, observeert u nieuwe eigenschappen in het rechtspaneel onder link, die doel, overgang en richting zijn. Elk van deze eigenschappen maakt u in staat om de elementen te wijzigen, zoals transities en de richting waarin het scherm moet verschijnen, enz.

U kunt testen of het prototype werkt of niet door op het afspeelpictogram te klikken in de rechterbovenhoek van de interface. Evenzo moet u het scherm op het videoscherm koppelen, zodat wanneer de gebruiker klikt op het X-pictogram, het terugkeert naar het vorige scherm.

Dit kan worden bereikt met behulp van een vergelijkbare koppelingsoptie en het toevoegen van het doel als het videoscherm. Als u een bezoek wilt hebben bij het toevoegen van een beetje variatie, kunt u de richting links plaatsen in plaats van top en vervolgens de afspeelopdracht gebruiken om te testen als de interactie werkt of niet.

06. Een opslagknop toevoegen

Laten we nu een overlay-interactie toevoegen aan het pictogram Opslaan. Hier is ons doel dat wanneer een bezoeker op het hartvormige pictogram klikt, er een pop-upvenster moet zijn, verschijnen die vraagt ​​of u het recept op een op maat gemaakte lijst wilt opslaan.

Laten we beginnen met het maken van een nieuw frame, opgeslagen lijsten. Net zoals je deed met de vorige, zorg er dan voor dat dit frame dezelfde breedte heeft, maar deze keer moet je de hoogte verminderen omdat het wordt weergegeven als een overlay wanneer erop is geklikt. Voor de styling van het frame van de opgeslagen lijst voegt u een koptekst toe, een tekstinvoer om de naam van de lijst en een knop in te voeren die een CTA is om het op te slaan.

Als u wilt koppelen, selecteert u het hartvormige pictogram op het videoframe en voegt u een koppeling toe aan het frame opgeslagen lijsten. Nu, in plaats van de overgangseigenschap een duwtje, maakt het een overlay. Pas het in op 80% en test deze vervolgens met de knop PLAY. Wijzig totdat u tevreden bent met de overlay. Link het X-pictogram op het opgeslagen lijstenpictogram terug naar de videopagina.

Dit is hoe om Framer X te gebruiken om eenvoudig actieve interactieve prototypen te maken. Er zijn ook geavanceerde hulpmiddelen die u kunt gebruiken, evenals het toevoegen van reageren van reagerende coderingen voor de elementen van de frames. Ook is het beste deel van Framer X dat iedereen het kan beheersen door het uit te proberen op een paar prototypen.

Dit artikel werd oorspronkelijk gepubliceerd in kwestie 325 van net, 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop Issue 325 of inschrijven vangen.

Doe mee in april 2020 met onze line-up van JavaScript Superstars op Generatejs - de conferentie die je helpt Betaal JavaScript te bouwen. Boek nu op generateconf.com

Lees verder:

• Hoe opvallen en worden ingehuurd als een UX-ontwerper
• De 20 UX-tips die u moet weten
• 22 beste UI-ontwerpgereedschap