¿Cuáles son las especificaciones de diseño de la interfaz web? Especificaciones de diseño de la interfaz de usuario: ¿cómo construir el lado web?

¿Cuáles son las especificaciones de diseño de la interfaz del sitio web?

Especificaciones de usabilidad

2.001 Los botones de uso común deben admitir accesos directos.

2.002 Los elementos que completan la misma función o tarea se colocan en una ubicación centralizada para reducir la distancia que se mueve el mouse.

La interfaz 2.003 debería admitir la función del botón de navegación automática del teclado, es decir, la función de cambio automático al presionar la tecla Tab.

Los controles que deben ingresarse primero y la información importante en la interfaz 2.004 deben colocarse primero en el orden de pestañas y deben colocarse en una posición más llamativa en la ventana.

2.005 La interfaz de paginación debe admitir el cambio rápido entre páginas y la combinación de teclas de acceso directo comúnmente utilizada Ctrl Tab

2.006 El botón predeterminado debe admitir operaciones de entrada y selección, es decir, el valor predeterminado El botón se ejecutará automáticamente después de presionar Ingresar la operación correspondiente.

El control de escritura 2.007 debería dar una explicación y ganar foco automáticamente después de detectar una entrada ilegal.

2.008 El orden de las teclas Tab debe ser consistente con el orden de los controles. Actualmente, el método popular es de arriba a abajo y de izquierda a derecha entre líneas.

2.009 Las casillas de verificación y las casillas de opción están ordenadas según la probabilidad de selección.

2.010 Las casillas de verificación y los cuadros de opción deben tener opciones predeterminadas y admitir la selección de pestañas.

2.011 Utilice cuadros desplegables en lugar de cuadros de opciones cuando el espacio de la interfaz sea pequeño.

2.012 Utilice cuadros de opciones cuando el número de opciones sea pequeño, en su lugar utilice cuadros de lista desplegable.

2.013 Utilice palabras y entonaciones correspondientes según los diferentes usuarios. Por ejemplo, el software especial puede aparecer con mucho vocabulario profesional; si el usuario es un niño: esto puede tener un tono amigable y amable; los usuarios mayores deben ser maduros; y constante.

2.014 Cuando no se puede hacer clic con el mouse, se muestra la flecha, y cuando se puede hacer clic con el mouse, se muestra la forma de la mano; cuando el sistema está ocupado, se muestra la forma de reloj de arena

>Especificaciones normativas

2.015 Antes del menú El icono puede representar intuitivamente la operación a realizar.

Los requisitos de la barra de herramientas de 2.016 se pueden personalizar según los requisitos del usuario.

La ubicación predeterminada de las barras de herramientas más utilizadas en el sistema 2.017.

2.018 La caja de herramientas debe poder ser agregada o eliminada y personalizada por el usuario según sus necesidades.

2.019 La barra de estado debe poder mostrar la información que el usuario realmente necesita. Las más utilizadas incluyen operación actual, estado del sistema, ubicación del usuario, información del usuario, información de aviso, información de error, etc. una determinada operación requiere tiempo. Si es más largo, también se deben mostrar una barra de progreso y mensajes de proceso.

2.020 La longitud de la barra de desplazamiento debe cambiarse en el tiempo de acuerdo con la longitud o el ancho de la información mostrada, para facilitar al usuario la comprensión de la posición y el porcentaje de la información mostrada.

2.021 La altura de la barra de estado es adecuada para colocar caracteres de tamaño 5 y el ancho de la barra de desplazamiento es ligeramente más estrecho que la barra de estado.

2.022 Debe haber límites claros entre los menús y las barras de herramientas; los menús deben resaltarse para que todavía haya una sensación tridimensional cuando se elimina la barra de herramientas.

2.023 Las barras de herramientas son generalmente más anchas que los menús, pero no demasiado, de lo contrario se verán descoordinadas.

Especificaciones de ayuda

La introducción y descripción del rendimiento en el documento de ayuda 2.024 deben ser coherentes con el rendimiento del sistema.

Al empaquetar un nuevo sistema en 2.025, las piezas modificadas deben modificarse en consecuencia en el documento de ayuda.

2.026 Al solicitar ayuda en la interfaz, debería poder localizar a tiempo la posición de ayuda en relación con la operación. Esto significa que la ayuda debe ser inmediata y específica.

2.027 Los usuarios pueden utilizar palabras clave para buscar la ayuda que desean en el índice de ayuda. Por supuesto, también se deben proporcionar palabras de asunto de ayuda.

