Hemos visto dos formas de hacer mockups (bocetos) de las aplicaciones de Android. La primera consiste en usar un programa de edición fotográfica para crear las pantallas usando la paleta de controles de Android. Su limitación aparece en que las pantallas no son interactivas. El siguiente paso es usar alguna de las aplicaciones Web que permiten crear las pantallas con elementos interactivos como Fluid UI. Estos servicios son útiles pero tienen un coste mensual que es necesario tener en cuenta para diseños complejos.

A estas dos formas de trabajar se le suma una tercera con la aplicación POP – Prototyping on Paper. El funcionamiento es similar a Fluid UI con una diferencia importante: el origen de las pantallas no es un diseño en el ordenador sino un diseño en papel. Primero dibujamos las pantallas con bolígrafo y papel y después les hacemos una fotográfica. En la imagen resultante definiremos zonas de acción en los botones y otros componentes y los enlazaremos con las pantallas de destino.

La aplicación es gratuita y está disponible para Android / iOs. Podéis ver la demostración del proyecto en el siguiente enlace. Si pulsáis en una parte de la pantalla en la que no está definida un acción aparecerán en color verde las posiciones que tienen la acción mapeada.

Introducción

Lo normal es que una aplicación tenga varias pantallas. Por comodidad es posible hacer una plantilla en un programa de dibujo que contenga el rectángulo de la pantalla y los elementos estáticos como la barra superior o la barra de controles de manera que sólo tengamos que dibujar los controles. Instalamos la aplicación desde Google Play la ejecutamos. Podemos crear un máximo de dos proyectos en la aplicación. Si creamos una cuenta desde la propia aplicación el número máximo de proyectos es cinco.

Para crear un proyecto pulsamos en el icono +.

Listado de proyectosListado de proyectos

Dentro de cada proyecto tendremos varias fotografías que representan el interfaz de usuario de la aplicación. Antes de escribir el artículo he dibujado en un papel las cuatro pantallas que componen la aplicación del Sudoku (no tengo parado el proyecto). Las pantallas las he dibujado a mano y cada una tiene un tamaño diferente. Por esta razón os comentaba la posibilidad de usar una plantilla para que los tamaños sean similares. Si queremos añadir una pantalla nueva tenemos que usar el icono de la cámara que hay en la barra inferior. El segundo icono nos permite añadir como pantalla una imagen que tengamos guardada en el teléfono. El resto de iconos nos permiten borrar pantallas, entrar en modo interactivo o compartir el proyecto.

Listado de fotografíasListado de fotografías

Pulsamos sobre una de las pantallas para entrar al modo de edición. La idea es simple: dibujamos un rectángulo y después le asociamos una pantalla. El segundo botón de la barra nos permite elegir una animación entre las pantallas mientras que el último se usa para elegir la pantalla de destino.

Selección de las zonasSelección de las zonas

La pantalla actual queda difuminada y sólo tenemos que seleccionar la que queremos de destino.

Pantalla de destinoPantalla de destino

Hemos visto prácticamente todas las opciones de la aplicación. El funcionamiento es sencillo e intuitivo. Si volvemos a la pantalla inicial en la que se ven todas las fotografías del proyecto podemos pulsar el botón Play y probar el diseño.

Demo 01Demo 01
Demo 02Demo 02
Demo 03Demo 03
Demo 04Demo 04

Conclusiones

En este artículo hemos visto otra herramienta que podemos usar para diseñar mockups interactivos. Para compartir un proyecto hace falta crear una cuenta desde la propia aplicación. De momento parece que no funciona esta opción (en el momento de escribir el artículo). Probaré más adelante y haré las correcciones necesarias. POP nos permite trabajar sin un ordenador utilizando sólo el terminal con Android. Si en un proyecto trabajan varias personas es mejor usar otras alternativas como Fluid UI.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.