# Design Mobile App

> 移动端 App 界面/原型专项方法论。当载体是**手机 App 界面或原型**、且当前产出"像 AI 默认模板 / 只换皮肤不换骨架 / 卡片从上往下等距堆叠"时触发。核心价值是把**结构手法**落到移动范式上——用拇指热区、safe area、一屏一焦、密度节奏、字号极端跳档+字重对比、网格对齐、不对称、原生组件语汇与手势驱动版面，把 App 做出"人做的"结构感。改版顺序以**用户指令为准**：默认可先调皮肤，结构按用户要求再动或一起动，不强行每轮改骨架。触发词：「移动端设计」「App 界面」「App 原型」「手机 UI」「iOS 设计」「移动端结构」「反移动 slop」「拇指热区」「底部导航」「bottom sheet」「移动端排版」「App 组件」「线框图」「低保真」「PRD 走查」「全流程巡查」「页面巡查」「写 APP」。

- Skill: `yang20040317-svg/design-mobile-app` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yang20040317-svg/design-mobile-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yang20040317-svg/design-mobile-app/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: yang20040317-svg (https://skillmd.com/u/yang20040317-svg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yang20040317-svg/design-mobile-app

---


# design-mobile-app ｜ 移动端 App 界面/原型专项

> 本技能是 design-workflow 抽离出的**移动端专项**，专治"App 界面做得像 AI slop"——典型症状：**只换皮肤不换骨架**：换配色/圆角/字体/装饰件，但 UI 骨架完全没变；默认形态 = 同质化卡片从上往下等距堆叠 + 统一圆角 + 统一间距 + 层级只靠字号等差递减（26/22/15/14/12）。
> 与 `design-frontend`（通用前端/数字产品原则：结构装置即信息、反模板校准、UX 写作、动效意图）**分工**：`design-frontend` 管"通用交互/文案/动效意图"；**本技能管"移动专属的结构约束与原生范式"**——那些桌面不存在、手机才有的硬约束与小屏结构语言。两者叠加，不要二选一。

## 一、结构手法（按用户指令使用，非强制首步）

App UI 改版顺序**以用户指令为准**：默认可先调皮肤（配色/圆角/字重/间距/装饰），结构（骨架/分区/层级/密度）按用户要求再动、或和皮肤一起动——**不要自作主张把『改骨架』当成每轮必做第一步**。当用户指出「只换颜色没用 / 毫无设计感」时，即结构层没动，应主动动结构。下面 6 条是移动化后的结构手法工具箱（来源：实战踩坑沉淀，非凭空）：

| # | 结构手法 | 移动端落地 | ❌ AI slop 反面 |
|---|---|---|---|
| 1 | 版面分区靠 hairline / 留白 / 栏位切分 | 用 1px 发丝线、段间距、section 标题分区；**不靠白色卡片容器** | 每屏都是灰底上一坨坨白色圆角卡片 |
| 2 | 信息密度节奏变化 | feed 列表极密 ↔ 详情/hero 极空，**交替**，不要每屏一样密 | 每个页面密度相同，像同一套模板填空 |
| 3 | 字号极端跳档 | 用 `56 / 30 / 14 / 9` 这种跳档；**拒绝等差数列** 26/22/15/14/12 | 所有文字按等差字号递减，层级"看起来有、其实平" |
| 4 | 网格与对齐 | 数字用 `tabular-nums` 严格成列、跨栏、视觉对齐（optical）；列表行左标题右值 | 数字对不齐、小数点乱飞、左右不对齐 |
| 5 | 不对称 | 左对齐标题 vs 右对齐"查看全部"；底部导航左标签、FAB 右；制造张力 | 通篇居中、所有元素对称排布 |
| 6 | 字重对比 | 大字 `200` 细 + 小字 `600` 粗（比换字体有效） | 整页同字重，靠字号 alone 拉层级 |

> **何时用这条自检**：仅当**用户已明确指向结构问题**（"只换颜色没用""毫无设计感"）时，才问"换套配色后界面还是不是那个东西"——如果是，说明只动了皮肤、没动结构，此时应动结构。结构没变，刷十层颜色也还是那个东西。但在用户只要求换皮肤/调色的轮次里，这属正常迭代，不算缺陷。

## 二、移动专属硬约束（桌面没有的）

这些是小屏物理现实，不是风格偏好，**必须先满足再谈美观**：

- **拇指热区（Thumb Zone）**：主操作放屏幕**底部 1/3**（单手可达）；次级/销毁类操作放顶部或需二次确认。底部 tab bar 的主 CTA 落在此区。
- **Safe Area**：状态栏 / 灵动岛 /  home indicator / 屏幕圆角必须留白，**内容不出血到圆角与缺口**。顶部内容避开状态栏高度，底部内容避开 home indicator。
- **一屏一焦**：每屏只服务**一个核心任务/焦点**；不像桌面多栏平铺。用导航分层承载复杂度——tab（平级切换）/ stack（钻取）/ sheet（临时上下文），而非同屏堆砌。
- **触摸目标 ≥ 44×44pt（iOS HIG）/ 48dp（Material）**：图标按钮、列表行、可点区不得小于此，含足够 hit padding。
- **密度节奏**：列表/数据表可极密；但每进入一个详情/hero 屏要"空"下来，给用户呼吸。密↔空交替是高级感的来源。

### 工程规范基线（设计稿标注层 · 不约束审美）

> 来源：移动端 UI 设计规范（设绘玩家UED 教程）提炼。本小节管"**标注严谨度与系统组件占位**"——解决"设计稿漂亮、开发还原差"的断层。它是**工程正确性基线，不约束审美风格**：字号跳档、反 slop、athens-week 等审美层不受此影响；若与审美层冲突，**审美层优先**。本基线**不含字号层级规则**——字号跳档按第一节第 3 条，不要套用"偶数等差、层级差 2–4px"。

- **尺寸基准与适配**：以 `750×1334px（@2x）` 为设计基准画布；向上适配 `1242×2208px（@3x）`、向下 `640×1136px（@1x）`——等比缩放后微调横向间距即可，竖向元素物理尺寸不变；唯一弹性响应的是**水平方向布局宽度**。
- **系统组件层（需预留高度，不与之重叠）**：状态栏（信号/时间/电池，刘海/灵动岛需避让）· 导航栏（标题 + 左右操作位，常驻顶部）· 标签栏（底部 ≤5 个平级入口，见第三节）。设计稿需为这三类预留固定高度，内容不重叠。
- **边距与卡片间距（数值下限参考）**：全局边距主流 `20 / 24 / 30 / 32px`（iOS 系统级 30px 最舒适，**20px 为安全下限，建议不低于此**）；卡片间距主流 `16–40px`（16px 紧凑极限、40px 宽松上限，超出易结构松散）。
- **按钮三态（交付稿需标注）**：`Normal` / `Pressed`（50–80% 透明度或换辅助色）/ `Disabled`（30–50% 透明度）。不可点状态必须显式区分。
- **提示框类型**：`模态`（强制交互才能继续）vs `非模态`（toast 类，几秒自动消失、不阻断操作）。设计稿需区分二者触发场景。
- **图片比例（按场景选，非强制）**：16:9 视频类 / 4:3 设计类 / 3:2 生活服务 / 1:0.618 精致高级感。

## 三、移动原生组件语汇（当作结构模块，不是装饰）

下列不是"组件库样式"，而是**结构模块**——它们定义了信息如何分层与组织：

| 结构模块 | 承载什么 | 反 slop 用法 |
|---|---|---|
| 底部标签栏 Bottom Tab | ≤5 个平级入口，常驻主焦点 | 别塞 7+ 个；别用 tab 当抽屉 |
| 底部抽屉 Bottom Sheet | 临时上下文 / 次级操作 / 表单，上滑半屏 | 比 modal 全屏更轻；锚定触发点"长出来" |
| 悬浮按钮 FAB | 单一主行动（创建/扫码），落拇指热区 | 全屏只一个 FAB；别和底部 CTA 重复 |
| 分段控件 Segmented | 2–4 个互斥视图，原地切换 | 别用 tab 做原地切换、别用下拉做 3 选 1 |
| 列表行 List Row | 主-次信息对（标题左 / 值右 / chevron 右） | 数字 tabular-nums 右对齐成列 |
| 搜索栏 Search Bar | in-page 常驻，非 modal 弹层 | 别一点击就全屏遮罩 |
| 骨架屏 Skeleton | 加载占位（保留布局轮廓） | 比转圈 spinner 高级，且防布局抖动 |
| 手势 Gesture | back swipe / sheet dismiss / card stack / pull-to-refresh | 手势是**结构的一部分**，不是装饰；配 `design-frontend` 动效语义 |

## 四、手势驱动的版面（移动独有）

桌面靠 hover/click，移动靠**手势即导航**：

- **滑动切换** tab / 轮播 / 日视图——滑动方向即信息时序。
- **上滑 sheet**——临时层从底部"长出来"，退出比进入快（见 `design-frontend` 时长表）。
- **卡片堆叠滑动**——多内容用叠牌而非平铺网格（density 低、焦点单）。
- **下拉刷新 / 边缘返回**——系统级手势，别用按钮替代；自定义手势需有可视线索（橡皮筋、位移）。
- 手势动效参数（iOS 抽屉曲线）：`cubic-bezier(0.32, 0.72, 0, 1)`；spring bounce 0.1–0.3，多数 UI 避免 >0.3。

## 五、移动端图文：生图织进结构（不是绕开"图"）

> 来源：实战校准——"这类设计的 APP 都需要使用生图来构建它的那些 UI，比如图片啊、图标啊、结构啊、颜色啊，可能都需要"。纯文字+细线的编辑式版式很"安全"（不需要面对图像），但会抽掉产品情感核心；App 里没有产品主视觉 = 逃避。

- **顺序反了就"对但不动人"**：❌ 先定配色再找图 → ✅ **先生图 → 从图取色 → 把图织进结构**。凭空挑的色板谁都能想到；从主视觉长出来的色板才属于这个产品。
- **取色**：图读不了内容时，用 Python + PIL `Image.quantize(colors=8, method=Image.MEDIANCUT)` 抽 dominant 色 + 采样四角/中心均值（比肉眼客观，且能发现"主照是暗调"这类改变结构决策的事实）。
- **生图 prompt 配方（编辑式真实摄影风）**：`editorial documentary photography / 85mm prime / shallow depth of field / natural window light / muted film color grade / generous negative space / no props`；去 AI 萌感负向：`dignified not cutesy`。
- **图标与图像分工**：功能性线图标 → **手写 SVG**（线宽/光学重量/像素网格一致，生图难保证套系一致）；生图适合 → 照片 / 插画 / 材质纹理 / signature 主视觉。
- **工程坑（预览服务把 HTML 放隔离 hash 目录，相对路径取不到本地图）**：按 UI 实际显示尺寸压图后**内联 base64**（显示 368px 就出 800px@2x，别塞原图）。5.3MB 原图 → 141KB，HTML 335KB 自包含。

## 六、与 design-frontend 的接驳（不重复）

| 维度 | 谁管 |
|---|---|
| 结构装置即信息 / 反模板校准 / UX 写作 / 动效意图与克制 | `design-frontend` |
| 拇指热区 / safe area / 一屏一焦 / 密度节奏 / 字号跳档+字重对比 / 网格对齐 / 不对称 / 原生组件语汇 / 手势版面 / 生图织结构 | **本技能 `design-mobile-app`** |
| 动效参数（时长 ≤300ms / spring / transform-origin / 键盘操作不动效 / hover 门控） | `design-frontend` 第八节（移动同样适用） |

> 做移动 App 时：按用户指令决定动皮肤还是动结构。**若用户指向结构问题**，先过本技能第一、二、三节把结构立住，再让 `design-frontend` 收文案与动效意图；若用户只要求换皮肤/调色，则正常迭代皮肤即可。结构需要动却没动，文案再好也是 slop。

## 七、写 APP 的两步标准流程（线框图起步 · 全流程巡查贯穿）

> 来源：vibecoding 实战沉淀（抖音截图提示词，已逐字提取）。本技能不只管"把界面做不丑"，还管**写 APP 的正确工序**——这两步是**默认动作**，不是可选锦上添花。
> **调用约定（写 App / 做应用任务必走）**：
> - ① **第一步 = 默认起步：先出低保真线框图**。拿到 PRD 后，先平铺全部核心页面 + 关键状态成单页 HTML 线框，确认流程对，再谈正式 UI。跳过这步直接上高保真 = 等 UI 做完了才发现产品不对。
> - ② **第二步 = 开发中贯穿：跑全流程巡查**。核心流程开发到任一里程碑，就生成一份本地走查页，覆盖正常 + 分支 + 异常状态，带反馈标记，可导出交给 AI 改。

### 7.1 第一步（默认起步）· 低保真线框图

**触发**：任何"写 APP / 做应用"任务，拿到 PRD 后的**默认第一动作**。

**可直接套用的提示词**：

```
请根据当前项目已经写好的 PRD，梳理产品的完整核心交互流程，并生成一份低保真线框图，最终输出为一个单页 HTML 文件。
要求：
1. 只做低保真，不做正式 UI。使用黑白灰、基础框线和图片占位块，只表达信息层级、核心文案、按钮位置和页面状态；
2. 每一屏都标清页面名称、它在流程里的位置、用户可以执行的操作，以及操作之后会进入哪个页面或状态；
3. 不要擅自增加 PRD 里没有的功能。PRD 中没有说明清楚的地方单独标成「待确认」，不要自行补全；
4. 按照用户真实使用产品的先后顺序分组，把 PRD 中涉及的核心页面和关键状态全部平铺在同一页，让我可以从头到尾检查整个流程；
5. 除了正常流程，还要补齐 PRD 中涉及的首次使用、权限申请、加载中、无数据、失败和异常恢复等状态；
6. 所有内容放在一个 HTML 文件里，打开文件就能完整查看。
```

**产出**：单页 HTML 低保真线框图（平铺全部核心页面 + 关键状态，含「待确认」标记）。

### 7.2 第二步（开发中贯穿）· 页面全流程巡查

**触发**：核心流程开发完成 / 任一里程碑；做一轮完整页面巡查。

**可直接套用的提示词**：

```
现在产品的核心流程已经开发完成，我要做一轮完整的页面巡查。请根据现有 PRD 和已经实现的功能，实际运行产品，按用户真实使用产品的先后顺序梳理流程，截取所有核心页面和关键状态，并生成一个本地的流程走查页面。
要求：
1. 按照用户的实际使用流程分组，每一组一个小标题，从上往下看完就是一次完整的产品体验；
2. 每一屏都要标注页面名称、当前状态和反馈方式，并提供一个反馈输入框，以及「可以」「待改」「阻塞」三个快捷标记；
3. 所有反馈输入后自动保存在本地；
4. 在新一轮走查页中保留上一轮的反馈原话，并给改动过的页面加上标记，方便逐条回归验证；
5. 除了正常页面，还要覆盖重要的流程分支，以及不同的页面状态；
6. 每一组最后追加一个流程反馈输入框，用来记录反馈；
7. 支持导出 Markdown、导出 JSON，可以直接交给 AI 修改。
```

**产出**：本地走查页（每屏带反馈输入 +「可以 / 待改 / 阻塞」标记，反馈落本地，支持导出 Markdown / JSON 逐轮回归）。

## 自检清单（交付前必过）

- [ ] 是否出现"只换皮肤不换骨架"的缺陷？**仅在用户指向结构问题时才算缺陷**——换套配色后界面还是不是那个东西？（一节·自检）
- [ ] 分区靠 hairline/留白/栏位，而非白色卡片容器？（结构 1）
- [ ] 密度有节奏吗？列表密 ↔ 详情空，交替而非全等密？（结构 2）
- [ ] 字号是跳档（如 56/30/14/9）还是等差数列？（结构 3）
- [ ] 数字 `tabular-nums` 严格成列、跨栏对齐？（结构 4）
- [ ] 有不对称张力（左标题/右操作），而非通篇居中？（结构 5）
- [ ] 字重有对比（大字 200 / 小字 600）？（结构 6）
- [ ] 主操作在底部拇指热区？safe area 没被内容出血？（二节）
- [ ] 每屏一个焦点？复杂度靠 tab/stack/sheet 分层而非同屏堆？（二节）
- [ ] 触摸目标 ≥44pt？原生组件用对（tab≤5 / FAB 单一 / sheet 锚定触发点）？（三节）
- [ ] 设计稿是否按工程基线标注（750×1334 基准 / 系统组件层预留 / 按钮三态 / 模态非模态区分）？与审美冲突时审美优先？（工程基线）
- [ ] 手势是结构一部分、有可视线索？动效走 iOS 抽屉曲线？（四节）
- [ ] 生图是否"先图后色"织进结构？是否内联 base64 避免路径失效？（五节）
- [ ] 文案/动效意图是否过了 `design-frontend`？（接驳表）
- [ ] 写 APP 是否走了标准两步：先出低保真线框图（默认起步）再谈正式 UI？开发中是否跑过全流程巡查走查页？（七节）

## 边界与维护

- 本技能只管"移动端 App 界面的结构约束与原生范式"，通用排版/配色/留白落到主技能 `design-workflow` 对应层；UX 写作与动效意图走 `design-frontend`。
- 不替代 `design-frontend`，二者叠加使用。
- 版本演进见父包 `design-workflow` CHANGELOG。