2.028 Si no se proporciona documentación de ayuda escrita, lo mejor es tener la función de imprimir ayuda.

2.029 Nuestros métodos de soporte técnico deben proporcionarse en la ayuda. Una vez que los usuarios tienen dificultades para resolver el problema por sí mismos, pueden buscar fácilmente nuevos métodos de ayuda.

Especificaciones de razonabilidad

2.030 Los botones que no estén relacionados con la operación en curso deben bloquearse (se muestran en gris en Windows y no se pueden utilizar).

2.031 Se debe proporcionar información de confirmación para operaciones que puedan causar que los datos sean irrecuperables para brindar a los usuarios la oportunidad de renunciar a su elección.

2.032 Los insumos u operaciones ilegales deben tener suficientes indicaciones y explicaciones.

2.033 Se deben proporcionar avisos para los errores causados ​​por problemas durante la operación, para que los usuarios puedan comprender el origen de los errores y evitar esperas indefinidas.

2.034 Los consejos, advertencias o instrucciones de error deben ser claros, concisos y adecuados.

2.035 Después de que falla el envío, el contenido ingresado por el usuario debe guardarse para poder modificarlo y enviarlo nuevamente.

Estándares hermosos y coordinados

2.036 El largo y el ancho están cerca de la proporción del punto dorado. Evite el desequilibrio en la relación largo-ancho, o el ancho excede el largo.

2.037 El diseño debe ser razonable. No debe ser demasiado denso ni demasiado vacío. Hacer un uso razonable del espacio.

2.038 Los botones son básicamente similares en tamaño. Evite el uso de nombres demasiado largos para evitar ocupar demasiado espacio en la interfaz.

2.039 El tamaño del botón debe coordinarse con el tamaño y espacio de la interfaz.

2.040 Evite colocar botones grandes en interfaces vacías.

2.041 No debe quedar un gran espacio vacío en la interfaz después de colocar los controles.

2.042 El tamaño de la fuente debe ser proporcional al tamaño de la interfaz.

2.043 Los colores de primer plano y de fondo deben combinarse de manera razonable y coordinada, y el contraste no debe ser demasiado grande. Es mejor utilizar colores menos oscuros, como rojo brillante, verde brillante, etc. . Por ejemplo: software de seguridad, de acuerdo con los estándares de la industria, puede elegir amarillo, el verde representa la protección del medio ambiente, el azul representa la moda, el morado representa el romance, etc. Los colores claros pueden hacer que las personas se sientan cómodas y los colores oscuros se pueden usar como fondo para que las personas no sentirse cansado.

2.044 Si se utilizan otros colores, el color principal debe ser suave, tener afinidad y magnetismo, y evitar decididamente los colores deslumbrantes.

2.045 El estilo de la interfaz debe ser consistente y el tamaño, color y fuente de los caracteres deben ser los mismos, a menos que exista un procesamiento artístico o requisitos especiales.

2.046 Sería mejor si pudiera proporcionar a los usuarios un estilo de interfaz personalizado, permitiéndoles elegir colores, fuentes, etc.

2.047 Los usuarios daltónicos y débiles al color deben utilizar indicadores especiales incluso si se utilizan colores especiales para expresar puntos clave o cosas especiales.

El esquema de color 2.048 también debe probarse. A menudo, debido a problemas con el monitor y la tarjeta gráfica, el rendimiento del color de cada máquina es diferente. Se debe probar estrictamente el color de diferentes máquinas. .

2.049 Utilice un lenguaje unificado para describir. Por ejemplo, un botón de función de cierre puede describirse como salir, regresar o cerrar, y debe especificarse de manera uniforme.

Especificaciones de diseño del menú

El menú 2.050 generalmente está organizado en la posición "Común--Principal--Secundario--Herramientas--Ayuda", que está en línea con el popular Estilo ventanas.

Las opciones comúnmente utilizadas en 2.051 incluyen "Archivo", "Editar", "Ver", etc. Casi todos los sistemas tienen estas opciones y, por supuesto, hay opciones basadas en diferentes sistemas.

2.052 Los menús desplegables deben agruparse según el significado de las opciones del menú, organizarse según ciertas reglas y separarse por líneas horizontales.

2.053 Cuando la utilización de un conjunto de menús tenga requisitos secuenciales o tenga función de guía, deberá disponerse en secuencia.

2.054 Los elementos del menú que no requieren orden se organizan según la frecuencia de uso y la importancia. Los de uso común se colocan al principio y los poco comunes se colocan al final. , y los menores se colocan en la parte trasera.

