Haz un prototipo de alta fidelidad en atómico

Sep 17, 2025
Cómo
[dieciséis]

Es fácil quedar atrapado en tratar de desarrollar una idea dentro de una herramienta de dibujo de maqueta estática o de archivo plano, pero un prototipo vale mil reuniones. ¿Por qué se conformaría con algo menos que explorar sus ideas de manera interactiva?

Tal vez tenga una idea de cómo podría comportarse una transición, pero no está seguro de que se sentirá directamente al usuario. Rápidamente prototipar la transición e interactuar con ella le brinda directamente una experiencia mucho más realista de cómo podría funcionar el producto final en el mundo real.

Hemos visto herramientas traer prototipos al espacio de diseño, pero no como Atómico . Ahora hay una manera de construir prototipos totalmente interactivos, de alta fidelidad que se ven y se comportan como lo real.

La prototipación en Atomic es increíblemente rápida: puede crear maquetas hermosas y avanzadas en minutos, sin escribir ningún código, instalar cualquier software o beber demasiado café. Podrá obtener una vista previa con el prototipo directamente en su dispositivo móvil, o compartirlo con un compañero de equipo para comentarios. También hemos preparado todos los activos que necesita para comenzar, por lo que no tendrá que importar una cosa (pero puede importarlo desde el boceto y Photoshop CC también).

En este tutorial exploraremos una simple transición de deslizamiento dentro de una aplicación meteorológica que crearemos en Atomic. Caminaremos por los pasos fáciles para la creación de transiciones, y si necesita un desafío, también cubriré algunas funciones de prototipos más avanzadas para que pueda explorar.

01. Registrarse

¡Empecemos! Si aún no tiene una cuenta, abra Google Chrome, visite atomic.io y regístrese para una prueba gratuita. Esto dura 30 días, lo que debería tener mucho tiempo para que explore Atómico y haga su primer prototipo.

02. Echa un vistazo a su alrededor

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

[dieciséis] El proyecto de muestra contiene archivos de muestra para ayudarlo a familiarizarse con los atómicos.

Ahora, se registra en su cuenta, este es un buen momento para explorar. Notarás que se ha configurado un proyecto de muestra para usted. Esto tiene algunos archivos de muestra introductorios con los que puede jugar mientras se está familiarizando con Atómico. Alternativamente, puedes visitar nuestro Escaparate , que tiene una colección de prototipos construidos por otros. Si se atasca, el mejor lugar para buscar una solución es nuestra centro de ayuda .

03. Nuevo proyecto

Cree un nuevo proyecto haciendo clic en 'Nuevo proyecto' y nombrarlo 'aplicación de recetas'. Presionando Enter abrirá la carpeta del proyecto. Aquí puede ver todos los diseños dentro de este proyecto en particular. Como este es un nuevo proyecto, está vacío. Sin embargo, los diseños se llenarán aquí con el tiempo mientras los creas.

04. Agarra una muestra

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

[dieciséis] Hay un archivo de muestra listo para este proyecto.

En lugar de crear un nuevo diseño vacío, cabeza aquí . Esto abrirá un archivo de muestra que hemos creado para ayudarlo a comenzar.

¿Vea el botón 'Copiar y editar' en la esquina inferior derecha? Haga clic en eso y agreguelo a su proyecto de aplicación de recetas. Haga clic en 'Editar ahora'. Así, una copia de nuestro archivo de muestra ya está dentro de su proyecto listo para que usted edite.

05. Explora el editor.

¡Bienvenido al editor! Si ha usado una herramienta de diseño en el pasado, Probablemente Atomic se sentirá familiar. Veamos alrededor. A la izquierda, encontrará acceso a herramientas de dibujo, diseño y prototipos, así como dos pestañas que le permiten cambiar entre las páginas y los paneles de capas. A la derecha, notará el panel de propiedades, lo que le permite cambiar el tamaño de la página, así como la configuración de los estilos y las transiciones.

06. Echa un vistazo a los elementos.

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

[dieciséis] En la página Activos del archivo de muestra encontrará los elementos que necesita

En la página Activos del archivo de muestra, verá que hemos creado todos los elementos utilizados en este prototipo para usted. Cambie al panel Capas, luego haga clic en algunos de los elementos en el lienzo. Los elementos que seleccione se resaltarán automáticamente en el panel Capas. Acelerar su flujo de trabajo presionando '?' Para ver la gama de atajos de teclado que puede usar.

07. Vista previa

