Gör en hi-fidelity prototyp i Atomic

Sep 11, 2025
Hur

Det är lätt att få tag i att försöka utveckla en idé inom ett statiskt mockup eller platt filritningsverktyg, men en prototyp är värt tusen möten. Varför skulle du lösa något mindre än att utforska dina idéer på ett interaktivt sätt?

Kanske har du en idé för hur en övergång kan uppträda, men du är inte helt säker på om det skulle känna sig rätt för användaren. Att snabbt prototera övergången och interagera med den ger dig direkt en mycket mer realistisk upplevelse av hur slutprodukten kan fungera i den verkliga världen.

Vi har sett verktyg med prototypning till designutrymmet, men ingen ganska Atom . Nu är det ett sätt att bygga fullt interaktiva, hi-troidity prototyper som ser ut och beter sig som den riktiga saken.

Prototypning i Atomic är otroligt snabbt: Du kan skapa vackra, avancerade mockups på några minuter, utan att skriva någon kod, installera någon programvara eller dricka för mycket kaffe. Du kan förhandsgranska med prototypen direkt på din mobila enhet, eller dela den med en lagkamrat för feedback. Vi har också gjort alla tillgångar du behöver för att komma igång så att du inte behöver importera en sak (men du kan importera från skiss och Photoshop cc för).

I den här handledningen utforskar vi en enkel swipe-övergång i en väderapp som vi skapar i Atomic. Vi går igenom de enkla stegen för att skapa övergångar, och om du behöver en utmaning, kommer jag också att täcka några mer avancerade prototyperfunktioner för att du ska utforska.

01. Registrera dig

Låt oss börja! Om du inte redan har ett konto, öppna upp Google Chrome, besök atomic.io och registrera dig för en gratis försök. Detta varar i 30 dagar, vilket borde vara gott om tid för dig att utforska Atomic och göra din första prototyp.

02. Ta en titt runt

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

Provprojektet innehåller provfiler som hjälper dig att bli bekant med Atomic

Nu är du inloggad på ditt konto, det här är en bra tid att utforska. Du kommer att märka att ett provprojekt har ställts in för dig. Detta har några inledande provfiler du kan leka med medan du blir bekant med Atomic. Alternativt kan du besöka vårt Monter , som har en samling prototyper byggda av andra. Om du fastnar, är det bästa stället att leta efter en lösning vår hjälpcenter .

03. Nytt projekt

Skapa ett nytt projekt genom att klicka på "Nytt projekt" och namnge det "Recept app". Om du trycker på Enter öppnas projektmappen. Här kan du se alla mönster inom det här projektet. Eftersom detta är ett nytt projekt är det tomt. Men design kommer att fylla upp här över tiden när du skapar dem.

04. Ta ett prov

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

Det finns en färdig provfil för det här projektet

Istället för att skapa en ny tom design, huvudet här . Detta öppnar en provfil som vi skapat för att hjälpa dig att komma igång.

Se knappen "Kopiera och redigera" längst ned till höger? Klicka på det och lägg till det i ditt receptprojekt. Klicka på "Redigera nu". Precis som det är en kopia av vår provfil nu inne i ditt projekt redo för dig att redigera.

05. Utforska redaktören

Välkommen till redaktören! Om du har använt ett designverktyg tidigare, kommer Atomic troligen att känna sig bekant. Låt oss titta runt. Till vänster hittar du tillgång till ritning, layout och prototypverktyg, såväl som två flikar som låter dig byta mellan sidorna och lagerpanelerna. Till höger kommer du att märka egenskapspanelen, som låter dig ändra din sidstorlek, såväl som att ta upp inställningar för stilar och övergångar.

06. Kolla in elementen

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

I provfilens tillgångssida hittar du de element du behöver

På sidan Tillgångssidan ser du att vi har skapat alla element som används i den här prototypen för dig. Byt till panelen Lager och klicka sedan på några av elementen på duken. De element du väljer markeras automatiskt på panelen Lager. Påskynda ditt arbetsflöde genom att trycka på "?" För att se utbudet av tangentbordsgenvägar du kan använda.

07. Förhandsvisning

