Cómo crear un inicio de sesión en una página web usando axuer

Descarga del archivo rp del cuadro de inicio de sesión de alta fidelidad: cuadro de inicio de sesión de alta fidelidad

Como cuadro de inicio de sesión de alta fidelidad, el foco de su producción es:

1. Cómo cuando hago clic en el cuadro de entrada, el texto en el cuadro de entrada desaparece

2. Cómo hacer que el cuadro de inicio de sesión reconozca lo que ingresé: "Nombre de usuario", "Contraseña", "Código de verificación"

3. Cuando cometo un error de entrada, ¿cómo aparece el siguiente mensaje de texto?

Para resolver los tres problemas anteriores, debemos hablar sobre la opción "texto en componente". en estado axure, echemos un vistazo. ¡Levántate e intenta hacerlo!

1. Prepara los materiales

Sigue siendo lo mismo que el tutorial anterior, buscando los materiales que necesitamos. . Hacer los materiales para el cuadro de inicio de sesión es relativamente simple. Solo necesita usar la herramienta rectángulo para crear un "cuadro" como se muestra en la imagen. Puede ajustar el tamaño y la disposición adecuadamente para hacerlo más hermoso. Complete el texto correspondiente en el control correspondiente (como se muestra en la imagen)

(Nota: hay un rectángulo transparente encima del inicio de sesión para mostrar el texto del mensaje)

2. el efecto de "el texto en el cuadro de entrada desaparece cuando se hace clic con el mouse"

Este paso es relativamente simple. Solo necesita considerar dos situaciones: "el cuadro de entrada gana foco" y "el cuadro de entrada". pierde el foco"

Cuando "el cuadro de entrada recibe el foco", configure la acción interactiva como se muestra a continuación

Cuando configuramos el texto en la contraseña del componente igual a "", hacemos clic en cuadro de entrada y se mostrarán espacios en el cuadro de entrada. (4 está vacío)

Cuando el cuadro de entrada pierde el foco, si no hay texto de entrada en el cuadro de entrada (es decir, la longitud del texto es 0), se mostrará el texto predeterminado cuando lo haya; introduzca texto, se mostrará el texto introducido. Configure como se muestra a continuación:

3. Cuando se comete un error de entrada, se muestra el siguiente texto.

En este paso, solo necesita prestar atención a un problema: en el condiciones de edición, establezca tres situaciones para fallas de inicio de sesión (nombre de usuario incorrecto, contraseña incorrecta, código de verificación incorrecto. Al establecer una propuesta negativa, solo necesita enumerar un elemento que no se cumple). El autor estableció aquí "el nombre de usuario es 1@qq.com, la contraseña es 123456 y el código de verificación es BUENO. Siempre que cualquiera de los tres cuadros de entrada no cumpla con el valor predeterminado, el inicio de sesión fallará y el proceso". El texto correspondiente se mostrará en el área de texto del mensaje. Como se muestra en la figura

Cuando el nombre de usuario se ingresa incorrectamente, las condiciones son:

Cuando se ingresa un elemento incorrectamente

Después de editar todas estas condiciones , un cuadro de inicio de sesión de alta fidelidad. En este artículo, hablamos principalmente sobre el uso de la condición "texto en componente" en axure. ¡Creo que deberías conocer dicha opción!