Proto.io, Pixate, Origami: una Revisión de las herramientas para la creación de prototipos de aplicaciones con soporte Sketch

Yo de nuevo ha creado onboarding de los usuarios de IF de IFTTT en cinco de alto, las herramientas para la creación de prototipos, para entender la diferencia entre ellos. Eran Proto.io, Pixate, Framer, Origami de Facebook y Form de RelativeWave. Mira como estas cinco herramientas se comportan en comparación con la realidad.

. ¿Por qué he escogido estos cinco herramientas. Me di cuenta de que una recreación de algo, cargado de animación (iconos, que se mueven en diferentes direcciones y a diferentes velocidades) no es posible en la mayoría de los paquetes para la creación de un prototipo. La mayoría de las herramientas que permiten sólo conectar las páginas estáticas, mientras que en sistemas más complejos permiten animar diferentes objetos o capas en el marco de una página concreta.

En este voy a leer más. En tal instrumento se diferentes pantallas de la aplicación y, a continuación, crear vínculos y botones para conectarlos entre sí.

Haga clic en el botón en cualquier lugar de la pantalla para pasar a otra pantalla. Sueltos página por página herramientas también ofrecen una selección de diferentes transiciones entre . Esto puede ser, por ejemplo, el efecto de sombreado, el desplazamiento de derecha a izquierda o de abajo hacia arriba y así sucesivamente. Es bastante funcionalidad, pero la suficiente para la rápida generación de diseños en la etapa de pensamiento a través de la conducta de la aplicación (¿qué imágenes se necesitan y cuánto debe ser, como ellos van a aparecer, donde deben llevar los botones y así sucesivamente).

Ejemplos de de herramientas — Briefs, InVision, Notism, Flinto, Fluid, un Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen y Keynotopia. En algunos de ellos se pueden incrustar animaciones o desplazables de la zona a la página, pero no se puede emular en ellos cualquier efecto interactivo en aplicaciones reales. Cada elemento-el codigo fuente de la interfaz de la capa se puede hacer , desplazable, — así como la animación.

Creación de un prototipo de una aplicación de escritorio en tal instrumento puede requerir mucho tiempo y esfuerzo (casi como crear una verdadera aplicación). Pero al hacerlo, usted será capaz de experimentar con las diferentes interacciones de los elementos, tipos y duración de la animación de cada. He probado el Proto.io, Pixate, Framer, Origami de Facebook y Form de RelativeWave. Honestamente, hay otros.

Axure y Indigo Studio — pero se ven más, de la empresa (es decir, eran mucho más caro). Algún día voy a. Así que, vamos a ir más allá con la selección de paquetes.

La aplicación web con reproductores de iOS y Android. Proto.io — sorprendentemente potente aplicación; en él muchas de las funciones de. Pero por el hecho de que todo funciona según el principio de drag-and-drop — haga clic en el botón y seleccionar un valor de la lista—, es muy difícil encontrar lo que necesita.

La naturaleza de prototipos de aplicaciones IF es tal que los diferentes objetos que se mueven a diferentes velocidades. Por lo tanto, tuve que añadir unos pocos no estándar de JavaScript-cálculos. Concedido el cuadro de texto es demasiado pequeño para larga serie de cálculos, por lo que para una revisión completa, tuve que guardar el código en un archivo de texto en su ordenador.

También es importante que estas JavaScript expresiones pueden funcionar correctamente sin ningún aviso de error. Tenga cuidado y compruebe la consola del navegador web, si algo no funciona (tuve un error causado por una variable que contenga un valor negativo). Y este es el orden molesto.

Cada vez que usted desea comprobar el resultado de los cambios, primero debe hacer clic en Save Project (guardar proyecto), y luego — en Preview (pulgares). En la web. Todo simplemente. Usted puede generar un enlace público — tal como esta.

(Estos enlaces se abren en el navegador del móvil y se pueden agregar a la pantalla de inicio de iOS como de la aplicación). Usted también puede presentar su trabajo al público en general del Proto.io Spaces. En el dispositivo. Usted puede hacer a sus clientes cuentas gratis para ver, dándoles acceso al proyecto.

Se pueden ejecutar los prototipos de aplicaciones de iOS o Android. La diferencia es pequeña. La animación es menos suave, aunque esto puede deberse a la abundancia de interactividad con JavaScript para . En la web esto va a funcionar bien, pero en el dispositivo todo se ve lento.

La velocidad de reproducción es mejor el más simple de los prototipos. Mirad a Proto.io Spaces (es necesario registrarse para importar el prototipo en su cuenta). El precio.

$29 por mes o $288 al año para cinco proyectos activos. También hay planes para 10, 15 o 30 proyectos activos y gratuita de 15 días de trial versión. la aplicación para OS X y Windows.

Reproductores para iOS y Android. Pixate, parece, ha ocupado un equilibrio entre la facilidad de uso y la funcionalidad de los. En él se puede hacer mucho más de lo más simples y instrumentos.

La curva de crecimiento de la productividad no es muy pronunciada, pero después de ver un montón de y videos de youtube te guiarán por esta aplicación. También hay varios demos que se puede desmontar para entender cómo se crean. Pixate Studio puede utilizar el simulador de iOS de Xcode (en Mac) para la puesta en marcha del prototipo.

También se puede conectar con un dispositivo iOS o Android a través de un local de Wi-Fi. Esta es una excelente solución, sobre todo porque y simulador, y la aplicación se actualizan al mismo tiempo. La sexta página no existe, porque el lienzo Pixate limitado por el ancho de la.

Es bastante fácil de aprender a trabajar en el anexo. Hay errores. Para evitar el bug que a veces hay que sufrir.

Ver en el anexo. Descargar el archivopixate. Mac o PC de la aplicación de. El precio.

Pixate Studio gratis. (Cuesta $149, hasta que Google no ha Pixate en julio de 2015.) Pixate Cloud — $5 al mes por cada usuario o $50 al año por cada usuario. (Hay una versión de prueba por 30 días.). Funciona en Apples Quartz Composer para Mac. Dispone de un visor para probar en el iPhone o iPad.

Como ya probablemente sabe, el Origami se ha creado un equipo de diseñadores de Facebook, trabajó en Paper. Origami — esto no es un programa independiente, es un plugin de Quartz Composer, el entorno de programación visual, que forma parte de las herramientas para el desarrollo de Apple.

Se está programando en Quartz Composer, conectando los parches uno a otro. Parches diferentes desempeñan diferentes funciones, y el Origami es más una colección de parches creados para el diseño de las interfaces de la aplicación. Mucha gente, pero no soy yo) prefieren escribir el código, pero en caso de que usted necesita para describir algo como “si esto, entonces haz lo con el valor de cálculo; y si no existe..”, usted todavía tiene que programar, sólo mediante la combinación de varios parches, y no escribir líneas de código. Por cierto.

IDEO, también ha creado un framework para la creación de prototipos en Quartz Composer bajo el nombre de Avocado. En él hay varias funciones que van a ser muy útiles para algunos proyectos. La integración de Bluetooth interactiva, iOS, un teclado, un parche para voltear las cartas. Las capas también se pueden hacer móviles.

Y aquí es donde comenzarán las dificultades. Por supuesto, usted puede hacer la grabación de un prototipo de la pantalla, pero esto mata el propósito mismo de la creación interactiva de un prototipo de. Usted también puede tratar de hacer algo en After Effects. La única vía segura de probar el prototipo en otra máquina — tener en ella misma configuración.

Así, si su cliente tiene un Mac, se puede establecer en Quartz Composer + Origami, para ejecutar sus prototipos en su equipo. Por supuesto, para el cliente también tendrá que registrarse como Apple-desarrollador. El prototipo se puede reproducir con un poco más lento real de la aplicación, pero esto depende de la máquina. Quartz Composer es bastante exigente con los recursos, por lo que puede ejercer su computadora, especialmente si no hay una buena tarjeta gráfica (como en mi Mac mini) o cuando está conectado a varios monitores.

Mi récord de reproducción — 20 fps, incluso cuando se utiliza un monitor. Documentación poco, pero hay una muy activa comunidad de usuarios. Además también hay tutoriales en vídeo, y cursos de escritura en los blogs.

Descargar el archivoqtz. El precio. Gratis. Usted necesitará una cuenta de desarrollador de Apple, pero también gratuito.

Framer Studio es una herramienta para la creación de un prototipo en el Mac, pero Framer.js sólo requiere un Safari o Chrome. Ningún drar-and-drop, hacer clic en el botón o la conexión de enlaces en Framer tendrás que .

Los programadores, a diferencia de los diseñadores, se sentirá como en casa. Pero, y aquí no es tan difícil. Framer Studio se ejecuta en una versión simplificada de JavaScript CoffeeScript. Y el propio motor de arranque (Framer.js) funciona como una vez en JavaScript, lo que abre un montón de nuevas características. Podrás poner en práctica todo lo que es posible en un navegador web, por ejemplo, conectarse a un servidor web para trabajar con datos en tiempo real o crear un cliente de Twitter que muestra los tweets en tiempo real.

