Barra lateral vs. Cajón
Una barra lateral se queda fija en la página. Un panel lateral se desliza por un momento y puede tapar o empujar la página.
Usa una barra lateral para herramientas o enlaces que las personas usan con frecuencia cuando hay espacio. Usa un cajón para tareas menos comunes o pantallas pequeñas, y haz que sea fácil de cerrar.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Sidebar Source List
Una Sidebar Source List es una lista en forma de árbol a un lado de la ventana. La fuente o grupo elegido decide qué aparece en la zona principal.
Una biblioteca de fotos enumera Library, Favorites, álbumes y grupos compartidos. La colección elegida llena el área de detalles.
- Úsalo cuando
- Úselo cuando grupos o lugares estables controlen la vista principal y las personas regresen a ellos con frecuencia mientras trabajan.
- No lo uses cuando
- Evítalo para una lista de comprobación de un solo uso o una lista de acciones corta y plana. Cada categoría debería cambiar de verdad el contenido principal.
- Nombre usado en código
NSOutlineView source-list style / SwiftUI NavigationSplitView
Panel lateral
Un panel lateral se desliza desde un borde de la pantalla. Parte de la página detrás suyo sigue visible.
Seleccione un pedido para abrir sus detalles desde la derecha. La lista de pedidos permanece visible detrás de ellos.
- Úsalo cuando
- Úsalo para detalles o una segunda tarea más pequeña cuando mantener el lugar actual ayuda.
- No lo uses cuando
- Nunca comprimas un flujo de trabajo largo con muchos pasos en un cajón estrecho.
- Nombre usado en código
Dialog + edge positioning
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | Úselo cuando grupos o lugares estables controlen la vista principal y las personas regresen a ellos con frecuencia mientras trabajan. | Evítalo para una lista de comprobación de un solo uso o una lista de acciones corta y plana. Cada categoría debería cambiar de verdad el contenido principal. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| Panel lateralDrawer | Úsalo para detalles o una segunda tarea más pequeña cuando mantener el lugar actual ayuda. | Nunca comprimas un flujo de trabajo largo con muchos pasos en un cajón estrecho. | Dialog + edge positioning |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Sidebar Source List (Sidebar Source List), Panel lateral (Drawer) para nuestro flujo de usuario real. Usa esta regla: Una barra lateral se queda fija en la página. Un panel lateral se desliza por un momento y puede tapar o empujar la página. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.