Compartir tecnología

Tutorial de Axure: producción interactiva del menú del cajón lateral de la aplicación

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Hoy les mostraré cómo usar el menú del cajón en Axure. En el menú del cajón, se deben lograr dos efectos interactivos, a saber:

Interacción uno

El efecto de escala de los elementos de menú de nivel 1 y 2 en el menú del cajón

Lógica de implementación: configuración del estado de conmutación del panel dinámico e implementación "empujar/tirar del original"

Interacción 2

Cambiar el estado seleccionado de un elemento del menú

Lógica del implemento: establezca el estado seleccionado en la vista auxiliar

Echemos un vistazo a los pasos de implementación:

Interacción 1: Efecto de escala de los elementos de menú de nivel 1 y nivel 2 en el menú del cajón

paso 1

1. Arrastre un panel dinámico y ajuste el tamaño del panel dinámico.

2. Haga doble clic en el panel dinámico, establezca el nombre del panel dinámico: "Menú 1", agregue 2 estados del panel dinámico, nombrados respectivamente: Contraer, Expandir

Paso 2

1. Haga doble clic en el estado plegado para ingresar a la página de estado "plegado"

2. Arrastre un rectángulo a la página y establezca el nombre en "Menú 1-Contraer". Cambie el tamaño del Menú 1 e ingrese el texto "Menú 1".

3. Arrastra la imagen de la flecha desplegable y ajusta el tamaño.

Paso 3

Agregue los estilos de selección y desplazamiento del mouse de "Menú 1-Contraer" y establezca el color de fuente: azul y el color de relleno: gris claro respectivamente.

Etapa 4

Caso de uso al configurar el clic del mouse en el rectángulo "Menú 1-Contraer":

Seleccione la acción "Cambiar estado del panel", configure el "Menú 1" para cambiar al estado "Expandido" y seleccione el atributo "Empujar/tirar de componente".

Paso 5

1. Copie el contenido del estado "contraído" del panel dinámico a la página de estado "expandido"

2. En la página de estado "Expandir", cambie el nombre del rectángulo a "Menú 1-Expandir".

Interacción 2: Cambiar el estado seleccionado de los elementos del menú

Paso 6

1. Copie "Menú 1-Expandir" como un submenú, modifique el texto del nombre del componente y asígnele el nombre: Submenú 1.

2. Configure el evento de clic del mouse del submenú 1, seleccione la acción "Establecer seleccionado" y configure el componente actual que se seleccionará.

Paso 7

1. Copie varios submenús en lotes, modifique el texto y asígneles un nombre respectivamente.

2. Después de seleccionar todos los submenús múltiples, establezca el nombre del grupo de selección: 1

Vista previa para ver el efecto.