Axure RP - Guía rápida

La palabra prototypinges muy común y relevante para la gente del desarrollo de software y del desarrollo arquitectónico. Cuando se trata de desarrollo arquitectónico, en Egipto existen prototipos de las Grandes Pirámides de Giza. Estos se construyeron con (por supuesto) una versión más pequeña para obtener el acuerdo o la aprobación del gobernante.

Este pequeño pero significativo ejemplo ilustra con precisión el propósito de un prototipo. Según Wikipedia, un prototipo es "una primera versión o versión preliminar de un dispositivo o vehículo a partir del cual se desarrollan otras formas".

Para el mundo del desarrollo de software, la definición se puede adaptar como una versión preliminar de una página, pantalla o funcionalidad, que respalda el otro desarrollo al visualizar los elementos de la pantalla de manera efectiva y mostrar las interacciones. Esta definición incluye la parte más crítica, la interacción.

En el desarrollo de software, para desarrollar una parte de la funcionalidad o la funcionalidad completa en sí, se requiere una inversión considerable en términos de tiempo y esfuerzo. Es un proceso interminable de desarrollo, validación y corrección de problemas según los comentarios de los clientes.

La mayoría de las empresas de desarrollo de software quieren que este proceso sea lo más rápido posible. De ahí que no sigan adelante con la inversión de tiempo y esfuerzo de todos los miembros del equipo. En cambio, toman una decisión inteligente al contratar a un ingeniero de experiencia de usuario (UX), que tiene las habilidades para visualizar una característica en particular. Esto los coloca en el asiento del conductor al desarrollar el producto.

En esencia, se requiere la creación de prototipos para simular y visualizar los requisitos de software muy temprano en el desarrollo. El proceso eventualmente se vuelve beneficioso tanto para las empresas de desarrollo de software como para los clientes, ya que reduce lo desconocido en la función, proporcionando así una dirección correcta para el desarrollo.

Fase adecuada para el desarrollo de prototipos

En la era actual del desarrollo de software de alto perfil, ha habido muchos avances en la tabla general del ciclo de vida del desarrollo de software. Estos avances provienen del aspecto de las tecnologías, así como del rol / posición de un miembro del equipo en particular en el ciclo de vida. Una de esas posiciones ha comenzado a tener tracción, que se llama ingeniero de UX.

Un ingeniero de UX está equipado con un conjunto de habilidades, que es beneficioso para los clientes. Al usar diferentes técnicas o pasos para conocer mejor al cliente, el ingeniero de UX puede obtener una buena idea de lo que el usuario espera de un producto de software determinado.

Por lo general, cuando se lleva a cabo el proceso de recopilación de requisitos, las empresas de tecnología ahora involucran a los ingenieros de UX para que salgan al mercado y comprendan las necesidades del usuario. Con la última tendencia de Responsive Web XDesign y Mobile-First Approach para el desarrollo de software, puede haber una serie de áreas en las que uno quiera centrar su atención. Un ingeniero de UX emplea procesos como entrevistas a usuarios, encuestas de mercado para conocer el pulso de su audiencia objetivo.

Este proceso toma tiempo y es importante, ya que deja despejado el camino para que el producto de software vea su idoneidad en el mercado. Estos pasos se emplean para recopilar los requisitos de software y obtenerlos. Es una fase ideal, ya que reduce el costo total de desarrollo. Sin embargo, cuando el producto de software está maduro, se puede introducir la fase de investigación de UX para evaluar la viabilidad de la mejora que se está realizando.

Para los ingenieros de UX, el proceso de comprender su base de usuarios no se limita solo a obtener las aportaciones del cliente o las conversaciones relacionadas. Hay algunos pasos interesantes que deben seguir para comprender lo que quiere un usuario. El verdadero trabajo comienza cuando tienen algo de claridad sobre lo que el usuario puede esperar del producto de software.

Una vez que algunos datos están disponibles sobre cómo el usuario percibe el próximo software o una mejora en el software existente, el ingeniero de UX regresa a su guarida para diseñar la interfaz de usuario para ellos. Tradicionalmente o como un enfoque común, cuando alguien dice diseño, se refiere a software como Adobe Photoshop, CorelDraw o incluso Microsoft Paint. A veces, para volver a los usuarios muy rápido, los diseñadores de UX hacen uso de un buen lápiz y papel para diseñar interfaces.

Sin embargo, para el diseñador de UX, proporcionar la calidad en el diseño de la interfaz de usuario significa más que solo mostrar un diseño impresionante. La experiencia del usuario consiste no solo en cómo el usuario ve la interfaz, sino también en cómo el usuario interactúa con ella. Las herramientas de software mencionadas anteriormente y los similares en el mercado vienen con sus propios conjuntos de funciones. De hecho, es una tarea tediosa para el ingeniero de UX elegir el software apropiado que permitirá: generar ideas, diseñar y obtener comentarios.

Ingrese a Axure, el software de tendencia actual para diseñar hermosas interfaces e interacciones de usuario. Axure existe desde hace casi una década para permitir a los ingenieros de UX llegar a los detalles de la creación de un prototipo de software con facilidad. Axure, además de ser la herramienta de creación de prototipos, tiene una comunidad poderosa que contribuye al mundo UX con muchos ejemplos e interacciones hábiles.

En un nivel superior, las siguientes son las características que ofrece Axure:

  • Diagramación y documentación
  • Creación de prototipos eficaz con contenido dinámico
  • Flujos condicionales
  • Hermosas animaciones para mejorar las interacciones.
  • Vistas adaptables
  • Soporte en Windows y Mac

Para explorar la lista detallada de funciones proporcionada por Axure, visite https://www.axure.com. Para obtener instrucciones de instalación, siga el enlacehttps://www.axure.com/download.

Para la creación rápida de prototipos, Axure RP proporciona una gama variada de herramientas y técnicas, que siempre ayudan a los analistas / ingenieros de experiencia del usuario a visualizar el objetivo final.

Con una comunidad sólida siempre disponible para ayudar, Axure RP se está convirtiendo en la herramienta preferida para los entusiastas y profesionales de UX.

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.

Este capítulo lo llevará 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 de alambre 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 que suceden 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 inicial de la página, 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 un 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, 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.

Muchos de los enfoques de desarrollo de software, cuando se trata del desarrollo de interfaces de usuario, emplean una técnica común: la creación de maestros.

Un maestro es una estructura alámbrica reutilizable, que se creará una vez y se utilizará ampliamente a partir de entonces en las páginas siguientes. Con Axure RP, cuando creamos una página maestra, los cambios realizados en esta página se aplicarán a las páginas donde se esté utilizando. De ahí que se reduzca en gran medida el tiempo de los componentes comunes a todas las páginas.

Para comenzar con Masters, puede concentrarse en la sección Masters (marcada como 5) como se resalta en la siguiente captura de pantalla.

Utilice esta sección de maestría para:

  • Organice los maestros del prototipo agregando, eliminando o editando la página / carpeta maestra.

  • Seleccione un maestro en particular para editarlo.

Paneles dinámicos

En Axure RP, como hemos visto en el capítulo anterior, hay diferentes estados asociados a un widget determinado. Para consolidar / organizar los estados de un widget en particular o conjunto de widgets, necesitamos un contenedor / marcador de posición. Los paneles dinámicos sirven como contenedor / marcador de posición para los estados de un widget.

Entendamos mejor el panel dinámico usando un ejemplo. Continuaremos desde nuestro ejemplo de barra de menú.

La adición en este ejemplo será un área de imagen y un botón debajo de la barra de menú. Utilice el marcador de posición del widget para el área de la imagen y el botón debajo de los widgets comunes. Nombra el marcador de posición como ImageAreaPlaceholder, botón como showImageButton.

Además, agreguemos la barra de menú a los maestros. Haga clic derecho en la barra de menú y haga clic en Convertir a maestro. Aparecerá un cuadro de diálogo solicitando el nombre del maestro. Agregue el nombre como menuBarMaster.

Como se muestra en la captura de pantalla anterior, la barra de menú se vuelve rosa y se ha agregado la entrada para los maestros.

Ahora, creemos un panel dinámico. El contexto para el panel dinámico es que desea controlar la visibilidad del área de la imagen en función del clic del botón Mostrar imagen. Tener un panel dinámico permitirá la flexibilidad del área de la imagen.

Veamos cómo crear el panel dinámico. Haga clic con el botón derecho en el área de la imagen, aparecerá el menú contextual, seleccione Convertir a panel dinámico.

El panel dinámico estará en Esquema: Página. También en Inspector, muestra el panel dinámico. Nombra el panel dinámico como showImageDynamicPanel. El nombre de este panel dinámico se actualizará en la sección Esquema: Página.

En el área de diseño, haga clic con el botón derecho en el panel dinámico Mostrar imagen para ver el menú contextual. Seleccione Establecer oculto, el panel dinámico desaparecerá de la pantalla.

Se puede acceder al panel dinámico haciendo doble clic en Esquema: Página.

Ahora, proporcionemos un evento de clic al botón. Haga clic en el botón Mostrar imagen, en Inspector → Propiedades, haga doble clic en la interacción OnClick.

Como se muestra en la captura de pantalla anterior, haga clic en Mostrar / Ocultar debajo de Widgets. Mostrará automáticamente los widgets disponibles para configurar acciones. Marque seleccionar showImageDynamicPanel. Haga clic en Aceptar.

Ahora, haga clic en Vista previa. En la pantalla de vista previa, haga clic en Mostrar imagen. Finalmente se crea otra interacción para un botón.

En este capítulo, discutiremos la lógica condicional utilizada en Axure RP.

Si - Entonces - Else en Axure

Al igual que cualquier otra herramienta de programación, Axure también admite la lógica condicional para crear interacciones mejoradas en prototipos. Una vez que esté familiarizado con cómo puede proporcionar interacciones, el siguiente nivel es proporcionar lógica condicional a las interacciones.

A continuación se muestra el flujo simple y conciso para la lógica condicional:

  • Si se hace clic en un widget / pantalla en particular
  • Luego, realiza una acción / interacción en particular
  • De lo contrario, mantenga / cambie el estado del widget o la pantalla

Para comprender esto mejor, reanudemos nuestro flujo del ejemplo anterior. Para este propósito, es necesario que nos familiaricemos con el Condition Builder.

El constructor de condiciones

Haga doble clic en cualquiera de las interacciones, por ejemplo, OnClick. Podrá ver el editor de casos como se muestra en la siguiente captura de pantalla.

Haga clic en el botón Agregar condición cerca del nombre del caso. Se mostrará a continuación en el cuadro de diálogo.

Como se muestra en la Descripción, el generador de condiciones creará el flujo If-Then-Else según las condiciones elegidas en la sección de condiciones.

Creemos una condición en este botón.

Queremos mostrar el botón de ocultar imagen, una vez que el panel dinámico esté visible. Hicimos visible el panel dinámico en el botón Mostrar imagen, haga clic en el ejemplo anterior. Ahora, hagamos visible otro botón Ocultar imagen.

Cierre el generador de condiciones y vuelva al área de diseño.

Inserte el botón Ocultar imagen de las bibliotecas en bibliotecas comunes. Para reiterar, es una buena práctica nombrar el elemento de la interfaz de usuario inmediatamente después de haberlo insertado en el área de diseño.

Haga clic con el botón derecho en el botón Ocultar imagen y haga clic en Establecer oculto. El botón se ocultará del área de diseño como se muestra en la siguiente captura de pantalla.

Ahora, volvamos a las interacciones para el botón Mostrar imagen.

Primero, debajo de las interacciones del botón Mostrar imagen, haga doble clic en Caso 1, podrá ver el editor de casos. Utilice la acción Mostrar / Ocultar para seleccionar hideImageButton y establecer su visibilidad para mostrar.

De manera similar, usando la acción Mostrar / Ocultar, seleccione showImageButton y configure su visibilidad para ocultar.

Hemos gestionado la visibilidad del botón Ocultar imagen de forma que, cuando hacemos clic en el botón Mostrar imagen, se mostrará el botón.

Una condición completa será como se muestra en la siguiente captura de pantalla.

Construyamos la condición.

Debajo del área de diseño, haga clic en el botón Ocultar imagen. En la sección Inspector, haga clic en Agregar caso.

En Agregar caso, haga clic en el botón Agregar condición. Según los antecedentes proporcionados anteriormente, cree el conjunto de condiciones utilizando los valores desplegables en el Generador de condiciones.

En palabras simples, con la condición anterior, estamos verificando si el panel dinámico showImageDynamicPanel es visible o no

Ahora, diseñemos la interacción para el botón Ocultar imagen, configúrelo de la siguiente manera:

  • Seleccione la acción Mostrar / Ocultar.
  • Seleccione el widget showImageDynamicPanel.
  • Establezca la visibilidad en Ocultar.

Del mismo modo, repita el ejercicio para mostrar showImageButton y ocultar hideImageButton.

Una vez hecho esto, haga clic en Aceptar para cerrar Case Editor.

Luego, haga clic en Vista previa para ver los cambios realizados.

Los resultados exitosos serán los que se muestran en las siguientes capturas de pantalla.

Cuando se hace clic en el botón Mostrar imagen:

Cuando se hace clic en el botón Ocultar imagen:

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 en el que 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.

Ahora que está familiarizado con las diferentes interacciones y eventos que son posibles en Axure, es posible que desee ampliar su trabajo para minimizar los esfuerzos en el futuro.

Por ejemplo, el primer ejemplo con Classic Menu - Horizontal, estuvo una vez presente en las versiones de Axure como una combinación de diferentes widgets disponibles. Esto significa que Axure evolucionó con el tiempo para adaptarse a los widgets de uso frecuente en forma dewidget library.

El concepto de biblioteca de widgets se aplica de manera más prominente en grandes equipos de UX. Algunas organizaciones mantienen widgets aprobados para los siguientes ingenieros de UX en un repositorio central.

Por lo tanto, en pocas palabras, Axure Widget Library es una colección de widgets personalizados almacenados en un solo archivo. El tipo de archivo para la biblioteca de widgets Axure esRPLIB.

Tipos de bibliotecas de widgets

Bibliotecas integradas de Axure

Estas bibliotecas son accesibles desde el panel Bibliotecas. Estas bibliotecas no se pueden actualizar ni eliminar. Para la mayoría de las complejas necesidades de creación de prototipos, las bibliotecas integradas de Axure vienen al rescate.

La biblioteca consta de 17 widgets de flujo únicos, que se utilizan principalmente para la creación de diagramas. Además, hay 25 widgets en la biblioteca de estructura alámbrica.

Un breve funcionamiento de las bibliotecas está presente en el Capítulo 3 - Interfaz de usuario.

Bibliotecas personalizadas de Axure

La comunidad de Axure, que crece día a día, tiene una vasta colección de bibliotecas creadas por usuarios. Puedes visitarlos en -https://www.axure.com/support/download-widget-libraries.

Los profesionales de UX de todo el mundo, comprometidos con hacer crecer esta comunidad, envían su trabajo en el enlace anterior.

Puede descargar las bibliotecas del sitio web y agregarlas a Axure usando la opción Cargar biblioteca en bibliotecas. Además, puede descargar bibliotecas directamente desde la propia interfaz de la aplicación.

Como se muestra en la pantalla anterior, tenemos un menú contextual, donde puede descargar diferentes bibliotecas como se ofrece en https://www.axure.com/support/download-widget-libraries. También puede crear su propia biblioteca, que será útil al crear controles repetitivos para un prototipo determinado.

Las instrucciones completas para descargar / cargar bibliotecas están disponibles en: https://www.axure.com/support/reference/widget-libraries.

Cuando se trata de usar un widget personalizado de una de sus bibliotecas cargadas, arrástrelo y suéltelo en el área de diseño similar a los widgets incorporados. Si el widget incluye variables o un estilo personalizado, elImport Wizard dialog marcaría tales dependencias.

Entre estas dependencias, puede notar que hay ciertos estilos incompatibles que vienen junto con la biblioteca de widgets que se está importando. Puede elegirCancel e importe solo los widgets o haga clic en el Finish para importar el paquete completo.

Una vez que arrastre y suelte un widget en su estructura alámbrica, esa instancia en particular ya no estará asociada con su biblioteca de widgets original. Por lo tanto, las ediciones y los cambios realizados en los widgets en la biblioteca de widgets importados no se aplican a ninguna de las instancias de estos widgets en su archivo de proyecto, incluso después de actualizar la biblioteca. Tenga la seguridad de que, una vez importados, puede utilizar los widgets en la biblioteca importada sin preocuparse por las actualizaciones que tienen lugar en la misma biblioteca de widgets que está disponible en línea.

Usando RPLIB

Usar un archivo de la biblioteca Axure RP es bastante sencillo. Cuando descarga una biblioteca, el icono del archivo de biblioteca (.rplib) se distingue claramente del archivo prototipo de Axure RP (.rp). Por ejemplo, como se ve en la siguiente captura de pantalla.

El mecanismo para que esto funcione: puede importar el documento de estructura metálica de iOS en la demostración de estructura metálica de iOS.

Esta biblioteca se puede utilizar para varios proyectos y las actualizaciones en el archivo de la biblioteca estarán disponibles una vez que actualice la biblioteca desde el menú contextual. Como se destacó anteriormente, esto es muy útil cuando se trabaja en un proyecto de equipo y se distribuyen las bibliotecas de esta manera.

Axure RP 8 admite la colaboración con la función - Proyectos de equipo. Esta característica no solo es beneficiosa para los equipos distribuidos sino también para el usuario único. El beneficio para el usuario único es la capacidad de crear versiones sobre el trabajo en curso.

Trabajar con proyectos de equipo

En el escenario de Proyectos de equipo, cada miembro del equipo tiene una copia del proyecto en su computadora. Este proyecto se sincronizará con un repositorio compartido. Este repositorio compartido está conectado a otros miembros del equipo.

Después del curso de un día de trabajo, cada miembro del equipo creará nuevos elementos, revisará archivos y, en general, editará el proyecto. Check Out es un término de uso común para indicar el trabajo en curso para un archivo en particular.

Los cambios no se reflejarán en el repositorio compartido hasta que el miembro del equipo verifique todos sus elementos extraídos. losManage Team Project La consola proporciona a todos los miembros del equipo una vista en tiempo real del estado de disponibilidad de los elementos que son administrados por el sistema.

Esta vista proporciona los detalles de un elemento extraído por otro miembro del equipo.

Iniciar un proyecto de equipo

Para trabajar con un proyecto de equipo o crearlo, diríjase al menú Equipo. Haga clic en Equipo y luego seleccione Crear proyecto de equipo a partir del archivo actual. Aparece la siguiente pantalla.

Las opciones disponibles para albergar un proyecto de equipo son: usar AxShare y SVN. Hablaremos de AxShare en la siguiente sección. SVN es el sistema de control de versiones de uso común, que proporciona un servidor para alojar sus documentos.

Siga las pautas en pantalla para crear un proyecto de equipo y luego podrá comenzar a colaborar con un solo archivo de Axure en todo el equipo / úselo para su propio almacenamiento histórico.

Compartir Axure

Cuando se trata de exhibir su prototipo, hay múltiples opciones disponibles según el entorno en el que se encuentre. El método más utilizado para exportar su prototipo es usar Axure Share (también conocido como AxShare).

Con Axure Share, son posibles las siguientes capacidades de colaboración.

  • Los prototipos se pueden alojar en Axure Share y compartir con los miembros del equipo / clientes involucrados.

  • Con la función de discusión / comentarios, puede obtener las entradas sobre la marcha sobre el prototipo en proceso.

Una vez que esté listo con el prototipo, puede cargar el prototipo en AxShare usando Publicar → Publicar en Axure Share. Se mostrará el siguiente cuadro de diálogo.

Debe crear una cuenta en AxShare.com para poder avanzar. Si ya tiene una cuenta, puede usar la opción 'Iniciar sesión' para iniciar sesión y cargar su trabajo en AxShare .

Los datos cargados están en HTML, CSS y JavaScript. Una vez cargado, se le proporciona un enlace, que puede proporcionar a las partes interesadas / equipo previsto.