Lag en Hi-Fidelity Prototype i Atomic

Feb 4, 2026
hvordan
[1. 3]

Det er lett å bli fanget opp i å prøve å utvikle en ide i et statisk mockup eller et flatt fil tegneverktøy, men en prototype er verdt tusen møter. Hvorfor vil du slå seg ned for noe mindre enn å utforske dine ideer på en interaktiv måte?

Kanskje du har en ide for hvordan en overgang kan oppføre seg, men du er ikke helt sikker på om det ville føles rett til brukeren. Raskt prototyping overgangen og interaksjon med det gir deg en mye mer realistisk opplevelse av hvordan sluttproduktet kunne fungere i den virkelige verden.

Vi har sett Verktøy med prototyping til designplassen, men ingen som Atomisk . Nå er det en måte å bygge fullt interaktive, hi-fidelity prototyper som ser ut og oppfører seg som den virkelige tingen.

Prototyping i Atomic er utrolig raskt: Du kan lage vakre, avanserte mockups i minutter, uten å skrive noen kode, installere programvare eller drikke for mye kaffe. Du vil kunne forhåndsvise prototypen direkte på mobilenheten, eller dele den med en lagkamerat for tilbakemelding. Vi har også forhåndsinnstilt alle eiendelene du trenger for å komme i gang, slik at du ikke trenger å importere en ting (men du kan importere fra skisse og Photoshop CC. også).

I denne opplæringen vil vi utforske en enkel sveip overgang inne i en vær-app som vi skal lage i Atomic. Vi går gjennom de enkle trinnene for å lage overganger, og hvis du trenger en utfordring, vil jeg også dekke noen mer avanserte prototypingsfunksjoner for deg å utforske.

01. Registrer deg

La oss komme i gang! Hvis du ikke allerede har en konto, åpner du Google Chrome, besøk atomic.io. og registrer deg for en gratis prøveversjon. Dette varer i 30 dager, som bør være god tid for deg å utforske Atomic og lage din første prototype.

02. Ta en titt rundt

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

Prøveprosjektet inneholder prøvefiler for å hjelpe deg med å bli kjent med atomisk

Nå er du logget på kontoen din, dette er en flott tid å utforske. Du vil legge merke til at et utvalgsprosjekt har blitt satt opp for deg. Dette har noen innledende utvalgsfiler du kan leke med mens du blir kjent med atom. Alternativt kan du besøke vår Vise frem , som har en samling prototyper bygget av andre. Hvis du sitter fast, er det beste stedet å lete etter en løsning vår hjelpesenter .

03. Nytt prosjekt

Opprett et nytt prosjekt ved å klikke på 'Nytt prosjekt' og navn det 'Resecip App'. Hvis du trykker ENTER, åpner du prosjektmappen. Her kan du se alle designene i dette bestemte prosjektet. Siden dette er et nytt prosjekt, er det tomt. Imidlertid vil designene fylle opp her over tid mens du lager dem.

04. Ta en prøve

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

Det er en ferdig prøvebil for dette prosjektet

I stedet for å skape en ny tom design, Hodet her . Dette vil åpne en prøvefil vi har laget for å hjelpe deg med å komme i gang.

Se 'Kopier og rediger' -knappen i nederste høyre hjørne? Klikk det og legg det til i oppskriftsprogrammet ditt. Klikk på "Rediger nå". På akkurat slik er en kopi av vår prøvefil nå inne i prosjektet ditt klart for deg å redigere.

05. Utforsk redaktøren

Velkommen til redaktøren! Hvis du har brukt et designverktøy i det siste, vil Atomic sannsynligvis føle seg kjent. La oss se deg rundt. Til venstre finner du tilgang til tegning, layout og prototyping verktøy, samt to faner som lar deg bytte mellom sidene og lagene paneler. Til høyre vil du legge merke til egenskapspanelet, som lar deg endre sidestørrelsen din, samt å få opp innstillinger for stiler og overganger.

06. Sjekk ut elementene

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

I prøvefilens eiendeler-side finner du elementene du trenger

På Assets-siden til prøvefilen ser du at vi har opprettet alle elementene som brukes i denne prototypen for deg. Bytt til lagpanelet, og klikk deretter på noen av elementene på lerretet. Elementene du velger vil bli automatisk uthevet i lagpanelet. Fremskynde arbeidsflyten din ved å trykke '?' For å se utvalget av hurtigtastene du kan bruke.

07. Forhåndsvisning

