01 de 03
L'última actualització d'Atomic.io inclou contenidors desplaçables
Uns mesos enrere he mostrat com es pot utilitzar l'atòmica . Prototipus de moviment . Un dels punts clau que vaig fer a la peça era "mostrar moviment" en lloc de deixar-lo a la imaginació del client o de l'equip és important. De fet, això s'ha tornat tan crític que apareix una nova categoria d'eines UX / UI a l'escenari. Inclouen: Apple Keynote, Adobe Edge Animate, After Effects i UXPin , entre d'altres. El nou noi del bloc és Atomic.io, que es va obrir beta quan vaig escriure primer sobre el producte.
L'aspecte net de les betes obertes és que ofereixen al fabricant del programari l'oportunitat de recollir informació dels usuaris sobre el conjunt de funcions, incloses les funcions que falten i, a continuació, afegir-les a l'aplicació i provar-les abans del llançament comercial. En el cas de l'atòmica, una característica que realment vaig perdre era la capacitat de desplaçar-se de contingut vertical o horitzontal. Això podria incloure coses com ara targetes, presentacions de diapositives o pràcticament qualsevol cosa que un usuari faci lliscar o arrossegar dins dels límits de la interfície d'una aplicació o del lloc.
Això hauria d'haver estat un tema que molts usuaris sol·licitaven perquè els contenidors desplaçables acaben d'introduir a l'aplicació aquest mes i, he de reconèixer, la creació de contingut desplaçable en el prototip és morta simple d'habilitar.
A continuació s'explica com ...
02 de 03
Com crear contingut de desplaçament vertical en atòmica
Primer hauràs d'inscriure's per una prova gratuïta de 30 dies i, al final d'aquest període, se't presentaran tres plans de preus.
El primer que necessites saber és que tot el treball que fas està en el navegador i l'aplicació està dirigida estrictament a Google Chrome. Un cop hàgiu iniciat la sessió, se us dirigirà a la pàgina Projectes . Per obrir l'aplicació, feu clic al botó Nou projecte .
Quan aparegui la interfície, veureu que hi ha un nombre limitat d'eines, la possibilitat d'afegir pàgines i capes a les pàgines, a l'artboard i, a la dreta, a un quadre de propietats sensibles al context.
En aquest exemple, he començat amb una preselecció d'iPhone 5 que és de 320 x 568. A continuació, obre la carpeta que conté les imatges que es desplacen i les arrossega al llenç. Van ser afegits automàticament al projecte i es pot veure que estan en capes individuals si feu clic a la pestanya Capes . Després, vaig seleccionar l'eina de fletxa (Selecció), vaig seleccionar una imatge i la vaig arrossegar a una nova posició per afegir-hi espai. Després he seleccionat totes les imatges i heu fet clic al botó Distribuir verticalment a la barra d'eines. Això va separar de manera uniforme les imatges.
El següent pas és seleccionar tot el contingut que es desplacarà i fer clic al botó Contenidor o seleccionar Crear Contenidor de desplaçament del botó Grup, es desplegui. Un cop creat el contenidor, el veureu al panell Capes, feu clic al contenidor i arrossegueu l'extrem inferior cap a la part inferior del llençol . Feu clic al botó Previsualitza a la part inferior del quadre Propietats i això iniciarà una finestra del navegador. Utilitzeu la roda de desplaçament del ratolí per desplaçar-vos pel contingut. Per tornar al vostre projecte, feu clic al botó Edita a la part inferior dreta de la finestra del navegador.
03 de 03
Com crear contingut de desplaçament horitzontal a Atòmica
El desplaçament horitzontal és tan fàcil d'aconseguir.
En aquest cas, es van arrossegar una sèrie d'imatges al llenç i es van enfrontar unes contra les altres. Amb les imatges seleccionades, llavors faig clic al botó "Alineació superior" per assegurar-se que totes estan alineades entre elles.
Després, mantingué premuda la tecla Shift i seleccionés cada capa del tauler Layers. Amb les imatges seleccionades, he fet clic al botó Contenidor i , als panells Propietats, seleccionades horitzontalment a l'àrea Comportament.
Després provà el projecte en una finestra del navegador fent clic al botó Previsualitza.
Encara que he mostrat com crear versions individuals de desplaçament horitzontal i vertical, sempre que col·loqueu el contingut desplaçable en un contenidor, podeu tenir aquests contenidors en àrees separades de la pantalla. Per exemple, una pàgina web podria tenir desplaçament vertical de contingut en un menú lateral i desplaçar-se horitzontalment en un diapositivo a la mateixa pàgina. De fet, un contenidor pot tenir desplaçament tant vertical com horitzontal per a elements com ara un selector d'imatges que té una dotzena de miniatures.
Per obtenir més informació sobre aquesta característica a atomic.io consulteu:
- L'anunci del bloc
- Tutorial del contenidor de desplaçament
- Emmascarant amb contenidors
- Resolució de problemes dels contenidors de desplaçament