Cómo prototipo Una aplicación móvil con origami Studio

Sep 14, 2025
Cómo

En un mundo donde los usuarios tienen altas expectativas de su experiencia en la Web y el móvil, la creación de prototipos y la evaluación del usuario es clave. Ahora es común que se itera progresivamente en prototipos con una fidelidad cada vez más alta, y una floreciente experiencia de usuario La industria ha crecido alrededor de este conjunto crítico de actividades. En última instancia, obtener el software justo en la etapa de prototipos le ahorra tiempo y / o dinero más adelante.

  • 10 herramientas principales de prototipos

Hay muchos enfoques que puede llevar a prototipos, y numerosas herramientas para ayudar. Uno de los más nuevos en el bloque es Estudio de origami [dieciséis] , desarrollado por Facebook y disponible gratis para MacOS.

Origami Studio, que realmente comenzó su vida como un complemento para compositor de cuarzo (un lenguaje de programación visual dentro del entorno de desarrollo Xcode de MacOS) antes de convertirse en una herramienta independiente, ha ganado mucho la atención en el último año.

Esto no es solo porque está construido por un desarrollador de nombres de gran nombre, sino también debido a la combinación de poder y simplicidad que trae al desarrollo de prototipos interactivos de alta fidelidad.

Siga estos pasos para descubrir lo fácil que puede usar el estudio de origami para construir un prototipo.

01. Un nuevo prototipo.

Start by creating a new iPhone 8 prototype

Comience por crear un nuevo prototipo de iPhone 8

Vamos a crear un prototipo para una aplicación móvil que nos permitirá deslizar a través de imágenes de gatos y "gustar" algunos de ellos. Una vez que hemos instalado Origami Studio, crearemos un nuevo prototipo de iPhone 8 desde la pantalla de salpicaduras.

02. Añadiendo capas

Podemos comenzar a agregar algunas capas a nuestro prototipo de inmediato. En este caso, agregaremos un logotipo posicionado en la parte superior de la pantalla. Agregamos la capa usando el botón + en la parte superior derecha y seleccionando 'capa de imagen'. Luego, podemos cambiar el tamaño y posicionarlo adecuadamente resaltando y modifique las propiedades de la capa. Después de nuestra marca, también agregaremos una imagen de corazón en la parte inferior de la pantalla para servir como nuestro botón "Me gusta".

03. Creando una interacción.

For interactions you'll need to create a patch

Para interacciones necesitarás crear un parche.

Necesitamos que nuestro botón de corazón responda a las interacciones de los usuarios. Notará que en la ventana de vista previa, el cursor cambia para representar toque en un dispositivo móvil. Para responder a esto, necesitamos crear un 'parche', que es esencialmente una función en el origami que toma las entradas y produce salidas. Haga doble clic en el área de gris vacío para abrir una lista de nuevos parches y buscar 'interacción'. Coloque su parche y debe aparecer en la pantalla.

04. Vincular interacciones a capas.

Change the patch properties so that it only responds when you click in the right place

Cambie las propiedades del parche para que solo responda cuando haga clic en el lugar correcto

En este momento, su parche responderá al tacto en cualquier lugar del prototipo. Probarlo haciendo clic y verá las propiedades 'Abajo' y 'Toque' cambiando en tiempo real. Si selecciona la propiedad 'Capa' en el parche, puede vincularlo a la capa que contiene la imagen del corazón, y ahora solo responderá a los clics en ese área específica.

05. Animaciones

A pop animation will give users a bit of visual feedback

Una animación pop le dará a los usuarios un poco de retroalimentación visual.

Ahora queremos que suceda algo cuando nuestra interacción se desencadena. Crea otro parche, esta vez una 'animación pop'. Esto se utiliza para crear un efecto suministro. Deje las propiedades a medida que se encuentren por ahora, pero crearemos un enlace entre la salida del Toque de la interacción que creamos anteriormente y la entrada número de nuestra nueva animación pop. Hacemos esto haciendo clic y arrastrando entre los pequeños círculos al lado de cada uno. Si hace clic en el corazón ahora, ahora verá que la interacción desencadena un cambio en la salida 'Progreso' de la animación POP.

06. TRANSICIONES

You can change the extent to which objects change size when they're clicked

Puede cambiar la medida en que los objetos cambian el tamaño cuando se hacen clic

Lo siguiente que necesitamos es un parche de transición. Esto nos permitirá especificar valores bajos y altos para moverse entre el aumento de la salida del progreso de la animación del POP. Luego, podemos vincular los valores de salida de la transición a la propiedad de escala de la capa de imagen de corazón para indicar a Origami para cambiar el tamaño cuando se haga clic. Ahora debería encontrar que hacer clic en el corazón hace que anime un breve cambio de tamaño. Sin embargo, no está correcto, ya que vuelve a la normalidad de inmediato.

07. cambia

Use switch patches to toggle objects between different states

Use parches de interruptor para alternar objetos entre diferentes estados

