Pantalla: Preferencias de App
Identificador: SCR-USR-008
Nombre: Preferencias de App
Modulo: MTS-USR-001 - Gestion de Usuarios
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Configuracion |
| Acceso |
SCR-USR-001 > Preferencias de App |
| Roles |
PI, CR |
| Tiers |
Todos |
| Prioridad |
Media |
2. Proposito
Permite personalizar la experiencia de la app incluyendo idioma, formato de hora, tema visual, unidades de medida y preferencias de notificacion.
3. Wireframe
+--------------------------------------------------+
| [<] Preferencias |
+--------------------------------------------------+
| |
+--------------------------------------------------+
| IDIOMA Y REGION |
+--------------------------------------------------+
| |
| Idioma |
| +--------------------------------------------+ |
| | Espanol (Mexico) [v] | |
| +--------------------------------------------+ |
| |
| Zona horaria |
| +--------------------------------------------+ |
| | America/Mexico_City (GMT-6) [v] | |
| +--------------------------------------------+ |
| [i] Auto-detectada desde tu ubicacion |
| |
+--------------------------------------------------+
| FORMATO |
+--------------------------------------------------+
| |
| Formato de hora |
| ( ) 12 horas (8:00 AM) |
| (o) 24 horas (08:00) |
| |
| Primer dia de la semana |
| +--------------------------------------------+ |
| | Lunes [v] | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| UNIDADES |
+--------------------------------------------------+
| |
| Peso |
| (o) Kilogramos (kg) |
| ( ) Libras (lb) |
| |
| Altura |
| (o) Centimetros (cm) |
| ( ) Pies y pulgadas (ft/in) |
| |
| Temperatura |
| (o) Celsius (C) |
| ( ) Fahrenheit (F) |
| |
| Glucosa |
| (o) mg/dL |
| ( ) mmol/L |
| |
+--------------------------------------------------+
| APARIENCIA |
+--------------------------------------------------+
| |
| Tema |
| [Claro] [Oscuro] [Sistema] |
| ^^^^ |
| seleccionado |
| |
| Tamano de texto |
| [A-] [A] [A+] [AA] |
| ^ |
| |
| Vista previa: |
| +--------------------------------------------+ |
| | Asi se vera el texto en la app | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
4. Elementos de UI
4.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar |
CMP-NAV-002 |
Si |
| dropdown_idioma |
Dropdown Select |
CMP-INP-006 |
Si |
| dropdown_timezone |
Dropdown Select |
CMP-INP-006 |
Si |
| radio_formato_hora |
Radio Group |
CMP-INP-009 |
Si |
| dropdown_firstday |
Dropdown Select |
CMP-INP-006 |
Si |
| radio_peso |
Radio Group |
CMP-INP-009 |
Si |
| radio_altura |
Radio Group |
CMP-INP-009 |
Si |
| radio_temp |
Radio Group |
CMP-INP-009 |
Si |
| radio_glucosa |
Radio Group |
CMP-INP-009 |
Si |
| segmented_theme |
Segmented Control |
Custom |
Si |
| segmented_textsize |
Segmented Control |
Custom |
Si |
| preview_text |
Preview Card |
Custom |
Si |
4.2. Opciones de Idioma
- Espanol (Mexico)
- Espanol (Espana)
- English (US)
- English (UK)
- Portugues (Brasil)
- Portugues (Portugal)
4.3. Opciones de Tema
| Opcion |
Descripcion |
| Claro |
Fondo blanco siempre |
| Oscuro |
Fondo oscuro siempre |
| Sistema |
Sigue preferencia del sistema |
4.4. Escalas de Texto
| Opcion |
Factor |
Uso |
| A- |
0.85x |
Mas contenido visible |
| A |
1.0x |
Default |
| A+ |
1.15x |
Lectura mas facil |
| AA |
1.3x |
Baja vision |
5. Estados
5.1. Guardado Automatico
Todos los cambios se guardan automaticamente:
Al cambiar una preferencia:
1. Actualizar UI inmediatamente
2. Guardar en storage local
3. Si Pro/Perfect: sincronizar con cloud
4. Mostrar toast breve: "Guardado"
5.2. Preview en Tiempo Real
Al cambiar tema o tamano de texto:
- Preview se actualiza inmediatamente
- Animacion suave de transicion
- Toast: "Los cambios se aplicaran en toda la app"
6. Interacciones
6.1. Cambio de Idioma
flowchart TD
A[Seleccionar nuevo idioma] --> B[Mostrar confirmacion]
B --> C{Confirmar?}
C -->|Si| D[Cambiar idioma]
D --> E[Recargar strings]
E --> F[Actualizar toda la UI]
C -->|No| G[Mantener actual]
6.2. Confirmacion de Cambio de Idioma
+--------------------------------------------------+
| Cambiar idioma? |
+--------------------------------------------------+
| |
| El idioma de la app cambiara a English (US). |
| |
| Algunos textos personalizados (nombres de |
| medicamentos, notas) no seran traducidos. |
| |
| [Cancelar] [Cambiar idioma] |
+--------------------------------------------------+
7. Preferencias por Tier
| Preferencia |
Free |
Pro |
Perfect |
| Sincronizacion de prefs |
No |
Si |
Si |
| Prefs en multiples dispositivos |
No |
Si |
Si |
8. Accesibilidad
8.1. Screen Reader
| Elemento |
Label |
Hint |
| dropdown_idioma |
"Idioma, [valor actual]" |
"Toca para cambiar idioma" |
| radio_formato |
"Formato de hora, [valor]" |
- |
| segmented_theme |
"Tema, [seleccionado]" |
"Toca para cambiar" |
| preview |
"Vista previa del tamano de texto" |
- |
8.2. Tamano de Texto
- Los cambios de texto respetan Dynamic Type (iOS) y font scaling (Android)
- La preview debe reflejar el cambio en tiempo real
- Limite maximo: 200% para evitar overflow
9. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| preferences_viewed |
Abrir pantalla |
- |
| language_changed |
Cambiar idioma |
old, new |
| theme_changed |
Cambiar tema |
value |
| text_size_changed |
Cambiar tamano |
value |
| units_changed |
Cambiar unidad |
type, value |
10. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Cambiar idioma |
UI se actualiza |
| TC-002 |
Cambiar tema |
Preview y app cambian |
| TC-003 |
Aumentar texto |
Preview muestra cambio |
| TC-004 |
Cambiar unidad peso |
Datos se convierten |
| TC-005 |
Modo oscuro |
Colores correctos |
| TC-006 |
Sincronizar prefs (Pro) |
Mismas prefs en otro device |
11. Notas de Implementacion
- Las preferencias se almacenan en UserDefaults/SharedPreferences
- Al cambiar unidades, los datos existentes NO se convierten - solo la presentacion
- El idioma requiere reload de strings, no restart de app
- El tema usa animacion de crossfade de 200ms
12. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)