UI/UX y componentes en el desarrollo móvil: qué son, tipos y cómo usarlos

Sistemas de diseño: Material Design y Human Interface Guidelines

Cada plataforma ofrece su propio conjunto de reglas y componentes. Para Android, esto es Material Design, desarrollado por Google en 2014. Material Design utiliza la metáfora del material físico — capas, sombras (Elevation), transiciones animadas y diseños adaptativos. Los principios clave incluyen jerarquía mediante elevación, movimiento significativo y adaptabilidad a diferentes factores de forma. Recomendamos explorar Material Design 3 (Material You) — la última versión con tema dinámico y colores personalizados.

Apple ofrece Human Interface Guidelines (HIG) — un conjunto de reglas para iOS, iPadOS, macOS, watchOS y tvOS. HIG enfatiza la tipografía clara (San Francisco), Safe Area para tener en cuenta el Notch y Dynamic Island, navegación basada en gestos y consistencia. A diferencia de Material Design, HIG no usa "capas" ni Elevation — en su lugar, utiliza desenfoque (vibrancy), sombras y separadores sutiles. La documentación completa de HIG se actualiza regularmente con nuevas versiones de iOS.

En IT Sectr, utilizamos ambos sistemas de diseño según la plataforma del cliente. Para proyectos multiplataforma con Flutter, desarrollamos un sistema de diseño unificado que combina las mejores prácticas de Material Design y HIG. Este enfoque preserva una UX nativa en cada plataforma sin duplicación de código.

Frameworks declarativos de UI: SwiftUI y Jetpack Compose

El enfoque tradicional para construir UI es el diseño imperativo mediante XML (Android) o Interface Builder / código (iOS). La alternativa moderna son los frameworks declarativos, donde el desarrollador describe cómo debe verse la interfaz en cada estado, y el framework se encarga de las actualizaciones.

Jetpack Compose (Android)

Jetpack Compose es un toolkit moderno de Google para construir UI nativa en Kotlin. En lugar de diseños XML, se utilizan funciones componibles de Kotlin (@Composable). Compose es completamente declarativo: cuando los datos cambian, solo se redibujan las partes modificadas de la pantalla. Ejemplo de una pantalla simple con texto y un botón:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI es el framework declarativo de Apple presentado en 2019. Funciona en todas las plataformas Apple (iOS, iPadOS, macOS, watchOS, tvOS) a través de una API unificada. SwiftUI utiliza estructuras View, propiedades @State y @Binding para la gestión de datos, y modificadores para el estilo. El equivalente del ejemplo anterior en SwiftUI:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Flutter de Google utiliza su propia biblioteca de widgets. Todo en Flutter es un widget — desde el padding hasta una pantalla completa. Los widgets se dividen en StatelessWidget (inmutables) y StatefulWidget (con estado). Los contenedores básicos son Container, Row, Column, Stack. Flutter no utiliza componentes nativos de la plataforma — dibuja todo a través de Skia Engine, lo que garantiza una apariencia consistente tanto en Android como en iOS.

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Componentes nativos de UI para Android y iOS

A pesar de la expansión de los frameworks declarativos, comprender los componentes nativos sigue siendo importante para mantener proyectos heredados y realizar personalizaciones profundas.

Navegación

La navegación en Android se basa en Activity (pantallas de actividad) y Fragment (fragmentos dentro de una Activity). Jetpack Navigation Component simplifica las transiciones entre pantallas mediante un grafo de navegación. En iOS, la navegación se implementa a través de NavigationController — una pila de controladores con transiciones animadas. Tab Bar y Bottom Navigation permiten cambiar entre las secciones principales de la aplicación. Drawer (menú lateral) y Toolbar/ActionBar se utilizan para acciones adicionales. Android Navigation Component se recomienda para todos los proyectos nuevos.

Listas

Para mostrar grandes cantidades de datos, Android utiliza RecyclerView — un contenedor eficiente con reutilización de ViewHolder. Los equivalentes en iOS son UITableView (listas verticales) y UICollectionView (cuadrículas). Jetpack Compose ofrece LazyColumn y LazyVerticalGrid, mientras que SwiftUI proporciona List y LazyVStack/LazyHStack. La ventaja clave de los componentes Lazy es que renderizan solo los elementos visibles.

