Maak een hi-fidelity prototype in atomic

Sep 11, 2025
Procedures

Het is gemakkelijk om ingehaald te raken bij het proberen een idee te ontwikkelen binnen een statische mockup- of flat-drawing-tool, maar een voorlopig ontwerp is duizend vergaderingen waard. Waarom zou u genoegen nemen met iets minder dan uw ideeën op een interactieve manier verkennen?

Misschien heb je een idee voor hoe een transitie zich kon gedragen, maar je bent niet helemaal zeker of het recht op de gebruiker zou voelen. Snel protograferen van de overgang en interactie daarmee geeft u rechtstreeks een veelere realistische ervaring van hoe het eindproduct in de echte wereld kan werken.

We hebben gereedschap gezien die prototyping naar de ontwerpruimte brengen, maar niemand heeft Atomair ​Nu is er een manier om volledig interactieve, hi-fidelity-prototypes te bouwen die eruitzien en zich gedragen als het echte ding.

Prototyping in Atomic is ongelooflijk snel: je kunt in minuten mooie, geavanceerde mockups maken zonder een code te schrijven, elke software te installeren of te veel koffie te drinken. U kunt het prototype direct op uw mobiele apparaat bekijken of delen met een teamgenoot voor feedback. We hebben ook alle activa vooraf gemaakt die u moet beginnen, zodat u niets hoeft te importeren (maar u kunt importeren van schets en Photoshop CC te).

In deze tutorial zullen we een eenvoudige swipe-overgang in een weer-app verkennen die we in Atomic zullen creëren. We lopen door de gemakkelijke stappen voor het maken van overgangen, en als u een uitdaging nodig heeft, behandel ik ook enkele meer geavanceerde prototypingfuncties die u kunt verkennen.

01. Meld je aan

Laten we beginnen! Als u nog geen account hebt, open dan Google Chrome, bezoek atomic.io en meld je aan voor een gratis proefperiode. Dit duurt 30 dagen, wat voldoende tijd voor u zou moeten zijn om atomic te verkennen en uw eerste prototype te maken.

02. Kijk rond

The Sample Project contains sample files to help you get familiar with Atomic

Het voorbeeldproject bevat voorbeeldbestanden om u te helpen bekend met Atomic

Nu ben je aangemeld bij je account, dit is een geweldige tijd om te verkennen. U zult merken dat een voorbeeldproject voor u is opgezet. Dit heeft een aantal inleidende voorbeeldbestanden waarmee u kunt spelen terwijl u vertrouwd wordt met Atomic. Als alternatief kunt u ons bezoeken Vitrine , dat een verzameling prototypen heeft gebouwd door anderen. Als je vast komt te zitten, is de beste plaats om een ​​oplossing te zoeken helpcentrum ​

03. Nieuw project

Maak een nieuw project door op 'Nieuw project' te klikken en Name IT 'Recept App'. Als u op ENTER drukt, wordt de projectmap geopend. Hier kunt u alle ontwerpen binnen dit specifieke project bekijken. Omdat dit een nieuw project is, is het leeg. Ontwerpen zullen zich echter in de loop van de tijd vullen terwijl u ze maakt.

04. Grijp een monster

There's a ready-made sample file for this project

Er is een kant-en-klaar voorbeeldbestand voor dit project

In plaats van een nieuw leeg ontwerp te maken, ga hier ​Hiermee wordt een voorbeeldbestand geopend dat we hebben gemaakt om u te helpen aan de slag te gaan.

Zie de knop 'Kopiëren en bewerken' in de rechterbenedenhoek? Klik daar en voeg het toe aan uw recept-app-project. Klik op 'Nu bewerken'. Zo is een kopie van ons voorbeeldbestand nu in uw project klaar voor u om te bewerken.

05. Verken de editor

Welkom bij de redacteur! Als je in het verleden een ontwerptool hebt gebruikt, zal Atomic waarschijnlijk bekend voelen. Laten we rondkijken. Aan de linkerkant vind je de toegang tot tekening, lay-out en prototyping tools, evenals twee tabbladen waarmee je je kunt schakelen tussen de pagina's en lagenpanelen. Aan de rechterkant zul je het paneel Eigenschappen opmerken, waarmee je je paginaformaat kunt wijzigen, en instellingen voor stijlen en overgangen naar voren brengen.

06. Bekijk de elementen

In the sample file's Assets page you’ll find the elements you need

In de assetspagina van het voorbeeldbestand vindt u de elementen die u nodig hebt

Op de pagina Activa van het voorbeeldbestand zie je dat we alle elementen in dit prototype voor je hebben gemaakt. Schakel over naar het paneel van de lagen en klik vervolgens op enkele van de elementen op het canvas. De elementen die u selecteert, worden automatisch gemarkeerd in het paneel van de lagen. Versnellen uw workflow door op '?' Te drukken Om het bereik van sneltoetsen te zien, kunt u gebruiken.

07. Voorbeeld

