Saltar al contenido principal

Chips

Descripción general​

El chip de interfaz de usuario muestra información muy breve o etiquetas de una manera visualmente atractiva y compacta. Se suele usar para representar categorías, filtros o selecciones en las interfaces de usuario.

Para obtener una guía detallada sobre cuándo utilizar este componente, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.

Árbol de decisiones de componentes de la interfaz de usuario para chips

Cuándo se debe utilizar​

Use el patrón de chip cuando sea necesario representar visualmente información específica, como esta:

  • Sistemas de etiquetado
  • Opciones de filtrado
  • Selecciones en una interfaz de selección múltiple
  • Categorización del contenido

Anatomía​

Anatomía de un componente chip de interfaz de usuario

  1. Contenedor que indica a simple vista diferentes tipos de interactividad y funcionalidad.
  2. Muestra opcional de miniatura, avatar, ícono o colores para distinguir entre categorías.
  3. Rótulo para identificar el chip.
  4. Ícono de eliminación o desplegable opcional para eliminar un chip o activar un menú de selección.

Pautas generales​

  • Debe haber una relación clara entre los chips y el contenido o la tarea que representan.
  • El propósito de los chips de interfaz de usuario es simplificar las tareas o que el contenido sea más fácil de ordenar. Use chips con moderación y solo cuando sea necesario para no saturar la interfaz.
  • Pruebe el componente chip en varios dispositivos y tamaños de pantalla para garantizar una renderización y una facilidad de uso coherentes.

Pautas de interacción​

Imagen que ilustra los 4 tipos de chip: entrada, elección, filtro y acción

  1. Chips de entrada: Los chips de entrada muestran la información que el usuario ha introducido. Permiten la entrada del usuario y dejan en claro esa entrada convirtiendo el texto en un chip. Estos chips incluyen un ícono X para que los usuarios eliminen sus selecciones.
  2. Chips de elección: Los chips de elección permiten la selección simple o múltiple de un conjunto de opciones de entrada en un formulario. Debe haber un mínimo de dos opciones entre las que los usuarios puedan seleccionar. Los chips de elección pueden servir como alternativa a los botones de conmutación, los botones de selección y los menús de selección única.
  3. Chips de filtro: Los chips de filtro usan palabras relevantes para filtrar ciertos tipos de contenido. Pueden servir como alternativa a los botones de conmutación o las casillas de verificación.
  4. Chips de acción: Desencadenan una acción. Puede usar un ícono inicial opcional para agregar una descripción visual de la copia en el rótulo.

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.

Inclusión de un rótulo​

  • Todos los tipos de chips deben incluir un rótulo para identificarlos.
  • Los rótulos deben ser concisos y descriptivos para transmitir el significado a simple vista.
  • Utilice una sola línea de texto para los rótulos de chips. Evite usar rótulos de texto largos que se ajusten a una segunda línea.
El rótulo de texto debe ser corto.
No utilice rótulos de texto largos.

Accesibilidad​

  • Asegúrese de que el flujo esté diseñado de manera que resulte accesible para los usuarios con discapacidades, incluidos quienes requieren compatibilidad con lectores de pantalla y navegación por teclado.
  • Cuando utilice chips con muestras de color e íconos, asigne un nombre al color o al ícono en el rótulo de texto. No confíe solo en el color para transmitir el significado.

Capacidad de ser responsive​

Imagen que ilustra cómo el patrón de chip de la interfaz de usuario se adapta a factores de forma más pequeños, como los dispositivos móviles

El patrón de chip de la interfaz de usuario está diseñado de tal manera que se requieren cambios mínimos cuando se usa en una tablet o un dispositivo móvil. Los chips en el patrón pueden ajustarse a la siguiente línea a medida que el ancho de la pantalla se reduce.

  1. Ajuste de chips en dispositivo móvil. Los que ya no caben en el espacio pasan a una segunda línea.
  2. Chips con espacio suficiente para permanecer en una línea.

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

Componentes​

Los chips de entrada tienen los siguientes componentes relacionados:

Patrones​

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)