Intercambio de experiencias en diseño de formularios web
1.
La función principal del formulario en la página web es recoger datos y transmitirlos al servidor. Los formularios son una forma importante de recopilar datos de información del usuario. Un buen diseño de formulario puede mejorar la eficiencia y la tasa de éxito de la recopilación de información. Un diseño deficiente del formulario afectará el estado de ánimo y la experiencia del usuario, provocará una recopilación de información fallida e incluso perjudicará las ganancias.
2. Forma de composición
Un formulario suele constar de tres partes: una etiqueta, un campo de entrada y un botón de acción.
Etiqueta
La etiqueta puede entenderse como un título que le dice al usuario qué información debe completarse en el formulario y qué información debe recopilar el formulario. Las etiquetas suelen aparecer a la izquierda, arriba o dentro del campo de entrada.
Según la necesidad de la información completada, las etiquetas se dividen en elementos obligatorios y elementos no obligatorios. Generalmente, agregaremos un * al contenido de la etiqueta de las opciones requeridas. Hay dos situaciones para colocar el número *:
1. Cuando la etiqueta está centrada en el campo de entrada, se recomienda colocar el número * en el lado izquierdo de la etiqueta.
Debido a que el signo * es obvio, los usuarios a menudo lo ven a primera vista y luego, según los hábitos de lectura del usuario de izquierda a derecha, los puntos de ubicación visual son etiquetas de texto y campos de entrada, respectivamente. Teniendo en cuenta la eficacia a la hora de cumplimentar el formulario, el formulario con * a la izquierda será más fácil de leer. Entonces, cuando la etiqueta esté alineada con el campo de entrada, es mejor colocar el signo * a la izquierda de la etiqueta.
2. Cuando la etiqueta queda alineada a la izquierda con el campo de entrada, se recomienda colocar el signo * en el lado derecho de la etiqueta.
Debido a los hábitos de lectura vertical de las personas, la línea de visión tendrá forma de F. Independientemente de si el signo * está a la izquierda o a la derecha, no causará muchos problemas a la visión del usuario. Además, considerando la alineación, sería mejor poner el signo * a la derecha de la etiqueta.
Campo de entrada
El campo de entrada es un área interactiva importante para que los usuarios ingresen información diversa. Los campos de entrada incluyen cuadros de texto, cuadros de contraseña, campos ocultos, cuadros de texto de varias líneas, casillas de verificación, botones de opción, cuadros de selección desplegables, cuadros de carga de archivos, etc.
Los amigos que no conozcan la diferencia entre estos campos de entrada pueden ir al sitio web oficial de Ant Design para obtener más información, portal:
/
Porque el El campo de entrada es una interacción importante para el área de entrada de información, por lo que se deben considerar varios escenarios de entrada del usuario al diseñar. Podemos dividir el proceso de entrada del usuario en antes de la entrada, durante la entrada y después de la entrada. Mejorar nuestros diseños en función de cada escenario. Por ejemplo, en términos de entrada, debemos considerar el diseño del cursor, el diseño de la información del texto de entrada, las indicaciones de información, etc. Después de ingresar, considere qué tipo de retroalimentación visual desea brindar si ingresa información incorrecta. En resumen, cuanto más detenidamente lo piense, más probabilidades tendrá de aumentar su tasa de éxito en el ingreso de información.
Botón de acción
El botón de operación es la operación que el usuario necesita para completar o finalizar el proceso de operación actual después de completar el contenido del formulario. Los botones de operación se dividen en botones de operación global y botones de operación local. Los botones de acción globales controlan todo el formulario, como enviar, enviar y otros botones de acción. Los botones de operación local se utilizan para operar una cierta variedad de contenido, como editar, eliminar, etc.
Tres. Preguntas frecuentes en el diseño de formularios
1. ¿Qué método de alineación es mejor para las etiquetas?
En nuestros proyectos reales, muchas veces no sabemos qué alineación se debe utilizar ya que las copias tienen diferentes longitudes. El principio del procesamiento de etiquetas es alinear tanto como sea posible, y se deben considerar restricciones y objetivos específicos para decidir qué método de alineación utilizar.
Alineado a la izquierda
Cuando la etiqueta está alineada a la izquierda, la distancia entre la etiqueta y el cuadro de entrada es incontrolable porque la longitud de la etiqueta de texto es inconsistente. Esto da como resultado un diseño menos versátil y un desperdicio de espacio lateral.
Si utiliza el formulario alineado a la izquierda, debe intentar mantener la longitud de la etiqueta de texto constante, como ajustar el espaciado entre palabras para mantener la longitud de la etiqueta de texto consistente o dejar suficiente espacio en blanco, de modo que que el diseño será más unificado. Por ejemplo, está alineado a la izquierda pero deja suficiente distancia entre las etiquetas de texto y los campos de entrada para que el formulario parezca más unificado y armonioso.
La desventaja es que se desperdicia algo de espacio.
Alineación superior
El uso de la alineación superior hará que las etiquetas y los campos de entrada se muestren verticalmente. El diseño vertical presentará mejor información, mejorando así la eficiencia del llenado. La alineación superior desperdicia espacio vertical debido a la disposición vertical, pero ahorra espacio horizontal y es más adecuada para páginas con ancho horizontal estrecho.
? Alineación superior
Alineación derecha
La alineación derecha es la misma que la alineación izquierda porque la longitud de la etiqueta es incontrolable. Como resultado, el diseño no es muy versátil, desperdiciando espacio horizontal pero ahorrando espacio vertical.
? Alineado a la derecha
En estas alineaciones, la velocidad a la que los usuarios navegan por la información es alineado superior >: alineado a la derecha > alineado a la izquierda. Los formularios alineados en la parte superior son adecuados para formularios simples, los formularios alineados a la derecha y a la izquierda son adecuados para formularios complejos.
2. ¿Qué forma de diseño se debe utilizar para los botones de operación?
Para los botones de acción global, se utilizará el estilo de botón convencional, y los botones globales se dividen en botones de primer nivel y botones de segundo nivel.
Botón principal
El botón principal es un botón de operación funcional importante en la interfaz, como enviar, guardar y otras operaciones de reenvío. El botón principal es el más alto en la jerarquía visual y puede guiar a los usuarios a encontrar operaciones principales y hacer clic rápidamente. Los botones principales suelen ser texto sin formato o una combinación de gráficos y texto. La combinación de imágenes y texto puede atraer la atención de los usuarios y ayudarles a comprender el significado de las operaciones de los botones.
Botones auxiliares
El nivel de los botones secundarios es más débil que el de los botones primarios, normalmente en forma lineal. Pueden aparecer varios botones secundarios en una página.
Los botones de acción local se pueden diseñar como botones de texto, botones de ícono o texto de ícono. En cuanto a qué forma se debe aplicar, se debe considerar junto con la escena final específica.
Botón de icono
El botón de icono utiliza iconos para representar el significado de las operaciones y puede expresar intuitivamente la función del botón. Al diseñar, debemos prestar atención a que los íconos sean fáciles de entender y familiares para los usuarios. Los botones de ícono generalmente están diseñados con un cuadro flotante, es decir, cuando el usuario pasa el cursor sobre el botón de ícono, aparecerá un cuadro flotante para explicar el texto del botón. Tomemos como ejemplo la cuenta oficial de WeChat. Cuando el mouse pasa sobre el ícono de edición, aparecerá un cuadro flotante negro para explicarlo, lo que permitirá a los usuarios comprender el significado del botón y operar con tranquilidad.
En diseño web, dado que existen muchos tipos de botones y muchos escenarios de uso, se recomienda utilizar iconos lineales para los botones de operación local para hacerlos menos jerárquicos que otros botones.
Botones de texto
Los botones de texto suelen aparecer entre los elementos de acción de las listas. El color del texto suele ser el color de la marca o azul, porque según la percepción de los usuarios, generalmente se puede hacer clic en azul.
Botón de texto con icono
En comparación con los botones de texto plano, los botones con una combinación de gráficos serán más intuitivos y atraerán la atención del usuario.
3. ¿Para cuántos estados debería diseñarse el cuadro de entrada?
Cuantos más estados se consideren, más detallado será el diseño y la información podrá enviarse a los usuarios de manera oportuna, mejorando así la eficiencia al completar los formularios. Al considerar el estado de diseño del cuadro de entrada, siga el principio de diseño de retroalimentación oportuna.
Para evitar errores de retroalimentación después de que los usuarios completen toda la información, se perderá tiempo y la eficiencia del llenado del formulario será ineficiente. Normalmente, la línea del cuadro de entrada se volverá roja y aparecerá una copia de explicación roja para atraer la atención del usuario.
? Proporcionar comentarios oportunos sobre los mensajes de error.
En el diseño, también debemos considerar el estado de éxito y advertencia de la verificación automática. Los colores suelen ser el verde y el naranja.
¿Para cuántos estados debería diseñarse el cuadro de entrada? También debemos considerar la complejidad de nuestro formulario. Un formulario simple no necesita diseñarse en un estado demasiado detallado.
Escribe al final de la frase
El diseño de formularios parece simple, pero todavía hay mucho que vale la pena aprender e investigar en el proceso de diseño. En el proceso de hacer esta mesa, siento que, como diseñador, no debería ser exigente. No crea que el diseño de formulario es un diseño pequeño y cópielo de acuerdo con las especificaciones de diseño de otras personas sin pensar.
Para diseños de módulos como este que pueden parecer aburridos pero que son muy importantes, antes de comenzar el diseño en las primeras etapas, podemos considerar primero la capa de interacción y luego considerar desde la capa visual qué tipo de diseño de formulario permitirá a los usuarios completar cómodamente. y eficientemente. Al observar las especificaciones de diseño de otras personas, como las especificaciones de los componentes de Ant Design, podemos prestar atención a sus detalles de diseño, como ¿cuánto espacio queda entre la parte superior e inferior del formulario? ¿Hay algún patrón? ¿Existe alguna relación entre los márgenes superior e inferior del botón y los márgenes izquierdo y derecho? Piense en ellos, luego obsérvelos, resúmalos y conviértalos en nuestros propios consejos. Haremos un gran trabajo la próxima vez que diseñemos un formulario.
Análisis anterior
Diseño de interfaz de usuario: análisis de la página de inicio
Análisis de habilidades de diseño de página de detalles
¿Habilidades de diseño de etiquetas de texto fáciles de obtener?
Obtener el método tangente del punto 9 (con artefacto tangente)