Du kan förhandsgranska och interagera med din prototyp när du vill genom att klicka på "Förhandsgranskning" i det nedre högra hörnet av redigeraren. Vi använder det här senare för att testa hur våra övergångar känner. Om du väljer "Förhandsgranskning" visar du tillgångarna i fullskärmsläge, men om du navigerar till sidan 2 med pilarna ser du ett referensexempel på det första tillståndet i vår prototyp. Försök att interagera med referensexemplet genom att klicka på knappen "Sparade recept" i rubriken för att förhandsgranska vad vi ska skapa.

08. Kom igång

Nu är du bekant med prototypen vi bygger, det är dags att komma igång! Välj "Redigera", för att komma tillbaka till redigeraren, och sedan på sidotidssidan välj alla element och kopiera dem till urklippet. Gå till sidan 1 och klistra in elementen på sidan.

09. Ordna dina tillgångar

Utan några element som valts, sätt bakgrundsfyllningen av din duk till # F6F7F8 (se i panelen Höger egenskaper). Placera rubriken på duken, topp och centrum.

Du vill omorganisera tillgångarna så att din första stat (alla recept) är placerad på duken och tillgångarna för din snart-till-skapade andra stat (sparade recept) är borta från duken till höger. Här är varför: När samma objekt finns på sidan 1 och sidan 2, kommer Atomic att animera eventuella ändringar mellan dem automatiskt.

10. Stack dina kort

När du ursprungligen förhandsgranskade prototypen kan du ha märkt att nyhetsfeed av recept på sidan "Referens - All Recept" är vertikalt rullbar. För att lägga till den här effekten, ordna receptkort i en vertikal stapel, inklusive "Kom tillbaka imorgon" text som ska placeras senast, längst ner.

11. Skapa en rullningsbehållare

Välj receptkort och "Kom tillbaka imorgon" text och välj det behållarverktyg som kommer att ha dykt upp i det övre mitten av duken. Välj "Skapa rullningsbehållare". Innehållet kommer då att grupperas och placeras inuti det vi kallar en rullningsbehållare, med vertikal rullning aktiverad som standard. Se till att du definierar gränserna för din behållare genom att dra bottengränsen upp för att maska ​​elementen och träffa duken.

12. Placera dina element

För den här övergången vill vi att det "sparade receptens rutnät kommer in från höger, och" Lägg till mer "-text som kommer uppifrån. För att säkerställa att detta händer, placera varje element i sitt respektive utgångsläge. Till exempel ska "sparade recept" placeras på sidan 1, utanför duken och till höger; Texten "Lägg till mer" ska placeras på sidan 1, av duken och nedan.

13. Tryck på Övergång

När vi skapar en kranövergång, där vi vill att elementen på vår nästa sida ska glida in, är det viktigt att de också finns på sidan 1, utanför duken, för att definiera sitt startposition. När som helst kan du referera till sidan "Referens - Alla Recept för att se hur den här sidan ska ordnas.

14. Duplicering

For our transition, duplicate page 1

För vår övergång, Duplicate Page 1

Nu har vi satt upp den första sidan, det är dags att skapa det andra tillståndet för övergången, som vi ska göra på en ny sida. Se till att sidopanelen är vald och svänger sedan över sidan 1 för att ta upp hamburgermenyn längst ned till höger på sidkortet. Klicka på menyn och välj "duplikat".

15. Sparade recept

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

Atomic kommer att animera eventuella ändringar som du gör mellan Page 1 och din nya sida 2

Navigera till din nyligen duplicerade sida för att skapa det andra tillståndet: dina sparade recept. Det är viktigt att du inte tar bort några element på sidan, eftersom det kommer att bryta övergången. Eftersom vi har duplicerat sidan, vet Atomic att elementen på båda sidorna är samma anslutna element. Därför vet det att animera eventuella ändringar som vi gör till elementens egenskaper på sidan 2 (storlek, position, rotation, opacitet, färg och så vidare).

16. Fler övergångar

Först flytta "All Recept" -rullgrupp till vänster, av duken och "Sparade recept" -elementet och "Lägg till mer" text i sina nya positioner: i kroppen (i stället för "All Recept" -gruppen) på den nedre halvan av duken, respektive i centrum. Det enda elementet vi inte flyttar i denna övergång är rubriken. Detta beror på att rubriken förblir på skärmen och bara ändras subtilt - vi kommer snart till det.

17. Ytterligare animering