2.055 Si hay muchas opciones de menú, el menú debe organizarse de acuerdo con el principio de alargar la longitud y reducir la profundidad.

2.056 Generalmente se requiere controlar la profundidad del menú en tres niveles como máximo.

2.057 Los menús que no están relacionados con la operación en curso deben procesarse de forma protegida. Es mejor si se utiliza la carga dinámica, es decir, solo se muestran los menús requeridos.

2.058 El ícono frente al menú no debe ser demasiado grande y es mejor mantenerlo consistente con la altura de la fuente.

2.059 El ancho del menú principal debe ser similar y el número de palabras no debe ser superior a cuatro. Es mejor si el número de palabras en cada menú es el mismo.

2.060 El número de menús principales no debe ser demasiado, y lo mejor es disponerlos en una sola fila.

Especificaciones de singularidad

La interfaz de instalación 2.061 debe tener una introducción de unidad o de producto y tener su propio icono.

2.062 Interfaz principal, lo mejor es tener iconos de empresa en la mayoría de las interfaces.

2.063 La interfaz de inicio de sesión debe tener el logo de este producto y el ícono de la empresa.

2.064 Debe haber información sobre derechos de autor y productos en el apartado "Acerca de" del menú de ayuda.

2.065 La serie de productos de la empresa debe mantener un estilo de interfaz consistente, como el color de fondo, las fuentes, la disposición del menú, los íconos, el proceso de instalación, el idioma de los botones, etc., deben ser generalmente consistentes.

Especificaciones de seguridad

2.066 Se debe tener cuidado para evitar en la medida de lo posible que los usuarios introduzcan accidentalmente datos no válidos.

2.067 utiliza controles relevantes para limitar los tipos de valores de entrada del usuario.

2.068 Cuando el usuario tiene sólo dos posibilidades para elegir, se puede utilizar un botón de opción.

2.069 Cuando puede haber más opciones, se pueden usar casillas de verificación. Todas las opciones son válidas y es imposible que el usuario ingrese ninguna opción no válida.

2.070 Cuando hay muchas opciones, puede utilizar cuadros de lista y cuadros de lista desplegables.

2.071 En un sistema de aplicaciones, los desarrolladores deben evitar que los usuarios realicen operaciones no autorizadas o sin sentido.

2.072 Limitar o bloquear caracteres de entrada o acciones que puedan causar errores fatales o errores del sistema.

2.073 Deben existir medidas reparadoras de operaciones que puedan tener consecuencias graves. A través de medidas correctivas el usuario puede volver al estado correcto original.

2.074 determina la entrada de algunos símbolos especiales, caracteres que entran en conflicto con los símbolos utilizados por el sistema, etc. y evita que el usuario ingrese los caracteres.

2.075 Es mejor admitir el procesamiento reversible de operaciones de error, como cancelar una serie de operaciones.

2.076 Antes de ingresar un carácter válido, se debe evitar que el usuario realice operaciones que solo se pueden realizar después de ingresar el carácter.

2.077 Debería preverse una función de cancelación para operaciones que puedan causar largos tiempos de espera.