U kunt een voorbeeld van en communiceren met uw prototype wanneer u maar wilt door op 'Voorbeeld' in de rechterbenedenhoek van de editor te klikken. We zullen dit later gebruiken om te testen hoe onze overgangen voelen. Het selecteren van 'Preview' toont u nu de activa in de modus Fullscreen, maar als u naar pagina 2 navigeert met behulp van de pijlen, ziet u een referentievoorbeeld van de eerste status van ons prototype. Probeer interactie met het referentievoorzicht door op de knop 'Opgeslagen recepten' in de koptekst te klikken om te bekijken wat we gaan maken.

08. Aan de slag

Nu ben je bekend met het prototype dat we bouwen, het is tijd om te beginnen! Selecteer 'Bewerken', om terug te gaan naar de editor en selecteer vervolgens op de pagina Assets alle elementen en kopieer ze naar het klembord. Ga naar pagina 1 en plak de elementen op de pagina.

09. Schik uw activa

Zonder alle geselecteerde elementen, stelt u de achtergrondvulling van uw canvas in op # F6F7F8 (kijk in het deelvense rechtse eigenschappen). Plaats de koptekst op het canvas, de top en het midden.

U wilt de activa opnieuw rangschikken, zodat uw eerste staat (alle recepten) op het canvas is gepositioneerd en de activa voor uw binnenkort-naar-worden gecreëerde tweede staat (opgeslagen recepten) zijn van het canvas aan de rechterkant. Dit is waarom: wanneer hetzelfde object bestaat op pagina 1 en pagina 2, zal Atomic elke wijzigingen tussen hen automatisch animeren.

10. Stapel je kaarten

Wanneer u in eerste instantie het prototype bekijkt, heeft u mogelijk opgemerkt dat de nieuwsfeed van recepten op de pagina 'Referentie - alle recepten' verticaal scrolbaar is. Om dit effect toe te voegen, regelt u de receptenkaarten in een verticale stapel, inclusief de tekst 'Kom terug morgen' die het laatst moet worden geplaatst, onderaan.

11. Maak een scroll-container

Selecteer de receptenkaarten en 'Kom morgen terug en kies de containerhulpmiddel dat in het topcentrum van het canvas is verschenen. Selecteer 'Scrollling Container maken'. De inhoud wordt dan gegroepeerd en geplaatst in wat wij een scrollcontainer noemen, met verticale scrollen die standaard ingeschakeld is. Zorg ervoor dat u de grenzen van uw container definieert door de bodemgrens omhoog te slepen om de elementen te maskeren en het canvas te ontmoeten.

12. Plaats uw elementen

Voor deze specifieke overgang willen we dat het raster 'opgeslagen recepten' van rechts komt, en de tekst 'toevoegen' die van onderaan komt. Om ervoor te zorgen dat dit gebeurt, plaatst u elk element in zijn respectieve uitgangspositie. 'Opgeslagen recepten' moeten bijvoorbeeld op pagina 1 worden geplaatst, van het canvas en naar rechts; overwegende dat de tekst 'toevoegen meer' moet worden geplaatst op pagina 1, van het canvas en hieronder.

13. Tik op Transitie

Omdat we een tikovergang maken, waar we willen dat de elementen op onze volgende pagina op schuiven, is het belangrijk dat ze ook bestaan ​​op pagina 1, van het canvas, om hun startpositie te definiëren. Op elk gewenst moment kunt u verwijzen naar de pagina 'Referentie - alle recepten' om te zien hoe deze pagina moet worden geregeld.

14. Duplicatie

For our transition, duplicate page 1

Voor onze overgang, dupliceer pagina 1

Nu hebben we de eerste pagina ingesteld, het is tijd om de tweede staat voor de transitie te maken, die we op een nieuwe pagina doen. Zorg ervoor dat het paneel Pagina's is geselecteerd en beweeg dan op pagina 1 om het Hamburger-menu rechtsonder op de pagina-kaart omhoog te brengen. Klik op het menu en selecteer 'Dupliceer'.

15. Opgeslagen recepten

Atomic will animate any changes you make between Page 1 and your new Page 2

Atomic animeert alle wijzigingen die u aanbrengt tussen pagina 1 en uw nieuwe pagina 2

Navigeer naar uw nieuw gedupliceerde pagina om de tweede staat te maken: uw opgeslagen recepten. Het is belangrijk hier om geen elementen op de pagina te verwijderen, omdat dit de overgang zal breken. Omdat we de pagina hebben gedupliceerd, weet Atomic dat de elementen op beide pagina's dezelfde aangesloten elementen zijn. Daarom weet het om eventuele wijzigingen te animeren die we aanbrengen aan de eigenschappen van de elementen op pagina 2 (grootte, positie, rotatie, dekking, kleur enzovoort).

16. Meer overgangen

Verplaats eerst de scrolllinggroep 'Alle recepten' naar links, van het canvas en het element 'Opgeslagen recepten' en 'voeg meer' tekst toe in hun nieuwe posities: in het lichaam (in plaats van de groep 'Alle recepten' groep) de onderste helft van het canvas en respectievelijk in het centrum. Het enige element dat we niet in deze overgang beweegt, is de koptekst. Dit komt omdat de koptekst op het scherm blijft en alleen subtiel verandert - daar komen we binnenkort.

