origami-teaser_EN

Origami: creación de prototipos de diseño gratuitos para iOS, Android y la Web

La creación de prototipos es un elemento importante del proceso de desarrollo de aplicaciones. Las animaciones y los enlaces de capas deben ser correctos y probados antes de finalizar el proceso de desarrollo real y cargar la aplicación en la tienda de aplicaciones. Origami es un marco de diseño desarrollado por Facebook. Su objetivo es simplificar la creación de prototipos de aplicaciones para iPhone y iPad, prestando especial atención a la integración de interacciones y animaciones.

[Image of iMac by Placeit]

¿Qué es el origami?

Origami es una herramienta gratuita para diseñar interfaces de usuario modernas. Fue desarrollado para crear rápidamente prototipos de diseño con animaciones e interacciones que se pueden ejecutar en iPhones o iPads. La función de exportación le permite exportar el código generado y proporcionar al codificador un fragmento. Este marco de animación de código abierto hace que la creación de animaciones e interfaces de usuario sea cómoda y productiva. El marco desarrollado por Facebook se lanzó el 23 de diciembre de 2013 y se ha desarrollado continuamente.

Lo que debe mencionarse es que Origami solo se puede usar junto con Quartz Composer y, por lo tanto, solo funciona en Mac OS X. También deberá estar registrado como desarrollador de Apple para poder usarlo. Aunque Origami puede exportar el código a iOS, Android y la web, el marco solo funciona en el sistema operativo de Apple. Si desea probar cómodamente sus prototipos, no se moverá de iOS porque esta es la única plataforma compatible con la aplicación dedicada Origami Live para iOS. Se puede descargar de forma gratuita en la tienda de aplicaciones de iTunes.

origami

Repasemos algunas de las funciones y veamos qué puede hacer Origami por usted. A menudo, es mejor visualizar de qué es capaz una herramienta, en lugar de solo leer sobre ella. Por lo tanto, te proporcionaré algunos videos al final del artículo.

La página de inicio: Origami: herramienta de creación de prototipos de diseño

Control de gestos

gestos de origami

Según Origami, tienen los componentes de gestos más avanzados y fáciles de usar. Admite gestos de desplazamiento, deslizamiento y toque. Todos los elementos son fáciles de usar e integrar.

El componente de desplazamiento es compatible con el desplazamiento gratuito, de toda la página y de la rueda de la fortuna. Tiene funciones avanzadas para crear un área de desplazamiento en la aplicación. El área de deslizamiento permite deslizar la pantalla actual hacia abajo a través de una animación que revela una nueva pantalla, por ejemplo, para la configuración. Por último, pero no menos importante, el componente de toque donde puede definir acciones para tocar una vez, dos veces o presionar prolongadamente en la pantalla.

La función de exportación de código

Origami puede exportar fragmentos de código de su componente de diseño con solo un clic. Luego, los codificadores pueden copiar y pegar fragmentos de animación en sus proyectos. Origami quiere ofrecer la misma apariencia a todas las plataformas.

código de exportación de origami

El código se puede exportar para iOS, Android y la web. Para tener una idea de la calidad del código exportado, hay un ejemplo de código para cada plataforma.

Ejemplos de código para: iOS .m | Android .java | Web .js

Boceto y Origami

Origami funciona excelente con los nuevos y populares Bosquejo herramienta que simplifica aún más la creación de prototipos.

Origami crea vínculos entre las capas del prototipo y el archivo Sketch. Una vez que las capas del prototipo están vinculadas, el prototipo se puede actualizar inmediatamente con un simple atajo de teclado. Los usuarios de Photoshop o Affinity Photo se regocijarán al saber que las capas de Origami se pueden vincular a archivos PSD.

Sketch y Origami: un video tutorial breve

Este breve video tutorial muestra cómo vincular su archivo Sketch a su prototipo de Origami. Después de una breve configuración, podrá actualizar todas las capas con un atajo de teclado.

Creación de prototipos para aplicaciones de escritorio

web-prototyping-mit-origami

Origami le permite no solo crear prototipos para aplicaciones de iPhone y iPad, sino también para sitios web y aplicaciones web. Puede usar y desarrollar funciones como entrada de texto, cursores personalizados, cámara FaceTime y arrastrar y soltar de OS X, que luego se pueden organizar en un marco de navegador web de tamaño variable. Esto le permite crear prototipos de aplicaciones receptivas para la web.

Aprende de los ejemplos

ejemplos

Muchos otros marcos de diseño para la creación de prototipos de aplicaciones también brindan una excelente documentación. Origami, sin embargo, no solo proporciona una documentación instructiva, sino también cuatro interacciones y siete ejemplos de interfaz. Puede descargar estos ejemplos como archivos QTZ e importarlos a sus proyectos para ver claramente lo que se necesita para una determinada animación o área de prototipo. Posiblemente, esto le facilite aprender a crear prototipos con el marco Origami.

Página de descarga de ejemplos de código de Origami

Los tutoriales de origami

Estos videos le muestran paso a paso cómo crear prototipos con el marco de diseño de Origami. Cada video se proporciona con una descarga del código de ejemplo.

Introducción a la papiroflexia

Este video muestra cómo comenzar con la creación de prototipos de Origami. Al final del video, encontrará una interacción en la que puede tocar para acercar o alejar una foto.

Descarga el código de ejemplo

Crear una barra de navegación plegable

Este video explica cómo crear una interacción donde el desplazamiento contrae y expande la barra de navegación de una manera muy atractiva. Aprenderá cómo hacer que una capa se pueda desplazar y animarla en función de la posición de desplazamiento.

Código de ejemplo para la creación de una navegación colapsable

Crear una navegación deslizable

Este video trata sobre la creación de una navegación deslizable. Si toca un elemento de noticias en tiempo real, la vista completa del elemento se deslizará hacia adentro. Si lo desliza hacia afuera, regresará a las noticias en tiempo real. Este efecto se usa a menudo para aplicaciones de noticias. En este video, aprenderá cómo hacer que la capa se pueda deslizar.

Código de ejemplo para la creación de una navegación deslizable

Crear una nueva publicación

Este video muestra la finalización del prototipo. El botón más abre una nueva área que puede agregar una nueva publicación a la fuente. Aprenderá cómo usar el parche inalámbrico y cómo construir una lógica condicional. También cubre la creación de una animación de varias etapas.

Código de ejemplo para la creación de una nueva publicación

Conclusión

Origami es un framework de código abierto muy bien documentado para la creación de prototipos de diseño. Los principiantes son tomados de la mano en forma de ejemplos de código, tutoriales en video útiles y una extensa documentación. Si quiere más, puede unirse a su comunidad de Facebook donde puede obtener soporte o proponer funciones.

Enlaces zum Beitrag

(dpe)

#Origami #creación #prototipos #diseño #gratuitos #para #iOS #Android #Web

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *