Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset

El mes pasado se lanzaba la nueva versión de Axure: Axure 7, que trae muchas y muy interesantes novedades.

Hay versión completa y gratis de prueba (de la versión Pro) de 30 días. El precio de Axure 7 es de 289$ para la versión estándar y 589$ para la versión Pro. Si ya tenías la licencia de una versión anterior, la actualización a la nueva versión es gratis.

Adaptative Views para Responsive Design

Una de las grandes novedades de Axure 7 son las Adaptative Views, que permiten prototipar de forma automática y muy sencilla con Responsive Design.

En primer lugar seleccionas en el menú Project>Adaptative Views los diferentes tamaños de pantalla con los que quieres trabajar, como si estuvieras usando CSS Media Queries:

Después, en cada página tienes una vista para cada una de las resoluciones definidas:

Puedes modificar así el tamaño de los elementos de cada vista o su contenido, pero también puedes hacerlo dinámicamente gracias a los nuevos eventos de página OnWindowResize y especialmente OnAdaptativeViewChange, este último se lanza cuando pasas de un vista a otra.

Tienes también nuevas opciones de borrado de un elemento: borrar de todas las vistas o eliminar solo en las vistas.

Podéis ver aquí un ejemplo muy sencillito de Responsive Design con Axure 7: si redimensionas el navegador, cuando la anchura es menor de 768px, se muestra una vista diferente donde los elementos están dispuesto de otra manera.

Nuevos eventos de página, OnWindowScroll para Parallax Scrolling

He comentado los nuevos eventos onWindowResize y OnAdaptativeViewChange. Otro evento nuevo de página que ofrece muchas posibilidades es OnWindowScroll.

La opción de incluir interacción en el OnWindowScroll nos va a permitir por ejemplo simular un Parallax Scrolling.

Podéis ver un prototipo creado con Axure 7 que simula un Parallax Scrolling en Ejemplo de Parallax Scrolling y descargar el .rp del ejemplo de Parallax Scrolling con Axure 7.

No hay eventos pensados para dispositivos móviles

En comparación con Prototyper se echan en falta eventos propios para dispositivos móviles. Han incluido algunos eventos nuevos pero siempre relacionado con el ratón o el teclado pero no gestuales.

Nuevo widget "Repeater" para crear listados de elementos

Una de las grandes ventajas que vimos en Prototyper es que permitía con mucha facilidad emular una BD para poder aprovechar los datos en diferentes páginas del prototipo: listarlos en una tabla paginada o en un desplegable, añadir nuevos campos, borrarlos, modificarlos, etc.

Axure 7 incluye como novedad el elemento "Repeater" con un objetivo similar. En el Dataset del elemento defines los campos e introduces los valores (texto, imagen o enlace):

Jugando con las opciones de formato y las posibilidades de interacción, puedes lograr listados paginados (en formato lista o cuadrícula), con opción de ordenación o con opciones de añadir e eliminar registros. Sin embargo llevarlo a cabo resulta complejo y poco intuitivo.

La web de Axure dispone de un ejemplo de tabla de productos creada con "Repeater" y se puede descargar el .rp

Otras novedades en los widgets

Las cosas que más me han llamado la atención en relación con las novedades en los widget son:

Los campos de tipo texto ahora admiten tipos de HTML5: número de teléfono, email, búsqueda, etc. Además se puede incluir un "hint text" (y editarse su estilo), es decir, un texto por defecto en el campo que se borra automáticamente cuando coge el foco.
Por fin se puede indicar que los paneles dinámicos se ajusten automáticamente a su contenido.
Desgraciadamente sigue siendo igual de difícil trabajar con las tablas, pues no incluyen opciones básicas como unir celdas.

Visualización del prototipo

En la columna izquierda, donde si sitúa el árbol de páginas, hay ahora nuevos iconos.

Ver una determinada vista en caso de usar Responsive Design.
Resaltar elementos dinámicos como vimos en Prototyper
Ver y resetear variables (Axure tiene variables globales también)
Ver la URL de la simulación con o sin site map

Prototyper o Axure

Para trabajar con prototipos que emulen un Responsive Design, Axure 7 parece mejor opción.

Para prototipos pensados para dispositivos móviles es mejor Prototyper, aunque solo sea por sus eventos gestuales y sus opciones de simulación.

Para prototipos sencillos cualquiera de las dos opciones sobra. Cuando los prototipos son de aplicaciones web que necesitan simular mucha interacción... me lo pensaría, pero creo que si tuviera que trabajar con muchas tablas, como en una herramienta de gestión, de banca, etc. me acabaría decantando por Prototyper.