移动 App 多屏 UI 设计指南：390×844 视口规范、screens.html 并排走查与手势状态
很多开发者让 AI 做手机 App 界面时，得到的其实是一个被强行挤进窄框里的桌面网页：字号偏小、按钮靠上、一屏塞满四五个模块的卡片。真正的移动 App 设计必须从 390×844（或穿戴设备的专用尺寸）出发，每屏聚焦一个主动作，并通过多屏并排页（screens.html）一次性审视完整任务流的前后衔接。
核心要点
- 锁定 390×844 手机视口设计，按单手拇指热区放置高频操作，不要把桌面端的多栏卡片硬塞进单列长页面。
- 用“单页可交互 index.html + 多屏并排 screens.html”双交付模式，一眼看清从列表、详情到操作完成的三至五屏连贯性。
- 移动端的灵魂在于状态变化与触感反馈：如拖动潮汐时间轴、拧开扭蛋机旋钮、行程中修改打车目的地。
- 穿戴设备与车载屏幕需严守物理环境约束（如游泳手表 198×242 纯黑高对比单大字、车载中控 1920×720 盲操大按钮）。
npx skills add oil-oil/oil-ui在 /inspiration/mobile-app-design/ 可查看 30+ 个多屏移动 App 演示与提示词。
为什么手机 App 不能当成“压窄的网页”来做
网页允许访客在宽屏上同时扫视导航栏、侧边栏和正文卡片；而在 390×844 的手机屏幕上，用户的注意力集中在当前正在推进的那一步操作。如果一屏里同时出现顶栏搜索、轮播横幅、四个金刚区图标和两排双列小卡片，整屏就会显得拥挤且局促。
看看画廊里的移动 App 案例是如何取舍的：冲浪预报《Tide》把核心放在“拖动底部时间轴，浪高、风向与潮汐曲线同步变化”；打车应用《来接 Pickup》围绕地图与底部抽屉的联动，清楚拆解了确认上车点、等待接驾与行程中改址三屏；数字银行《Pact》与冥想应用《Luma》则严格控制每屏的信息层级，让核心金额或呼吸计时一眼可读。
| 作品与模型 | 尺寸规格 | 第一屏（起点） | 第二屏（深入/交互） | 第三屏（完成/反馈） |
|---|---|---|---|---|
| Tide 冲浪预报 (GPT 6.1 Sol) | 390×844 手机 | 常去浪点列表与最佳下水时段提示 | 单浪点 7 日浪高、风速与潮汐曲线详情 | 按住时间轴拖动至具体时刻的实时数据联动 |
| 来接 Pickup (Claude Sonnet 5.5) | 390×844 手机 | 地图大头针确认上车点与车型预估价 | 司机接单赶来途中的实时位置与车牌核对 | 行程中弹出抽屉修改目的地与费用重算 |
| Luma 冥想与睡眠 (GPT 6.1 Sol) | 390×844 手机 | 按入睡/减压场景进入的晚间安静首页 | 呼吸练习或助眠音轨播放中的极简呼吸引导 | 晨间醒来后的睡眠时长与节律记录回顾 |
| Splitwater 游泳手表 (GPT 6.1 Sol) | 198×242 手表 | 泳池行进中（纯黑底、单屏唯一超大趟数） | 池边休息倒计时环与震动入水提醒 | 湿手旋转表冠解锁水锁与训练总结（共五屏） |
用 screens.html 多屏并排审视完整任务流
只做单张页面时，很容易忽略屏幕之间的跳转逻辑和视觉统一性。在 Oil UI 的画廊规范与日常工作流中，我们推荐让 Agent 同时交付两个文件：
可真实点击与切换状态的 index.html
在 390×844 视口下承载完整交互，用户可以真实点击底部标签、拉开半屏抽屉、拖动滑块或触发状态切换。
把 3 至 5 个关键屏幕并排展开的 screens.html
在同一张画布上把核心流程的每一屏横向排开（例如：1. 列表页 → 2. 详情与操作中 → 3. 结果反馈页）。这样不用来回点击，就能一眼看出各屏的顶栏高度、字号梯度、底栏位置和主色调是否统一。
逐屏截取 DPR=2 高清图做盲审
对并排的每一屏分别按 390×844 截图，检查底部安全区留白、按钮可点击高度（至少 44px）以及长文案是否发生截断。
移动 App 多屏设计提示词模板
把下面的模板发给 Claude Code 或 Codex，能直接生成包含可交互主页与多屏并排预览的移动端作品：
用 Oil UI 设计并实现一款 [App 类型，例如：多人协作旅行行程 App / 个人记账与预算 App]，视口尺寸 390×844。
- 核心任务与手感：[说明用户最常做的那个动作，例如：按天拖拽调整景点顺序并自动重算路程时间 / 快速记一笔并看到本周剩余预算进度变化]
- 三屏关键状态：
1. 屏幕一：[主视图，如行程总览或当月账本]；
2. 屏幕二：[核心操作态，如拖拽调整时段或分摊账单抽屉展开]；
3. 屏幕三：[完成态或二级详情态]。
- 交付物：同时交付可交互的 index.html 与将三屏并排展示的 screens.html，确保符合移动端拇指操作习惯，不堆砌桌面式多栏小卡片。如果你在用 React Native、Flutter 或 SwiftUI，也可以让 Agent 先用这套方式快速对齐多屏视觉方案，再转写为原生组件代码。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Tide
冲浪与潮汐预报 App
一个冲浪者用的浪况与潮汐预报 App（390×844）：收藏的浪点列表、单个浪点今天和未来七天的浪高、周期、风向风速、潮汐曲线，以及“什么时候去最好”的时段建议。 潮汐和浪况随时间变化，是这件作品的数据可视化核心：拖动时间轴，浪、风、潮一起更新。设计浪点列表、单个浪点详情、拖动时间轴查看某个时刻三个状态。交付 `index.html` 和三屏并排的 `screens.html`。
查看作品与提示词 →
来接
打车 App
打车 App 里下单之后的界面（390×844）：地图上车辆正在靠近、司机和车辆信息、预计到达、上车后的行程进度。 地图用代码画（路网、路线），不用真实地图截图。最焦虑的时刻是等车，让“车还有多远”一眼可见。 截等车、车到了、行程中三个状态。交付 `index.html` 和三屏并排的 `screens.html`。
查看作品与提示词 →
Luma
冥想与睡眠
一个帮睡不好的成年人放松入睡的 App（390×844），界面用英文：睡前放松流程、引导呼吸和冥想、助眠声音混合，早上看昨晚的睡眠报告。 呼吸引导是这件作品的核心：画面随呼吸节奏（例如吸气 4 秒、屏息 7 秒、呼气 8 秒）扩张和收缩，晚上看着眼睛舒服。早上的报告要一眼看出昨晚睡得怎样，不堆指标。不要落到紫色星空渐变加月亮插画的俗套。 设计三屏：今晚（放松流程、推荐练习、声音混合）、一次呼吸练习进行中、早上的睡眠报告（入睡用时、醒来次数、整夜睡眠阶段、和本周比较）。交付 `index.html` 和三屏并排的 `screens.html`。
查看作品与提示词 →
Pact
数字银行
一个给自由职业者和年轻上班族用的数字银行 App（390×844），界面用英文：余额、最近交易、本月花销、储蓄目标、银行卡管理和转账。银行名、卡面和商户标志都是虚构的。 转账和卡片控制是这件作品的核心：选收款人、用数字键盘输入金额、确认发送的那一下要让人安心又利落；一键冻结卡片要有清楚的状态变化。 设计三屏：首页（余额、最近交易、本月花销）、银行卡（卡面、冻结、限额、无接触支付）、转账流程（输入金额到发送成功）。交付 `index.html` 和三屏并排的 `screens.html`。
查看作品与提示词 →用 Oil UI Pro 完善移动端手势、弹窗与小游戏状态
Oil UI Pro 包含完整的移动端导航与安全区规范、半屏抽屉（Bottom Sheet）与表单报错恢复指南，以及针对扭蛋机（《咔嗒》）、推币机（《叮币》）、抓娃娃（《夹到啦》）等互动小游戏的专门版面与状态检查表。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
为什么画廊里的移动 App 案例都能看到三四个屏幕并排？
因为评价一个 App 不能只看孤立的首页。画廊通过 screens.html 把每一屏独立渲染并采样，你在画廊卡片和作品查看器里既能横向对比全部关键屏幕，也能直接切换到单屏模式动手操作。
做 React Native、Flutter 或 iOS 原生项目时怎么用 Oil UI？
有两种常用方式：一是先让 Agent 生成 390×844 的 HTML 同屏对比页和三屏并排稿，3 分钟内定下最顺眼的布局、配色与字号，再让 Agent 按定稿写原生代码；二是直接在原生仓库里让 Agent 修改组件，并通过模拟器截图做盲审走查。
手表、电视或车载屏幕也算在移动与多端场景里吗？
算，而且更考验物理场景约束。例如画廊里的电视应用《夜映》（1920×1080 三米远遥控器焦点移动）、车载中控《沿途》（1920×720 驾驶盲操与转弯动态放大）、游泳手表《Splitwater》（198×242 水锁与表冠解锁），都在提示词里把观看距离与输入方式写在了最前面。
移动端最容易出现的“AI 味”是什么？
最常见的是把所有内容都包进带阴影的圆角白卡片、卡片里再套一层浅灰小卡片，导致 390px 宽的屏幕左右各浪费了三四十像素的内边距，正文每行只能排几个字。用全宽分组与细分割线代替多层嵌套卡片，版面会立刻透气很多。