Lav en hi-troskab prototype i atomisk

Sep 11, 2025
hvordan

Det er nemt at blive fanget i at forsøge at udvikle en ide inden for et statisk mockup eller flad fil tegning værktøj, men en prototype. er værd tusind møder. Hvorfor vil du bosætte dig på noget mindre end at udforske dine ideer på en interaktiv måde?

Måske har du en ide om, hvordan en overgang kunne opføre sig, men du er ikke helt sikker på, om det ville føle sig ret til brugeren. Hurtigt prototyper overgangen og interagerer med den direkte giver dig en meget mere realistisk oplevelse af, hvordan det endelige produkt kunne arbejde i den virkelige verden.

Vi har set værktøjer bringe prototyping til designrummet, men ingen helt som Atomar . Nu er der en måde at opbygge fuldt interaktive, hi-troskab prototyper, der ser ud og opfører sig som den rigtige ting.

Prototyping i atomisk er utrolig hurtig: Du kan skabe smukke, avancerede mockups i minutter uden at skrive nogen kode, installere enhver software eller drikke for meget kaffe. Du kan forhåndsvise med prototypen direkte på din mobilenhed eller dele den med en holdkammerat til feedback. Vi har også foretaget alle de aktiver, du har brug for for at komme i gang, så du behøver ikke at importere en ting (men du kan importere fra skitse og Photoshop CC. også).

I denne tutorial vil vi undersøge en simpel swipe-overgang inde i en vejr app, som vi opretter i atom. Vi går gennem de nemme trin for udformning af overgange, og hvis du har brug for en udfordring, dækker jeg også nogle mere avancerede prototypningsfunktioner, som du kan udforske.

01. Tilmeld dig

Lad os komme igang! Hvis du ikke allerede har en konto, skal du åbne Google Chrome, besøge atomic.io og tilmeld dig en gratis prøveversion. Dette varer i 30 dage, hvilket skal være masser af tid for dig at udforske atomisk og lave din første prototype.

02. Kig rundt

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

Prøveprojektet indeholder prøvefiler, der hjælper dig med at blive fortrolig med atomisk

Nu er du logget ind på din konto, det er en god tid at udforske. Du vil bemærke, at et stikprojekt er oprettet for dig. Dette har nogle indledende prøvefiler, du kan spille rundt med, mens du bliver fortrolig med atomisk. Alternativt kan du besøge vores Udstillingsvindue , som har en samling af prototyper bygget af andre. Hvis du sidder fast, er det bedste sted at kigge efter en løsning vores Hjælp .

03. Nyt projekt

Opret et nyt projekt ved at klikke på 'Nyt projekt' og navngive det 'Opskrift App'. Hvis du trykker på ENTER, åbner projektmappen. Her kan du se alle designs inden for dette projekt. Da dette er et nyt projekt, er det tomt. Designs vil dog udfylde her over tid, mens du opretter dem.

04. Tag en prøve

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

Der er en færdiglavet prøvefil til dette projekt

I stedet for at skabe et nyt tomt design, hoved her . Dette åbner en prøvefil, vi har oprettet for at hjælpe dig med at komme i gang.

Se knappen 'Kopier og Rediger' i nederste højre hjørne? Klik på det og tilføj det til dit opskrift app projekt. Klik på 'Rediger nu'. Ligesom det er en kopi af vores prøvefil nu inde i dit projekt klar til at redigere.

05. Udforsk redaktøren

Velkommen til redaktøren! Hvis du har brugt et designværktøj i fortiden, vil atomisk nok blive fortrolig. Lad os kigge rundt. Til venstre finder du adgang til tegning, layout og prototyping værktøjer samt to faner, der giver dig mulighed for at skifte mellem siderne og lagpanelerne. Til højre vil du bemærke egenskabspanelet, som giver dig mulighed for at ændre din sidestørrelse, samt at opdrage indstillinger for stilarter og overgange.

06. Tjek elementerne

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

I prøvefilens aktiver side finder du de elementer, du har brug for

På aktiversiden af ​​prøvefilen vil du se, at vi har oprettet alle de elementer, der bruges i denne prototype for dig. Skift til panelet Lag, og klik derefter på nogle af elementerne på lærredet. De elementer, du vælger, bliver automatisk fremhævet i panelet Lag. Fremskynde din workflow ved at trykke på '?' For at se rækkevidde af tastaturgenveje, du kan bruge.

07. Forhåndsvisning

