L'ultimo aggiornamento Atomic.io include i contenitori scorrevoli
Alcuni mesi fa ho mostrato come atomic.io può essere usato per prototipare il movimento. Uno dei punti chiave che ho fatto nel pezzo è stato "mostrare il movimento" piuttosto che lasciarlo all'immaginazione del cliente o del team. In effetti, questo è diventato così importante che una nuova categoria di strumenti UX / UI sta comparendo sulla scena. Includono: Apple Keynote, Adobe Edge Animate, After Effects e UXPin, solo per citarne alcuni. Il nuovo capretto sul blocco è Atomic.io che era in open beta quando ho scritto per la prima volta il prodotto.
La cosa bella delle beta aperte è che danno al produttore del software l'opportunità di raccogliere il feedback degli utenti sul set di funzionalità, incluse le funzionalità mancanti, e quindi aggiungerle all'applicazione e farle testare prima del rilascio commerciale. Nel caso dell'atomico, una caratteristica che mi mancava davvero era la possibilità di scorrere il contenuto verticalmente o orizzontalmente. Questo potrebbe includere cose come carte, presentazioni o praticamente qualsiasi cosa un utente potrebbe scorrere o trascinare all'interno dei confini di un'interfaccia di un app o di un sito.
Questo deve essere stato un argomento molto richiesto dagli utenti perché i contenitori scorrevoli sono stati appena introdotti nell'app questo mese e, devo ammettere, la creazione di contenuti scorrevoli nel prototipo è praticamente semplice da abilitare.
Ecco come…
02 del 03Come creare contenuti a scorrimento verticale in Atomic
Dovrai prima registrarti per una prova gratuita di 30 giorni e, al termine di quel periodo, ti verranno presentati tre piani tariffari.
La prima cosa che devi sapere è che tutto il lavoro che farai è nel browser e l'app è puntata rigorosamente su Google Chrome. Una volta effettuato l'accesso, verrai indirizzato al progetti pagina. Per aprire l'app, fare clic suNuovo pulsante Progetto.
Quando appare l'interfaccia, vedrai che ci sono un numero limitato di strumenti, la possibilità di aggiungere pagine e livelli alle pagine, la tavola da disegno e, sulla destra, un pannello delle proprietà sensibili al contesto.In questo esempio, ho iniziato con un predefinito per iPhone 5 320 x 568. Poi apro la cartella contenente le immagini da scorrere e le trascino sulla tela. Sono stati aggiunti automaticamente al progetto e puoi vedere se sono su singoli livelli fare clic sulla scheda Livelli. Ho quindi selezionato lo strumento Freccia (Selezione), selezionato un'immagine e trascinato in una nuova posizione per aggiungere un po 'di spazio tra di loro. Ho quindi selezionato tutte le immagini e fatto clic sul pulsante Distribuisci verticalmente sulla barra degli strumenti. Questo distanzia equamente le immagini. Il prossimo passo è selezionare tutto il contenuto da scorrere e verso l'uno o l'altro fai clic sul pulsante Contenitore o seleziona Crea contenitore di scorrimento dal pulsante Gruppo scendi. Una volta creato il contenitore, lo vedrai nel pannello Livelli: fai clic sul contenitore e trascina la maniglia inferiore verso l'alto fino alla parte inferiore dell'area di disegno. Fai clic sul pulsante Anteprima nella parte inferiore del pannello Proprietà e questo avvierà una finestra del browser. Usa la rotella del mouse per scorrere il contenuto. Per tornare al tuo progetto, fai clic sul pulsante Modifica in basso a destra nella finestra del browser. Lo scorrimento orizzontale è altrettanto facile da realizzare. In questo caso, trascinava una serie di immagini sulla tela e le accoppiava l'una contro l'altra. Con le immagini selezionate, faccio quindi clic sul pulsante Allinea in alto per assicurarci che siano tutte allineate l'una con l'altra. Ho quindi tenuto premuto il tasto Maiusc e selezionato ciascun livello nel pannello Livelli. Con le immagini selezionate, I fatto clic sul pulsante Contenitore e, nei pannelli Proprietà, selezionato orizzontalmente nell'area dei Behaviors. Ho quindi testato il progetto in una finestra del browser facendo clic sul pulsante Anteprima. Anche se ho mostrato come creare singole versioni di scorrimento verticale e orizzontale, purché si inserisca il contenuto scorrevole in un contenitore, è possibile avere questi contenitori in aree separate dello schermo. Ad esempio, una pagina web potrebbe avere il contenuto in scorrimento verticale in un menu laterale e lo scorrimento orizzontale del contenuto in una presentazione sulla stessa pagina. Infatti, un contenitore può avere sia lo scorrimento verticale che orizzontale per elementi come un raccoglitore di immagini con una dozzina di anteprime. Per saperne di più su questa funzionalità in atomic.io controlla: Come creare contenuti a scorrimento orizzontale in Atomic