En un solo clic se puede generar una clave pública de la página (como esta), que se puede ver en Chrome, Safari o el navegador del móvil. El enlace se puede añadir a la pantalla de inicio de iOS como una aplicación. El mismo enlace se puede abrir en (esto es, de hecho, sólo los navegadores web Chrome para iOS y Android. El gran prototipo como mi ejemplo requerirá unos segundos para cargar en el visor, pero luego todo se reproducirá sin problemas.

Este prototipo fue capaz de hacer algo más que los otros cuatro. Usted puede cambiar entre los modos de Sign in (iniciar sesión), Sign up (registrarse) y Reset Password (cambiar contraseña) en la última página. De hecho, usted no puede acceder o registrarse, pero incluso eso en Farmer se puede volver a crear.

Tendrá que escribir el código para todo, para cada elemento de la animación y la interacción. Necesitarás habilidades en CoffeeScript, así como en JavaScript. Ver online, descargar el proyectoframer Mac de la aplicación.

El precio. Framer.js JavaScript es un marco, es de código abierto y se distribuye de forma gratuita. Framer Studio cuesta $99. (También hay de 14 días de trial versión). Mac es una aplicación con un visualizador para iPhone o iPad.

Form — todavía muy joven de la aplicación (lanzado en septiembre de 2014), y sus creadores se inspiraron el hecho de que Facebook y IDEO crean en la base de Quartz Composer. Los chicos de RelativeWave, tal vez, pensaron.

“¿Cómo sería Origami sin equipaje Quartz Composer?” Los usuarios de Origami se encuentre como en casa; la multitud de parches de la misma, pero en el Form es que los parches que necesita. El prototipo funciona en iOS conectados a una aplicación (a través de Wi-Fi o USB). Te darás cuenta de que no hay lectura de valores al hacer doble clic en la conexión entre los dos parches, si no se conecta ningún dispositivo. Visor en Mac, como en Quartz Composer, sería definitivamente conveniente, y parece que los programadores tienen este tipo de planes.

Conexión de iOS-visor de archivos puede abrirform, así que usted puede simplemente enviar un archivo al cliente por correo electrónico, para él la miró en su dispositivo iOS. Yo creo que son un poco. Saber, si encuentras la diferencia.

Los mismos que en el Origami. Con complejo prototipo usted recibirá frenado. La agrupación de parches ayuda a mantener la vista normal.

Descargar el archivoform Mac de la aplicación. El precio. Gratis. Mac de la aplicación de la pena antes de $79.99, pero cuando Google compró RelativeWave en el mes de noviembre de 2014 (un mes después de la ejecución), se ha convertido en conexión.

En las últimas semanas salieron los dos completamente nuevas herramientas para la creación de un prototipo sketch de aplicaciones, y están basadas en los principios completamente diferentes de trabajo. Principle y Flinto para Mac. La tercera herramienta Tumult Hype 3, no es tan nuevo.

Tuve esta herramienta para HTML5, animación, a partir de la versión 2, pero yo nunca en realidad no lo he utilizado y no tenía idea de como aplicarlo a de aplicaciones, que aún no ha recibido el comentario de uno de los lectores. Los tres programas se ofrecen animaciones a partir de las capas, y que han permitido recrear bastante cercana clon IF de IFTTT. Y estos son los clones en comparación con el original.

. Mac es una aplicación de reproductor de iOS.

Animación con la línea de tiempo puede estar familiarizados con el hecho de que haya usado el Adobe After Effects o — recuerde esos momentos. — Adobe Flash. (Es necesario mencionar que en el Proto.io también fue la animación con la línea de tiempo entre los estados en la página.) Principle utiliza la escala de tiempo de la parte inferior de la pantalla para la animación de objetos entre páginas. Hay una segunda línea de tiempo.

Con la escala de Drivers (controladores) en la parte superior de la pantalla, que en realidad es una escala de valores, usted puede aplicar constantemente cambiante posición arrastrado o de la capa de la animación de otros objetos en la misma página. Skroll hacia la izquierda o hacia la derecha en este prototipo IF cambia la posición de casi todos los objetos. Así como en este prototipo páginas skroll, tipo carrusel) mueve una multitud de otros objetos, tenía que planear, tan limpio y bien colocar un punto clave en la línea de tiempo.

Incluso tuve que colocar su pantalla en ver-estoy-en el presente-el desarrollador modo retrato. (Ya no es necesario. Yo usé la primera versión de Principle, en la que no se la lista.). Pero, de nuevo, el promedio que el proyecto no va a contener tal cantidad de partes móviles, con un gesto de .

