Fai un prototipo Hi-Fidelity in Atomic

Sep 11, 2025
Come si fa

È facile essere coinvolti nel cercare di sviluppare un'idea all'interno di un mockup statico o strumento di disegno file piatto, ma a prototipo vale un migliaia di riunioni. Perché dovresti accontentarti di qualcosa di meno che esplorare le tue idee in modo interattivo?

Forse hai un'idea per il modo in cui una transizione potesse comportarti, ma non sei sicuro che si senta correttamente all'utente. Prototipazione rapida La transizione e interagendo con esso ti dà direttamente un'esperienza molto più realistica di come il prodotto finale potrebbe funzionare nel mondo reale.

Abbiamo visto strumenti portare la prototipazione allo spazio di progettazione, ma nessuno piace Atomico . Ora c'è un modo per costruire prototipi completamente interattivi e fedeltà che sembrano e comportano come la cosa reale.

La prototipazione in atomica è incredibilmente veloce: puoi creare mockup bellissimi e avanzati in pochi minuti, senza scrivere alcun codice, installando alcun software o bere troppo caffè. Sarai in grado di anteprima con il prototipo direttamente sul tuo dispositivo mobile, o condividerlo con un compagno di squadra per il feedback. Abbiamo anche pre-realizzato tutte le risorse necessarie per iniziare, quindi non dovrai importare una cosa (ma puoi importare dallo schizzo e Photoshop cc. pure).

In questo tutorial esploreremo una semplice transizione di scorrimento all'interno di un'app meteo che creeremo in Atomic. Attraverseremo i semplici passaggi per l'elaborazione delle transizioni, e se hai bisogno di una sfida, coprirò anche alcune funzionalità di prototipazione più avanzate da esplorare.

01. Iscriviti

Iniziamo! Se non hai già un account, apri Google Chrome, visita Atomic.io. e iscriviti per una prova gratuita. Questo dura per 30 giorni, che dovrebbe essere un sacco di tempo per esplorare Atomic e fare il tuo primo prototipo.

02. Dai un'occhiata

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

Il progetto di esempio contiene file di esempio per aiutarti a familiarizzare con Atomic

Ora sei stato registrato sul tuo account, questo è un ottimo momento da esplorare. Noterai un progetto di esempio è stato impostato per te. Questo ha alcuni file di esempio introduttivi con cui puoi giocare mentre ti trovi familiarità con Atomic. In alternativa puoi visitare il nostro vetrina , che ha una raccolta di prototipi costruiti da altri. Se ti sei bloccato, il posto migliore per cercare una soluzione è nostro Aiuto Center. .

03. Nuovo progetto

Crea un nuovo progetto facendo clic su "Nuovo progetto" e chiamalo "APP di ricetta". Premendo ENTER aprirà la cartella del progetto. Qui puoi vedere tutti i disegni all'interno di questo particolare progetto. Poiché questo è un nuovo progetto, è vuoto. Tuttavia, i disegni si riempiranno qui nel tempo mentre li crei.

04. Prendi un campione

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

C'è un file di esempio pronto per questo progetto

Invece di creare un nuovo design vuoto, Testa qui . Questo aprirà un file di esempio che abbiamo creato per aiutarti a iniziare.

Vedi il pulsante "Copia e modifica" nell'angolo in basso a destra? Fai clic e aggiungilo al tuo progetto di ricetta. Fai clic su "modifica ora". Proprio così, una copia del nostro file di esempio è ora all'interno del tuo progetto pronto per la modifica.

05. Esplora l'editore

Benvenuti nell'editor! Se hai usato uno strumento di progettazione in passato, Atomic si sentirà probabilmente familiare. Diamo un'occhiata. A sinistra troverai l'accesso ai disegni, al layout e agli strumenti di prototipazione, oltre a due schede che ti consentono di passare tra i pannelli delle pagine e dei livelli. A destra noterai il pannello Proprietà, che consente di modificare le dimensioni della pagina, oltre a portare le impostazioni per gli stili e le transizioni.

06. Controlla gli elementi

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

Nella pagina Assets del file di esempio troverai gli elementi di cui hai bisogno

Nella pagina Assets del file di esempio vedrai che abbiamo creato tutti gli elementi utilizzati in questo prototipo per te. Passare al pannello Livelli, quindi fare clic su alcuni degli elementi sulla tela. Gli elementi selezionati verranno automaticamente evidenziati nel pannello Livelli. Accelerare il flusso di lavoro premendo '?' Per vedere la gamma di scorciatoie da tastiera che puoi usare.

07. Anteprima

