Faceți un prototip hi-fidelitate în atomică

Sep 11, 2025
să

Este ușor să fii prins în încercarea de a dezvolta o idee într-un instrument static de desenare sau de desen plat, dar a prototip merită o mie de întâlniri. De ce v-ați mulțumi pentru ceva mai puțin decât să vă explorați ideile într-un mod interactiv?

Poate că aveți o idee pentru modul în care o tranziție ar putea să se comporte, dar nu sunteți sigur dacă ar simți dreptul la utilizator. Rapid prototiparea tranziției și interacțiunea cu ea vă oferă în mod direct o experiență mult mai realistă a modului în care produsul final ar putea funcționa în lumea reală.

Am văzut instrumentele aduc prototipuri în spațiul de design, dar nici unul nu-i place Atomic . Acum există o modalitate de a construi prototipuri complet interactive, hi-fidelitate care arată și se comportă ca adevăratul lucru.

Prototografia în Atomic este incredibil de rapidă: puteți crea mockup-uri frumoase, avansate în câteva minute, fără a scrie niciun cod, instalând orice software sau de a bea prea multă cafea. Veți putea previzualiza cu prototipul direct pe dispozitivul dvs. mobil sau partajați-l cu un coechipier pentru feedback. De asemenea, am pre-făcute toate activele de care aveți nevoie pentru a începe, astfel încât nu va trebui să importați un lucru (dar puteți importa din schiță și Photoshop CC. de asemenea).

În acest tutorial vom explora o tranziție simplă în interiorul unei aplicații meteorologice pe care le vom crea în Atomic. Vom trece prin pașii simpli pentru clasificarea tranzițiilor și dacă aveți nevoie de o provocare, voi acoperi, de asemenea, câteva caracteristici avansate de prototipare pentru a vă explora.

01. Înscrieți-vă

Să începem! Dacă nu aveți deja un cont, deschideți Google Chrome, vizitați atomic.io. și înscrieți-vă pentru un proces gratuit. Aceasta durează 30 de zile, care ar trebui să fie o mulțime de timp pentru a explora atomic și pentru a face primul dvs. prototip.

02. Aruncați o privire în jur

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

Proiectul eșantion conține fișiere de eșantionare pentru a vă ajuta să vă familiarizați cu atomic

Acum sunteți conectat la contul dvs., acesta este un moment minunat pentru a explora. Veți observa un proiect de probă a fost configurat pentru dvs. Acest lucru are unele fișiere de probă introductive pe care le puteți juca cu în timp ce vă familiarizați cu atomic. Alternativ, vă puteți vizita Vitrina , care are o colecție de prototipuri construite de alții. Dacă vă blocați, cel mai bun loc pentru a căuta o soluție este al nostru Centrul de ajutor .

03. Proiect nou

Creați un nou proiect făcând clic pe "Proiect nou" și numele IT "App Rețetă". Apăsarea ENTER va deschide dosarul proiectului. Aici puteți vizualiza toate desenele în cadrul acestui anumit proiect. Deoarece acesta este un nou proiect, este gol. Cu toate acestea, desenele se vor umple aici în timp, pe măsură ce le creați.

04. Prindeți o probă

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

Există un fișier de eșantion gata pentru acest proiect

În loc să creați un nou design gol, cap de aici . Acest lucru va deschide un fișier de eșantion pe care l-am creat pentru a vă ajuta să începeți.

Consultați butonul "Copiere și editare" din colțul din dreapta jos? Faceți clic pe acesta și adăugați-l în proiectul App Rețetă. Faceți clic pe "Editați acum". La fel, o copie a fișierului nostru de probă este acum în interiorul proiectului dvs. pregătit pentru a edita.

05. Explorați editorul

Bine ați venit la editor! Dacă ați folosit un instrument de proiectare în trecut, atomic se va simți probabil familiar. Să ne uităm în jur. În partea stângă veți găsi acces la unelte de desen, layout și prototiping, precum și două file care vă permit să comutați între panourile Pagini și Straturi. În dreapta, veți observa panoul Proprietăți, care vă permite să modificați dimensiunea paginii, precum și să aduceți setări pentru stiluri și tranziții.

06. Verificați elementele

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

În pagina de active a fișierului de probă veți găsi elementele de care aveți nevoie

Pe pagina de active a fișierului de eșantion veți vedea că am creat toate elementele utilizate în acest prototip pentru dvs. Treceți la panoul straturilor, apoi faceți clic pe câteva dintre elementele de pe panza. Elementele pe care le selectați vor fi evidențiate automat în panoul straturilor. Accelerați fluxul de lucru apăsând "?" Pentru a vedea gama de comenzi rapide de la tastatură pe care le puteți utiliza.

07. Previzualizare.

