Axure RP - Interacciones básicas

Este capítulo lo guiará a través del conjunto de interacciones básicas proporcionado por Axure al diseñar una pantalla.

El propósito de Axure RP es permitir prototipos interactivos. Ahora, cuando se trata de hacer los prototipos interactivos, siempre hay una advertencia de crear un prototipo demasiado interactivo. Esta es la razón por la que tiene sentido comenzar con interacciones importantes individuales a la vez, para poder recorrer el resto de las páginas disponibles.

Interacciones Axure

Interacciones es el término acuñado para los elementos funcionales que transforman una estructura metálica estática en un prototipo interactivo en el que se puede hacer clic. Para que sea un enfoque simple hacia las interacciones, Axure elimina la necesidad de codificar el prototipo al proporcionar una interfaz para definir estructuras y lógicas.

Al generar el prototipo HTML, Axure RP convierte las interacciones en el código real (HTML, CSS y JavaScript). Esto actúa como un catalizador para mostrar el diseño y las interacciones previstos en la página.

Normalmente, las interacciones comenzarán con Whenla interacción está sucediendo. Por ejemplo, cuando la página se carga en el navegador, cuando el usuario hace clic en uno de los elementos, etc.

Luego viene la pregunta, Whereen la pantalla se está produciendo la interacción. Puede ser un elemento de pantalla simple, como un rectángulo, que queremos convertir en un botón en el que se puede hacer clic con el propósito de un menú (el ejemplo se muestra más adelante).

Finalmente, está la descripción de Whatestá sucediendo en la interacción. Consideremos la carga de la página cuando el navegador carga la página; simplemente puede seleccionar una presentación de diapositivas en particular para comenzar o hacer que una imagen crezca cuando se ingresa en la pantalla.

Eventos Axure

Los eventos en Axure pueden ser de dos tipos, desencadenados por dos tipos de eventos.

Eventos de página y nivel maestro

Cuando se carga una página, hay una gran cantidad de eventos para obtener la información del diseño, el contenido y, por lo tanto, la alineación de cada elemento en la pantalla. Como estos eventos tienen lugar durante la carga de la página inicial, puede considerar que estos eventos serán repetitivos en cada carga de la página. A continuación se muestran algunos ejemplos de eventos de nivel de página y maestro.

  • OnPageLoad
  • OnWindowResize
  • OnMouseMove
  • OnAdaptiveViewChange

Eventos de nivel de objeto o widget

Consideremos, hemos creado una página y un widget de botón particular en la página. Ahora, para interactuar con este widget de botón, tal vez al tacto (en el prototipo móvil) o un clic del mouse. A continuación se muestran algunos ejemplos de eventos a nivel de objeto o widget.

  • OnClick
  • OnMouseEnter
  • OnDrag
  • OnDrop
  • OnMouseHover

Casos

Como se discutió en el capítulo anterior, en la sección de propiedades de la página, se puede diseñar una interacción de widget particular. Estos se llamancases. Una interacción particular puede ser una constitución de múltiples casos.

Consideremos un ejemplo para entenderlo mejor.

Ejemplo: Prototipo Axure - Mostrar menú al pasar el mouse

Para comenzar con este ejemplo, cree un nuevo archivo haciendo clic en New debajo File Menú o usando la tecla de atajo Ctrl + N.

En este ejemplo, vamos a diseñar el sencillo Menu Barcomo se ve en la mayoría de los productos de software. La estructura del menú tendrá los siguientes elementos de menú y el submenú debajo de cada uno de ellos.

File

  • New
  • Open
  • Save
  • Close

Edit

  • Cut
  • Copy
  • Paste
  • Find
  • Replace

View

  • Mostrar barra de estado
  • Barras de herramientas
    • Barra de herramientas principal
    • Barra de herramientas de estilo

Help

  • Empezando
  • Usando ayuda
  • Qué es esto

Para comenzar, arrastre y suelte Classic Menu – Horizontalen el área de diseño. Lo encontrará en Bibliotecas → Menús y tablas. Nombra el control como MenuBarExample. Hagamos este elemento de ancho 300 px y alto 30 px. Colóquelo en 100 en el eje X y en 30 en el eje Y. Puede ajustar estos valores en la pestaña Estilo en la sección Inspector a la derecha.