17. Verdere animatie

Voor de koptekst willen we de blauwe achtergrond om over de tweede staat te glijden. Terwijl op pagina 2, met het paneel van de lagen openen, breidt u de groep met de titel 'Header' uit en selecteert u de blauwe rechthoek. Verplaats dit dan naar rechts, dus het is achter 'opgeslagen recepten' geplaatst. Leuk!

18. Het leuke deel

Add an interaction hotspot over the area you want users to interact with

Voeg een interactie-hotspot toe over het gebied waarmee gebruikers communiceren met

Komt nu het leuke deel van het maken van de overgang. Op pagina 1 gaan we een hotspot tekenen over de tekst 'opgeslagen recepten' in de koptekst, omdat dit het gebied is waarvan we onze gebruiker willen communiceren. Selecteer het hotspot-tool Interaction Hotspot in het paneel Tools helemaal links van de editor (of druk gewoon op H). U kunt hotspots tekenen met dezelfde methode die u zou gebruiken om een ​​rechthoek op het canvas te tekenen: klik en sleep gewoon.

19. Overgangsinstellingen

Customise your transition, including the trigger gesture and motion type

Pas uw overgang aan, inclusief het triggergebaar en het motiontype

Nadat u uw hotspot hebt getekend, ziet u nog steeds een geselecteerd, u ziet een deel van interacties in het paneel Eigenschappen aan de rechterkant. Hier kunt u de triggergebaar, de bestemmingspagina, het motiontype en de duur van de overgang opgeven. Geef voor deze overgang de volgende instellingen op: Gebaar: Klik of tik op ​Ga naar: Pagina 2 ​Beweging: E in-out ​Looptijd: 250 ​

20. heen en weer

We willen tussen de twee overgangen heen en weer kunnen schakelen, dus we moeten nu ook een hotspot op pagina 2 plaatsen om ons terug te brengen naar pagina 1. Kopieer de hotspot van pagina 1 met behulp van de sneltoetsen en plakken op pagina 2 over de tekst 'Alle recepten' in de 'header'. Vergeet niet om de instelling van de bestemmingspagina van de nieuwe hotspot naar pagina 1 bij te werken.

21. Voorbeeld

Click the Preview button to see your transition in action

Klik op de knop Voorbeeld om uw overgang in actie te zien

Het is tijd om een ​​voorbeeld van je overgang te bekijken! Navigeer naar pagina 1 in het paneel Pagina's en klik op Voorbeeld rechtsonder in de editor (Snelkoppeling CMD + ENTER ​Klik op of tik op 'Opgeslagen recepten' op uw prototype om naar pagina 2 te gaan. Selecteer vervolgens 'Alle recepten' prototype om terug te nemen naar pagina 1.

22. Alles gedaan!

Nu ben je een pro! Selecteer 'Bewerken' om terug te keren naar de editor, als u de activa en twee referentiepagina's verwijdert (door het Hamburger-menu van de pagina te selecteren en vervolgens 'pagina' '), is het prototype dat u zojuist hebt gedaan te delen. U kunt eenvoudig een aandelenkoppeling maken door op 'Share' in de rechtsonder op de editor te drukken.

Dit artikel verscheen oorspronkelijk in netto tijdschrift kwestie 283; koop het hier ​

Procedures - Meest populaire artikelen

Hoe HTML-code sneller te schrijven

Procedures Sep 11, 2025

(Beeldkrediet: toekomst) Moderne websites vereisen veel HTML-code. Complexe lay-outs met meerdere verschillende menin..

Hoe Photoshop op de iPhone (ja, het is een ding)

Procedures Sep 11, 2025

(Beeldkrediet: Jason Parnell-Brookes) SPRING NAAR: Photoshop Express ..

Tackle Portrait Painting met oliën

Procedures Sep 11, 2025

Deze workshop gaat over het maken van een portretolieverfschilderij met betekenis. Het gaat ook om mijn idee voor een serie die d..

Verf expressieve portretkunst met artrage 5

Procedures Sep 11, 2025

Artrage is een populaire digitale kunstgereedschap (voor meer, zie onze Artslag Introductie) In deze tutorial neem..

Hoe dieren ogen illustreren

Procedures Sep 11, 2025

(Afbeelding Credit: Jill Tisbury) Bij het leren Hoe dieren te trekken , een lastig aspect om te behere..

Hoe een dashboard-app te maken met reageer

Procedures Sep 11, 2025

Pagina 1 van 2: Maak een dashboard-app in React - Stappen 1-10 Maak een d..

Hoe realistische golven te schilderen in Photoshop

Procedures Sep 11, 2025

Bij het schilderen van oceaanscènes in Photoshop CC , zoals bij de meeste van mijn schilderijen, begin ik met het verzamelen van enkele mariene foto-referenties, om ervoor te ..

Maak uw personages pop met kleur en licht

Procedures Sep 11, 2025

Ik hou echt van werken in kleur, of het nu is Photoshop CC of traditioneel schilderen met aquarellen. Levendige kl..

Categorieën