Pestañas Sistema de diseño

Cambie entre áreas de contenido en el mismo nivel.

7 comprobaciones · 3 grupos de contenido

Contenido de la lista

Progreso de la revisión

Estructura y significado

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

Nombra el contenido de cada pestaña.Utilice etiquetas breves y distinguibles y evite nombres genéricos.Las pestañas coinciden con áreas con el mismo contexto; Las páginas de diferentes niveles deben utilizar la navegación.Ejemplo Los detalles del proyecto incluyen "Descripción general", "Miembros" y "Actividades".Indica la pestaña actualmente seleccionadaCombine una marca o línea de acento con un color para identificar el contenido actual.La pestaña actualmente seleccionada debe estar claramente marcada y vinculada al panel actualmente visible; Un color ligeramente más claro no suele ser suficiente.Vincular pestaña al panelProporcione la función, el nombre y el estado correctos de la herramienta de soporte.Sólo el contenido de la pestaña actual debe participar en la secuencia del teclado; La etiqueta y el estado deben reflejar el panel correcto.

Interacción y usabilidad

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

Comportamiento de desplazamiento por pestañasUtilice las teclas de flecha entre pestaña y pestaña para acceder al contenido.Comentarios al transferir contenidoSi necesita realizar una descarga, mantenga claros el nombre de la pestaña y el estado de espera, no muestre los datos de la pestaña anterior como pestaña nueva.Si el cambio de pestañas tarda en cargarse, indique qué contenido está esperando y evite que los resultados antiguos se confundan con pestañas nuevas.Mantenga la pestaña de accesibilidad en pantallas estrechasPermite el desplazamiento u otra selección sin dejar de reconocer las pestañas abiertas.Pruebe con etiquetas largas y amplíe el texto; Las últimas pestañas aún necesitan una forma de encontrarlas y seleccionarlas sin perder la pista de la pestaña abierta.

Completa la experiencia

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

Utilice un orden de tabulación significativo y estableOrdene las pestañas por su relación o uso común y mantenga ese orden estable en todos los estados de la misma pantalla.Cambiar el orden cuando cambian los datos puede hacer que los usuarios los abran por error; Priorice los arreglos fáciles de recordar.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Nombra el contenido de cada pestaña.

Las pestañas coinciden con áreas con el mismo contexto; Las páginas de diferentes niveles deben utilizar la navegación.

EJEMPLOS

Ejemplos de uso

Nombra el contenido de cada pestaña.

Los detalles del proyecto incluyen "Descripción general", "Miembros" y "Actividades".

Pestañas Sistema de diseño

Estructura y significado

Interacción y usabilidad

Completa la experiencia

Cómo revisar

Nombra el contenido de cada pestaña.

Ejemplos de uso

Nombra el contenido de cada pestaña.

Destino y pestaña actualmente seleccionada

El contenido se carga en pestañas.

Enfocar, seleccionar y no están disponibles

Buscar una lista

No se encontraron listas

Pestañas Sistema de diseño

Estructura y significado

Interacción y usabilidad

Completa la experiencia

Cómo revisar

Nombra el contenido de cada pestaña.

Ejemplos de uso

Nombra el contenido de cada pestaña.

Variantes y casos de uso

Destino y pestaña actualmente seleccionada

El contenido se carga en pestañas.

Enfocar, seleccionar y no están disponibles