Du kan forhåndsvise og samhandle med prototypen når du vil ved å klikke på "Forhåndsvisning" i nedre høyre hjørne av redaktøren. Vi bruker dette senere for å teste ut hvordan våre overganger føler. Velge "Forhåndsvisning" Nå vil du vise eiendeler i fullskjermmodus, men hvis du navigerer til side 2 ved hjelp av pilene, ser du et referanseeksempel på den første tilstanden til prototypen vår. Prøv å samhandle med referanseeksemplet ved å klikke på knappen "Lagrede oppskrifter i overskriften for å forhåndsvise hva vi skal lage.

08. Kom i gang

Nå er du kjent med prototypen vi bygger, det er på tide å komme i gang! Velg 'Rediger', for å komme tilbake i redigeringsprogrammet, og deretter på AIPPS-siden velg alle elementene og kopiere dem til utklippstavlen. Gå til side 1 og lim inn elementene på siden.

09. Ordne dine eiendeler

Uten noen elementer som er valgt, still inn bakgrunnsfyllingen av lerretet ditt til # F6F7F8 (se i høyre egenskaper). Plasser overskriften på lerretet, toppen og senteret.

Du vil omorganisere eiendelene, slik at din første stat (alle oppskrifter) er plassert på lerretet, og eiendelene for din snart-til-er-opprettede andre stat (lagrede oppskrifter) er av lerretet til høyre. Her er hvorfor: Når det samme objektet eksisterer på side 1 og side 2, vil Atomic animere eventuelle endringer mellom dem automatisk.

10. Stakk kortene dine

Når du i utgangspunktet forhåndsviset prototypen, har du kanskje lagt merke til nyhetsfeedet av oppskrifter på "Referanse - alle oppskrifter" -siden er vertikalt rullbar. For å legge til denne effekten, ordne oppskriftskortene i en vertikal stabel, inkludert "komme tilbake i morgen" -teksten som skal plasseres sist, nederst.

11. Lag en rullebeholder

Velg oppskriftskortene og 'Kom tilbake i morgen' tekst, og velg Containerverktøyet som vil ha dukket opp på det øverste senteret på lerretet. Velg 'Create Scrolling Container'. Innholdet vil da bli gruppert og plassert inne i det vi kaller en rullebeholder, med vertikal rulling aktivert som standard. Pass på at du definerer grensene til beholderen din ved å dra bunngrensen for å maskere elementene og møte lerretet.

12. Plasser elementene dine

For denne spesielle overgangen vil vi at "lagrede oppskrifter" som kommer inn fra høyre, og "legg til mer" tekst som kommer opp fra under. For å sikre at dette skjer, plasser hvert element i sin respektive startposisjon. For eksempel, "lagrede oppskrifter" skal plasseres på side 1, av lerretet og til høyre; Mens "Legg til mer" tekst skal plasseres på side 1, av lerretet og under.

13. Trykk på Overgang

Når vi skaper en trykkovergang, hvor vi vil at elementene på vår neste side skal glide, er det viktig at de også eksisterer på side 1, av lerretet, for å definere startposisjonen. Når som helst kan du referere til siden "Referanse - alle oppskrifter" for å se hvordan denne siden skal ordnes.

14. Duplisering

For our transition, duplicate page 1

For vår overgang, duplikat Page 1

Nå har vi satt opp den første siden, det er på tide å lage den andre staten for overgangen, som vi skal gjøre på en ny side. Kontroller at siderpanelet er valgt, og svinger deretter over side 1 for å hente hamburgermenyen nederst til høyre på sidekortet. Klikk på menyen og velg "duplikat".

15. Lagrede oppskrifter

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

Atomic vil animere eventuelle endringer du gjør mellom side 1 og din nye side 2

Naviger til din nylig dupliserte side for å lage den andre staten: Dine lagrede oppskrifter. Det er viktig her for ikke å slette noen elementer på siden, da dette vil bryte overgangen. Fordi vi har duplisert siden, vet Atomic at elementene på begge sider er de samme tilkoblede elementene. Derfor vet det å animere eventuelle endringer vi gjør til egenskapene til elementene på side 2 (størrelse, posisjon, rotasjon, opasitet, farge og så videre).

16. Flere overganger

Først flytt "alle oppskrifter" scrolling-gruppen til venstre, av lerretet, og "Lagrede oppskrifter" -elementet og "legg til mer" tekst i sine nye stillinger: i kroppen (i stedet for "alle oppskrifter" -gruppen) på Den nederste halvdelen av lerretet, og i henholdsvis senteret. Det eneste elementet vi ikke beveger oss i denne overgangen, er overskriften. Dette skyldes at overskriften forblir på skjermen, og bare endres subtilt - vi kommer til det snart.

17. Ytterligere animasjon

