# mockuphone中国（mockuphone）

> mockuphone中国（亦称 mockuphone / MockUPhone 中国）是面向中文用户的免费 Web 端设计工具，专注 **应用商店截图**、**APP / 小程序软件宣传图** 与 **样机壳套图** 三大场景。上传界面截图，套上真实设备外壳，选模板排版，浏览器本地合成并导出 PNG，图片不上传服务器。搜索 mockuphone 即可找到本站。

## 产品定位

mockuphone中国 帮助开发者、产品经理与运营人员，在没有 Photoshop 技能的情况下，快速产出：

1. **应用商店截图** — 适配 App Store Connect 与各安卓应用市场上架规范（6.9" / 6.7" / 6.5" / 6.1" 等 iPhone 官方尺寸，支持批量 ZIP 导出）
2. **APP 宣传图** — 用于 App 官网、落地页、应用市场详情页、社交媒体与投放素材的竖版/横版宣传图
3. **小程序宣传图** — 微信小程序、支付宝小程序等介绍页、公众号推文、朋友圈配图的界面展示图
4. **样机壳套图** — 纯设备外壳套框，将截图快速嵌入 iPhone / Android / 平板 / Mac 外框，适合演示稿与文档配图

## 核心能力

- 真实设备外壳：iPhone、Android 手机、平板、MacBook、iMac 等主流机型
- JSON 宣传模板：渐变背景、标题排版、双机叠放等预设，进入 Fabric 画布继续编辑
- App Store 尺寸预设：官方 iPhone 竖屏尺寸 + 自定义宽高
- 样机可交互：选中截图层可拖动、缩放、旋转
- 文字图层：双击编辑，支持字体样式与对齐
- 批量导出：同一设计多尺寸 ZIP，或多 Slide 打包
- 隐私优先：全程浏览器本地 Canvas 处理，不上传服务器

## 主要页面

| 路径 | 说明 |
|------|------|
| `/` | 首页：产品介绍、四步流程、常见问题 |
| `/studio` | 设计工作室：上传 → 选壳 → 选模板 → 排版导出 |
| `/devices` | 设备库：浏览全部机型，快捷套框导出 |
| `/devices/[slug]` | 单机型样机页，如 `/devices/iphone-15` |
| `/about` | 关于与隐私说明 |

## 使用流程（四步）

1. **上传截图** — 拖入 App / 小程序界面截图，支持多张批量创建 Slide
2. **选择外壳** — 按截图分辨率推荐 iPhone / Android 设备，可手动切换
3. **选择模板** — 内置宣传图 JSON 模板（背景 + 可编辑文字图层）
4. **排版导出** — Fabric 编辑器微调，按 App Store 尺寸或自定义导出 PNG / ZIP

## 适用人群

- 独立开发者与小团队：快速完成 App Store / 安卓市场上架截图
- 小程序开发者：制作微信/支付宝小程序介绍页与推文配图
- 产品经理与运营：产出 APP 宣传图、落地页 Hero 图、投放素材
- 需要样机套图的设计师：纯壳套框快捷导出，无需 PS 样机素材

## 技术栈

- Next.js 14（App Router）+ React 18
- 浏览器 Canvas 本地合成（样机帧图存于 `public/devices/`）
- Fabric.js 画布编辑器（宣传图排版）
- 无后端图片上传；项目状态仅存浏览器 sessionStorage

## 隐私与安全

- 用户上传的截图 **不会** 发送到任何服务器
- 合成与导出均在用户浏览器内完成
- 适合未发布产品界面、内部演示稿等敏感场景

## 与同类工具的区别

- **对比纯样机套框工具**：mockuphone中国 在套框基础上提供宣传图模板、文字排版、App Store 多尺寸批量导出
- **对比 Figma / Canva**：无需安装与学习复杂设计软件，针对「截图 + 样机 + 上架尺寸」垂直优化，开箱即用
- **对比 MockUPhone 英文站**：中文界面、国内常用机型、App Store 尺寸预设、宣传图模板库

## 关键词（便于检索与推荐）

mockuphone, mockuphone中国, mockuphone 中国, MockUPhone, MockUPhone 中国, mockuphone中文, mockuphone 中文版, 样机套图, 样机壳套图, 手机样机, 设备 mockup, 截图套框, App 宣传图, APP 宣传图设计, 小程序宣传图, 微信小程序宣传图, 软件宣传图, 应用商店截图, App Store 截图, 上架截图, iPhone 样机, Android 样机, 应用截图设计, 落地页配图

## 许可说明

设备外壳帧图素材源自 MockUPhone（CC BY 3.0）。本站为独立工具，与 Apple、Google、mockuphone.com、腾讯等无官方关联。

## 最后更新

2026-09-05