Mobile App Design Standards

移动应用设计标准

全面介绍移动应用设计指南，确保应用遵循平台惯例、无障碍标准和现代 UX 最佳实践。

目的

设计、审查或改进移动应用界面时，应用特定平台的设计指南、交互模式和无障碍标准。确保设计一致、易于访问、性能良好，并符合 2026 年的行业最佳实践。

何时使用此技能

在以下情况下使用此技能：

• 设计新的移动应用屏幕或功能
• 审查现有 UI/UX 实现
• 规划交互流程和导航
• 制定设计系统或样式指南
• 做出特定平台的设计决策
• 优化无障碍体验或性能
• 改造旧版移动界面

核心设计原则

原生平台惯例

iOS（Human Interface Guidelines）：

• 导航：左上角放置返回按钮，右上角放置主要操作
• 底部标签栏包含 3-5 个项目
• 使用大标题构建层级
• 系统字体：San Francisco（针对小字号设计）
• 确认操作时提供触觉反馈
• 使用滑动手势进行导航

Android（Material Design）：

• 导航：左上角放置返回按钮，右上角放置溢出菜单
• 使用底部导航栏或导航抽屉
• 使用悬浮操作按钮（FAB）执行主要操作
• 系统字体：Roboto
• 使用波纹效果提供触摸反馈
• 使用导航抽屉呈现层级内容

React Native 跨平台：

• 行为不同时使用特定平台的组件
• 遵循平台的导航模式惯例
• 在 iOS 和 Android 设备上都进行测试
• 考虑使用 React Navigation 实现适配平台的导航
• 使用 Platform API 进行条件渲染

触控目标和间距

最小尺寸：

• iOS：所有交互元素至少为 44 × 44 点
• Android：所有触控目标至少为 48 × 48 dp
• 目标之间的间距：至少 8dp/pt

最佳实践：

• 主要操作的目标尺寸应更大（Android 上的 FAB 为 56dp）
• 留出充足间距，避免误触
• 在大屏幕上考虑拇指易触及区域
• 使用真实手指测试，而不是鼠标点击

排版标准

最小字号：

• 正文：至少 16sp/pt（绝对最小值为 14sp）
• 标签：至少 11-12pt
• 为确保易读性，避免使用小于 11pt 的文本

层级：

• 通过字号、字重和颜色建立清晰的视觉层级
• 在整个应用中使用一致的比例（例如：12/14/16/20/24/32pt）
• 除非品牌需要自定义字体，否则使用平台系统字体
• 支持动态字体（iOS）和字体缩放（Android）

颜色和对比度

WCAG 标准：

• 普通文本：对比度至少为 4.5:1
• 大号文本（18pt+）：对比度至少为 3:1
• UI 组件：边界对比度至少为 3:1

颜色使用：

• 不要只依靠颜色传达信息
• 提供替代指示（图标、标签、图案）
• 适用时支持深色模式
• 测试色盲场景

组件架构

容器/展示组件模式

展示组件：

• 专注于渲染 UI 元素
• 通过 props 接收数据
• 不管理状态，也不包含业务逻辑
• 高度可复用且易于测试

容器组件：

• 负责数据获取和状态管理
• 管理业务逻辑
• 将数据传递给展示组件
• 连接到应用状态/上下文

原子设计方法

**原子：**基本构建块（按钮、输入框、图标）

• 单一用途的组件
• 高度可复用
• 样式一致

**分子：**简单的组件组合（表单字段、搜索栏）

• 将原子组合成具备功能的单元
• 保持单一职责

**有机体：**复杂的组件组合（页眉、卡片、表单）

• 将分子和原子组合起来
• 表示不同的内容区块

**模板：**页面级布局

• 定义结构和位置
• 不包含实际内容

**页面：**具体实例

• 将实际内容应用到模板
• 应用中的实际屏幕

无障碍（a11y）

屏幕阅读器支持

标签和提示：

• 所有交互元素都需要无障碍标签
• 使用 accessibilityLabel（React Native）或 contentDescription（Android）
• 为复杂交互提供提示
• 播报动态内容的变化

导航：

• 采用符合逻辑的焦点顺序（从上到下、从左到右）
• 为重复内容提供跳过导航的选项
• 明确标题层级
• 播报屏幕变化

认知无障碍

降低认知负担：

• 标签清晰简洁（避免使用术语）
• 在整个应用中保持模式一致
• 渐进式呈现（只显示所需内容）
• 提供清晰的错误消息和恢复步骤

焦点管理：

• 清晰突出显示获得焦点的元素
• 在适用场景下支持键盘导航
• 导航过程中保持焦点上下文

性能优化

感知性能

加载状态：

• 内容加载时显示骨架屏
• 操作超过 1 秒时显示进度指示器
• 乐观更新 UI（立即显示操作结果）
• 防止加载期间布局偏移

响应能力：

