mesa · DucDZ

01

Estructura y significado

Comparar información y presentación en contexto de uso.

Establecer un título para los datos.Asigne nombres de columnas, unidades y relaciones de celda a los encabezados utilizando la estructura de tabla correcta.La presentación consistente de números hace que las comparaciones sean más rápidas que agregar color a cada celda.Ejemplo La columna "Ingresos, VND" está alineada a la derecha y tiene el mismo formato en cada fila.Alinear datos por tipoMantenga constantes las letras, los números, las fechas y el estado; suficiente espacio entre celdas.La alineación y las unidades son consistentes, al mismo tiempo que se mantiene suficiente espacio para no leer mal los datos en dos columnas adyacentes.Encuentre registros cuando sea necesarioIndique el alcance de su búsqueda y mantenga claras las palabras clave y la cantidad de resultados.Indique los campos que se buscan y verifique los datos representados en cada campo, en lugar de simplemente probar el nombre del registro.Muestra el orden en uso.Si se puede ordenar, indique la columna y la dirección de clasificación, soporte para teclado.

02

Interacción y usabilidad

Pruebe la operación, cambie el estado y continúe trabajando.

Asociar la operación con la fila correctaUtilice nombres de usuario que tengan contexto y no solo muestren acciones al pasar el mouse.Al leer nombres de acciones con herramientas de soporte, necesita saber a qué fila pertenece la acción; No hagas de cada botón solo una solución.Mantenga los nombres de los campos en pantallas estrechasPermite el desplazamiento horizontal o el plegado intencionado, sin cortar datos importantes.Si se selecciona el desplazamiento horizontal, mantenga el contexto de la columna y la indicación desplazable; No corte completamente las columnas importantes.Indique la posición en la lista.Si correspondeSi busca paginar, escriba claramente el total, el rango visto actualmente y los botones de transición.Después de cambiar de página, mantenga el título de la tabla y registre el rango de visualización para que los usuarios comprendan la posición en todo el resultado.Distinguir entre carga, vacío y error.Mantener estable la estructura y dar las acciones adecuadas a cada causa.

03

Completa la experiencia

Busque detalles que sean fáciles de pasar por alto al poner en uso el diseño.

Definir el estilo y la densidad de las filasEspecifique alturas de fila, espaciado, separadores e indicadores de selección o desplazamiento para que los datos sigan siendo fáciles de escanear con la densidad deseada.Para tablas con muchas filas, equilibre el escaneo rápido con suficiente espacio de interacción. Pruebe tanto el contenido de la celda de dos líneas como las filas seleccionadas.Filtrar por campos útilesSi hay filtros disponibles, muestre los criterios activos y el alcance de los datos y proporcione una forma de borrarlos y volver a la lista completa.Filtrar y ordenar son dos cosas diferentes; Cambiar el filtro no debería hacer que el usuario pierda la pista del pedido actual.

mesa Sistema de diseño

Estructura y significado

Interacción y usabilidad

Completa la experiencia

Cómo revisar

Establecer un título para los datos.

Ejemplos de uso

Establecer un título para los datos.

Buscar una lista

No se encontraron listas