Puede obtener una vista previa e interactuar con su prototipo siempre que desee hacer clic en 'Vista previa' en la esquina inferior derecha del editor. Usaremos esto más tarde para probar cómo se sienten nuestras transiciones. La selección de 'vista previa' ahora le mostrará los activos en modo de pantalla completa, pero si navega a la página 2 utilizando las flechas, verá un ejemplo de referencia del primer estado de nuestro prototipo. Intente interactuar con el ejemplo de referencia haciendo clic en el botón 'Recetas guardadas' en el encabezado para obtener una vista previa de lo que vamos a crear.

08. Comienza

¡Ahora está familiarizado con el prototipo que estamos construyendo, es hora de comenzar! Seleccione 'Editar', para volver al editor, y luego en la página Activos, seleccione todos los elementos y cópielo en el portapapeles. Vaya a la página 1 y pegue los elementos en la página.

09. Organizar sus activos

Sin ningún elemento seleccionado, configure el relleno de fondo de su lienzo a # F6F7F8 (busque en el panel Propiedades de la derecha). Coloque el encabezado en el lienzo, la parte superior y el centro.

Querrá reorganizar los activos para que su primer estado (todas las recetas) se coloque en el lienzo, y los activos para su segundo estado más próximo para ser creados (recetas guardadas) están fuera del lienzo a la derecha. Aquí está por qué: cuando existe el mismo objeto en la página 1 y en la página 2, Atomic animará cualquier cambio entre ellos automáticamente.

10. Apila tus tarjetas

Cuando inicialmente previsualiza el prototipo, es posible que haya notado que la página de noticias de las recetas en la página 'Referencia: todas las recetas' es desplazable verticalmente. Para agregar este efecto, organice las tarjetas de recetas en una pila vertical, incluido el texto 'regrese mañana' que debe colocarse el último, en la parte inferior.

11. Crea un contenedor de desplazamiento.

Seleccione las tarjetas de receta y el texto 'regrese mañana' y elija la herramienta de contenedor que habrá aparecido en el centro superior del lienzo. Seleccione 'Crear contenedor de desplazamiento'. El contenido se agrupará y se colocará dentro de lo que llamamos un contenedor de desplazamiento, con desplazamiento vertical habilitado de forma predeterminada. Asegúrese de definir los límites de su contenedor arrastrando el límite inferior para enmascarar los elementos y cumplir con el lienzo.

12. Coloque sus elementos.

Para esta transición en particular, queremos que la rejilla 'recetas guardadas' entró de la derecha, y el texto "Agregar más" que se acerca desde abajo. Para asegurarse de que esto suceda, coloque cada elemento en su posición de inicio respectiva. Por ejemplo, las 'recetas guardadas' deben colocarse en la página 1, fuera del lienzo y hacia la derecha; Considerando que el texto 'Agregar más' debe colocarse en la página 1, fuera del lienzo y a continuación.

13. Toque Transición

A medida que estamos creando una transición de TAP, donde queremos que los elementos en nuestra página siguiente se deslicen, es importante que también existan en la página 1, fuera del lienzo, para definir su posición inicial. En cualquier momento, puede consultar la página 'Referencia: todas las recetas' para ver cómo se debe organizar esta página.

14. DUPLICACIÓN

For our transition, duplicate page 1

[dieciséis] Para nuestra transición, duplicar página 1

Ahora hemos establecido la primera página, es hora de crear el segundo estado para la transición, que haremos en una nueva página. Asegúrese de que se seleccione los paneles de páginas, luego se ciernega sobre la página 1 para abrir el menú de hamburguesa en la parte inferior derecha de la tarjeta de la página. Haga clic en el menú y seleccione 'Duplicar'.

15. Recetas guardadas

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

[dieciséis] Atomic animará cualquier cambio que realice entre la página 1 y su nueva página 2

Navegue a su página recién duplicada para crear el segundo estado: sus recetas guardadas. Es importante aquí no eliminar ningún elemento en la página, ya que esto romperá la transición. Debido a que hemos duplicado la página, Atómico sabe que los elementos en ambas páginas son los mismos elementos conectados. Por lo tanto, sabe animar cualquier cambio que hagamos a las propiedades de los elementos en la página 2 (tamaño, posición, rotación, opacidad, color, etc.).

16. MÁS TRANSICIONES

Primero mueva el grupo de desplazamiento 'todos los recetas' a la izquierda, fuera del lienzo, y el elemento 'Recetas guardadas' y 'Agregar más' texto a sus nuevas posiciones: en el cuerpo (en lugar del grupo 'Todos los recetas') en La mitad inferior del lienzo, y en el centro respectivamente. El único elemento que no nos estamos moviendo en esta transición es el encabezado. Esto se debe a que el encabezado permanece en la pantalla y solo cambia sutilmente: llegaremos a eso pronto.

17. Animación adicional.