Diseños y posicionamiento

El sistema de vistas de Android ofrece varios contenedores de diseño: ConstraintLayout (sistema flexible de restricciones), LinearLayout (disposición lineal), RelativeLayout (posicionamiento relativo), FrameLayout (superposición de capas). En iOS, Core Auto Layout utiliza un sistema de restricciones (NSLayoutConstraint) para describir la posición de los elementos. SwiftUI y Flutter utilizan VStack/HStack/ZStack y Row/Column/Stack respectivamente.

Unidades de medida y diseño responsive

Los componentes de UI de dispositivos móviles se muestran teniendo en cuenta diferentes densidades de píxeles. Para que la interfaz se vea igual en todas las pantallas, se utilizan unidades independientes de densidad.

Las densidades de pantalla se clasifican como: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Al preparar imágenes, debe crear recursos para todas las densidades: icon.png, icon_hdpi.png, icon_xhdpi.png, etc. Los formatos vectoriales (VectorDrawable en Android, SF Symbols en iOS) resuelven el problema de múltiples recursos rasterizados.

En IT Sectr, utilizamos un factor de escala para exportar iconos desde Figma: exportamos a 1x, 2x, 3x para iOS y mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi para Android. Esto garantiza una visualización nítida en todos los dispositivos, incluidas tabletas y teléfonos plegables.

Conceptos modernos de UI: Dark Mode, Safe Area, Accesibilidad

Los componentes de UI de aplicaciones móviles modernas deben admitir una serie de estándares, sin los cuales la experiencia del usuario sería incompleta.

Dark Mode / Light Mode

Dark Mode (modo oscuro) es una opción obligatoria en las aplicaciones modernas. Material Design 3 e iOS 13+ ofrecen soporte integrado para el tema oscuro. Es importante no invertir los colores, sino usar paletas de colores separadas: fondo oscuro, texto claro, contraste reducido para elementos secundarios. El cambio automático se puede vincular al tema del sistema del dispositivo.

Safe Area y soporte para Notch / Dynamic Island

Los iPhones modernos tienen un Notch (recorte para la cámara frontal) y Dynamic Island. Los dispositivos Android también tienen recortes y esquinas redondeadas (Corner Radius). Safe Area es el área de la pantalla que está garantizada libre de elementos del sistema (barra de estado, indicador de inicio), barra de navegación y recortes. iOS aplica automáticamente Safe Area Insets; Android requiere verificación explícita mediante WindowInsets o DisplayCutout.

Accesibilidad (a11y)

Accesibilidad garantiza que la aplicación sea utilizable por personas con discapacidades. Requisitos clave: soporte para TalkBack (Android) y VoiceOver (iOS), contentDescription correcto para ImageView, contraste de color suficiente (mínimo 4.5:1 para texto), soporte de Dynamic Type (iOS) para escalado de fuentes, navegación sin visión y alternativas a gestos. WCAG 2.1 es el estándar internacional de accesibilidad.

Globalización y localización (i18n / l10n)

Internacionalización (i18n) es preparar la aplicación para admitir múltiples idiomas y formatos regionales. Localización (l10n) es traducir cadenas, fechas, monedas y características culturales. Android utiliza directorios de recursos (values-ru, values-de), iOS utiliza Localizable.strings y XLIFF. Flutter admite flutter_localizations con archivos de traducción ARB.

Gestos e interacción

La interacción táctil incluye muchos gestos: Tap (toque), Long Press (pulsación larga), Swipe (deslizar), Pinch-to-Zoom (pellizcar para ampliar), Pull-to-Refresh (deslizar para actualizar), Drag-and-Drop (arrastrar y soltar). Android utiliza GestureDetector, iOS utiliza UIGestureRecognizer. iOS también admite 3D Touch (Force Touch) y Haptic Touch con retroalimentación háptica a través del Taptic Engine.