La última actualización de Atomic.io incluye contenedores desplazables
Hace unos meses mostré cómo se puede usar atomic.io para prototipar el movimiento. Uno de los puntos clave que hice en la pieza fue "mostrar movimiento" en lugar de dejarlo en manos de la imaginación del cliente o del equipo es importante. De hecho, esto se ha vuelto tan crítico que una nueva categoría de herramientas de UX / UI aparece en la escena. Incluyen: Keynote de Apple, Edge Animate de Adobe, After Effects y UXPin, por nombrar algunos. El nuevo chico en el bloque es Atomic.io, que estaba en beta abierta cuando escribí por primera vez sobre el producto.
Lo bueno de las betas abiertas es que le dan al fabricante del software la oportunidad de recopilar los comentarios de los usuarios sobre el conjunto de características, incluidas las características que faltan, y luego los agregan a la aplicación y los prueban antes del lanzamiento comercial. En el caso de Atomic, una característica que realmente extrañaba era la capacidad de desplazar el contenido vertical u horizontalmente. Esto podría incluir cosas como tarjetas, presentaciones de diapositivas o prácticamente cualquier cosa que un usuario deslice o arrastre dentro de los límites de la interfaz de una aplicación o sitio.
Esto debe haber sido un tema que muchos de los usuarios solicitaron porque los contenedores desplazables se presentaron a la aplicación este mes y, debo admitir, crear contenido desplazable en el prototipo es muy fácil de habilitar.
Así es cómo…
02 de 03Cómo crear contenido de desplazamiento vertical en Atomic
Primero deberá registrarse para una prueba gratuita de 30 días y, al final de ese período, se le presentarán tres planes de precios.
Lo primero que debe saber es todo el trabajo que hará en el navegador y la aplicación está dirigida exclusivamente a Google Chrome. Una vez que inicie sesión, será llevado a la Proyectos página. Para abrir la aplicación, haga clic enNuevo botón de proyecto.
Cuando aparezca la interfaz, verá que hay un número limitado de herramientas, la capacidad de agregar páginas y capas a las páginas, la mesa de trabajo y, más a la derecha, un panel de propiedades sensible al contexto.En este ejemplo, comencé con un ajuste preestablecido de iPhone 5 que es de 320 x 568. Luego abro la carpeta que contiene las imágenes que se van a desplazar y las arrastré al lienzo. Se agregaron automáticamente al proyecto y puede ver que están en capas individuales si haga clic en la pestaña Capas. Luego seleccioné la herramienta Flecha (Selección), seleccioné una imagen y la arrastré a una nueva posición para agregar algo de espacio entre ellas. Luego seleccioné todas las imágenes y Hizo clic en el botón Distribuir verticalmente. en la barra de herramientas Esto espació uniformemente las imágenes. El siguiente paso es seleccionar todo el contenido que se va a desplazar y haga clic en el botón Contenedor o seleccione Crear contenedor de desplazamiento del botón Grupo empuja hacia abajo. Una vez creado el contenedor, lo verá en el panel Capas - haga clic en el contenedor y arrastre el tirador inferior hacia la parte inferior del lienzo. Haga clic en el botón Vista previa en la parte inferior del panel Propiedades y esto abrirá una ventana del navegador. Utiliza la rueda de desplazamiento del ratón para desplazarte por el contenido. Para volver a su proyecto, haga clic en el botón Editar en la parte inferior derecha de la ventana del navegador. El desplazamiento horizontal es igual de fácil de lograr. En este caso, arrastró una serie de imágenes al lienzo y las golpeó una contra otra. Con las imágenes seleccionadas, luego hago clic en el botón Alinear para asegurar que todas estén alineadas entre sí. Luego mantuve presionada la tecla Mayús y seleccioné cada capa en el panel Capas. Con las imágenes seleccionadas, me Hizo clic en el botón Contenedor. y, en los paneles Propiedades, seleccionados horizontalmente. en el área de Comportamientos. Luego probé el proyecto en una ventana del navegador haciendo clic en el botón Vista previa. Aunque he mostrado cómo crear versiones individuales de desplazamiento vertical y horizontal, siempre que coloque el contenido desplazable en un contenedor, puede tener estos contenedores en áreas separadas de la pantalla. Por ejemplo, una página web podría tener contenido de desplazamiento vertical en un menú lateral y contenido de desplazamiento horizontal en una presentación de diapositivas en la misma página. De hecho, un contenedor puede tener desplazamiento tanto vertical como horizontal para elementos como un selector de imagen que tiene una docena de miniaturas. Para obtener más información sobre esta función en atomic.io, consulte: Cómo crear contenido de desplazamiento horizontal en Atomic