Puteți previzualiza și interacționa cu prototipul dvs. ori de câte ori doriți să faceți clic pe "Previzualizare" în colțul din dreapta jos al editorului. Vom folosi acest lucru mai târziu pentru a testa cum simt tranzițiile noastre. Selectarea "Previzualizare" acum vă va arăta activele în modul Fullscreen, dar dacă navigați la pagina 2 Utilizând săgețile, veți vedea un exemplu de referință al primei stări a prototipului nostru. Încercați să interacționați cu exemplul de referință făcând clic pe butonul "Rețete salvate" din antet pentru a previzualiza ceea ce vom crea.

08. Începeți

Acum sunteți familiarizat cu prototipul pe care îl construim, este timpul să începem! Selectați "Editare", pentru a reveni în editor, apoi pe pagina Active selectați toate elementele și copiați-le în clipboard. Accesați pagina 1 și lipiți elementele pe pagină.

09. Aranjați-vă activele

Fără elemente selectate, setați umplerea de fundal a panzei dvs. la # F6F7F8 (uitați-vă în panoul de proprietăți din dreapta). Așezați antetul pe panza, sus și centru.

Veți dori să rearanjați activele astfel încât prima dvs. stare (toate rețetele) să fie poziționată pe panza, iar activele pentru starea secundară creată în curând (rețete salvate) sunt de pe panza din dreapta. Iată de ce: Când același obiect există la pagina 1 și pagina 2, Atomic va anima automat modificările între ele.

10. Stack-ți cardurile

Când ați preluat inițial prototipul, ați observat că știrile retetelor pe pagina "referință - toate rețetele" este scrollabilă verticală. Pentru a adăuga acest efect, aranjați cartelele de rețetă într-un stack vertical, inclusiv textul "Vino înapoi mâine" care ar trebui plasat ultima dată, în partea de jos.

11. Creați un recipient de defilare

Selectați cartelele de rețetă și "Vino înapoi mâine", și alegeți instrumentul de containere care va apărea în centrul de sus al pânzei. Selectați "Creați container de derulare". Conținutul va fi apoi grupat și plasat în interiorul a ceea ce numim un container de derulare, cu defalcare verticală de derulare în mod implicit. Asigurați-vă că definiți limitele recipientului dvs. prin tragerea limitei inferioare în sus pentru a masca elementele și pentru a întâlni panza.

12. Puneți elementele

Pentru această tranziție particulară, dorim rețelele de rețete salvate venite din dreapta, iar textul "adăugați mai mult" vine de jos. Pentru a vă asigura că acest lucru se întâmplă, plasați fiecare element în poziția de pornire respectivă. De exemplu, "rețetele salvate" ar trebui să fie plasate la pagina 1, de pe panza și la dreapta; În timp ce textul "adăugați mai mult" trebuie plasat la pagina 1, de pe panza și mai jos.

13. Atingeți tranziția

Pe măsură ce creăm o tranziție de la robinet, în cazul în care dorim elementele de pe următoarea noastră pagină să alunece, este important să existe și pe pagina 1, de pe panza, să-și definească poziția de plecare. În orice moment, vă puteți referi la pagina "Referință - Toate rețetele pentru a vedea cum ar trebui să fie aranjată această pagină.

14. Duplicare

For our transition, duplicate page 1

Pentru tranziția noastră, duplicat pagina 1

Acum am configurat prima pagină, este timpul să creăm a doua stare pentru tranziția, pe care o vom face pe o nouă pagină. Asigurați-vă că panoul Pages este selectat, apoi treceți peste pagina 1 pentru a afișa meniul Hamburger în partea dreaptă jos a cardului de pagină. Faceți clic pe meniu și selectați "Duplicat".

15. Rețete salvate

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

Atomic va anima orice modificări pe care le faceți între pagina 1 și noua dvs. pagină 2

Navigați la pagina dvs. nou duplicată pentru a crea a doua stare: rețetele dvs. salvate. Este important să nu ștergeți niciun element pe pagină, deoarece acest lucru va rupe tranziția. Pentru că am duplicat pagina, atomic știe că elementele de pe ambele pagini sunt aceleași elemente conectate. Prin urmare, știe să animă modificările pe care le facem la proprietățile elementelor de la pagina 2 (dimensiune, poziție, rotație, opacitate, culoare și așa mai departe).

16. Mai multe tranziții

Mai întâi mutați grupul de derulare "Toate rețetele" în stânga, de pe panza și elementul "Rețete salvate" și textul "Adăugați mai mult" în noile lor poziții: în organism (în locul grupului "Toate rețetele") jumătatea inferioară a pânzei și, respectiv, în centru. Singurul element pe care nu ne mișcăm în această tranziție este antetul. Acest lucru se datorează faptului că antetul rămâne pe ecran și se schimbă subtil - vom ajunge la asta în curând.

17. Animație ulterioară

