Saltar al contenido principal

Vista de árbol

Descripción general​

Una vista de árbol es una lista jerárquica de elementos cuya relación entre sí es principal-secundario. Las vistas de árbol ayudan a navegar por estructuras de datos complejas.

Cuándo se debe utilizar​

  • Para ayudar a navegar por las estructuras del sistema de archivos.
  • Para organizar grandes cantidades de información de manera jerárquica.

Cuándo no se debe utilizar​

  • Como navegación principal. En su lugar, utilice pestañas o la navegación lateral.
  • Para jerarquías horizontales con solo uno o dos niveles de sangría. En su lugar, utilice la vista de tabla.
  • Para revelar contenido que los usuarios pueden leer de forma selectiva. En su lugar, use el acordeón.

Anatomía​

Imagen que ilustra la anatomía del patrón de vista de árbol.

El patrón de vista de árbol consta de los siguientes elementos:

  1. Nodo de rama. Elemento de lista de vista de árbol que contiene al menos un nodo secundario.
  2. Ícono de rama. Ícono que representa la rama. La mayoría de las veces, aparece en forma de carpeta o algo con un significado similar.
  3. Nodo secundario. Elemento de lista de vista de árbol que no tiene nodos secundarios y puede aparecer en cualquier nivel de la vista de árbol.
  4. Ícono de elemento secundario. Ícono que representa el nodo de hoja. Diferentes nodos secundarios pueden tener íconos distintos.

Pautas generales​

Apile los nodos con 0 px entre ellos para mantener un espaciado y una alineación coherentes entre todos los nodos.

Tamaño​

Una vista de árbol tiene tres tamaños diferentes para adaptarse al tamaño de la fuente, la sangría, la altura de la fila y el tamaño de los íconos.

Imagen que ilustra los diferentes tamaños del patrón de vista de árbol, incluidos pequeño, regular y grande. De izquierda a derecha: tamaños de vista de árbol pequeño, regular y grande.

Uso de íconos​

Si usa íconos en una vista de árbol, le recomendamos que los use en todas partes para fomentar la coherencia.

Si utiliza íconos, colóquelos en todos los nodos.
No mezcle nodos de solo texto con otros que incluyan un ícono. Esto puede causar problemas de alineación y legibilidad.

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Contenido desbordado​

Cuando los rótulos dentro de un elemento de vista de árbol excedan un espacio determinado, le recomendamos que utilice el truncamiento. Los elementos truncados aparecen con puntos suspensivos ... que representan caracteres truncados en una cadena de texto. Los elementos truncados deben incluir una descripción emergente que muestre todo el texto.

Los equipos también tienen la opción de ajustar el texto.

Imagen que ilustra el contenido de desbordamiento en un patrón de vista de árbol. Los elementos truncados deben incluir una descripción emergente para mostrar todo el texto, el nombre o la frase que representan los puntos suspensivos.

Accesibilidad​

  • Debería ser posible abrir y cerrar ramas con las teclas Left Arrow y Right Arrow.
  • Para los usuarios de lectores de pantalla, todos los nodos de árbol están contenidos o son propiedad de un elemento con el rol tree. Cada elemento que sirve de nodo de árbol tiene un rol treeitem. El uso de este marcado garantiza que los usuarios de lectores de pantalla reciban los niveles para que sepan en qué nivel están dentro de la jerarquía.
  • También se debe usar aria-expanded junto con los elementos expandibles/contraíbles para que se transmita su estado.

Para conocer aspectos adicionales sobre accesibilidad, consulte el patrón de vista de árbol del World Wide Web Consortium (W3C).

Capacidad de ser responsive​

Para los dispositivos móviles, se recomienda usar una vista de árbol grande para proporcionar más superficie táctil.

Tematización​

De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.

Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.

Más información sobre la tematización con tokens de diseño

Investigación que lo avala​

La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron lo que aseguradoras (no clientes) en han creado, así como las implementaciones de clientes de nuestro diseño existente, y revisaron las fortalezas y debilidades de cada versión. Por ejemplo, ¿qué nivel de adaptabilidad tiene en dispositivos móviles? ¿Qué datos se recopilan y organizan? ¿Cómo se utilizan los íconos? Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.

Recursos​

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)