Mobile Guidelines
Lineamientos para implementaciones nativas en iOS (Swift/SwiftUI) y Android (Kotlin/Jetpack Compose), y cross-platform con React Native.
Touch Targets
- ✓Mínimo 44×44 pts (iOS) / 48×48 dp (Android) para elementos interactivos
- ✓Separación mínima de 8px entre targets para evitar toques accidentales
- ✓Áreas de toque más grandes que el elemento visual si es necesario (hitSlop)
- ✗Nunca usar elementos interactivos menores a 32px en ninguna dimensión
Safe Areas
/* Respetar siempre:
- Status bar (top)
- Home indicator (bottom en iOS)
- Navigation bar (bottom en Android)
- Notch / Dynamic Island (iOS)
- Camera cutout (Android)
*/
// React Native
import { SafeAreaView } from 'react-native-safe-area-context';
<SafeAreaView edges={['top', 'bottom']}>
{children}
</SafeAreaView>
// SwiftUI
.ignoresSafeArea(.container, edges: .top)
// Jetpack Compose
WindowInsets.safeDrawingTipografía mobile
| Elemento | iOS | Android |
|---|---|---|
| Large Title | 34pt Bold | headlineLarge (32sp) |
| Title | 28pt Bold | headlineMedium (28sp) |
| Headline | 17pt Semibold | titleMedium (16sp) |
| Body | 17pt Regular | bodyLarge (16sp) |
| Caption | 12pt Regular | labelSmall (11sp) |
| Footnote | 13pt Regular | bodySmall (12sp) |
Haptic Feedback
| Acción | Tipo | Uso |
|---|---|---|
| Tap | Light impact | Toggle, selección de opción |
| Success | Success notification | Acción completada, guardado |
| Error | Error notification | Validación fallida, error |
| Long press | Medium impact | Context menu, drag start |