En Principle tiene incorporada la ventana de vista previa, que también permite grabar vídeo o animados prototipo. Funciona está bien. Ver con un dispositivo móvil, también en el nivel de. Conecte su iOS dispositivo a través de USB y abra el Principe del espejo — que se reconoce de forma automática.

Cualquiera de los cambios inmediatamente se suben, incluso no es necesario guardar nada. El prototipo también continuará la reproducción después de desconectar el USB. Aplicación iOS Principle Mirror puede abrir y reproducir archivos Principle. (El consejo de un profesional.

Un triple toque de un dedo reiniciará el prototipo.) Recuerde que los archivos no se almacenan en la aplicación, así que es mejor guardar el archivoprd en la aplicación Mail, o cualquier otro lugar para volver a abrir en Principle Mirror. Prácticamente no existe, a excepción de la blanca de botones en la página 6 — ella no es cliqueable. He intentado añadir el botón estado de touch down (presionar), pero cada interacción, no se ejecuta o el gesto de arrastrar y soltar, necesita de una nueva página. Puede fácilmente duplicar la existente en la página y hacer algunos cambios, pero en este caso es una gran página, y todos los cambios en los controladores en la página llamaban impredecibles del movimiento de los objetos, cuando me pagados en el botón.

. Descargar el archivoprd Mac de la aplicación (que se puede descargar gratis de trial versión). El precio. Principle cuesta $99.

Tiene 14 días de trial versión, se consideran sólo los días en que usted utiliza el programa. Mac es una aplicación de reproductor para iOS.

Primero pensé: “Esto se parece a la pagina Flinto (aplicación web). La única diferencia es que poco se puede cambiar las transiciones entre . Pensarás”. Pero las transiciones tienen inverso de la respuesta.

Mediante el gesto de svayp para pasar a la página siguiente, usted puede controlar la velocidad de la transición de su dedo (como se hace a menudo en la “familia” de iOS, aplicaciones). Asimismo, en la página también puede ser se mueve en un momento de transición, por lo que podía hacer un prototipo, articulada en siete páginas, con la transición entre ellos. Pero eso no significa que me tomó más tiempo a la creación de un prototipo. Transition Designer (independiente del tipo de lienzo, en el que se puede cambiar rápidamente entre los estados inicial y final de la transición) — una manera muy rápida para configurar la navegación por el instante de la visualización de los cambios.

He terminado el prototipo de IF en Flinto más rápido que en cualquier otro listado de mí un instrumento. El enfoque basado en los cruces, no tiene desventajas, aunque. Si quieres animar diferentes opciones de un mismo objeto con diferentes duraciones (es decir, la opacidad y la posición), entonces no tienes suerte. Como ejemplo.

Los rayos detrás de los iconos de iOS en la página 4 permanecen visibles al en la siguiente página, porque no soy capaz de disminuir la duración de cambiar la opacidad de la. En la Mac app tiene un visor, y usted puede a través de Wi-Fi para usar la aplicación de iOS para ver en tiempo real. Usted puede utilizar ambos visor al mismo tiempo, y para ello no es necesario ni guardar el resultado de sus cambios.

Aplicación iOS gratuita puede abrir los archivosflinto, por lo que simplemente puede enviar el archivo al cliente por correo electrónico, y se puede abrir en su dispositivo iOS. Los iconos de Instagram y Google Calendar están detrás, cuando en la página 2, porque las páginas están situados uno encima del otro, o detrás de otros. Cuatro rayos de la luz por la instalacion de iOS aparecen demasiado pronto y desaparecen demasiado tarde por el hecho de que un timing para cambiar la opacidad de la era imposible; lo mismo con el icono de notificación. Svayp atrás también identifica algunos de los artefactos de la animación.

Las devoluciones de las transiciones, parece que no siempre funcionan perfectamente. Descargar el archivoflinto Mac de la aplicación (la descarga gratis de trial versión). El precio.

Flinto para Mac cuesta $99. Dispone de 14 días de trial versión. Mac es una aplicación con un visualizador para iOS.

Y otra aplicación con la línea de tiempo de la animación. Este prototipo es más similar a un hacker producto. Usted se dará cuenta de que la animación no hasta el final coincide con su tacto.

Es cercano opción. De hecho, el gesto horizontal de desplazamiento se a través de una pausa en la línea de tiempo. Creo que tuve la suerte de que aún podía hacer un prototipo en el Hype, ya que este programa no puede reproducir todos los tipos de móviles de las interacciones. Pero siempre he querido aprender como utilizar Hype.

