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 条是移动化后的结构手法工具箱（来源：实战踩坑沉淀，非凭空）：

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

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

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

• 拇指热区（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 精致高级感。

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

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

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

桌面靠 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 的接驳（不重复）

做移动 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。