Pentru antet, dorim fundalul albastru să alunece pe a doua stare. În timp ce la pagina 2, cu panoul straturilor deschise, extindeți grupul intitulat "Header" și selectați dreptunghiul albastru. Apoi mutați acest lucru în dreapta, așa că este plasat în spatele "rețetelor salvate". Grozav!

18. Partea distractivă

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

Adăugați un hotspot de interacțiune în zona în care doriți ca utilizatorii să interacționeze cu

Acum vine partea distractivă a creării tranziției. La pagina 1 vom desena un hotspot peste textul "Rețete salvate" din antet, deoarece aceasta este zona pe care o dorim ca utilizatorul nostru să interacționeze. Selectați instrumentul Hotspot interacțiune de pe panoul Instrumente din partea stângă a editorului (sau doar apăsați H). Puteți desena hotspoturi folosind aceeași metodă pe care o veți folosi pentru a desena un dreptunghi pe canvas: Doar faceți clic și trageți.

19. Setări de tranziție

Customise your transition, including the trigger gesture and motion type

Personalizați tranziția dvs., inclusiv gesturile de declanșare și tipul de mișcare

Odată ce ați desenat hotspotul dvs., cu el încă selectat, veți vedea o secțiune de interacțiune apare în panoul de proprietăți din dreapta. Aici puteți specifica gestul de declanșare, pagina de destinație, tipul de mișcare și durata tranziției. Pentru această tranziție specificați următoarele setări: Gesturi: Faceți clic sau apăsați. ; Mergi la: Pagina 2 ; Mișcare: E. ASE în afara ; Durată: 250. .

20. Înapoi și înapoi

Vrem să putem comuta înainte și înapoi între cele două tranziții, deci acum trebuie să punem un hotspot la pagina 2 pentru a ne duce înapoi la pagina 1. Copiați hotspot-ul de la pagina 1 Utilizarea comenzilor rapide ale tastaturii și lipiți la pagina 2 peste textul "Toate rețetele" din "antet". Nu uitați să actualizați setarea paginii de destinație a noului hotspot la pagina 1.

21. Previzualizare

Click the Preview button to see your transition in action

Faceți clic pe butonul Previzualizare pentru a vedea tranziția dvs. în acțiune

Este timpul să vă previzualizați tranziția! Navigați la pagina 1 În panoul Pagini și faceți clic pe Previzualizare în partea dreaptă jos a editorului (comenzi rapide cmd + intră ). Faceți clic pe sau apăsați pe "Rețete salvate" de pe prototipul dvs. pentru a accesa pagina 2. Apoi, selectați "toate prototipurile de rețete" pentru a fi reluate la pagina 1.

22. Totul făcut!

Acum ești pro! Selectați "Editați" pentru a reveni la editor, atunci dacă ștergeți activele și două pagini de referință (selectând meniul Hamburger din pagină și apoi "Ștergere pagină"), prototipul pe care tocmai l-ați făcut este gata să partajați. Puteți crea cu ușurință un link de acțiuni apăsând "Share" în partea dreaptă jos a editorului.

Acest articol a apărut inițial în revista netă Ediția 283; Cumpărați-l aici Fotografiile!

să - Cele mai populare articole

Designer de afinitate: Cum se utilizează efecte și stiluri

să Sep 11, 2025

(Credit Imagine: Serif) Cu unelte de vector și raster combinate, Designer de afinitate este o alterna..

Cum se implementează modurile luminoase sau întunecate în CSS

să Sep 11, 2025

Specificația CSS este în continuă evoluție. Procesul de implementare a noilor caracteristici în CSS este complicat, dar vers..

5 caracteristici noi CSS și cum să le folosească

să Sep 11, 2025

Pagina 1 din 2: Explorați 5 caracteristici noi CSS: Pași 01-10 Explora�..

Creați un efect de text neon strălucitor

să Sep 11, 2025

Adesea, sunt cele mai simple efecte care arată cel mai frapant, iar textul Neon este un astfel de proiect. De asemenea, este mul..

Export după efecte animații la HTML5

să Sep 11, 2025

Animația pe web este aici pentru a rămâne. Este în orice moment din mișcările subtile care ajută la aducerea noastră ..

3 sfaturi pentru crafting Material promoțional tipărit

să Sep 11, 2025

Într-o lume din ce în ce mai digitală, materialul promoțional cu imprimare inteligent are puterea de a avea un impact grav. P..

12 sfaturi pentru iluminarea 3D realistă

să Sep 11, 2025

Iluminarea este fundamentală în oricare 3D Art. proiectul pe care lucrați. La cel mai de bază, este o modalita..

Construiți un UI bazat pe card cu fundație

să Sep 11, 2025

Card bazat pe card Layout-urile site-ului au luat pe web. Foarte popular de Pinterest, Twitter, Facebook și Googl..

Categorii