È possibile visualizzare in anteprima e interagire con il prototipo ogni volta che si desidera facendo clic su "Anteprima" nell'angolo in basso a destra dell'editor. Lo useremo più tardi per testare come si sentono le nostre transizioni. Selezionando "Anteprima" ora ti mostrerà le risorse in modalità a schermo intero, ma se si nasce in pagina 2 utilizzando le frecce, vedrai un esempio di riferimento del primo stato del nostro prototipo. Prova ad interagire con l'esempio di riferimento facendo clic sul pulsante 'Ricette salvate' nell'intestazione per visualizzare in anteprima cosa creeremo.

08. Iniziare

Ora hai familiarità con il prototipo che stiamo costruendo, è ora di iniziare! Selezionare 'Modifica', per tornare nell'editor, quindi sulla pagina Asset Selezionare tutti gli elementi e copiali negli Appunti. Vai a pagina 1 e incolla gli elementi sulla pagina.

09. Disporre le tue risorse

Senza elementi selezionati, impostare il riempimento dello sfondo della tua tela su # F6F7F8 (guarda nel pannello Proprietà a destra). Posiziona l'intestazione sulla tela, in alto e al centro.

Vuoi riorganizzare le risorse in modo che il tuo primo stato (tutte le ricette) sia posizionato sulla tela e le risorse per il tuo secondo stato di stato (sabato (ricette salvate) sono fuori dalla tela a destra. Ecco perché: quando lo stesso oggetto esiste a pagina 1 e pagina 2, Atomic animerà automaticamente eventuali modifiche tra loro.

10. Impila le tue carte

Quando inizialmente avvisa il prototipo, potresti aver notato il newsfeed delle ricette sulla pagina "Riferimento - tutte le ricette" è scorrevole verticalmente. Per aggiungere questo effetto, organizzare le schede di ricetta in uno stack verticale, incluso il testo "torna domani" che dovrebbe essere posizionato per ultimo, in basso.

11. Creare un contenitore a scorrimento

Seleziona le carte Ricetta e "Torna indietro domani", e scegli lo strumento contenitore che sarà apparso nel centro superiore della tela. Seleziona 'Crea contenitore di scorrimento'. Il contenuto sarà quindi raggruppato e inserito all'interno di ciò che chiamiamo un contenitore a scorrimento, con lo scorrimento verticale abilitato per impostazione predefinita. Assicurati di definire i confini del tuo contenitore trascinando il confine inferiore fino a mascherare gli elementi e incontrare la tela.

12. Metti i tuoi elementi

Per questa particolare transizione, vogliamo la griglia della "ricetta salvata" che entrava dalla destra, e il testo "aggiungi altro" che arriva dal basso. Per assicurarsi che ciò accada, posizionare ciascun elemento nella rispettiva posizione di partenza. Ad esempio, le "ricette salvate" dovrebbero essere posizionate a pagina 1, fuori dalla tela ea destra; Considerando che il testo "aggiungi altro" dovrebbe essere posizionato a pagina 1, fuori dalla tela e sotto.

13. TAP Transition.

Dato che creiamo una transizione TAP, dove vogliamo che gli elementi nella nostra prossima pagina per scivolare, è importante anche che esistano a pagina 1, fuori dalla tela, per definire la loro posizione di partenza. In qualsiasi momento è possibile fare riferimento alla pagina "Riferimento - tutte le ricette" per vedere come questa pagina dovrebbe essere organizzata.

14. Duplicazione

For our transition, duplicate page 1

Per la nostra transizione, duplicato Page 1

Ora abbiamo impostato la prima pagina, è il momento di creare il secondo stato per la transizione, che faremo su una nuova pagina. Assicurati che il pannello Pagine sia selezionato, quindi passa a pagina 1 per visualizzare il menu Hamburger in basso a destra della scheda pagina. Fai clic sul menu e seleziona 'Duplica'.

15. Ricette salvate

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

Atomic animerà eventuali modifiche apportate tra Page 1 e la tua nuova pagina 2

Passare alla tua pagina appena duplicata per creare il secondo stato: le tue ricette salvate. Qui è importante non eliminare alcun elemento sulla pagina, in quanto ciò infrangerà la transizione. Poiché abbiamo duplicato la pagina, Atomic sa che gli elementi su entrambe le pagine sono gli stessi elementi collegati. Pertanto sa per animare eventuali modifiche che facciamo alle proprietà degli elementi a pagina 2 (dimensioni, posizione, rotazione, opacità, colore e così via).

16. Più transizioni

Prima sposta il gruppo di scorrimento "Tutte le ricette" a sinistra, fuori dalla tela e l'elemento 'Ricette salvato' e 'aggiungere altro' testo nelle loro nuove posizioni: nel corpo (al posto del gruppo "Tutte le ricette") la metà inferiore della tela e rispettivamente al centro. L'unico elemento che non stiamo muovendo in questa transizione è l'intestazione. Questo perché l'intestazione rimane sullo schermo e cambia solo sottilmente - arriveremo presto.

17. Ulteriore animazione

Per l'intestazione, vogliamo che lo sfondo blu scivoli attraverso il secondo stato. Mentre a pagina 2, con il pannello Livelli aperto, espandere il gruppo intitolato "Intestazione" e selezionare il rettangolo blu. Quindi sposta questo a destra, quindi è posizionato dietro le "ricette salvate". Bello!

18. La parte divertente

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

Aggiungi un hotspot di interazione sopra l'area che desideri che gli utenti interagiscano

Ora arriva la parte divertente della creazione della transizione. A pagina 1 disegneremo un hotspot sul testo "Ricette salvate" nell'intestazione, poiché questa è l'area che vogliamo che il nostro utente interagire. Selezionare lo strumento Interaction Hotspot dal pannello Strumenti all'estrema sinistra dell'Editor (o semplicemente premere h). Puoi disegnare hotspot usando lo stesso metodo che useresti per disegnare un rettangolo sulla tela: basta fare clic e trascinare.

19. Impostazioni di transizione

Customise your transition, including the trigger gesture and motion type

Personalizza la tua transizione, incluso il gesto del trigger e il tipo di movimento

Una volta che hai disegnato il tuo hotspot, con esso ancora selezionato, vedrai una sezione interazioni appaita nel pannello Proprietà a destra. Qui è possibile specificare il gesto del trigger, la pagina di destinazione, il tipo di movimento e la durata della transizione. Per questa transizione specificare le seguenti impostazioni: Gesto: Clicca o tocca. ; Vai a: Pagina 2 ; Motion: E. ASE IN-OUT ; Durata: 250. .

20. avanti e indietro

Vogliamo essere in grado di passare avanti e indietro tra le due transizioni, quindi ora è ora necessario effettuare un hotspot a pagina 2 per riportarci alla pagina 1. Copia l'hotspot dalla pagina 1 utilizzando le scorciatoie da tastiera e incollare A pagina 2 sul testo "Tutte le ricette" nell'intestazione ". Ricordarsi di aggiornare l'impostazione della pagina di destinazione del nuovo hotspot a pagina 1.

21. Anteprima

Click the Preview button to see your transition in action

Fai clic sul pulsante Anteprima per vedere la tua transizione in azione

È ora di visualizzare l'anteprima della tua transizione! Passare a pagina 1 nel pannello Pagine e fare clic su Anteprima in basso a destra dell'editor (scorciatoia cmd + enter. ). Fare clic o Toccare "Ricette salvate" sul tuo prototipo per andare a pagina 2. Quindi selezionare il prototipo di "Tutti i tipi di ricette" da riprendere a pagina 1.

22. Tutto fatto!

Ora sei un professionista! Selezionare 'Modifica' per tornare all'editor, quindi se si elimina le risorse e due pagine di riferimento (selezionando il menu Hamburger Pagina e quindi "Elimina pagina"), il prototipo che hai appena fatto è pronto per condividere. È possibile creare facilmente un collegamento di condivisione premendo 'Share' in basso a destra nell'editor.

Questo articolo è originariamente apparso in Magazine netta Edizione 283; Compralo qui !

Come si fa - Articoli più popolari

6 suggerimenti rapidi per migliorare il disegno della penna del pennello

Come si fa Sep 11, 2025

(Immagine di credito: Artem Solip) Ho sempre cercato di sviluppare il mio stile personale, una voce artistica che par..

Consigli per lo sviluppo visivo: raccontare una storia con la tua opera d'arte

Come si fa Sep 11, 2025

(Immagine di immagine: Simon Baek) Cos'è lo sviluppo visivo? Bene, sta progettando tutto ciò che può aiutare a vis..

Come disegnare un braccio

Come si fa Sep 11, 2025

(Immagine di immagine: Patrick J Jones) Imparare a disegnare un braccio che sembra realistico è una parte vitale di ..

Procreare tutorial: Come dipingere come i vecchi maestri

Come si fa Sep 11, 2025

C'è sempre qualcosa di nuovo da imparare dai vecchi maestri, sia che sia composizione, illuminazione o persino una tecnica narra..

Come fare e usare un mahlstick per la pittura

Come si fa Sep 11, 2025

Il Mahlstick (o il maestro, come a volte noto) è uno strumento di supporto stabilizzante utilizzato dai pittori quando si lavora..

4 suggerimenti per sviluppare le tue abilità di sviluppo

Come si fa Sep 11, 2025

(Immagine di immagine: Robert Pizzo) Direttore superfriendly Dan Mall condividerà i suoi PRO sugger..

Le regole della reattiva tipografia Web

Come si fa Sep 11, 2025

La tipografia Web reattiva è dura, è necessario avere entrambe le costolette di design e il know-how tecnico. Ma comunque complicato potrebbe essere, ottenendo che non è sbagliato non è u..

Disegna un ritratto a matita di un cane

Come si fa Sep 11, 2025

Quando disegnano ritratti di animali domestici, non devi solo sapere Come disegnare gli animali : L'attività è c..

Categorie