Es elegante herramienta.. para la creación de HTML5-animaciones. La función de los pulgares en el bombo (⌘⏎) abre el proyecto en su navegador o en una aplicación de Hype Reflect, se ejecuta en la misma red wifi. El proyecto de Hype es simplemente una página web, de modo que usted puede descargar en la carpeta y enviar el enlace por correo electrónico.

O incluso más fácil publicar en Dropbox directamente desde el Hype. Usted no puede regresar a la página anterior, porque cada página es un fotograma con el gatillo para descargar la siguiente imagen, cuando usted la animación hasta el final. También aquí no existe la posibilidad de saltar a través de la primera o la última página y ver la continuación de la animación.

Hype también se puede utilizar para crear un hermoso interactivos de sitios web. La versión Pro (con un recargo de $49,99) también le permite hacer diseños adaptables. Las animaciones no funcionan sin problemas, como en el resto de las herramientas. Tal vez no exactamente de una herramienta adecuada para la reconstrucción de cada uno de los detalles de las interacciones de la aplicación, ya que se creó no para de esta.

Descargar el archivohype. El precio. Tumult Hype 3 cuesta $49,99. Dispone de 14 días de prueba gratis.

También he probado la Axure y Indigo Studio. Aún comentaristas mencionaron (o ) varias otras herramientas. PencilCase, Atomic, Justinmind y Mockingbot. Y que cosa con Apples iAd Producer.

¿Se puede utilizar para la creación de un prototipo. Parece que es una herramienta muy popular, e incluso se considera como un estándar de la industria. Mi compañero de muy ama. Pero se crea un diseño de sitios y páginas web no utiliza una gran cantidad de gestos.

Es lo que falta Axure y muchas otras herramientas. En una simple ventana desplazable gesto o desplazamiento puede iniciar algo más. Silverlight.. Se requiere la instalación de Silverlight, y en mi coche no hay ni siquiera un Flash.

La verdad, en especial el daño me lo trajo. Yo se lo llevó Indigo Studio en la misma categoría que Axure. Esto es, básicamente, una herramienta para , la creación de prototipos de sitios web, y no para las interacciones en las aplicaciones móviles. Desplazamiento y el cambio es necesario simular.

Actualización. Los chicos de Infragistics han tratado de recrear la IF, para demostrar lo que es capaz de Indigo Studio. Espere.. ¿.

Todo esto, por supuesto, es cierto, pero al mismo tiempo, en PencilCase resultó muy difícil de poner un montón de cosas simples. Además, las aplicaciones se frenan. Otra página de la herramienta.

No se puede hacer el móvil en apariencia, pero usted puede hacer la vertical skroll en dispositivos móviles a través de una pequeña muleta. Generados automáticamente las transiciones entre páginas bastante . Y con la última actualización se configuran desde la escala de tiempo. Me expreso con fluidez navegado a través de este programa, pero parece que también tiene serias limitaciones.

Por ejemplo, no hay forma de crear una pagina skroll o de la rotonda, es necesario simular a través de . (Ver un vídeo con un ejemplo de la galería de fotos. Svayp, y luego la aplicación se anima la siguiente foto no es de arrastre o desplazamiento en la siguiente foto). Lo mismo.

Los gestos se limitan al uso de para el inicio de la actividad. Sólo es posible vertical continuo skroll. Yo quería probarlo por esta publicación linda dong. IAd Producer es bastante conveniente en el trabajo.

También hay páginas skroll (carrusel) en la barra de herramientas, pero este no puede ejecutar otros de animación. Allí es impresionante la API de JavaScript, con el que están familiarizados con iOS, los desarrolladores de. Parece como JavaScript-versión UIKit (incluidas las fuentes de datos y delegados). Así que sí, aquí es posible recrear el IF, pero para ello tendrá que sumergirse profundamente en el JS de la API para realizar un seguimiento de gestos táctiles.

Para el año 2015, parece que fue el año de herramientas para la creación de un prototipo. Si aún no han trabajado ni con uno de las herramientas de la lista y desea crear rápidamente un prototipo de una aplicación, utilice.

Pero si usted está dispuesto a gastar el tiempo en el estudio de una herramienta de gran alcance, o no puede realizar todas las plenamente, mediante Principle, intente. Si trabajas en Windows — Pixate o Proto.io para la rápida creación de prototipos y Framer.js (con CoffeeScript, si se quiere) para las cosas más sofisticadas. En cualquier caso, es mejor ser capaz de trabajar con diferentes herramientas.

Trate de unos pocos, para sentir la diferencia y evaluar la posibilidad de. Conocí a todos ellos, por lo que en la práctica lo voy a usar en de la situación.

Source: google.co.uk/blog/startup-agency-one-way-past-founders-can-help-new-ones/

Leave a Reply