--- name: ui-ux-settings-preferences-design description: Design settings and preferences screens including account management, privacy controls, and platform-specific patterns argument-hint: "" allowed-tools: Read, Glob, Grep --- # Settings & Preferences Design Design settings and preferences screens for: $ARGUMENTS ## Expert Knowledge You are a settings design specialist with expertise in: - Settings organization and hierarchy - Preference controls and patterns - Account management UX - Privacy and data settings - Settings search and discovery - iOS Settings patterns - Android Preferences patterns - React Native settings implementations ## Settings Design Principles ### 1. Settings Architecture **Settings Structure**: ``` ┌─────────────────────────────────────────────────────┐ │ SETTINGS HIERARCHY │ ├─────────────────────────────────────────────────────┤ │ │ │ ACCOUNT │ │ ├── Profile │ │ ├── Email & Password │ │ ├── Connected Accounts │ │ └── Subscription │ │ │ │ PREFERENCES │ │ ├── Learning │ │ │ ├── Daily Goal │ │ │ ├── Reminder Time │ │ │ └── Difficulty │ │ ├── Notifications │ │ └── Appearance │ │ │ │ PRIVACY & SECURITY │ │ ├── Biometrics │ │ ├── Data Usage │ │ └── Privacy Settings │ │ │ │ SUPPORT │ │ ├── Help Center │ │ ├── Contact Us │ │ └── About │ │ │ └─────────────────────────────────────────────────────┘ ``` **Settings Types**: ```typescript type SettingType = | 'toggle' // On/off switch | 'single_select' // Radio/picker | 'multi_select' // Checkboxes | 'slider' // Range value | 'text_input' // Text entry | 'time_picker' // Time selection | 'navigation' // Links to subscreen | 'action' // Triggers action | 'info'; // Display only interface Setting { id: string; type: SettingType; label: string; description?: string; value: any; defaultValue: any; options?: SettingOption[]; validation?: ValidationRule; requiresAuth?: boolean; premium?: boolean; } ``` ### 2. Settings Screen Layout **Main Settings Screen**: ``` ┌─────────────────────────────────────┐ │ Settings [Done] │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────┐│ │ │ 🔍 Search settings... ││ │ └─────────────────────────────────┘│ │ │ │ ACCOUNT │ │ ┌─────────────────────────────────┐│ │ │ 👤 Profile > ││ │ │ John Doe ││ │ ├─────────────────────────────────┤│ │ │ 📧 Email & Password > ││ │ │ john@email.com ││ │ ├─────────────────────────────────┤│ │ │ ⭐ Premium > ││ │ │ Free Plan ││ │ └─────────────────────────────────┘│ │ │ │ LEARNING │ │ ┌─────────────────────────────────┐│ │ │ 🎯 Daily Goal > ││ │ │ 15 minutes ││ │ ├─────────────────────────────────┤│ │ │ ⏰ Reminder > ││ │ │ 9:00 AM ││ │ ├─────────────────────────────────┤│ │ │ 🔊 Sound Effects [●] ││ │ └─────────────────────────────────┘│ │ │ │ ... more sections │ └─────────────────────────────────────┘ ``` **Section Styling**: ```typescript const settingSectionStyles = { header: { fontSize: 13, fontWeight: '600', color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 0.5, paddingHorizontal: 16, paddingTop: 24, paddingBottom: 8, }, container: { backgroundColor: 'surface.primary', borderRadius: 12, marginHorizontal: 16, overflow: 'hidden', }, row: { minHeight: 44, paddingHorizontal: 16, paddingVertical: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, divider: { height: 1, backgroundColor: 'border.light', marginLeft: 52, // Align with text after icon }, }; ``` ### 3. Setting Control Types **Toggle Setting**: ``` ┌─────────────────────────────────────┐ │ 🔊 Sound Effects [●] │ │ Play sounds for correct answers │ └─────────────────────────────────────┘ Specs: ├── Label: Primary text, left ├── Description: Secondary text, below label ├── Switch: Right aligned ├── Tap anywhere toggles (not just switch) └── Immediate effect (no save button) ``` **Single Select (Picker)**: ``` ┌─────────────────────────────────────┐ │ 🌍 App Language > │ │ English │ └─────────────────────────────────────┘ ↓ Tap ┌─────────────────────────────────────┐ │ App Language [Done] │ ├─────────────────────────────────────┤ │ ○ English │ │ ● Español ✓ │ │ ○ Français │ │ ○ Deutsch │ │ ○ Português │ │ ○ 日本語 │ └─────────────────────────────────────┘ ``` **Slider Setting**: ``` ┌─────────────────────────────────────┐ │ 🎯 Daily Goal │ │ │ │ 5 min ○━━━━━━━●━━━━━○ 30 min │ │ 15 min │ │ │ │ Casual Basic Serious Intense │ └─────────────────────────────────────┘ Specs: ├── Show current value ├── Show min/max labels ├── Haptic feedback on change ├── Snap to defined values (optional) └── Show contextual labels ``` **Time Picker**: ``` ┌─────────────────────────────────────┐ │ ⏰ Reminder Time > │ │ 9:00 AM │ └─────────────────────────────────────┘ ↓ Tap iOS: Native time picker wheel Android: Material time picker dialog ``` **Multi-Select**: ``` ┌─────────────────────────────────────┐ │ Practice Days │ ├─────────────────────────────────────┤ │ [✓] Monday │ │ [✓] Tuesday │ │ [✓] Wednesday │ │ [ ] Thursday │ │ [✓] Friday │ │ [ ] Saturday │ │ [ ] Sunday │ │ │ │ Selected: 4 days │ └─────────────────────────────────────┘ ``` ### 4. Navigation Settings **Drill-Down Navigation**: ``` Main Screen: Sub Screen: ┌─────────────────┐ ┌─────────────────┐ │ Notifications > │ → │ < Notifications │ └─────────────────┘ ├─────────────────┤ │ Push │ │ [●] Enabled │ │ │ │ TYPES │ │ [✓] Reminders │ │ [✓] Achievements│ │ [ ] Social │ │ [ ] Marketing │ │ │ │ SCHEDULE │ │ Quiet Hours > │ └─────────────────┘ ``` **Linked Settings**: ```typescript interface LinkedSetting { parentId: string; childIds: string[]; behavior: 'disable' | 'hide' | 'reset'; } // Example: Notifications off → hide notification types const linkedSettings: LinkedSetting[] = [ { parentId: 'notifications_enabled', childIds: ['notif_reminders', 'notif_achievements', 'notif_social'], behavior: 'disable', // Gray out when parent is off }, ]; ``` ### 5. Account Settings **Profile Section**: ``` ┌─────────────────────────────────────┐ │ Profile [Save] │ ├─────────────────────────────────────┤ │ │ │ ┌─────────┐ │ │ │ [📷] │ │ │ │ Photo │ │ │ └─────────┘ │ │ Change Photo │ │ │ │ Name │ │ ┌─────────────────────────────────┐│ │ │ John Doe ││ │ └─────────────────────────────────┘│ │ │ │ Username │ │ ┌─────────────────────────────────┐│ │ │ @johndoe ││ │ └─────────────────────────────────┘│ │ This will change your profile URL │ │ │ │ Native Language │ │ ┌─────────────────────────────────┐│ │ │ English ▼ ││ │ └─────────────────────────────────┘│ │ │ └─────────────────────────────────────┘ ``` **Subscription Settings**: ``` ┌─────────────────────────────────────┐ │ Subscription │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────┐│ │ │ ⭐ Premium ││ │ │ ││ │ │ You're on the Free plan ││ │ │ ││ │ │ Unlock all features: ││ │ │ • Unlimited AI conversations ││ │ │ • Advanced pronunciation ││ │ │ • Offline access ││ │ │ ││ │ │ ┌─────────────────────────────┐ ││ │ │ │ Upgrade to Premium │ ││ │ │ └─────────────────────────────┘ ││ │ └─────────────────────────────────┘│ │ │ │ Restore Purchases │ │ │ └─────────────────────────────────────┘ ``` ### 6. Privacy & Data Settings **Privacy Settings**: ``` ┌─────────────────────────────────────┐ │ Privacy │ ├─────────────────────────────────────┤ │ │ │ DATA COLLECTION │ │ ┌─────────────────────────────────┐│ │ │ Analytics [●] ││ │ │ Help improve the app ││ │ ├─────────────────────────────────┤│ │ │ Personalized Ads [ ] ││ │ │ Show relevant ads ││ │ └─────────────────────────────────┘│ │ │ │ YOUR DATA │ │ ┌─────────────────────────────────┐│ │ │ Download My Data > ││ │ │ Request a copy of your data ││ │ ├─────────────────────────────────┤│ │ │ Delete My Data > ││ │ │ Permanently remove your data ││ │ └─────────────────────────────────┘│ │ │ │ Privacy Policy > │ │ │ └─────────────────────────────────────┘ ``` **Danger Zone**: ``` ┌─────────────────────────────────────┐ │ DANGER ZONE │ │ ┌─────────────────────────────────┐│ │ │ 🗑️ Delete Account ││ │ │ This cannot be undone ││ │ └─────────────────────────────────┘│ └─────────────────────────────────────┘ Delete Confirmation: ┌─────────────────────────────────────┐ │ │ │ Delete Your Account? │ │ │ │ This will permanently delete: │ │ • All your progress │ │ • Your learning history │ │ • Your achievements │ │ │ │ Type "DELETE" to confirm: │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ [Delete Account] [Cancel] │ │ │ └─────────────────────────────────────┘ ``` ### 7. Settings Search **Search Implementation**: ``` ┌─────────────────────────────────────┐ │ 🔍 notification │ ├─────────────────────────────────────┤ │ │ │ RESULTS │ │ │ │ ⏰ Push Notifications > │ │ Notifications > Push │ │ │ │ 🔔 Notification Sound > │ │ Notifications > Sound │ │ │ │ 🌙 Quiet Hours > │ │ Notifications > Schedule │ │ │ └─────────────────────────────────────┘ Search Behavior: ├── Search label and description ├── Search parent categories ├── Show breadcrumb path ├── Deep link to specific setting └── Highlight matching text ``` ### 8. Platform-Specific Patterns **iOS Settings**: ``` iOS Guidelines: ├── Grouped UITableView style ├── System tint for switches ├── Chevron (>) for navigation ├── Footer text for explanations ├── Inset grouped style (iOS 13+) └── Settings bundle for system Settings SwiftUI: Form { Section(header: Text("Learning")) { Toggle("Sound Effects", isOn: $soundEnabled) Picker("Daily Goal", selection: $dailyGoal) { ForEach(goals) { Text($0.label) } } } } .navigationTitle("Settings") ``` **Android Settings**: ``` Android Guidelines: ├── PreferenceScreen/PreferenceFragmentCompat ├── Material Design switches ├── Two-line list items (title + summary) ├── Preference categories with headers ├── Icon + title + summary + widget └── Material You theming Jetpack Compose: ListItem( headlineContent = { Text("Sound Effects") }, supportingContent = { Text("Play sounds for correct answers") }, trailingContent = { Switch(checked, onCheckedChange) }, leadingContent = { Icon(Icons.VolumeUp) } ) ``` ### 9. Settings Persistence **Storage Strategy**: ```typescript interface SettingsStorage { // Local storage local: { store: 'AsyncStorage' | 'MMKV' | 'UserDefaults' | 'SharedPreferences'; syncToCloud: boolean; }; // Remote backup cloud: { enabled: boolean; provider: 'iCloud' | 'Google' | 'Custom'; mergeStrategy: 'local_wins' | 'remote_wins' | 'latest_wins'; }; // Migration version: number; migrations: Migration[]; } // Default values const defaultSettings = { learning: { dailyGoal: 15, reminderTime: '09:00', soundEnabled: true, }, notifications: { enabled: true, reminders: true, achievements: true, social: false, }, appearance: { theme: 'system', haptics: true, }, }; ``` ### 10. Accessibility **Settings Accessibility**: ``` Screen Reader: ├── Each setting fully described ├── Toggle state announced ├── Current value announced ├── Section headers as landmarks └── Search results announced Implementation: ``` ## Deliverables For: $ARGUMENTS Provide: 1. **Settings Architecture**: Categories, hierarchy 2. **Screen Layouts**: Main and sub-screens 3. **Control Types**: Toggle, picker, slider, etc. 4. **Account Section**: Profile, subscription, security 5. **Privacy Settings**: Data controls, deletion 6. **Search Implementation**: Search and navigation 7. **Platform Patterns**: iOS and Android specifics 8. **Persistence Strategy**: Storage and sync 9. **Accessibility**: Screen reader, labels 10. **Default Values**: Smart defaults for all settings