Axure RP - Interacciones avanzadas
Hasta ahora, nos hemos presentado a las características básicas de Axure para las interacciones. Sin embargo, habrá muchos escenarios del mundo real, donde el prototipo tendrá que ser inteligente. Por la palabra inteligente, el prototipo deberá detectar el estado de un determinado widget para realizar una acción / desencadenar un determinado comportamiento.
Un ejemplo típico de tal interacción es configurar el color de un botón. Esto requiere que el ingeniero de UX use el sombrero de pensar y lleve el diseño del prototipo al siguiente nivel.
Usar variables en Axure
Variable, por definición, representa un factor que puede variar o cambiar. En Axure, podemos usar variables para representar o identificar el estado de un widget / interacción.
Un ejemplo típico será almacenar un valor de datos al transferir datos de una página a otra. Para mantener el ejemplo simple y claro, consideremos un escenario donde necesitamos mostrar el estado de un widget en particular.
Continuando con nuestro último ejemplo, consideremos que queremos mostrar cuántas veces se mostró la imagen.
Así es como lo haremos:
Crearemos una variable para iniciar el conteo a 0.
Al hacer clic en el botón Mostrar imagen, incrementaremos el valor de esta variable.
Muestra el valor en la etiqueta de texto.
Para este ejemplo, crearemos un texto debajo del Panel dinámico. El texto se leerá: la imagen se muestra 0 veces.
Critical- Es importante que las etiquetas se dividan en tres. Siga los nombres de las etiquetas y el texto que se enumeran en la tabla.
| Nombre de etiqueta | Texto de etiqueta |
|---|---|
| imageLabel | Se muestra la imagen |
| countLabel | 0 (cero en dígitos) |
| timesLabel | Veces |
Esto es necesario ya que queremos controlar el valor de countLabel para cada clic en el botón Mostrar imagen.
Definamos primero una variable.
Necesitaremos una variable, que se controlará cuando se haga clic en el botón. Esta variable en la terminología de Axure es - Variable global. Para definir una variable global, haga clic en Proyecto en la barra de menú y luego haga clic en Variables globales. Se abrirá un cuadro de diálogo como se muestra en la siguiente captura de pantalla.
Haga clic en el icono verde más (+) para agregar una variable global. Llamemos a nuestra variable global -varDynamicPanel. Su valor predeterminado será0.
Con las interacciones del botón Mostrar imagen, haga doble clic en Caso 1. Agregue otra acción. Como se muestra en la siguiente captura de pantalla, la acción esSet Text on countLabel to [[varDynamicPanel + 1]].
Seleccionar una etiqueta de texto para un valor es bastante sencillo. Veamos cómo obtener el valor de un panel dinámico.
Como se indica en el paso 4 en la captura de pantalla anterior, haga clic en fx y se abrirá el siguiente cuadro de diálogo.
Debajo del primer área de texto, ingrese la siguiente cadena.
[[varDynamicPanel + 1]]Haga clic en Aceptar.
Ahora, debemos asegurarnos de que la variable se actualice después de cada clic en un botón.
En el cuadro de diálogo del editor de casos, en acciones, seleccione Variables → Establecer valor de variable.
Seleccione varDynamicPanel como variable.
Configure la variable para recuperar el valor del texto en el widget como countLabel de las opciones disponibles.
Cierre el editor de casos haciendo clic en Aceptar. Luego, haga clic en el botón Vista previa.
Después de mostrar / ocultar la imagen cuatro veces, aquí está el resultado en la pantalla de vista previa.