• 在 100 毫秒内提供触控反馈
• 为所有交互提供视觉反馈
• 动画流畅（目标为 60fps）
• 对快速输入进行防抖处理

React Native 最佳实践

组件优化：

• 对开销较大的组件使用 React.memo
• 实现 shouldComponentUpdate 或 useMemo
• 延迟加载大型组件
• 对长列表进行虚拟化（FlatList、SectionList）

包优化：

• 为大型应用进行代码拆分
• 移除未使用的依赖项
• 优化图片大小和格式
• 使用 Hermes 引擎（Android）

设计系统要点

一致性检查清单

视觉一致性：

• 统一的调色板（主色、辅助色、强调色、中性色）
• 定义排版比例（字号、字重、行高）
• 间距系统（4pt/8pt 网格或类似方案）
• 记录组件库文档
• 图标集的样式和尺寸保持一致

行为一致性：

• 统一导航模式
• 按钮操作符合预期
• 表单验证保持一致
• 错误处理标准化
• 加载状态保持统一

组件文档

记录每个组件的以下内容：

• 用途和使用场景
• Props 及其类型
• 视觉变体（状态、尺寸、样式）
• 无障碍要求
• 平台特定注意事项
• 使用示例

2026 年设计趋势（可选增强）

AI 驱动的交互

预测式 UI：

• 根据上下文预测用户需求
• 表单中的智能默认值
• 个性化内容排序
• 情境化建议

对话式界面：

• 支持语音交互
• 自然语言输入
• 通过对话渐进式呈现信息

高级视觉设计

空间计算：

• 考虑深度和层次
• 微妙的视差效果
• 在适当场景使用 3D 元素
• 沉浸式体验

微交互：

• 令人愉悦的动画细节
• 协调触觉反馈
• 为操作设计声音
• 增强情感参与感

工作流集成

设计阶段

1. 定义需求 - 了解用户需求和业务目标
2. 研究模式 - 查看平台指南和竞品
3. 绘制线框图 - 先制作低保真布局
4. 创建原型 - 制作用于测试的交互式模型
5. 验证设计 - 进行用户测试和无障碍检查

审查阶段

审查设计或实现时：

1. 检查平台惯例（iOS 与 Android）
2. 验证触控目标尺寸（至少 44pt/48dp）
3. 测试颜色对比度（至少符合 WCAG AA）
4. 验证无障碍标签
5. 确认符合设计系统的一致性
6. 审查性能注意事项

实施阶段

1. 使用展示层/容器模式
2. 自底向上构建原子组件
3. 从一开始就实现无障碍功能
4. 在真实设备上测试（两个平台都要测试）
5. 优化性能
6. 记录组件用法

其他资源

参考文件

如需了解平台专属指南，请参阅：

平台指南：

• references/ios-guidelines.md - 全面的 iOS HIG 摘要（SF 字体、导航、VoiceOver、触觉反馈）
• references/android-guidelines.md - Material Design 3 要点（组件、动效、TalkBack）
• references/platform-differences.md - iOS 与 Android 速查指南（导航、手势、组件）

实现指南：

• references/accessibility-checklist.md - 完整的 WCAG 2.1 AA 测试指南（屏幕阅读器、对比度、触控目标）
• references/performance-patterns.md - React Native 优化（FlatList、动画、包体积、内存）
• references/common-mistakes.md - 常见设计错误及修复方法（触控目标、排版、无障碍、表单）
• references/ui-libraries.md - React Native UI 库对比（Paper、Elements、Tamagui、NativeBase）

示例文件

examples/ 中的可运行代码示例：

• profile-screen-example.tsx - 完整的个人资料页面，采用 Atomic Design，包含无障碍标签和性能优化
• form-validation-example.tsx - 无障碍表单，支持实时验证、合适的键盘类型和错误处理
• optimized-list-example.tsx - 使用虚拟化、React.memo、骨架屏加载和下拉刷新的 FlatList
• design-system-config.ts - 完整的设计令牌（颜色、排版、间距、阴影、组件变体）

实用脚本

脚本/中的开发工具：

• check-contrast.py - WCAG 对比度比例验证器（用法：python check-contrast.py "#FFFFFF" "#000000"）
• validate-touch-targets.sh - 验证至少 44pt/48dp 的触控目标（用法：./validate-touch-targets.sh src/）
• accessibility-audit.sh - 检查缺失的标签、角色和无障碍问题（用法：./accessibility-audit.sh src/）

快速参考

触控目标

• iOS：最小 44×44pt
• Android：最小 48×48dp

排版

• 正文：最小 16sp/pt
• 标签：最小 11pt

对比度

• 文本：最小 4.5:1
• 大号文本：最小 3:1
• 组件：最小 3:1

导航

• iOS：左上角返回，右上角操作，底部标签
• Android：左上角返回，右上角菜单，右下角 FAB

性能

• 触控反馈：<100ms
• 动画：目标 60fps
• 加载指示器：用于耗时超过 1 秒的操作