Axure RP - Interfaz de usuario
Una vez que instale Axure, se le presentará una interfaz como se muestra en la siguiente captura de pantalla.
Esta pantalla siempre se mostrará al inicio hasta que opte por no mostrarla.
En esta pantalla, tiene las siguientes opciones:
- Iniciar un nuevo archivo en Axure
- Abrir un proyecto de Axure existente
Creemos ahora un nuevo archivo con Axure.
Al hacer clic en el botón "NUEVO ARCHIVO", se le presentará la siguiente pantalla para crear un nuevo prototipo.
Como se muestra en la figura anterior, el espacio de trabajo se divide en 6 partes.
- Pages
- Libraries
- Inspector
- Outline
- Masters
- Área de diseño
Repasemos estas partes una por una.
Páginas
Esta sección muestra las páginas en las que está trabajando. Estas páginas se muestran en una estructura de árbol predeterminada de la siguiente manera. La página de inicio tiene las siguientes páginas secundarias.
Casa
Page 1
Page 2
Page 3
Puede continuar con la estructura dada o puede cambiarla según sus necesidades. Para hacerlo, haga clic con el botón derecho en cualquiera de las páginas, luego se le presentarán opciones como: Agregar, Mover, Eliminar, Cambiar nombre, Duplicar, etc.
Como la mayoría de las diferentes herramientas disponibles, esta sección le permite interactuar con las páginas de su prototipo. Puede utilizarlo para planificar las pantallas en el prototipo previsto.
Panel de bibliotecas
En el panel de bibliotecas, la mayoría de los controles necesarios para el prototipo están disponibles. Los controles típicos disponibles en esta sección son: Cuadro, Imagen, Marcador de posición, Botones, etc. Axure RP proporciona un amplio conjunto de controles de IU categorizados según su área de aplicaciones.
Como se muestra en la figura anterior (a), las bibliotecas tienen las categorías: Común, Formularios, Menús y tabla y Marcado. Todas estas categorías se expanden cuando abre la aplicación. Por conveniencia, está contraído en esta captura de pantalla.
Las bibliotecas comunes incluyen formas básicas, botones, texto de encabezado, Hot Spot, panel dinámico, etc.
Con Axure RP, para todos sus requisitos de creación de prototipos, viene un control muy efectivo llamado Hot Spot. Con este control, puede proporcionar interacción de clic a casi cualquier control en la interfaz de usuario. Se proporcionará un ejemplo en las páginas siguientes.
En la biblioteca de formularios, como sugiere el nombre, se incluyen controles de cuadro de lista, casilla de verificación, botón de opción, área de texto y campo de texto. Para diseñar un formulario de entrada de usuario, puede utilizar los controles de esta sección en la biblioteca.
Los menús y las mesas tienen una estructura tradicional. Dicha estructura, tal vez en forma horizontal o vertical, está disponible en esta biblioteca llamada Menús y tablas.
Por último, pero no menos importante, viene la biblioteca de marcado, que incluye adhesivos, marcadores y flechas. Principalmente, esto se usará para anotaciones en su prototipo.
Área de diseño
Este es el campo de juego real para los ingenieros de UX. Este espacio se utilizará para crear los prototipos según su requerimiento. Para empezar, consulte el área resaltada con el número 6 en la siguiente captura de pantalla.
En esta área, puede arrastrar y soltar los controles que desee de la biblioteca. Creemos una barra de menú rápido usando la biblioteca.
Ejemplo: barra de menú
Desde las bibliotecas, en Menús y Tabla, arrastre Menú clásico - Control horizontal al área de diseño.
Una vez que haya arrastrado el control en el área de diseño, verá la siguiente pantalla.
Como se muestra en la pantalla de arriba, Axure RP es lo suficientemente inteligente como para mostrar el texto deseado en un menú. Considerando que es una barra de menú, Axure RP ha creado automáticamente Archivo, Editar y Ver como menús en el control.
Como señala la flecha, la sección del inspector muestra las propiedades del control. Utilice esta sección para crear un nombre para su control para una identificación única, al crear prototipos complejos.
Démosle un nombre a este control como TestMenu. Usaremos este nombre en los ejemplos de procedimiento.
Propiedades de la página
Al planificar un prototipo, tiene sentido tener una idea clara del usuario y, por lo tanto, del dispositivo en el que se exhibirá / visualizará el prototipo. Para obtener la mejor experiencia de interacción con el prototipo, Axure ha proporcionado una función para establecer las propiedades de la página.
Como se muestra en la figura anterior, el área indicada por el número 3 es la sección de propiedades de la página. En esta sección, podrá ver el menú desplegable de interacciones y la subsección Adaptable.
Analicemos estas secciones en detalle.
Interactions sectiontrata de las posibles interacciones (casos) con la página. Como puede ver, el caso de interacción OnPageLoad maneja los eventos cuando se carga la página. En la mayoría de los prototipos, los ingenieros de UX prefieren poner una animación para dar la primera impresión. Este evento particular para mostrar la animación generalmente se activa en el caso de OnPageLoad.
Del mismo modo, otros casos incluyen: OnWindowResize, OnWindowScroll. En el menú desplegable, Más eventos, puede ver otros casos admitidos para configurar las interacciones relacionadas con la página.
Con el Adaptive section, Axure RP entra en un diseño web receptivo. Hoy en día, diseñar una experiencia para sitios web no es suficiente, junto con esto, las empresas prefieren los sitios móviles para coexistir con los sitios web.
La misma página, vista desde diferentes tamaños de pantalla y diseños, constituye diferentes vistas adaptativas. Por lo general, las vistas adaptativas están diseñadas para móviles y tabletas. Axure proporciona esta característica de vistas adaptativas, para que los ingenieros de UX controlen el aspecto receptivo de los prototipos desde cero.
El panel del inspector para el widget
El panel de interacciones de widgets es la sección más crítica de Axure. Puede ver este panel haciendo clic en cualquier widget en el área de diseño.
Considere un ejemplo del elemento de menú que usamos en la sección anterior. Seleccione el elemento del menú llamado TestMenu y observe la sección resaltada en la siguiente captura de pantalla.
Como puede ver en la pestaña Propiedades, hay diferentes interacciones como OnMove, OnShow, OnHide y OnLoad. Estos son específicos del control de menú en su conjunto.
Ahora, haga clic en Archivo en el control del menú.
Notará un cambio en el tipo de interacciones en el panel Propiedades del widget. Además, proporciona flexibilidad para proporcionar un nombre para este elemento del menú. Tomemos el caso de OnClick como ejemplo.
OnClick- El caso OnClick define el comportamiento del control, cuando hace clic en el control al ejecutar el prototipo. Esto permite varias interacciones, como navegación de página, menú emergente, etc.
Notes Pane- En el panel del inspector, hay una subsección llamada Notas. En el panel de notas, podrá agregar ciertos puntos para recordar, para el control de su elección.
Estos puntos quedarán claros una vez que nos sumerjamos en un ejemplo en el próximo capítulo.
Cuadrículas y guías
Para un prototipo con el máximo nivel de calidad y precisión, los ingenieros de UX requieren la capacidad de alinear / posicionar un control con el otro control.
Por ejemplo, considere que desea mostrar una ventana emergente de inicio de sesión. Si esta ventana emergente se va a mostrar justo en el medio de la pantalla, necesita las dimensiones generales de la pantalla. Además, para alinear exactamente en el medio de la pantalla, debe tener las cuadrículas para alinearla adecuadamente.
Axure proporciona la función de cuadrículas y guías, para que pueda utilizar su área de diseño de manera eficaz.
Para ver las cuadrículas y guías disponibles, haga clic con el botón derecho en el área de diseño y aparecerá el menú contextual que se muestra en la siguiente captura de pantalla.
Ahora, entendamos las opciones disponibles.
Grid- Las tres primeras opciones que se muestran en el menú contextual están asociadas con cuadrículas. Son Mostrar cuadrícula, Ajustar a cuadrícula y Configuración de cuadrícula.
Show Grid- Cuando Mostrar cuadrícula está habilitado, podrá ver la cuadrícula en el área de diseño como se muestra en la siguiente captura de pantalla. Esto es muy útil para alinear los controles con los otros controles en la pantalla.
Snap to Grid- Cuando Ajustar a la cuadrícula está habilitado, los controles se adjuntarán automáticamente de acuerdo con las cuadrículas presentes alrededor. Podrá ver este comportamiento cuando arrastre un control y se adjuntará a la cuadrícula cercana.
Grid Settings- En este cuadro de diálogo hay más configuraciones relacionadas con las cuadrículas. Como se muestra en la siguiente captura de pantalla, el espacio entre la cuadrícula, el tipo de cuadrícula, etc. estará disponible en este cuadro de diálogo. Puede seleccionar las cuadrículas de tipo intersección, según su conveniencia.
Guides - En el menú contextual como se muestra en la siguiente captura de pantalla, las opciones después del primer separador están relacionadas con las guías.
Cubriremos las opciones que se usan comúnmente para las Guías.
Show Global Guides- Estas guías serán visibles cuando arrastre desde las reglas horizontales y verticales en el área de diseño. ¡Pruébelo usted mismo!
Show Page Guides- Las guías también están disponibles a nivel de página. Estas guías se crean cuando las arrastra desde las reglas verticales y horizontales. Son más comunes que las guías globales. Tener una guía de página aumenta la flexibilidad del diseño a nivel de página.
Show Adaptive Guides- Cuando se trata de diseñar las páginas para diferentes vistas adaptativas, vale la pena tener las guías adaptables en su lugar. Esta opción habilita la visibilidad de las guías adaptativas, que se utilizarán para alinear los objetos en diferentes vistas adaptativas.
Snap to Guides- Al organizar los diferentes elementos de la pantalla en el área de diseño, esta funcionalidad permite que los objetos se encajen en las guías. Esto resulta útil cuando coloca un objeto en particular en la pantalla y lo organiza con respecto al otro objeto.