Para el encabezado, queremos que el fondo azul se deslice en el segundo estado. Mientras está en la página 2, con el panel Capas ABIERTE, expanda el grupo titulado 'encabezado' y seleccione el rectángulo azul. Luego mueva esto a la derecha, por lo que se coloca detrás de las "recetas guardadas". ¡Lindo!

18. La parte divertida

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

[dieciséis] Agregue un punto de acceso de interacción sobre el área con la que desea que los usuarios interactúen con

Ahora viene la parte divertida de crear la transición. En la página 1 vamos a dibujar un punto de acceso sobre el texto 'recetas guardadas' en el encabezado, ya que este es el área con la que queremos que nuestro usuario interactúe. Seleccione la herramienta de interacción hotspot en el panel Herramientas en la izquierda izquierda del editor (o simplemente presione H). Puede dibujar hotspots utilizando el mismo método que usaría para dibujar un rectángulo en el lienzo: simplemente haga clic y arrastre.

19. Configuración de transición

Customise your transition, including the trigger gesture and motion type

[dieciséis] Personalice su transición, incluido el gesto de activación y el tipo de movimiento.

Una vez que haya dibujado su punto de acceso, con él aún seleccionado, verá que aparece una sección de interacciones en el panel Propiedades a la derecha. Aquí es donde puede especificar el gesto de activación, la página de destino, el tipo de movimiento y la duración de la transición. Para esta transición, especifique las siguientes configuraciones: Gesture: Haga clic o toque ; Ir: Página 2 ; MOVIMIENTO: E ASE IN-OUT ; Duración: 250 .

20. De ida y vuelta

Queremos poder alternar entre las dos transiciones, por lo que ahora también deberíamos colocar un punto de acceso en la página 2 para llevarnos a la página 1. Copie el punto de acceso de la página 1 usando los atajos de teclado y pegue En la página 2 sobre el texto 'todos los recetas' en el 'encabezado'. Recuerde actualizar la configuración de la página de destino del nuevo punto de acceso en la página 1.

21. Vista previa

Click the Preview button to see your transition in action

[dieciséis] Haga clic en el botón Vista previa para ver su transición en acción

¡Es hora de obtener una vista previa de su transición! Navegue a la página 1 en el panel Páginas y haga clic en Vista previa en la parte inferior derecha del editor (acceso directo cmd + entrar ). Haga clic o toque en 'recetas guardadas' en su prototipo para ir a la página 2. Luego, seleccione 'Todos los prototipos de recetas' para que se retire a la página 1.

22. ¡Todo hecho!

¡Ahora eres un profesional! Seleccione 'Editar' para volver al editor, luego, si elimina los activos y las dos páginas de referencia (seleccionando el menú de hamburguesas de la página y luego 'Eliminar página'), el prototipo que acabas de hacer está listo para compartir. Puede crear fácilmente un enlace de acciones presionando 'Compartir' en la parte inferior derecha del editor.

Este artículo apareció originalmente en revista neta emisión 283; cómpralo aquí !

Cómo - Artículos más populares

Mejora tus habilidades de arte conceptuales en Photoshop

Cómo Sep 17, 2025

[dieciséis] Para este taller, me gustaría mostrarle una forma realmente divertida de dibujar personajes de su imaginación. Te mostra..

Modelo Una criatura alienígena pirata en Zbrush

Cómo Sep 17, 2025

[dieciséis] Para ayudarte a aprender a crear un personaje de pirata alienígena en 3D, te mostraré cómo esculpí la cara de mi criat..

Construir aplicaciones que funcionan fuera de línea

Cómo Sep 17, 2025

[dieciséis] Durante mucho tiempo, la funcionalidad sin conexión, la sincronización de fondo y las notificaciones de push tienen apli..

Cómo dibujar con la foto de afinidad para iPad

Cómo Sep 17, 2025

[dieciséis] Foto de afinidad para ipad es genial editor de fotos Pero, pero ¿cómo se trata de la aplicación de ..

4 pasos para mejor VDM con ZBrush

Cómo Sep 17, 2025

[dieciséis] El artista 3D y el panelista del vértice Maya Jermy le muestra cómo dominar VDM. Ella estará apareciendo en ..

Crea texturas tilables impresionantes en Blender

Cómo Sep 17, 2025

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

Crea puestas de sol sensacionales en Photoshop

Cómo Sep 17, 2025

[dieciséis] Una hermosa puesta de sol es una cosa así de preguntarse que cualquier persona con una cámara se siente casi obligada a ..

Acelera su modelado 3D

Cómo Sep 17, 2025

[dieciséis] Este tutorial cubre el proceso de construcción de un activo, en este caso un Diseño de la nave espacial - con..

Categorías