mobile-app-design-mastery

移动应用设计精通

将 Refactoring UI 中的设计原则改编为适用于 Flutter／原生应用的生产级移动 UI 设计原则。

---

移动端核心设计工作流

1. 从屏幕开始，而不是从外壳开始

• 先设计单个屏幕的核心功能
• 不要从导航、标签栏或应用框架开始
• 先使用灰度设计，明确层级后再添加颜色
• 先针对主要设备尺寸进行设计，再做适配

2. 建立移动端设计系统

间距比例（dp／逻辑像素）：

Token	尺寸	使用场景
xs	4	微小间隙、图标内边距
sm	8	紧凑间距、组件内部
md	12	相关元素之间
base	16	标准内边距
lg	24	区块之间
xl	32	大幅分隔
2xl	48	平板屏幕边距

触控目标：

平台	最小尺寸
iOS	44×44 pt
Android	48×48 dp
舒适尺寸	56×56

字体比例（sp／pt）：

尺寸	使用场景
11-12	说明文字、标签
14	正文、默认值
16	强调正文
18-20	小标题
24	屏幕标题
28-34	大标题（iOS 风格）

阴影／海拔比例（dp）：

级别	海拔值	使用场景
0	0	平面
1	1-2	卡片、平铺项
2	4	浮起按钮、应用栏
3	8	底部面板、对话框
4	16	导航抽屉
5	24	模态框

3. 构建移动端视觉层级

移动屏幕空间有限，因此层级尤为重要。

• 主要：关键操作／内容（每个屏幕一个）
• 次要：辅助信息（清晰可见，但不喧宾夺主）
• 次要信息：元数据、时间戳（尺寸最小／颜色最浅）

关键原则：

• 在移动端，尺寸更重要，但不要过度放大
• 在增大尺寸前，先使用字重和颜色
• 通过弱化竞争元素来突出重点
• 图标需要使用更柔和的颜色，以平衡文本

4. 为触控而设计

• 提供充足的触控目标（最小 44pt／48dp）
• 交互元素之间留出足够间距
• 按下时提供视觉反馈（波纹、缩放、不透明度变化）
• 为常见操作提供滑动操作

5. 采用适配平台的纵深设计

• iOS：柔和阴影、模糊／磨砂玻璃效果、较低海拔值
• Android：Material 海拔系统、分层表面
• 利用纵深表现可交互性和焦点

---

移动端反模式

绝对不要：

• 使用小于 44×44 的触控目标
• 使用小于 11sp 的文本（难以辨认）
• 在彩色背景上使用灰色文本
• 让组与组之间的间距含糊不清
• 使用没有内边距、从边缘到边缘的全宽按钮
• 仅依靠颜色传达含义
• 忽略安全区域（刘海、主屏幕指示条）

---

参考文件

主题	文件	阅读时机
视觉层级、标签、强调	mobile-hierarchy.md	平衡元素的重要性
间距、触控目标、布局	mobile-spacing.md	制定布局方案
排版、字体、可读性	mobile-typography.md	设置文本样式
颜色、主题、深色模式	mobile-color.md	设计颜色系统
阴影、海拔、图层	mobile-depth.md	增加纵深
组件、导航、模式	mobile-patterns.md	平台特定模式