For overskriften vil vi at den blå bakgrunnen skal glide over på den andre tilstanden. Mens på side 2, med lagpanelet åpent, utvider gruppen med tittelen 'Header' og velg det blå rektangelet. Deretter beveger du dette til høyre, så det er plassert bak 'lagrede oppskrifter'. Hyggelig!

18. Den morsomme delen

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

Legg til et interaksjon hotspot over området du vil at brukerne skal samhandle med

Nå kommer den morsomme delen av å skape overgangen. På side 1 skal vi tegne et hotspot over den "lagrede oppskrifter" -teksten i overskriften, da dette er området vi vil at brukeren skal samhandle med. Velg Interaction Hotspot-verktøyet fra Verktøy-panelet helt til venstre for redigereren (eller trykk bare på h). Du kan tegne hotspots med samme metode du vil bruke til å tegne et rektangel på lerretet: Bare klikk og dra.

19. Overgangsinnstillinger

Customise your transition, including the trigger gesture and motion type

Tilpass overgangen din, inkludert utløserbevegelsen og bevegelsestypen

Når du har tegnet hotspot, med den fremdeles valgt, vil du se en interaksjonsseksjon vises i egenskapspanelet til høyre. Dette er hvor du kan angi utløserbeviset, destinasjonssiden, bevegelsestypen og varigheten av overgangen. For denne overgangen angir du følgende innstillinger: Gestur: Klikk eller TAP ; Gå til: Side 2 ; Bevegelse: E. ASE In-Out ; Varighet: 250. .

20. frem og tilbake

Vi ønsker å kunne veksle frem og tilbake mellom de to overgangene, så vi må nå nå plassere en hotspot på side 2 for å ta oss tilbake til side 1. Kopier hotspot fra side 1 Bruke tastaturgenveiene, og lim inn Den på side 2 over "alle oppskrifter" -teksten i "overskriften". Husk å oppdatere destinasjonssiden innstillingen til det nye hotspot til side 1.

21. Forhåndsvisning

Click the Preview button to see your transition in action

Klikk på forhåndsvisningsknappen for å se overgangen i handling

Det er på tide å forhåndsvise overgangen din! Naviger til side 1 i panelet Sider og klikk på Forhåndsvisning nederst til høyre for redaktøren (snarvei CMD + ENTER ). Klikk eller trykk på 'Lagrede oppskrifter' på prototypen din for å gå til side 2. Velg deretter 'Alle oppskrifter' prototype som skal tas tilbake til side 1.

22. Alt gjort!

Nå er du en pro! Velg "Rediger" for å gå tilbake til redaktøren, og hvis du sletter eiendeler og to referansesider (ved å velge sidenes hamburgermeny og deretter "Slett side"), er prototypen du nettopp har gjort, klar til å dele. Du kan enkelt lage en delkobling ved å trykke på 'Del' nederst til høyre for redaktøren.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 283; Kjøp det her !

hvordan - Mest populære artikler

Slik fjerner du rynker i Photoshop

hvordan Feb 4, 2026

[1. 3] (Bilde Kreditt: Jason Parnell-Brookes) Denne opplæringen vil vise deg hvordan du fjerner rynker i Photoshop. M..

Slik lager du en tegneserie

hvordan Feb 4, 2026

[1. 3] Denne opplæringen vil vise deg hvordan du lager en tegneserie. Selv om vi bruker Clip Studio Paint. Her er ..

Takle Portrettmaleri med oljer

hvordan Feb 4, 2026

[1. 3] Denne workshopen handler om å skape et portrett oljemaleri med mening. Det handler også om min ide for en serie som behan..

Master blanderbørsten i Photoshop

hvordan Feb 4, 2026

[1. 3] Digitale malingsverktøy har alvorlig avansert de siste årene. Kunstnere kan bruke tabletter til å produsere kunstverk hj..

Modell En Alien Pirat Creature i Zbrush

hvordan Feb 4, 2026

[1. 3] For å hjelpe deg med å lære å lage en 3D-fremmede piratkarakter, vil jeg vise deg hvordan jeg skulptret ansiktet på mi..

Lag en portal effekt i Maya

hvordan Feb 4, 2026

[1. 3] Den portalen effekten i dr rart var veldig spesiell. Det var ganske mye den eneste effekten i filmen som ikke lindrer mer m..

Simulere en spøkelse rytter transformasjon

hvordan Feb 4, 2026

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Lag en plakat fra en mal i Photoshop

hvordan Feb 4, 2026

Adobe lanserer en ny serie av videoopplæringen i dag, kalt, gjør det nå, som tar sikte på å skissere hvordan du lager spesifikke designprosjekter ved hjelp av ulike Kreativ..

Kategorier