För rubriken vill vi den blå bakgrunden glida över det andra staten. Under sidan 2, med panelen Lager Öppna, expandera gruppen med titeln "Header" och välj den blå rektangeln. Flytta sedan det till höger så det är placerat bakom "sparade recept". Trevlig!

18. Den roliga delen

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

Lägg till en interaktions hotspot över det område du vill att användare ska interagera med

Nu kommer den roliga delen av att skapa övergången. På sidan 1 kommer vi att rita en hotspot över den "sparade receptens text i rubriken, eftersom det här är det område vi vill att vår användare ska interagera med. Välj Interaction Hotspot-verktyget från verktygspanelen längst till vänster om redigeraren (eller tryck bara på h). Du kan rita hotspots med samma metod du skulle använda för att rita en rektangel på duken: bara klicka och dra.

19. Övergångsinställningar

Customise your transition, including the trigger gesture and motion type

Anpassa din övergång, inklusive trigger gest och rörelse typ

När du har tagit din hotspot, med den som fortfarande är valt, ser du en interaktionsavdelning visas i egenskapspanelen till höger. Det är här du kan ange utlösningsgest, destinationssidan, rörelsetyp och varaktighet för övergången. För denna övergång Ange följande inställningar: gest: Klicka eller tryck på ; Gå till: Sida 2 ; Rörelse: e ase in-out ; Varaktighet: 250 .

20. fram och tillbaka

Vi vill kunna växla fram och tillbaka mellan de två övergångarna, så vi behöver nu också placera en hotspot på sidan 2 för att ta oss tillbaka till sidan 1. Kopiera hotspot från sidan 1 med hjälp av tangentbordsgenvägarna och klistra in Den på sidan 2 över "all recept" text i "header". Kom ihåg att uppdatera destinationssidan på den nya hotspot till sidan 1.

21. Förhandsvisning

Click the Preview button to see your transition in action

Klicka på förhandsgranskningsknappen för att se din övergång i åtgärd

Det är dags att förhandsgranska din övergång! Navigera till sidan 1 På panelen Sidor och klicka på Förhandsgranska längst ned till höger på redigeraren (genväg cmd + anger ). Klicka eller tryck på "Sparade recept" på din prototyp för att gå till sidan 2. Välj sedan "All Recept" -prototyp som ska tas tillbaka till sidan 1.

22. Allt gjort!

Nu är du en pro! Välj "Redigera" för att återgå till redigeraren, då om du tar bort tillgångarna och två referenssidor (genom att välja sidans hamburger-meny och sedan "Radera sida") är den prototyp du just gjort är redo att dela. Du kan enkelt skapa en aktielänk genom att trycka på "Dela" längst ned till höger på redigeraren.

Denna artikel uppträdde ursprungligen i nätmagasin utgåva 283; köp det här !

Hur - Mest populära artiklar

Hur man gör en meme i Photoshop

Hur Sep 11, 2025

(Bildkredit: Matt Smith) Vill du veta hur man gör en meme i Photoshop? Den här guiden är här för att hjälpa. Se..

Så här stänger du av webmeddelanden för Windows, MacOS och Android

Hur Sep 11, 2025

(Bildkredit: Framtida) Om du är en vanlig webbanvändare, har du ingen tvekan om meddelanden från webbplatser som d..

Lägg till flera språkstöd till vinkel

Hur Sep 11, 2025

I den här handledningen kommer vi att ta dig igenom processen att göra din app tillgänglig och användarvänlig för människo..

Hur man skannar en person på mindre än fem minuter

Hur Sep 11, 2025

Har inte tillgång till en fotogrammetry kamera array för att utföra en 3D-skanning ? Inget problem, dessa tips ..

Hur man skapar en instrumentpanel med reagera

Hur Sep 11, 2025

Sida 1 av 2: Gör en instrumentpanel app i reagera - steg 1-10 Gör en in..

Hur man skapar en autentisk manga-komiskremsa

Hur Sep 11, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 Medan stilen och finishen av ..

4 tips för att förbättra sidan med sidan

Hur Sep 11, 2025

Webprestationsanalytiker Henri Helvetica kommer att dela sina PRO-tips om hur du förstä..

Måla som en impressionist

Hur Sep 11, 2025

Impressionistiskt konstverk var färskt och spontant och utfört med djärva penselsträngar som inte avslöjade för mycket deta..

Kategorier