it-swarm-es.com

La mejor interfaz de usuario para una tabla HTML.

Con frecuencia necesito mostrar datos tabulares y quiero toda la magia. . . ordenar columnas, paginación, etc. Prefiero usar columnas donde haga clic en el nombre de la columna y la clasificación se realiza para el usuario (generalmente usando JavaScript, aunque es más difícil si también tiene paginación porque clasifica solo los datos en la pantalla o lo recurres por esa columna y luego las vuelves a colocar en la primera página?) pero ¿cómo indico que se ha ordenado? ¿Qué es una buena pista de IU para eso? ¿Cómo deben verse los nombres de columna? Además, me gusta colorear cualquier otro resultado con gris, pero luego veo a alguien con una pantalla con un brillo demasiado alto y no es lo suficientemente gris como para que puedan distinguir las filas, pero si subo la cantidad de gris no hay suficiente contraste para leer cómodamente el texto negro.

¿Cuáles son algunos ejemplos de tablas bien hechas?

6
tooshel

Tradicionalmente, "Ordenar por" se indica mediante flechas arriba/abajo que representan la clasificación ascendente o descendente. Los nombres de las columnas deben tener un mayor nivel de contraste que los valores, como un texto más audaz o un fondo sombreado.

Personalmente, cuando coloreo filas alternas, generalmente me pongo más claro en lugar de más oscuro, porque el efecto se vuelve más pronunciado cuanto más tiempo interactúan los usuarios con la tabla.

Estos son algunos ejemplos excelentes de opciones de diseño de tabla: http://patterntap.com/tap/collection/tables

14
David Perini
  • Ordene los datos en toda la tabla, no solo los datos en la pantalla. Sí, tendrán que comenzar desde la página uno del nuevo orden de clasificación, pero está bien. ¿Esperarías poder entender las cosas si estuvieras ordenando por ID, y luego en la página 10 decidiste ordenar por apellido?
  • Indique que se ha ordenado resaltando el fondo de la celda del encabezado de la tabla en la columna que se está ordenando. Podría ir aún más lejos y resaltar toda la columna. Use flechas para hacerlo aún más obvio (y más accesible): flechas que apuntan hacia la derecha para ordenar, y una flecha que apunta hacia abajo para ordenar, por ejemplo.
  • Los nombres de columna simplemente deben distinguirse como nombres de columna. Tiendo a hacerlos un poco más grandes y audaces que el contenido de la celda de la tabla.
  • Colorea cualquier otro resultado con gris solo si necesitas hacerlo para aumentar la capacidad de escaneo de filas individuales. Si eso es para lo que está diseñando, entonces la compensación de disminuir ligeramente la legibilidad general está bien porque el usuario está escaneando, no leyendo. Y, en última instancia, es imposible diseñar para cada brillo de pantalla, así que asegúrese de elegir un medio feliz y seguir con eso.

No tengo ningún ejemplo inmediato para usted en este momento, pero aquí hay un ejemplo de una tabla que diseñé para mi aplicación web que sigue mis consejos/preferencias anteriores:

image of a table

5
Rahul

Desde una perspectiva puramente visual, consulte http://www.datatables.net/ (complemento para jQuery). La tabla de muestra en la página de inicio ya tiene implementadas las características que menciona.

En cuanto a la tecnología, depende de lo que esté utilizando su tecnología de back-end. Si está ejecutando en un servidor .Net, los controles incluidos en ASP 3.5 y 4 son muy fáciles de usar como lo describe sin la dependencia de jQuery y el complemento.

4
Rob Allen

Echa un vistazo a las rejillas ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-

La mejor interacción de usuario de cualquier marco JS que he visto. Confiamos ampliamente en nuestra aplicación en Marketo.

4
Glen Lipka

Si necesita una cuadrícula de datos con "toda la magia", pruebe dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

Es una de las cuadrículas de JavaScript más poderosas que he visto.

2
Steve E.

Bueno, si quieres ordenar en ambos sentidos, está la clásica flecha arriba/abajo como en Windows Explorer/gnome nautilus, generalmente están en un color más oscuro que la celda.

alt text

1
dierre