¿Cómo crear un prototipo de inicio de sesión con cuenta y contraseña en Axure?
Haga clic para mira el vídeo tutorial
Pasos de Axure para crear un prototipo de inicio de sesión con cuenta y contraseña:
01 logra el efecto de 1. Haga clic en el cuadro de entrada de la cuenta para obtener el foco en su estado predeterminado (el foco es el cursor): el contenido se borra y la variable global contador1 cambia de blanco a 0.
Cuando el texto cambia: el contador1 comienza a contar.
Cuando el texto cambia de estado y pierde el foco: si el texto no tiene contenido, se restaurará al estado predeterminado; si el contenido del texto no está vacío, se guardará el estado del texto.
2. Haga clic en el estado predeterminado del cuadro de entrada de contraseña para enfocarse: el contenido está vacío y la variable global contador2 cambia de blanco a 0.
Cuando el texto cambia: el contador1 comienza a contar y el panel dinámico activa el estado de bucle.
Cuando el texto cambia de estado y pierde el foco: si el texto no tiene contenido, se restaurará al estado predeterminado; si el contenido del texto no está vacío, se guardará el estado del texto.
3. Cuando el estado del panel dinámico cambia, si el número de cuenta y la contraseña cumplen con las condiciones de más de 5 caracteres, el panel dinámico configurará el botón de inicio de sesión para que esté disponible. De lo contrario, no se ejecuta ninguna instrucción.
4. El estado predeterminado del botón de inicio de sesión es gris (estado de simulación deshabilitada) y se vuelve azul (estado de simulación disponible) cuando la cuenta y la contraseña cumplen las condiciones de caracteres al mismo tiempo.
02 Operación específica 1. Como se muestra en la figura, el cuadro del componente consta de dos etiquetas, dos cuadros de texto individuales, un panel dinámico y un botón.
2. Crea dos variables globales. La variable global aquí se usa principalmente para representar la longitud de los caracteres, así que la llamé contadores.
3. Cuando el cuadro de cuenta se enfoca a través de la siguiente interacción:
Antes de borrar el contenido, debe establecer el texto del caso de uso como texto inicial.
Cuando el texto cambia:
Cuando el texto no es igual al contenido inicial, configure la variable global contador1.
Cuando el texto sea igual al contenido inicial, establezca el contador1 en vacío.
Cuando se pierde el foco:
Lo que hay que tener en cuenta aquí es que cuando el contador 1 es igual a 0 o está vacío, el cuadro de cuenta se restaurará al contenido inicial; de lo contrario, no se realizará ninguna acción. se tomará, es decir, se guardará el texto.
4. Interacción del cuadro de contraseña La interacción de la contraseña es prácticamente la misma que la del número de cuenta.
La diferencia es que cuando el texto cambia, la variable global debe establecerse en contador2, que es lo mismo que abrir el panel dinámico para iniciar un bucle, de modo que esté cambiando de estado constantemente.
La condición para detener el bucle del panel dinámico puede ser "o" o "y", lo cual es inofensivo aquí. Simplemente forma un bucle cerrado lógico y no afecta la interacción del botón de inicio de sesión.
5. La interacción del panel dinámico debería ser fácil de entender aquí.
El botón de inicio de sesión se puede seleccionar sólo cuando ambas variables globales son mayores que 5.
Cuando alguna variable global no cumple la condición, el botón de inicio de sesión quedará desmarcado.
6. Botón de inicio de sesión El botón de inicio de sesión interactivo es gris de forma predeterminada, lo que indica que está deshabilitado. Cuando se selecciona el botón "Iniciar sesión", se vuelve azul en el diagrama para indicar el estado disponible.
No tengo por qué prohibirlo, no puedo evitar escribir este párrafo aquí. Hay muchas maneras de lograr el mismo efecto, los amigos pueden probarlo ellos mismos.
7. La interacción con el diagrama de carriles de natación termina aquí. Adjunto un diagrama de carriles de natación para ayudar a organizar mis pensamientos para aquellos que aún no lo han entendido. Lo dibujé usando carriles para resaltar la funcionalidad y el estado de cada componente. Parece mucho contenido, pero en realidad está dividido en tres partes.
Primero analice el flujo de la cuenta en el lado izquierdo y el contador1; después de analizar claramente el lado izquierdo, luego analice el proceso de la contraseña intermedia y el contador2. Será mucho más fácil para la cuenta entender la contraseña. , finalmente analizar el proceso del panel dinámico y botón de inicio de sesión. Siguiendo este orden, es fácil de entender y las ideas quedarán más claras.
Lo anterior es el contenido compartido sobre "¿Cómo crear un prototipo de inicio de sesión con cuenta y contraseña en Axure?", ¡espero que te pueda ayudar! Para compartir más información interesante sobre Axure, consulte los artículos relacionados con Axure. Muchos diseñadores de productos utilizan Axure porque permite crear prototipos de forma rápida y eficiente. Si desea aprender a crear prototipos de Axure rápidamente, puede elegir los cursos en vídeo de autoaprendizaje de Axure seleccionados. No lo dudes, elige el curso adecuado y comienza a aprender y experimentar ~
Recomendaciones de cursos populares
Una introducción de base cero al dibujo de prototipos de AxureRP y un rápido dominio del dibujo. Aplicación móvil Alipay de Axure. tutorial práctico de diseño Selección única de AxureAPP Tutorial de diseño de interacción Tutorial de caso de interacción del carrito de compras de la aplicación de comercio electrónico Axure.