5. Lineamientos de Diseño

Esta sección define las reglas y componentes que deben seguirse para diseñar e implementar interfaces de usuario modernas, accesibles y coherentes usando Material Design 3 con Jetpack Compose, de acuerdo con los lineamientos oficiales de Google.

---

5.1 Principios generales de UI/UX

• Usabilidad y simplicidad por encima de estética compleja.
• Consistencia visual en todas las pantallas.
• Uso claro del color, tipografía y jerarquía visual.
• Accesibilidad para personas con discapacidades (a11y).
• Adaptación a diferentes tamaños de pantalla (responsive).

---

5.2 Uso de Material Design 3 (Material You)

Jetpack Compose facilita la implementación de Material 3 con los siguientes módulos:

implementation("androidx.compose.material3:material3:1.2.0")
implementation("androidx.compose.material3:material3-window-size-class:1.2.0")

Documentación oficial: https://m3.material.io

---

5.3 Temas y esquemas de color

• Toda app debe tener un tema centralizado.
• Usar colorScheme dinámico si es posible.
• Implementar MaterialTheme como wrapper global.

MaterialTheme(
    colorScheme = dynamicDarkColorScheme(context),
    typography = AppTypography,
    shapes = AppShapes
) {
    AppContent()
}

---

5.4 Componentes visuales recomendados

Componente	Uso recomendado
TopAppBar	Encabezados de pantallas
NavigationDrawer	Menú lateral de navegación
Card	Agrupación visual de contenidos
OutlinedTextField	Inputs y formularios
Snackbar	Mensajes de alerta no bloqueantes
FAB	Acción primaria flotante
BottomNavigation	Navegación principal en pestañas

Todos deben ser implementados con Material 3 (androidx.compose.material3.*).

---

5.5 Tipografía

• Utilizar Typography definida en MaterialTheme.
• Personalizar con:

val AppTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 22.sp
    ),
    bodyMedium = TextStyle(
        fontSize = 16.sp
    )
)

---

5.6 Iconografía y recursos gráficos

• Usar íconos de Material: Icons.Default.Star, Icons.Outlined.Close, etc.
• Los recursos gráficos deben ser vectoriales (.xml) o SVG convertidos a Compose.
• Las imágenes deben tener alternativa de texto (contentDescription) para accesibilidad.

---

5.7 Reglas de diseño accesible (a11y)

• Tamaño mínimo de fuente: 12sp
• Espacio entre elementos táctiles: 48dp
• Uso de contraste de color adecuado
• Soporte para TalkBack y lectores de pantalla
• Adaptación a tamaño de fuente del sistema (Text(scale = true))

---

5.8 Diseño adaptativo (responsive)

• Uso de WindowSizeClass para detectar pantallas compactas, medianas y expansivas.
• Usar BoxWithConstraints, LazyColumn, LazyGrid, Modifier.weight() para layouts flexibles.

val windowSize = calculateWindowSizeClass(activity = activity)

---

5.9 Animaciones y microinteracciones

• Utilizar APIs de Compose como AnimatedVisibility, Crossfade, rememberInfiniteTransition.
• Evitar animaciones innecesarias o muy agresivas.
• Las animaciones deben tener fallback si el sistema las tiene deshabilitadas.

---

5.10 Pruebas de UI

• Validar que todos los elementos sean navegables con teclado/gestos.
• Usar Compose Testing para automatizar validación de componentes.

composeTestRule
    .onNodeWithText("Guardar")
    .performClick()

---

Una implementación coherente y completa de Material Design 3 no solo mejora la experiencia del usuario, sino que refuerza la identidad visual de la marca y facilita el mantenimiento del producto a largo plazo.