Indique el contenido del panel.
Elegir el cajón al ver el contenido principal aún ayuda a la tarea.
Cajón Sistema de diseño
Abra contenido secundario manteniendo el contexto de la pantalla principal.
Contenido de la lista
Progreso de la revisión
01
Estructura y significado
Comparar información y presentación en contexto de uso.
02
Interacción y usabilidad
Pruebe la operación, cambie el estado y continúe trabajando.
03
Completa la experiencia
Busque detalles que sean fáciles de pasar por alto al poner en uso el diseño.
El progreso se guarda automáticamente en este navegador.
GUÍA
Cómo revisar
EJEMPLOS
Ejemplos de uso
Indique el contenido del panel.
El panel "Detalles del pedido" se abre a la derecha, la lista de pedidos permanece en la parte posterior.
Variantes y casos de uso
Dirección de apertura del panel
Elija el borde de apertura en relación con el contenido y mantenga el destino consistente entre pantallas.
Pruebe el panel en computadoras de escritorio y dispositivos móviles; El nombre y el botón de cerrar permanecen a la vista.
Ejemplo Los detalles del registro se abren a la derecha; El filtro móvil se abre desde abajo.
Capa de fondo y enfoque.
Determina si el cajón bloquea el contenido detrás de él; El cajón modal mantiene la atención en el interior.
Utilice Tabulador, Escape y fondo; Cuando está cerrado, el foco vuelve al botón de apertura correcto.
Ejemplo Cierra el cajón de Mensajes con Escape y luego céntrate en el botón Mensajes.
Diseño de paneles
Separe el inicio, el contenido de desplazamiento y la acción final para que aún se puedan manipular paneles largos.
Pruebe contenido extenso y teclados móviles; El botón de confirmación no se pierde de vista.
Ejemplo El título del filtro permanece en la parte superior, la lista de desplazamiento separada y el botón Aplicar en la parte inferior.