Directrices para vista de lista y vista de cuadrícula
[Este artículo contiene información específica de las aplicaciones para UWP y Windows 10. Para instrucciones sobre Windows 8.1, descarga el PDF sobre las directrices para Windows 8.1].
Las listas proporcionan formas coherentes y optimizadas para entradas táctiles para mostrar e interactuar con el contenido de aplicaciones basados en colecciones. Los controles de vista de lista y vista de cuadrícula pueden ayudarte a mostrar listas de manera eficaz. Con los controles de vista de lista y vista de cuadrícula, puedes clasificar elementos y asignar encabezados de grupo, arrastrar y soltar elementos, mantener el contenido y reordenar los elementos.
Vista de lista o de cuadrícula?
Aunque las vistas de cuadrícula y de lista tienen funciones similares, sus usos son distintos.
Las vistas de listas se recomiendan para:
- Mostrar colecciones de contenido que son principalmente texto.
- Navegación por una colección única o por categorías de contenido.
- Creación del panel maestro en la vista maestro y detalles. Maestro y detalles es el patrón que se suele usar en aplicaciones de correo electrónico, en las que un panel tiene una lista de elementos seleccionables, mientras que el otro panel tiene una vista detallada del elemento seleccionado. Consulta elegir el patrón adecuado en este artículo si quieres ver un ejemplo de esta vista.
El diseño de lista tiene encabezados de grupo y muestra una sola columna, se lee de arriba hacia abajo y se desplaza de forma vertical.
.png "Ejemplo de una vista de lista con cuatro tipos de unidades principales")
Las vistas de cuadrículas se recomiendan para:
- Mostrar colecciones de contenido que son principalmente imágenes.
- Se vayan a mostrar bibliotecas de contenido. Consulta elegir el patrón adecuado en este artículo si quieres ver un ejemplo de esta vista.
- Se vaya a formatear las dos vistas de contenido asociadas con el zoom semántico.
El diseño de cuadrícula permite movimientos panorámicos verticales y los elementos se disponen en un orden de lectura de izquierda a derecha y de arriba abajo.
.png "Ejemplo de diseño de una vista de cuadrícula")
Elige el patrón de adecuado
Las listas se usan para mostrar bibliotecas de contenidos, datos principales/de detalles o datos estáticos.
Biblioteca de contenido
Usa una biblioteca de contenido para mostrar una colección o biblioteca de contenido. Esto se suele usar para presentar elementos multimedia como imágenes y vídeos. En una biblioteca de contenido, los usuarios esperan poder presionar un elemento para invocar una acción.
.png "Ejemplo de una biblioteca de contenido")
Datos maestros/de detalles
Al usar un patrón maestro/de detalles, puedes usar una vista de lista para organizar el panel maestro. El panel maestro muestra una lista de elementos que pueden seleccionarse. Cuando un usuario selecciona un elemento en el panel maestro, se muestra información adicional sobre el elemento seleccionado en el panel de detalles. A menudo, el panel de detalles contiene una vista de cuadrícula.
.png "Ejemplo de un patrón de maestro y detalles")
Es posible encadenar varias listas para crear jerarquías de maestro y detalles complejas. Para obtener más información, consulta el patrón de maestro/detalles.
Datos estáticos
Los datos estáticos se usan únicamente para presentar contenido no interactivo, dado que la mayoría de los tipos de interactividad están deshabilitados. Esto es útil para colecciones de elementos que son de solo lectura y que no se pueden activar ni se puede navegar hasta ellas.
Modo de selección
Este modo permite a los usuarios seleccionar y realizar acciones en los elementos. Se puede invocar a través de un menú contextual, mediante el uso de CTRL + clic o MAYÚS+clic en un elemento, o girando un destino de un elemento en una vista de galería.
Existen tres modos de selección diferentes:
- Único: el usuario puede seleccionar un solo elemento a la vez.
- Múltiple: el usuario puede seleccionar varios elementos sin usar un modificador.
- Extendido: el usuario puede seleccionar varios elementos con un modificador, por ejemplo, manteniendo presionada la tecla MAYÚS.
Cuando el modo de selección está activado, aparecen casillas junto a cada elemento de lista y pueden aparecer acciones en la parte superior o inferior de la pantalla.
Al tocar en cualquier parte de un elemento, este se selecciona. Tocar sobre la acción de la barra de comandos afecta a todos los elementos seleccionados. Si no se selecciona ningún elemento, las acciones de la barra de comandos deberían estar desactivadas, excepto "Seleccionar todo".
El modo de selección no tiene un modelo de cierre del elemento por cambio de foco; al presionar fuera del marco en el que el modo de selección está activo, no se cancelará el modo. De este modo, se evita la desactivación fortuita del modo. Al hacer clic en el botón Atrás se descarta el modo de selección múltiple.
Debe haber una confirmación visual al seleccionar una acción. Muestra animaciones cuando sea conveniente. Considera la posibilidad de mostrar un cuadro de diálogo de confirmación para determinadas acciones, especialmente las acciones destructivas como la eliminación.
El modo de selección se limita a la página en la que está activo y no puede afectar a los elementos fuera de esa página.
El punto de entrada para el modo de selección debe estar yuxtapuesto en relación con el contenido sobre el que incide.
Para obtener recomendaciones sobre la barra de comandos, consulte Directrices para barras de comandos.
Modo de selección múltiple
El modo de edición permite manipular los elementos de línea. Se puede invocar con el botón de modo de edición de la barra de comandos o mediante un menú contextual.
Un punto de entrada para el modo de selección múltiple debe colocarse en la lista que modifica.
Al hacer clic en el botón Atrás se descarta el modo de selección múltiple. Al especificar el modo de edición, se eliminan las barras de comandos. Si hay otros marcos visibles cuando se accede al modo de selección, dichos marcos se atenúan.
El modo de edición no tiene un modelo de cierre del elemento por cambio de foco; al pulsar fuera del marco en el que el modo de selección está activado, no se cancelará el modo. De este modo, se evita la desactivación fortuita del modo.
El modo de edición se limita a la página en la que está activado y no puede afectar a los elementos de fuera de esa página.
Recomendaciones
- Los elementos en que se encuentren en la misma vista de lista o cuadrícula deben tener el mismo comportamiento.
- Si tu lista está dividida en grupos, usa el zoom semántico, que facilita a los usuarios la navegación por los contenidos agrupados.