Nota del producto 1: use axure8.1 para crear el efecto de barra de navegación inferior de la aplicación móvil
Herramientas utilizadas: Axure pr versión 8.1.
El efecto de producción es el siguiente: seleccione cualquier pestaña para cambiar a la interfaz correspondiente y el estado seleccionado cambiará.
Como principiante, todavía hay algunos detalles a los que se debe prestar atención al seleccionar y arrastrar componentes y utilizar paneles dinámicos. El autor ha estado estudiándolos durante mucho tiempo, pero Baidu no. útil. Quizás lo sea. Las palabras clave son inapropiadas y no se puede encontrar la respuesta adecuada. Bien, sin más preámbulos, comencemos con los pasos.
1.1. Cree una barra maestra en la barra maestra en la parte inferior izquierda de la interfaz de axure, haga clic en el signo más para crear una maestra y asígnele un nombre.
1.2. Haga doble clic en el maestro para ingresar a la página de edición del maestro. Realice esas operaciones de arrastre y otras operaciones aquí.
2.1. Observamos que la barra de navegación consta de un total de 5 pestañas. Cada pestaña tiene dos elementos, una imagen y una etiqueta de texto. Pero para establecer fácilmente el ancho y el alto, ajustar la distancia para dividir uniformemente la pantalla y combinar el arrastre para establecer el estado del clic, etc., colocamos la imagen y el texto en un cuadro rectangular.
2.2. Arrastre un rectángulo a la interfaz, arrastre una imagen original y un componente de etiqueta de texto. Como se muestra a continuación, ajuste el tamaño, estilo, etc.
2.3. Si desea arrastrar estos tres componentes como un todo, debe combinar estos tres componentes. Mantenga presionada la tecla de comando (yo uso una Mac), seleccione el rectángulo, la imagen y la etiqueta de texto, haga clic derecho y haga clic en Agrupar para agrupar los componentes.
2.4. Haga clic derecho en el componente combinado: convertir a panel dinámico. Haga doble clic en él y aparecerá la siguiente ventana emergente, ingrese el nombre del panel dinámico. Agregar estado: marcado y desmarcado. Puede agregar la selección primero, luego hacer doble clic en el estado seleccionado para ingresar a la página de edición del estado seleccionado y agregar imágenes, texto y color de texto seleccionados, etc. Luego regrese al panel dinámico y haga clic en Copiar junto al signo más para copiar el estado seleccionado y nombrarlo como no seleccionado. Haga doble clic en el estado no seleccionado para modificar la imagen y el color del texto en su interior. De esta manera no tendrás que configurar repetidamente cosas como el espaciado.
2.5. Para las otras cuatro pestañas, simplemente copie el primer panel dinámico creado y editado para modificar las imágenes y el texto del estado que contiene. No es necesario volver a crearlo.
2.6. Arrastre hacia el interior del rectángulo de la barra de navegación inferior y ajuste el espacio para dividir la pantalla de manera uniforme.
3.1. Al hacer clic en cada pestaña, debe ingresar a la página correspondiente, por lo que agregamos 5 páginas correspondientes en la siguiente figura.
3.2. Seleccione la primera pestaña, haga clic en las propiedades de la página de inicio a la izquierda y haga clic con el mouse. Como se muestra a continuación:
Haga clic en el enlace para abrir el enlace en la ventana actual, haga clic en la página de inicio y confirme.
3.4. El maestro de la barra de navegación inferior ya está completo. Luego, el último paso es aplicar el patrón a cada página. Haga clic en la barra de navegación inferior a la derecha, haga clic derecho; seleccione Agregar patrón a la página. Simplemente seleccione todas las páginas.
Haga clic en la pestaña de la página de inicio. Cuando la página de inicio esté seleccionada, el estado de las otras pestañas debe cambiar a no seleccionada. ¿Cómo cambia esto? Al cargar a través de la página, establezca el estado de cada pestaña
4.1 Por ejemplo, haga clic en la página de búsqueda de automóviles, las propiedades a la derecha y haga clic en la página al cargar. Como se muestra a continuación:
4.2. Al hacer doble clic en la página para cargar, aparecerá una ventana emergente. Seleccione el estado del panel de configuración, seleccione el estado seleccionado para la búsqueda de automóviles y el estado no seleccionado para otras opciones. . Las otras pestañas tienen la misma configuración. Como se muestra a continuación:
En este punto, se completan todos los pasos.
Simplemente publícalo y previsualízalo.