设计 iOS/Android…

在需要设计移动 App 界面、构建设计系统、确保无障碍合规或遵循 iOS/Android 平台指南时使用。

适用场景

解决思路

1. 以用户需求、行为和心智模型为先，而非单纯追求美观
2. 遵循平台一致性：iOS 用 Human Interface Guidelines，Android 用 Material Design
3. 从设计之初就把无障碍作为基础，而非事后补救
4. 打造能与用户产生情感连接的界面
5. 在追求美观的同时兼顾应用性能
6. 所有设计必须满足 WCAG 2.2 AA 标准：正文对比度至少 4.5:1，大号文字（18pt+）至少 3:1
7. 触控目标尺寸：iOS 至少 44×44pt，Android 至少 48×48dp
8. 不得仅靠颜色传达信息，图片必须提供替代文本，界面必须支持键盘导航
9. 支持 Dynamic Type / 字体缩放，兼容 VoiceOver（iOS）/ TalkBack（Android），为键盘导航提供清晰的焦点指示
10. 不要混用 iOS 与 Android 模式：iOS 用 SF Pro 字体、底部 Tab Bar、带返回箭头的 Push 导航、标准 UIKit/SwiftUI 控件
11. Android 用 Roboto 字体、底部导航栏或导航抽屉、带涟漪效果的 Material 组件，并遵循 Material You 动态主题
12. 每个 App 都必须有文档化的设计系统，包含：颜色 Token（primary、secondary、surface、error 等）、字体层级（heading1-6、body、caption 等）、间距层级（4、8、12、16、24、32、48px）、圆角 Token（none、sm、md、lg、full）、阴影/高度 Token（elevation1-5）、组件库（button、input、card 等）
13. 禁止临时定义颜色和间距、跨屏按钮样式不一致、多个未命名字号、组件缺少状态定义
14. 交互元素之间最小间距 8px，主要操作放在拇指可达区（底部 2/3），提供清晰的点击反馈（涟漪、高亮、缩放）
15. 颜色系统采用语义化 Token：primary、primary-variant、secondary、background、surface、error、on-primary、on-background、on-surface
16. 配色遵循 60-30-10 规则：60% 中性/背景色，30% 次要/辅助色，10% 强调/主色
17. 深色模式不要简单反色：使用去饱和颜色、略微降低对比度（避免纯白配纯黑）、保持颜色语义一致
18. iOS 字体层级：Large Title 34pt Bold、Title 1 28pt Bold、Title 2 22pt Bold、Title 3 20pt Semibold、Headline 17pt Semibold、Body 17pt Regular、Callout 16pt Regular、Subhead 15pt Regular、Footnote 13pt Regular、Caption 1 12pt Regular、Caption 2 11pt Regular
19. Android 字体层级：Display Large 57sp、Display Medium 45sp、Display Small 36sp、Headline Large 32sp、Headline Medium 28sp、Headline Small 24sp、Title Large 22sp、Title Medium 16sp Medium、Title Small 14sp Medium、Body Large 16sp、Body Medium 14sp、Body Small 12sp、Label Large 14sp Medium、Label Medium 12sp Medium、Label Small 11sp Medium
20. 字体最佳实践：每个 App 最多 2-3 个字体家族，正文最小 16px（绝对最小 14px），正文行高为字号的 1.4-1.6 倍，支持 Dynamic Type / Font Scaling
21. 采用 8 点网格间距系统：spacing-0 0px、spacing-1 4px、spacing-2 8px、spacing-3 12px、spacing-4 16px、spacing-5 24px、spacing-6 32px、spacing-7 48px、spacing-8 64px
22. 组件间距：按钮内边距 12px 垂直/24px 水平，卡片内边距 16px，列表项内边距 16px 水平/12px 垂直，区块间距 24-32px，屏幕边距手机 16px/平板 24px
23. iOS 遵循三大原则：Clarity（文字清晰、图标精确、目的明确）、Deference（UI 辅助理解而非与内容竞争）、Depth（视觉层次与真实动效传达层级）
24. iOS 导航：底部 Tab Bar 放 3-5 个主要目的地，顶部 Navigation Bar 放标题/返回/操作，模态 sheet 用于临时聚焦任务，iPad 用 Popover 展示上下文选项
25. iOS 2025 Liquid Glass 更新：控件使用半透明材质、浮动导航元素、动态深度与层级、背景模糊效果
26. iOS 安全区：顶部为状态栏 + Dynamic Island/刘海，底部为 Home 指示条（Face ID 设备 34pt），使用 safeAreaInsets 正确放置内容
27. iOS 标准尺寸：导航栏高 44pt（大标题时 96pt），Tab Bar 高 49pt（Face ID 设备 83pt），工具栏高 44pt
28. Android Material Design 3 核心理念：Material You（个性化、自适应、动态颜色）、Expressiveness（通过设计建立情感连接）、Accessibility（面向所有用户的包容性设计）
29. Android 导航：底部导航放 3-5 个主要目的地，导航抽屉用于 5+ 目的地或次级导航，平板和大屏用 Navigation Rail，顶部 App Bar 放标题/导航/操作
30. Android Material 3 Expressive（2025）：从用户壁纸提取动态颜色、基于物理的弹性动效、更大胆的排版、圆润亲和的形状
31. Android 组件形状：Extra Small 4dp、Small 8dp、Medium 12dp、Large 16dp、Extra Large 28dp、Full 50%（胶囊/圆形）
32. Android 标准尺寸：App Bar 高 64dp，底部导航高 80dp，FAB 尺寸 56dp（标准）/40dp（小）/96dp（大）
33. AI 个性化：基于行为推荐内容、根据使用模式自适应布局、智能默认值与预测操作、上下文功能建议
34. 个性化实现准则：始终提供手动覆盖选项、解释推荐原因、尊重用户隐私偏好、渐进式个性化（不要一开始就压垮新用户）
35. 深色模式颜色适配：白色 #FFFFFF → 深灰 #121212，黑色 #000000 → 白色 #FFFFFF，鲜艳主色 → 去饱和主色，阴影 → 微弱阴影或无阴影
36. Material 3 深色模式表面高度：Elevation 0 #121212、Elevation 1 #1E1E1E（+5% 白色叠加）、Elevation 2 #232323（+7%）、Elevation 3 #272727（+8%）、Elevation 4 #2C2C2C（+9%）、Elevation 5 #323232（+11%）
37. 深色模式建议：根据系统设置自动切换、为明暗模式分别定义颜色 Token、两种模式都测试对比度、考虑 OLED 优化（真黑）
38. 微交互类型：反馈（按钮按下、表单提交）、状态（加载、成功、错误）、引导（新手提示、工具提示）、愉悦（庆祝动画、彩蛋）
39. 动效原则：大多数交互时长 200-500ms，使用自然缓动曲线，每个动画都要有理由，使用硬件加速属性
40. 2025 动效趋势：基于物理的弹性动画、状态间的形变动画、手势驱动交互、为无障碍提供减弱动效支持
41. Glassmorphism 属性：背景模糊（backdrop-filter: blur）、透明度（10-40% 不透明度）、细微边框（1px 白色 20% 不透明度）、柔和阴影；用于遮罩与模态、图片背景上的卡片、导航栏（iOS Liquid Glass）；注意确保文字可读性、考虑性能影响、为旧设备提供降级方案
42. Neumorphism（Soft UI）属性：柔和阴影（明暗双阴影）、细微高度效果、低饱和配色；用于开关、输入框、卡片；注意常无法通过无障碍对比度测试，应谨慎使用而非作为主风格，务必用真实内容测试

适用边界 · 注意事项

• 不要混用 iOS 与 Android 的设计模式（如在 iOS 上用 Android 风格 FAB，或在 Android 上直接套用 iOS 底部 sheet 而不做适配）
• 不要使用低于 4.5:1 的文字对比度、小于最小尺寸的触控目标、仅靠颜色传达信息或缺少替代文本
• 不要使用临时颜色/间距、跨屏不一致的按钮样式、多个未命名字号或无状态定义的组件