Diseño Móvil — Habilidad Completa
Descripción general
Cubre el diseño de iOS y Android: patrones específicos de plataforma, navegación, gestos, tipografía, accesibilidad y tendencias modernas. Fusiona building-native-ui, expo-ui-swiftui, expo-ui-jetpack-compose, engineering-mobile-app-builder, react-native-best-practices, expo-tailwind-setup y native-data-fetching.
1. Directrices de Plataforma (إرشادات المنصة)
1.1 iOS (Human Interface Guidelines)
- Navegación: push/pop (UINavigationController), barra de pestañas, hojas modales
- Tipografía: SF Pro (San Francisco) — New York (serifa) para lectura
- Cuadrícula: cuadrícula de 4pt, márgenes: 16pt (estándar), 20pt (grande)
- Colores: colores del sistema (azul, verde, rojo, naranja, morado, rosa, verde azulado, índigo, gris)
- Objetos táctiles: mínimo 44×44pt
- Gesto de retroceso: deslizar desde el borde izquierdo
- Áreas seguras: notch, indicador de inicio (usa
safe-area-inset)
- Modo oscuro:
UIColor { traitCollection } adaptación del sistema
1.2 Android (Material Design 3)
- Navegación: navegación inferior, cajón de navegación, barra superior de la aplicación, botón de retroceso
- Tipografía: Roboto (sistema), Google Sans (marca)
- Cuadrícula: cuadrícula de 4dp, márgenes: 16dp
- Colores: color dinámico (Material You), paletas tonales
- Objetos táctiles: mínimo 48×48dp
- Botón de retroceso: retroceso del sistema (retroceso predictivo en Android 14)
- Elevación: sombras que representan profundidad y prioridad de interacción
- Efecto de ondulación: retroalimentación táctil en todos los elementos interactivos
1.3 Multiplataforma (React Native / Expo)
- Prueba Expo Go primero para prototipado rápido
- Usa
useWindowDimensions() en lugar de Dimensions.get()
boxShadow para sombras multiplataforma (no shadow/elevation heredados)expo-image para mejor carga de imágenes y SF Symbols- Código específico de plataforma:
.ios.tsx / .android.tsx
2. Navegación Móvil (التنقل)
2.1 Patrones de Navegación
| Patrón | Cuándo Usar | Plataforma |
|---|
| Barra de Pestañas | 3-5 destinos principales | iOS (abajo), Android (abajo) |
| Navegación Inferior | 3-5 destinos principales | Material Design |
| Cajón de Navegación | Muchos destinos, acceso poco frecuente | Android |
| Navegación por Pilas | Exploración jerárquica | Ambas |
| Hojas Modales | Tareas enfocadas, acciones rápidas | iOS (hoja de formulario), Android (hoja inferior) |
| Modal a Pantalla Completa | Flujos de varios pasos | Ambas |
| Acciones de Deslizamiento | Acciones de elementos de lista (eliminar, archivar) | Ambas |
2.2 Reglas de la Barra de Pestañas
- Máximo 5 pestañas (iOS), 5 máximo (Material)
- Estado activo: icono relleno + cambio de color de etiqueta
- Insignia: punto rojo con contador para notificaciones
- Área segura: por encima del indicador de inicio en iOS
2.3 Navegación por Pilas
- Empujar: deslizar desde la derecha (iOS), desvanecer+deslizar (Android)
- Sacar: deslizar desde el borde izquierdo (iOS), botón de retroceso (Android)
- Transición: 300ms (iOS), 200-300ms (Android)
2.4 Gestos
- Deslizar: acciones de lista, navegación entre pantallas
- Tirar para actualizar: patrón estándar para listas
- Pulsación larga: menú contextual (retardo de 300-500ms)
- Pellizcar para ampliar: imágenes, mapas
- Doble toque: ampliar, gustar (redes sociales)
3. Tipografía Móvil (الطباعة)
3.1 Escala Tipográfica
| Estilo | Tamaño | Peso | Altura de Línea |
|---|
| Título Grande | 34pt | 700 | 41pt |
| Título 1 | 28pt | 700 | 34pt |
| Título 2 | 22pt | 700 | 28pt |
| Título 3 | 20pt | 600 | 25pt |
| Titular | 17pt | 600 | 22pt |
| Cuerpo | 17pt | 400 | 22pt |
| Llamada | 16pt | 400 | 21pt |
| Subtítulo | 15pt | 400 | 20pt |
| Nota al pie | 13pt | 400 | 18pt |
| Leyenda 1 | 12pt | 400 | 16pt |
| Leyenda 2 | 11pt | 400 | 13pt |
3.2 Reglas
- Tamaño de texto mínimo: 12sp (Android), 11pt (iOS)
- Texto del cuerpo: 16-17pt para lectura cómoda
- Altura de línea: 1.3-1.5× tamaño de fuente
- Nunca trunques: texto crítico (números, nombres, fechas)
- Longitud de línea: máximo 40-70 caracteres
- Tipo dinámico: soporta el tamaño de texto del sistema (iOS:
UIFontMetrics, Android: sp)
4. Componentes Móviles (المكونات)
4.1 Componentes Comunes
| Componente | iOS | Android (Material) |
|---|
| Botón | UIButton (relleno, teñido, gris) | Elevado, relleno, tonal, contorneado, texto |
| Lista | UITableView (agrupada, insertada) | RecyclerView (lista, tarjeta) |
| Entrada | UITextField | TextField (relleno, contorneado) |
| Alternar | UISwitch | Switch |
| Deslizador | UISlider | Slider |
| Selector | Selector de rueda / menú desplegable | Menú desplegable |
| Barra de pestañas | UITabBar | BottomNavigationView |
| Búsqueda | UISearchBar | SearchBar |
| Toast | N/A (usa personalizado) | Snackbar |
4.2 Patrones de Lista
- Estándar: icono + título + subtítulo + cheurón
- Acción: deslizar a la izquierda → eliminar/archivar/compartir
- Agrupada: encabezados de sección con elementos agrupados
- Tarjeta: imagen + título + descripción + acciones
- Desplazamiento infinito: cargar más al desplazarse (con indicador de carga)
4.3 Patrones de Formulario
- Una sola columna siempre (móvil)
- Etiquetas: encima de las entradas (no solo flotantes)
- Tipo de teclado: coincidir con la entrada (numérico, correo electrónico, teléfono)
- Evitación del teclado: desplazar el formulario cuando aparece el teclado
- Validación: en línea debajo del campo, cambio de color
- Envío: botón inferior fijo o acción de formulario
5. Diseño Móvil (التنسيق)
5.1 Áreas Seguras
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }} />
5.2 Densidad de Pantalla
- iPhone SE: 375×667pt (la más pequeña)
- iPhone 14: 390×844pt
- iPhone 14 Pro Max: 430×932pt
- Android: 360×640dp (común), varía ampliamente
5.3 Objetos Táctiles
- Mínimo: 44×44pt (iOS), 48×48dp (Android)
- Preferido: 48×48pt para zonas amigables al pulgar
- Espaciado: mínimo 8pt entre objetos táctiles adyacentes
5.4 Zonas del Pulgar
- Mejor zona: mitad inferior de la pantalla (alcance natural del pulgar)
- Acciones principales: tercio inferior (especialmente en teléfonos grandes)
- Acciones destructivas: lejos de la zona principal
6. Sistema de Diseño Móvil (نظام التصميم)
6.1 Sistema de Color
--primary: #007AFF;
--background: #FFFFFF;
--surface: #F2F2F7;
--text-primary: #000000;
--text-secondary: #8E8E93;
--separator: #C6C6C8;
--success: #34C759;
--error: #FF3B30;
--warning: #FF9500;
--primary: #0A84FF;
--background: #000000;
--surface: #1C1C1E;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;
6.2 Modo Oscuro
- Alternancia en todo el sistema (sigue la configuración del SO)
- Negro puro (#000) para OLED (iOS) o gris oscuro (#121212) para Android
- Reduce ligeramente el contraste en modo oscuro
- Prueba ambos modos para cada pantalla
6.3 Iconografía
- iOS: SF Symbols (sistema), iconos personalizados (específicos de la aplicación)
- Android: Material Icons (sistema), personalizados
- Tamaño: 24×24dp estándar, 18×18dp pequeño, 28×28dp grande
- Estilo: relleno (activo), contorneado (inactivo)
7. Movimiento y Animación (الحركة)
7.1 Principios
- Duración: 250-350ms (estándar), 150-200ms (rápido), 500ms+ (complejo)
- Aceleración:
cubic-bezier(0.2, 0, 0, 1) (Material), ease-out (iOS)
- Propósito: indicar navegación, confirmar acción, mostrar carga, deleitar
7.2 Patrones Comunes
| Animación | Duración | Uso |
|---|
| Empujar/sacar página | 300ms | Navegación por pilas |
| Presentar/descartar modal | 300ms | Hojas modales |
| Desvanecer entrada | 200ms | Carga de contenido |
| Deslizar hacia arriba | 250ms | Hoja inferior |
| Escalar hacia arriba | 200ms | Retroalimentación de pulsación de botón |
| Esqueleto | Bucle de 1.5s | Carga de contenido |
| Tirar para actualizar | 200ms | Actualización de lista |
7.3 Específicos de Plataforma
- iOS: física de resorte (natural, elástico)
- Android: aceleración estándar (predecible, suave)
- Hápticos: impacto ligero (pulsación de botón), medio (selección), patrones de éxito/error
8. Patrones de UX Móvil (أنماط تجربة المستخدم)
8.1 Incorporación
- Máximo 3-5 pantallas: propuesta de valor → funciones → permisos → CTA
- Opción de salto: siempre disponible
- Indicador de progreso: puntos o barra de progreso
- Solicitudes de permiso: explica POR QUÉ antes de solicitar
8.2 Estados Vacíos
- Ilustración o icono
- Mensaje claro
- Botón de llamada a la acción
- Ejemplos: "Sin resultados", "Tu carrito está vacío", "Sin notificaciones"
8.3 Estados de Carga
- Pantallas de esqueleto (preferidas sobre los spinners)
- Barras de progreso para operaciones medibles
- Tirar para actualizar para listas
- IU optimista para acciones (actualizar inmediatamente, revertir en caso de error)
8.4 Estados de Error
- En línea: errores de validación a nivel de campo
- Pantalla completa: errores críticos con botón de reintento
- Toast/snackbar: errores transitorios (3-5 segundos)
- Sin conexión: contenido almacenado en caché + banner "Estás desconectado"
8.5 Notificaciones
- Push: solicitud de permiso con explicación
- En la aplicación: insignia, banner o bandeja de entrada
- Configuración: control granular (por categoría)
9. Accesibilidad (إمكانية الوصول)
9.1 Lista de Verificación
9.2 Lector de Pantalla
- VoiceOver de iOS:
accessibilityLabel, accessibilityHint, accessibilityTraits
- TalkBack de Android:
contentDescription, accessibilityRole
- Prueba: activa el lector de pantalla y navega por toda la aplicación
10. Rendimiento (الأداء)
10.1 Métricas Clave
- TTI (Tiempo para ser Interactivo): < 2s
- Fotogramas por segundo: 60 FPS (16.67ms por fotograma)
- Tamaño de la aplicación: minimizar el paquete
- Memoria: sin fugas, limpieza adecuada
10.2 Optimización
- Usa
FlatList (no ScrollView) para listas largas
- Memoriza componentes costosos (
React.memo, useMemo, useCallback)
- Carga diferida de pantallas e imágenes
- Reduce los re-renderizados (props de clave adecuadas, evita funciones anónimas en props)
- Almacenamiento en caché y compresión de imágenes
- Motor Hermes para React Native
11. Componentes de UI Nativos de Expo (مكونات أصلية)
11.1 Expo UI — SwiftUI (iOS)
npx expo install @expo/ui
import { Host, SwiftUIButton } from '@expo/ui/swift-ui';
export default function Screen() {
return (
<Host> {/* cada árbol SwiftUI necesita Host */}
<SwiftUIButton title="Toca aquí" action={onPress} />
</Host>
);
}
- ⚠️ Cada árbol SwiftUI debe estar envuelto en
Host — de lo contrario no se renderiza nada
- Inserta componentes de React Native dentro de un árbol SwiftUI con
RNHostView
- Lee el
.d.ts del paquete y la documentación de componentes antes de usarlos — los modificadores cambian entre versiones del SDK
11.2 Expo UI — Jetpack Compose (Android)
import { Host, Button } from '@expo/ui/jetpack-compose';
import { composeModifiers } from '@expo/ui/jetpack-compose/modifiers';
<Host>
<Button title="Toca aquí" modifiers={[composeModifiers.padding(16)]} onPress={onPress} />
</Host>
- ⚠️ Envuelve cada árbol de Compose en
Host (misma regla que SwiftUI)
- Listas largas →
LazyColumn; iconos → Icon con archivos XML locales
- Lee el
.d.ts del componente antes de usar modificadores — la API es específica de la versión del SDK
11.3 NativeWind v5 + Tailwind v4 (estilo multiplataforma)
npm i nativewind react-native-css tailwindcss @tailwindcss/postcss
import { styled } from 'nativewind';
export const View = styled(NativeView);
- No se necesitan cambios en
babel.config.js — react-native-css maneja la transformación en tiempo de ejecución
- La salida reside en
src/tw/ (wrap View, Text, Image, animated)
- Usa
className en todas partes; recurre a style para casos puntuales
- Destino web: el mismo
className funciona en React Native Web — un código base, tres plataformas
11.4 Cuándo Usar Cada Uno
| Necesidad | Usa |
|---|
| Aspecto nativo (SwiftUI/Compose) | @expo/ui con Host |
| Multiplataforma + iteración rápida | NativeWind v5 |
| Dibujo/animación personalizada | Reanimated + Skia |
| Componentes RN estándar | View/Text/Pressable incorporados |
12. Lista de Verificación (قائمة التحقق)
Habilidades Relacionadas
$design-web — para diseño de interfaces web$design-desktop — para diseño de aplicaciones de escritorio$design-figma — para trabajo de diseño en Figma$mobile-development — para desarrollo con Expo/React Native$testing-comprehensive — para pruebas de aplicaciones móviles y de escritorio