Du kan forhåndsvise og interagere med din prototype, når du vil ved at klikke på 'Preview' i nederste højre hjørne af editoren. Vi bruger dette senere til at teste, hvordan vores overgange føler. Valg af 'Forhåndsvisning' viser nu Aktiver i Fullscreen-tilstand, men hvis du navigerer til side 2 ved hjælp af pilene, vil du se et referenceeksempel på den første tilstand af vores prototype. Prøv at interagere med referenceeksemplet ved at klikke på knappen 'Gemte opskrifter' i overskriften for at forhåndsvise, hvad vi skal oprette.

08. Kom godt i gang

Nu er du bekendt med prototypen Vi bygger, det er på tide at komme i gang! Vælg 'Rediger', for at komme tilbage i editoren, og derefter på siden Aktiver Vælg alle elementer og kopier dem til udklipsholderen. Gå til side 1 og indsæt elementerne på siden.

09. Arranger dine aktiver

Uden alle valgte elementer skal du indstille baggrunden på dit lærred til # F6F7F8 (se i panelet Højre egenskaber). Placer overskriften på lærredet, toppen og centeret.

Du vil gerne omarrangere aktiverne, så din første tilstand (alle opskrifter) er placeret på lærredet, og aktiverne for din snart-til-de-oprettede anden tilstand (gemte opskrifter) er fra lærredet til højre. Her er hvorfor: Når det samme objekt eksisterer på side 1 og side 2, vil Atomic animere eventuelle ændringer mellem dem automatisk.

10. Stak dine kort

Når du oprindeligt forhåndsvise prototypen, har du muligvis bemærket nyhedsfeed af opskrifter på siden 'Reference - Alle Opskrifter' rulles lodret. For at tilføje denne effekt skal du arrangere opskriftskortene i en lodret stak, herunder "Kom tilbage i morgen" -teksten, der skal placeres sidst, nederst.

11. Opret en rullende beholder

Vælg opskriftskort og 'Kom tilbage i morgen' tekst, og vælg det containerværktøj, der er opstået på det øverste center af lærredet. Vælg 'Opret scrolling container'. Indholdet vil så blive grupperet og placeret inde i det, vi kalder en rullende beholder, med lodret rulning aktiveret som standard. Sørg for, at du definerer grænserne for din beholder ved at trække bundgrænsen op for at maske elementerne og møde lærredet.

12. Placer dine elementer

For denne særlige overgang ønsker vi, at de 'gemte opskrifter' gitter kommer ind fra højre, og 'Tilføj mere' tekst, der kommer op nedenfra. For at sikre, at dette sker, læg hvert element i sin respektive startposition. For eksempel skal 'gemte opskrifter' placeres på side 1, fra lærredet og til højre; Mens "Tilføj mere" -teksten skal placeres på side 1, fra lærredet og nedenunder.

13. Tryk på overgangen

Når vi opretter en TAP-overgang, hvor vi vil have de elementer på vores næste side til at glide ind, er det vigtigt, at de også eksisterer på side 1, fra lærredet, for at definere deres startposition. På ethvert tidspunkt kan du henvise til siden 'Reference - Alle Opskrifter' for at se, hvordan denne side skal arrangeres.

14. Duplikering

For our transition, duplicate page 1

Til vores overgang, duplikat side 1

Nu har vi oprettet den første side, det er på tide at oprette den anden tilstand for overgangen, som vi gør på en ny side. Sørg for, at PAGE-panelet er valgt, og hover derefter over Page 1 for at hente Hamburger-menuen nederst til højre på sidekortet. Klik på menuen og vælg 'Duplicate'.

15. Gemte opskrifter

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

Atomic vil animere eventuelle ændringer, du foretager mellem side 1 og din nye side 2

Naviger til din nyligt duplicerede side for at oprette den anden tilstand: dine gemte opskrifter. Det er vigtigt her ikke at slette nogen elementer på siden, da dette vil bryde overgangen. Fordi vi har dupliceret siden, ved atomisk, at elementerne på begge sider er de samme tilsluttede elementer. Derfor ved det at animere eventuelle ændringer, vi foretager til egenskaberne af elementerne på side 2 (størrelse, position, rotation, opacitet, farve og så videre).

16. Mere overgange.

Først flyttes 'All Opskrifter' Scrolling Group til venstre, Fra lærredet og 'Gemte Opskrifter' element og 'Tilføj mere' Tekst i deres nye positioner: I kroppen (i stedet for 'All Opskrifter' Gruppen) på den nederste halvdel af lærredet og i midten. Det eneste element, vi ikke flytter i denne overgang, er overskriften. Dette skyldes, at overskriften forbliver på skærmen og kun ændrer subtilt - vi kommer snart til det.

17. Yderligere animation

