Diseño responsive y adaptativo
¿Está buscando códigos y detalles técnicos? Consulte Desarrollo responsive y adaptativo.
El negocio de hoy en día es a menudo móvil. Los automóviles son oficinas “en movimiento”. Jutro tiene en cuenta esto mediante el uso de una solución híbrida para crear aplicaciones.
Primero, algunas definiciones.
¿Qué implica la capacidad de las aplicaciones de ser responsive?
Las composiciones y disposiciones de diseños responsive se ajustan automáticamente para adaptarse al tamaño de la pantalla o la ventana del navegador. La misma interfaz de usuario que se muestra en una computadora portátil también se mostrará en una tablet o teléfono móvil. Esto garantiza una calidad y un acceso a la información coherentes en todos los dispositivos.
¿Qué implica el diseño adaptativo de las aplicaciones?
El diseño adaptativo proporciona composiciones y disposiciones para diferentes puntos de vista. Se crean composiciones y disposiciones de diseño específico para varios dispositivos, como computadoras portátiles, tablets (verticales y horizontales) y teléfonos móviles. El sistema detecta qué factor de forma (punto de interrupción) es necesario y renderiza una composición y disposición que coincide con él. Esto optimiza la experiencia del usuario. En algunos casos, la información puede variar ligeramente según los diferentes factores de forma. Por ejemplo, puede ser menos detallada en un teléfono móvil.
A diferencia de los diseños responsive, que utilizan un solo diseño flexible que puede estirarse o contraerse para adaptarse a la pantalla, los diseños adaptativos tienen varios diseños que se asignan a tamaños de composiciones y disposiciones fijas y predefinidas.
¿Cómo se utilizan estos dos métodos en Jutro?
En Jutro, se utilizan ambos métodos para optimizar la experiencia del usuario. Hay componentes diseñados con capacidad de ser responsive y composiciones y disposiciones con puntos de interrupción definidos para ayudar a los diseñadores y desarrolladores a acelerar la ejecución del producto.
Recomendaciones y elección del plano de planta
Para las aplicaciones en la nube de seguros de propiedades y accidentes, la tendencia sigue siendo los dispositivos móviles primero. Hay un matiz en esa orientación. Las aplicaciones de productividad y TI requieren una gran cantidad de datos y mano de obra y, por lo tanto, se utilizan con mayor frecuencia en sistemas de computadoras portátiles o de escritorio. Suelen ser aplicaciones B2B (entre negocios). Los planos de planta que están optimizados para estos tipos de aplicaciones incluyen las formas L, C y r.
Las aplicaciones que los clientes de las compañías de seguros de propiedades y accidentes utilizan para enviar el primer aviso del siniestro, ver el estado de los siniestros, así como adquirir y revisar pólizas, a menudo se ven en dispositivos móviles. Los agentes de campo de las aseguradoras también utilizan dispositivos móviles, como tablets. El plano de planta de forma en I está optimizado para tablets y dispositivos móviles.
Para obtener más información, consulte nuestra página acerca de las pautas de planos de planta.
Inicio
Se recomienda que los gerentes de producto comiencen por evaluar dónde utilizarán principalmente la aplicación los usuarios finales. Qué tipo de información se presentará y qué tareas deberá realizar el usuario final. Esto guiará las decisiones sobre cómo abordar la capacidad de ser responsive y la adaptabilidad. El diseñador o consultor de UX puede ayudarlo a identificar el perfil de quienes utilizará la aplicación y el contexto de su trabajo.
Cómo se crean los componentes de Jutro
- Responsive: El componente se ajusta al tamaño de la pantalla automáticamente mediante consultas de medios.
- Adaptativo: El componente no se ajusta al tamaño de la pantalla. En cambio, debe configurarlo utilizando las propiedades de punto de interrupción. El componente se renderiza de forma diferente según el dispositivo.
- Fijo: El componente o la página no se ajustan al tamaño de la pantalla.
Ejemplo
A continuación, se muestra un ejemplo de cómo se ve la misma aplicación en tres factores de forma diferentes.
Utilizamos nuestra empresa inventada llamada “FutureState” para varios flujos de trabajo con el fin de encontrar la mejor manera de optimizar y probar Jutro. Este flujo de trabajo es para seguros basados en el uso. Notará que los tres factores de forma tienen la misma información.
Recomendaciones de flujo de trabajo
- Seleccione un plano de planta en función de los diferentes tamaños de pantalla que se utilizarán.
- Diseñe primero para teléfonos y luego para pantallas más grandes. A esto se le llama diseño “mobile-first” porque se le de prioridad al diseño de dispositivos móviles.
- Si elige componentes con capacidad de ser responsive, colóquelos en diferentes factores de forma disponibles en Jutro Design System para ver cómo se comportan y cómo se ven.
- Elija los diferentes componentes que necesite y describa cómo interactúa el usuario con ellos.
- Tenga en cuenta diferentes flujos de trabajo en diferentes dispositivos. Por ejemplo, un campo que tiene un rótulo a la izquierda se convertiría en un campo con un rótulo encima en dispositivos móviles.
- Verifique la factibilidad de su diseño con desarrollo. Modifique su diseño si fuera necesario hasta que satisfaga las necesidades de los usuarios finales, sea técnicamente factible y rentable de desarrollar.
- Revise su diseño con el PM o el responsable del producto.