Los parches de interruptores son la forma de origami de alternar entre dos estados. Esto es lo que queremos para nuestro botón 'Me gusta'. Una entrada que pasa a un parche de conmutación puede voltearla entre los estados 'ON' y 'OFF', que luego se pueden pasar como una salida a parches posteriores. Vamos a crear un nuevo interruptor y colóquelo entre la interacción y la animación pop. Luego, debe hacer clic en el corazón para alternarlo entre estados pequeños y grandes.

08. Comportamiento más complejo.

By experimenting with patches you can add more complex behaviour to your prototype

Al experimentar con parches, puede agregar un comportamiento más complejo a su prototipo.

¡Felicidades! Ahora ha creado su primera función interactiva, utilizando los parches más comunes que le resultará que use la hora y la hora de nuevo. Podemos agregar más parches para crear un comportamiento más complejo. Vamos a crear una capa de corazón de diferente color directamente detrás de nuestra actual, luego agregue nuevos parches para escalarlo simultáneamente, y modificar la opacidad de nuestra capa original, por lo que se hace visible. Ahora, cuando toca el corazón, se alterará más y más, pero también aparecerá para cambiar de color.

09. carrusel

It's time to bring on all the cats

Es hora de traer a todos los gatos.

Para terminar nuestro prototipo, agreguemos un carrusel de imágenes con los gatos que queremos permitir a los usuarios "gustar". Para hacer esto, primero necesitamos agregar un grupo de capas. Cada imagen será una capa separada, con coordenadas X cada vez más desplazadas, de modo que esencialmente se sientan esencialmente a tamaño en una fila con solo una visible en la pantalla en cualquier elemento.

10. Swiping izquierda y derecha.

Follow these steps to add a classic swiping action to your carousel

Siga estos pasos para agregar una acción de deslizamiento clásico a su carrusel

Lo último que debemos hacer para hacerlo funciona es permitir que los swipes izquierda y derecha se desplazan por el carrusel. Hacemos esto creando una interacción de desplazamiento para enlazar al grupo de capas del carrusel (no las imágenes individuales). La interacción produce una coordinada X que podemos enlazar a la propiedad X del carrusel para moverla. En el medio, agregaremos un parche de clip, que se puede usar para limitar los valores para asegurarse de que no nos desplazamos a las coordenadas fuera del borde del carrusel.

11. PRÓXIMOS PASOS

Now you've learned the basics you can add more advanced features

Ahora ha aprendido lo básico que puede agregar características más avanzadas.

Eso es. Has creado una aplicación muy básica. También puede usar los 'cuadros' construidos en el estudio de origami para colocarlo en un fondo de dispositivo, lo que puede ayudar a dar un final profesional. Ahora que está familiarizado con los conceptos básicos de usar parches, puede comenzar a crear comportamientos más avanzados. Hay muchas guías en el sitio web de Origami Studio, que explican cómo implementar funcionalidades populares comúnmente vistas en aplicaciones.

Este artículo se publicó originalmente en la emisión 270 de Creative Web Design Magazine Web Designer. Comprar emisión 270 aquí [dieciséis] o Suscríbete al diseñador web aquí [dieciséis] .

Artículos relacionados:

  • Tendencias que formarán el diseño de la aplicación en 2018.
  • 3 Formas principales de construir un prototipo de sitio web
  • Todo lo que necesita saber sobre las maquetas, los vidrio y los prototipos.

Cómo - Artículos más populares

Cómo construir un blog con Jekyll

Cómo Sep 14, 2025

[dieciséis] (Crédito de la imagen: NET) Este tutorial es para las personas que han oído hablar de los generadores de sitios..

Cómo hacer y usar un Mahlstick para pintar

Cómo Sep 14, 2025

[dieciséis] El Mahlstick (o Maulstick, ya que a veces se conoce) es una herramienta de soporte estabilizante utilizada por los pintore..

Cómo dibujar rápidamente las manos

Cómo Sep 14, 2025

[dieciséis] Para dibujar las manos, debe mirar más allá de la complejidad de la anatomía de la mano y reconocer reglas simples que ..

Construye aplicaciones móviles multiplataformas con el aleteo de Google

Cómo Sep 14, 2025

[dieciséis] Ha habido numerosos marcos móviles multiplataforma a lo largo de los años, con mejoras constantes para la experiencia y ..

10 consejos para el modelado de superficie dura

Cómo Sep 14, 2025

[dieciséis] Esta imagen de la gran nave de vapor oriental de Brunel de 1858 se encuentra en una exhibición permanente en un nuevo mus..

Cómo usar la reducción en el desarrollo web

Cómo Sep 14, 2025

[dieciséis] Como desarrolladores web y creadores de contenido, generalmente pasamos mucho tiempo escribiendo texto que está envuelto ..

10 reglas de oro para SVGS sensibles

Cómo Sep 14, 2025

[dieciséis] Las muchas ventajas de SVG, incluidas imágenes vectoriales infinitamente escalables, tamaños de archivos pequeños y int..

Puntando y compositemente 360 ​​imágenes

Cómo Sep 14, 2025

Con la adición de la Plugin de Cara VR Para Nuke, ahora tenemos una herramienta poderosa a nuestra disposición para coser y componer nuestras imágenes 360. En..

Categorías