Al final del procedimiento anterior, podrá ver el resultado final como se muestra en la siguiente captura de pantalla.

Agreguemos los nombres a los títulos del menú en la sección Inspector también. Haga clic en el título de cada menú y observe la sección del inspector. Si no se le da el nombre a la barra de menú específica, el nombre cambiará a (Nombre del elemento del menú).

Nombra el menú Archivo como FileMenu.

Lo mismo ocurre con Editar como EditMenu y Ver como ViewMenu.

Para confirmar si se han proporcionado los nombres, haga clic en cada menú individual y confirme en Inspector: Elemento de menú. Podrá ver los nombres y no (Nombre del elemento del menú).

Ahora, según nuestro requisito, completemos la barra de menú con el menú Ayuda. Haga clic con el botón derecho en el título de la barra de menú - Ver, verá un menú contextual. Haga clic en Agregar elemento de menú después.

Aparecerá un elemento de menú en blanco. Haga doble clic en el elemento de menú en blanco e ingrese el título del menú como Ayuda. Repita el procedimiento, proporcionándole un nombre en Inspector: Nombre del elemento del menú. Una vez completado, verá el área de diseño de la siguiente manera.

A continuación, diseñemos la interacción para el menú Archivo.

Haga clic en el título de la barra de menú Archivo y observe el Inspector: elemento de menú.

Como se resalta en la captura de pantalla anterior, observe la pestaña Propiedades.

En la pestaña Propiedades, crearemos la interacción para el menú Archivo.

Es muy sencillo agregar un submenú al menú. Haga clic con el botón derecho en el menú Archivo, en el menú contextual que aparece, haga clic en Agregar submenú.

Note - También podemos eliminar el submenú repitiendo el mismo paso y haciendo clic en Eliminar submenú.

Una vez que se ha agregado el submenú, aparecerá un submenú en blanco. Haga doble clic en cada uno de los elementos del menú y proporcione nombres como: Nuevo, Abrir, Guardar.

Haga clic con el botón derecho en el último elemento del submenú y agregue un elemento más del submenú. Nómbrelo como Cerrar.

También es una buena práctica nombrar todos los elementos del submenú en la sección Inspector. Esto ayuda a hacer referencia a ellos en su proceso de diseño general.

Mientras diseña esta parte, observe que cada vez que haga clic en cualquier otra parte del área de diseño, el submenú desaparecerá. Necesitamos hacer clic en el elemento del menú Archivo para ver el submenú.

Hablemos de la interacción - Hover. Esta interacción tiene un comportamiento único de activarse, cuando el puntero del mouse se coloca sobre un elemento en particular. En Axure, esta interacción se implementa automáticamente con el Menú Clásico - Horizontal.

Para ver la interacción en acción, haga clic en el botón Vista previa en la barra de herramientas. Axure abrirá la vista previa en el navegador predeterminado.

Coloca el cursor sobre el menú Archivo. El submenú se mostrará como se muestra en la siguiente captura de pantalla.

Si lo miramos objetivamente, acabamos de utilizar Axure para crear una interacción compleja, como colocar el cursor sobre el elemento del menú. En la codificación HTML habitual, habría tardado entre 1 y 1,5 horas.

Como tarea, complete el resto de los menús de sus submenús.

Ahora, creemos rápidamente una interacción en el submenú Cerrar en el menú Archivo. Lo resaltaremos en rojo cuando esté suspendido. Para hacer esto, haga clic derecho en el submenú Cerrar. Haga clic en Estilos de interacción ...

En la pestaña MouseOver, marque seleccionar Color de relleno y seleccione el color rojo. Axure mostrará inmediatamente la vista previa en el área de diseño. Suponiendo que la sección Aplicar a menú seleccionado y todos los submenús están seleccionados, se resaltará todo el menú en rojo.

Haga clic en Elemento de menú seleccionado solamente. Ahora marque seleccionar Color de fuente y elija el color blanco para la fuente. La vista previa se actualizará de inmediato.

Haga clic en Aceptar para completar esta configuración.

Haga clic en Vista previa nuevamente para ver la interacción en acción.

Esto completa el ejemplo.

Puede probar la siguiente interacción como una tarea rápida.

Propiedad OnClick mediante el uso de un widget de botón.