For overskriften vil vi have den blå baggrund at glide over på den anden tilstand. Mens du er på side 2, med lag panelet åbent, udvide gruppen med titlen 'header' og vælge det blå rektangel. Derefter flyttes dette til højre, så det er placeret bag 'Gemte opskrifter'. Pæn!

18. Den sjove del

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

Tilføj et interaktions hotspot over det område, du vil have, at brugerne interagerer med

Nu kommer den sjove del af at skabe overgangen. På side 1 vil vi tegne et hotspot over de 'gemte opskrifter' tekst i overskriften, da dette er det område, vi vil have, at vores bruger skal interagere med. Vælg det interaktive hotspot-værktøj fra værktøjspanelet længst til venstre for editoren (eller tryk blot på h). Du kan tegne hotspots ved hjælp af den samme metode, du vil bruge til at tegne et rektangel på lærredet: Klik blot på og træk.

19. Overgangsindstillinger.

Customise your transition, including the trigger gesture and motion type

Tilpas din overgang, herunder Trigger Gesture og Motion Type

Når du har trukket dit hotspot, med den stadig valgt, vil du se, at der vises en interaktionsafdeling i egenskabspanelet til højre. Her kan du angive udløserens gestus, destinationssiden, bevægelsestype og varighed af overgangen. For denne overgang angive følgende indstillinger: gestus: Klik eller TAP ; Gå til: Side 2. ; MOTION: E. ase in-out ; Varighed: 250. .

20. frem og tilbage

Vi ønsker at kunne skifte frem og tilbage mellem de to overgange, så vi skal også nu placere et hotspot på side 2 for at tage os tilbage til side 1. Kopier hotspot fra side 1 ved hjælp af tastaturgenveje og indsæt Det på side 2 over 'Alle opskrifter' tekst i 'Header'. Husk at opdatere destinationssiden indstillingen for det nye hotspot til side 1.

21. Forhåndsvisning

Click the Preview button to see your transition in action

Klik på forhåndsvisningsknappen for at se din overgang i aktion

Det er på tide at forhåndsvise din overgang! Naviger til side 1 i panelet Sider og klik på Forhåndsvisning nederst til højre på editoren (genvej cmd + enter. ). Klik eller tryk på 'Gemte opskrifter' på din prototype for at gå til side 2. Vælg derefter 'Alle opskrifter' prototype, der skal tages tilbage til side 1.

22. Alt gjort!

Nu er du en pro! Vælg 'Rediger' for at vende tilbage til editoren, så hvis du sletter aktiverne og to referencesider (ved at vælge sidens Hamburger-menu og derefter 'Slet side'), er prototypen, du lige har lavet, er klar til at dele. Du kan nemt oprette et aktie link ved at trykke på 'Del' nederst til højre på editoren.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 283; Køb det her !

hvordan - Mest populære artikler

Få mere fra Artrage 6: Top tips til at øge din workflow

hvordan Sep 11, 2025

(Billedkredit: Steve Goad) I denne artikel vil jeg give råd og indsigt i Artrage, et program, jeg bruger ganske lidt..

Jamstack: Byg hurtigere, mere effektive hjemmesider i dag

hvordan Sep 11, 2025

(Billedkredit: Fremtid / Joseph Ford) Jamstack er en metode til oprettelse og servering af websteder med minimal bela..

Sådan oprettes en 3D-varulv i Unreal Engine

hvordan Sep 11, 2025

Konceptet, model, tekstur og materialeopsætning til dette grusomme billede af en varulv - som blev oprettet for Kunoichi, et stealth-orienteret spil i en fantasy verden - blev fuldført helt..

Sådan strukturerer du medier forespørgsler i SASS

hvordan Sep 11, 2025

Næsten hvert websted er nu bygget med mindst en nik til lydhør webdesign. Den måde, hvorpå vi strukturerer disse responsive s..

Lær at model en 3D person i Zbrush og Maya

hvordan Sep 11, 2025

Side 1 af 2: Side 1 Side 1 Side 2. ..

Model en fremmede piratskab i Zbrush

hvordan Sep 11, 2025

For at hjælpe dig med at lære at oprette en 3D-fremmede piratkarakter, vil jeg vise dig, hvordan jeg skulpterede ansigtet af mi..

Mal et originalt Tarot-kort

hvordan Sep 11, 2025

Da jeg modtog mit første Tarot Deck, blev jeg fortryllet af det smukke kunstværk og de historier, der fulgte med hvert kort. De..

5 måder at styre cashflow effektivt

hvordan Sep 11, 2025

Kontrol af din cash flow er nøglen til freelance succes, og der er nogle hårde og hurtige regler for at sikre, at du gør det e..

Kategorier