2.078 Los caracteres especiales a menudo incluyen;;'"gt;lt;, `', "["{,\|}] =)-(_*amp;amp;^$#@!~, .. ?/ También existen espacios

2.079 Se deben restringir aquellos que entren en conflicto con los caracteres reservados que utiliza el sistema

2.080 Al leer la información ingresada por el usuario, elija. si eliminarlo según sea necesario. Espacios antes y después.

2.081 Algunos campos leídos en la base de datos no admiten espacios en el medio, pero el usuario realmente necesita ingresar espacios en el medio. los elementos de entrada deben especificarse en el programa

2.082 Los elementos requeridos no pueden estar vacíos y no se pueden ingresar espacios

2.083 Los elementos requeridos están marcados con. un elemento obligatorio (*)

2.084 No requerido En el campo de entrada, Null no funcionará mal cuando se inserte en la base de datos. Establezca el valor predeterminado en la base de datos. el formato de visualización de la fecha es consistente; o proporciona una opción de formato fijo

2.086 El área de entrada es especial, no se permiten errores ni mensajes al insertar en la base de datos. la entrada no distingue entre mayúsculas y minúsculas y no se pueden ingresar caracteres chinos, números y caracteres especiales.

2.088 Solo se permiten campos numéricos, -, 0 ~ 9 y teclas de función (cursor de retroceso). no puede ser negativo.

2.089 Cuadro de texto de una sola línea/cuadro de texto de varias líneas; la longitud es apropiada y puede acomodar el texto correspondiente, pero no puede exceder el límite de la base de datos, preferiblemente el número máximo. El número de caracteres que se pueden ingresar está marcado al lado.

Se recomienda que los caracteres ingresados ​​en un cuadro de texto de una sola línea superen una determinada longitud y luego no sean válidos; para cuadros de texto de varias líneas se indica el número máximo de caracteres adjuntos que cumplen; el formato se puede agregar normalmente; los archivos adjuntos se pueden abrir normalmente y guardar, puede funcionar normalmente cuando el nombre del archivo adjunto es largo; ingrese directamente la dirección incorrecta del archivo adjunto y se debe mostrar un mensaje al guardar el archivo adjunto; localmente, el nombre del archivo debe mostrar el nombre del archivo original.

2.091 Entrada de contraseña; defina en los requisitos si la contraseña puede estar vacía o con espacios; si la contraseña permite caracteres especiales y la longitud de entrada de la contraseña; debe proporcionar una descripción de texto de la contraseña. Ingrese la longitud. ¿Cuáles son los principios de diseño del diseño web?

Un buen diseño puede ayudar a las empresas a mejorar sus datos y, al mismo tiempo, brindar a los usuarios una buena experiencia. GoodUI ha resumido una lista de 69 principios de diseño (en continuo crecimiento), enumerando los puntos de diseño que consideran muy importantes.

Lo que se diferencia de algunos artículos anteriores es que algunos de los 69 puntos mencionados aquí han sido verificados por GoodUI a través de ABTest. Por supuesto, los informes de análisis deben pagarse, que son 39 dólares por artículo.

Sin embargo, el foco de la discusión de hoy no son los informes pagados, sino estos 69 principios de diseño. Los traduje al chino según mi propio entendimiento y adjunto imágenes. Espero que sea útil para todos.

El contenido y las imágenes de este artículo son todos de GoodUI. Si hay alguna traducción inapropiada, corríjame.

01 Intente utilizar un diseño de una columna en lugar de un diseño de varias columnas

02 Ofrezca a los usuarios algunos pequeños beneficios, no parezca tan desnudo

03 Fusionar funciones similares

04 Intente mostrar elogios de los usuarios en lugar de autoelogio

05 Repita los puntos de acción principales

06 Unifique los estándares visuales y mejore la reconocibilidad

07 Intente utilizar un tono recomendado en lugar de hacer que los usuarios se sientan como si estuvieran frente a una máquina fría

08 Ofrezca a los usuarios la oportunidad de tomar la "medicina del arrepentimiento"

09 Decir a los usuarios que el producto es adecuado para un grupo de personas, en lugar de ser común para todos

10Escribir el texto de forma más directa, en lugar de un montón de tonterías

11Mejorar el impacto visual de el punto de acción principal y mejorarlo en Comparabilidad en la página

12 Deja que los usuarios sepan de dónde vienes y será más fácil construir una relación más cercana con los usuarios

13 Haz que formulario simple para garantizar que los usuarios no se vuelvan locos antes de volverse locos. Puede continuar con el siguiente paso

14 Intente mostrar la información que los usuarios deben elegir en lugar de ocultarla

15 El diseño de la página debe considerar si los usuarios perderán la información inferior

16 Si hay puntos de acción que necesitan atención en la parte inferior de la página, no permita que demasiados enlaces externos en el artículo ocupen usuarios ausentes

17 Asegúrese de que los usuarios conozcan su estado actual

18 Los puntos de interés se integran en puntos de acción para mejorar el deseo de los usuarios de hacer clic

19 Combinar puntos de acción con información actual

20 Fusionar formularios breves en la página para reducir el tiempo de ajuste de la página Pérdida de nuevos usuarios

21 Aumentar adecuadamente las animaciones retrasadas para permitir a los usuarios percibir los cambios en la página

22 Deje que los nuevos usuarios comiencen probando el producto en lugar de enfrentarse a la indiferencia tan pronto como lleguen. Formulario de registro

23 Reduzca el uso de wireframes, que atraerán demasiada atención del usuario y harán que la página luce sin aliento

24 ¿Qué puedes hacer para promocionar a los usuarios beneficios, no funciones?

25 Asegúrate de prestar atención al diseño de la página de 0 resultados, que también es una buena opción. lugar para guiar a los usuarios

26 Ofrezca a los usuarios el derecho de optar por no participar, especialmente correos electrónicos Suscribirse

27 Preste atención a la coherencia de los elementos de la interfaz y reduzca los costos de aprendizaje del usuario

28 Agregue algunos valores preestablecidos al cuadro desplegable para reducir los costos de llenado del usuario

29 Continuar con los hábitos de uso diario de los usuarios, en lugar de volver a crearlos

30 Intente decirle a los usuarios que hagan algo para reducir sus pérdidas, en lugar de aumentar sus ganancias

31 Mejorar el nivel visual de la página y mejorar la legibilidad

32 Fusionar operaciones similares para reducir la capacidad cognitiva del usuario costo

33 Verifique el formulario de manera oportuna en lugar de enviarlo de manera uniforme y luego decirle al usuario que lo completó incorrectamente

34 Intente hacer que la entrada del formulario sea más tolerante y haga hacer más fácil para los usuarios completar

35 Aumentar el sentido de urgencia a través del tiempo

36 Proporcionar a los usuarios operaciones predecibles para reducir el costo psicológico del usuario

37 Ayudar a los usuarios elija tanto como sea posible en lugar de hacer que los usuarios lo piensen dos veces

38 Amplíe el área operativa tanto como sea posible para reducir los costos operativos del usuario

39 La velocidad de carga de la página es muy importante, intente hacer los usuarios sienten que su sitio web es rápido

40 Si es posible, agregue atajos de teclado para mejorar la eficiencia operativa

41 Intente aprobar Comparar para que los usuarios perciban la rentabilidad

42 Intente "diseñar" la barra de progreso para reducir la ansiedad de los usuarios por la espera

43 Muestre gradualmente la información según la selección del usuario para reducir el impacto de la información no válida en la interferencia de los usuarios

44 A veces, una promesa menor es más fácil de convencer a los usuarios que "alardear"

45 Intente debilitar la información solicitada para reducir la interferencia en las operaciones del usuario

46 Intente simplificar las operaciones del usuario a través de funciones del sistema

47 Utilice texto e íconos para reducir los costos cognitivos de los usuarios

48 Utilice un lenguaje más natural para reemplazar las máquinas frías

49 lanza uno

Alguna información resumida para ayudar a los usuarios a identificar si necesitan mayor comprensión

50 Agregue información sobre derechos de usuario en páginas clave para mejorar la confianza de los usuarios en futuras operaciones

51 Convierta precios para que los usuarios sientan que es barato

52 Recuerde agradecer a los usuarios en la página de éxito

53 Convierta los números en una forma que sea fácil de leer para los usuarios, en lugar del frío lenguaje de máquina

54 Decir “tentación” al derecho y la libertad de elección de los usuarios

55 Intentar hacer que el lenguaje sea más “tentación”

56 Guiar la atención de los usuarios a través del diseño

57 Muestre productos a través de comparaciones amigables para ayudar a los usuarios a tomar decisiones

58 Mejore la satisfacción del usuario a través de mecanismos de tareas

59 Informe a los usuarios qué va a pasar a continuación

p>

60 Intente utilizar un texto con un lenguaje más humorístico

61 Brinde comentarios después de cualquier operación para que el usuario sepa que la operación ha surtido efecto

62 Preste atención a la autenticidad del Uso de animación (el menú de categorías de Amazon es un buen ejemplo)

63 Preste atención al diseño y no sobrecargue la información

64 Intente utilizar la narración para transmitir información, mejorar la experiencia del usuario. sentido de implicación

65 Intenta mostrar información real a los usuarios y no engañar

66 Simplifica la interfaz a medida que los usuarios se familiaricen con ella

67 Intenta use la información de visualización del usuario en un tono único

68 Agregue alguna información rápida al formulario para reducir la posibilidad de errores

69 Finalmente, use redacción simple para transmitir la información principal, con menos tonterías

Aunque estos 69 principios de diseño son específicos del diseño web, algunas partes son igualmente válidas en el diseño de productos móviles.

Reimpreso de:

/Especificaciones de diseño de UI: ¿Cómo construir el terminal web?

1. El valor de las especificaciones de diseño del lado web

2. ¿Qué incluyen las especificaciones de diseño del lado web?

3. especificaciones de diseño

4. Principios de diseño de las especificaciones de diseño web

5 Controles de componentes de las especificaciones de diseño web

6. > p>

7. Salida en equipo de las especificaciones de diseño del lado web