Pantalla: Configuracion de Sonidos
Identificador: SCR-ALT-010
Modulo: MTS-ALT-001 - Alertas y Notificaciones
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Configuracion de Sonidos |
| Proposito |
Personalizar sonidos, vibraciones y alertas auditivas |
| Tipo |
Full Screen (settings) |
| Acceso |
Configuracion > Notificaciones > Sonidos |
| Prioridad |
Media |
2. Wireframe ASCII
2.1. Vista Principal
+------------------------------------------+
| [<] Sonidos y Vibracion [?] |
+------------------------------------------+
| |
| SONIDO DE ALERTA |
| +------------------------------------+ |
| | (o) MedTime Default [>] | | <- Tap to preview
| +------------------------------------+ |
| | ( ) Suave [>] | |
| +------------------------------------+ |
| | ( ) Urgente [>] | |
| +------------------------------------+ |
| | ( ) Campanilla [Pro][>] | |
| +------------------------------------+ |
| | ( ) Naturaleza [Pro][>] | |
| +------------------------------------+ |
| | ( ) Personalizado... [Perfect][>]| |
| +------------------------------------+ |
| |
| VOLUMEN |
| +------------------------------------+ |
| | [Speaker] [====o=====] 70% | | <- Volume slider
| +------------------------------------+ |
| | Usar volumen del sistema | |
| | [OFF] | |
| +------------------------------------+ |
| |
| VIBRACION |
| +------------------------------------+ |
| | Vibracion | |
| | [ON] | |
| +------------------------------------+ |
| | Patron de vibracion | |
| | Doble pulso [>] | |
| +------------------------------------+ |
| |
| LED (Solo Android) |
| +------------------------------------+ |
| | LED de notificacion | |
| | [ON] | |
| +------------------------------------+ |
| | Color del LED | |
| | Azul [>] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Probar configuracion] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Selector de Patron de Vibracion
+------------------------------------------+
| Patron de vibracion [X] |
+------------------------------------------+
| |
| +------------------------------------+ |
| | (o) Corto [>] | | <- Tap to preview
| | * | |
| +------------------------------------+ |
| | ( ) Doble [>] | |
| | * * | |
| +------------------------------------+ |
| | ( ) Largo [>] | |
| | **** | |
| +------------------------------------+ |
| | ( ) Patron 1 (SOS) [Pro][>] | |
| | * * * *** *** *** * * * | |
| +------------------------------------+ |
| | ( ) Patron 2 (Urgente) [Pro][>] | |
| | *** * *** * | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Selector de Color LED
+------------------------------------------+
| Color del LED [X] |
+------------------------------------------+
| |
| +------+ +------+ +------+ +------+ |
| | | | | | | | | |
| | Azul | |Verde | |Rojo | |Blanco| | <- Free: Azul fijo
| | * | | | | | | | | <- Pro: 3 colores
| +------+ +------+ +------+ +------+ | <- Perfect: Custom
| |
| +------+ +------+ +------+ +------+ |
| | | | | | | | | |
| |Amarillo|Morado|Cyan |Custom| |
| | [P] | [P] | [P] | [P] | |
| +------+ +------+ +------+ +------+ |
| |
| [P] = Requiere Perfect |
| |
+------------------------------------------+
3. Componentes UI
3.1. Sound Item (Radio + Preview)
| Propiedad |
Valor |
| Componente |
CMP-INP-009 (Sound Selector Item) |
| Radio |
Izquierda |
| Label |
Nombre del sonido |
| Preview button |
Chevron derecho (tap para escuchar) |
| Tier badge |
Si aplica |
3.2. Volume Slider
| Propiedad |
Valor |
| Componente |
CMP-INP-010 (Volume Slider) |
| Icono |
Speaker (cambia con volumen) |
| Rango |
0-100% |
| Step |
5% |
| Feedback |
Reproduce preview al soltar |
3.3. Vibration Pattern Preview
| Propiedad |
Valor |
| Componente |
CMP-DAT-008 (Pattern Visualizer) |
| Visual |
Dots/bars representando patron |
| Preview |
Vibra al tap chevron |
3.4. LED Color Picker
| Propiedad |
Valor |
| Componente |
CMP-INP-011 (Color Grid) |
| Layout |
Grid 4x2 |
| Selection |
Single color |
| Size per item |
64x64dp |
4. Disponibilidad por Tier
| Feature |
Free |
Pro |
Perfect |
| Sonidos (3 basicos) |
Si |
Si |
Si |
| Sonidos (5 adicionales) |
No |
Si |
Si |
| Sonido personalizado |
No |
No |
Si |
| Volumen independiente |
No |
Si |
Si |
| Patron vibracion (2) |
Si |
Si |
Si |
| Patron vibracion (5) |
No |
Si |
Si |
| LED on/off |
Si |
Si |
Si |
| LED color (Azul) |
Si |
Si |
Si |
| LED 3 colores |
No |
Si |
Si |
| LED custom color |
No |
No |
Si |
5. Comportamientos
5.1. Preview de Sonido
flowchart TD
A[Tap en chevron del sonido] --> B[Reproducir sonido 3 segundos]
B --> C{Usuario selecciona?}
C -->|Si tap radio| D[Seleccionar y guardar]
C -->|No| E[Mantener seleccion actual]
5.2. Preview de Vibracion
| Accion |
Comportamiento |
| Tap chevron |
Ejecuta patron de vibracion una vez |
| Cambiar seleccion |
Vibra con nuevo patron |
5.3. Guardado Automatico
- Cada cambio se guarda automaticamente
- Feedback visual breve
- Sync al servidor (Pro+)
6. Datos Requeridos
interface SoundSettings {
sound_id: string;
volume_percent: number;
use_system_volume: boolean;
vibration_enabled: boolean;
vibration_pattern: VibrationPatternId;
led_enabled: boolean;
led_color: string;
user_tier: 'FREE' | 'PRO' | 'PERFECT';
custom_sound_url?: string; // Perfect only
}
type VibrationPatternId =
| 'SHORT'
| 'DOUBLE'
| 'LONG'
| 'SOS'
| 'URGENT';
interface SoundOption {
id: string;
name: string;
preview_url: string;
min_tier: 'FREE' | 'PRO' | 'PERFECT';
}
7. Accesibilidad
7.1. Labels y Hints
| Elemento |
accessibilityLabel |
| Sound item |
"{nombre}, {seleccionado/no seleccionado}. Tap para seleccionar, doble tap para escuchar" |
| Volume slider |
"Volumen {percent}%. Desliza para ajustar" |
| Vibration pattern |
"{nombre}, tap para probar vibracion" |
| LED color |
"Color {nombre}, {seleccionado/no seleccionado}" |
| Test button |
"Probar configuracion actual" |
7.2. Screen Reader Announcements
| Evento |
Anuncio |
| Sonido preview |
"Reproduciendo {nombre}" |
| Sonido seleccionado |
"{nombre} seleccionado como sonido de alerta" |
| Vibracion preview |
"Probando vibracion {patron}" |
| Volumen cambiado |
"Volumen {percent} por ciento" |
8. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)