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.
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
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.
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
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
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.
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
- página de inicio de origami
- Origami: códigos descargables
- Papiroflexia: Videotutoriales
- Origami: Amplia documentación
- Origami: comunidad de Facebook
(dpe)
#Origami #creación #prototipos #diseño #gratuitos #para #iOS #Android #Web