Saltar al contenido principal

Descripción general de los patrones

¿Qué son los patrones de Jutro?​

Los patrones de Jutro son soluciones de prácticas recomendadas para problemas de diseño recurrentes (flujos, comportamientos o interacciones) dentro del mismo producto, familias de productos o productos distintos. Tenga en cuenta que estos son patrones exclusivamente de UX; proporcionan una guía de diseño documentada y no incluyen ningún código ni implementación.

Tienen estas características:

  • Son reutilizables: El mismo patrón, con pocas o ninguna modificación, se puede aplicar a varias situaciones, lo que facilita la coherencia en todas las áreas de uso.
  • Son extensibles: Los patrones están diseñados para un caso de uso común, son fáciles de probar y son adaptables o extensibles a otros casos de uso.
  • Están bien documentados: Los patrones incluyen situaciones de uso bien documentadas, qué hacer y qué no hacer, y pautas precisas sobre cómo usar y crear patrones.
  • Son prácticas recomendadas fáciles de crear: Utilice patrones existentes como plantillas para crear nuevos, lo que elimina la necesidad de crear desde cero. Los patrones existentes sirven como plantilla para diseñar y construir las prácticas recomendadas en accesibilidad, adaptabilidad, localización y análisis.

Los patrones de Jutro pueden ser de los siguientes dos tipos:

  • Patrones centrados en la industria de seguros de propiedad y accidentes: Patrones que resuelven problemas recurrentes específicos de la industria. Por ejemplo, agregar un conductor y flujos de pago.

  • Patrones de UX neutros para resolver problemas comunes de usabilidad: Patrones que resuelven problemas que son universales para cualquier elemento o flujo de la interfaz de usuario. Por ejemplo, validación, mensajería y plazos.

Diferencia entre patrones y componentes​

Si no está familiarizado con los patrones, estos son algunos criterios que lo ayudarán a distinguir entre patrones y componentes:

COMPONENTESPATRONES
¿Qué son?Elementos individuales definidos o los componentes fundamentales más básicos de una interfaz de usuario.Combinaciones de componentes atómicos en un “trabajo por realizar”.
TiposAtómicos: componentes fundamentales más simples. Por ejemplo, botones. Moleculares: combinación de átomos. Por ejemplo, los calendarios.Flujos de proceso: por ejemplo, el flujo “agregar un conductor”. Comportamientos: por ejemplo, estados deshabilitados. Interacciones: por ejemplo, flujos de búsqueda, plazos.
UsoCombine diferentes componentes para crear un flujo o una página.Están listos para usar (o se pueden personalizar) como flujo o parte de una página.
Casos de usoTodos los casos de uso aprobados por Jutro. No proporcionamos diseños para casos extremos.Están diseñados y desarrollados para casos de uso comunes y se adaptan para otros casos de uso.
Características de configuración baseResponsive, accesible, actualizable, seguridad, localización, i18n, análisis.Responsive, accesible, actualizable, seguridad, localización, i18n, análisis.
SemejanzasBiblioteca de componentes, documentación y paquetes de la biblioteca de componentes Figma.Biblioteca de patrones y documentación Figma
Cuándo se deberían utilizarSe puede utilizar solo según lo definido por el sistema y debe cumplir estrictamente con los diseños y las pautas de Jutro.Se puede aplicar tal cual o utilizar la documentación como orientación para adaptarlo a los casos de uso, en lugar de respetar pautas estrictas.
PersonalizaciónNo se permiten modificaciones de diseño ni de implementación.Están disponibles como paquetes iniciales y deben personalizarse para adaptarlos al caso de uso.
EvoluciónMás lenta debido a la complejidad y la interdependencia implicadas en las pruebas.Evolucionan a un ritmo mucho más rápido, ya que pueden someterse a pruebas como bloques individuales y modificarse en consecuencia.
ResponsabilidadEquipos UX de Jutro, Dev de Jutro, Documentación de JutroUX de Jutro, personalización de productos y patrones de consumo (las características OOTB se verán comprometidas en la personalización)
ColaboradoresUX de Jutro, UX de ProductosUX de Jutro proporciona un conjunto inicial. UX de Productos, BA, gerentes de producto, servicios digitales
On this page