86 lines
6.0 KiB
Markdown
86 lines
6.0 KiB
Markdown
# AI 修图完整链路设计稿 V1
|
||
|
||
## 交付内容
|
||
|
||
| 文件 | 页面 / 状态 |
|
||
|---|---|
|
||
| `00-flow-overview.png` | 六张关键屏稿总览 |
|
||
| `01-album-multi-selection.png` | 相册管理 · 已选择 4 张照片 |
|
||
| `02-template-selection.png` | AI 修图模板选择 Sheet |
|
||
| `03-template-preview.png` | 模板全屏预览 |
|
||
| `04-result-success.png` | 精修结果 · 成功 |
|
||
| `05-result-processing.png` | 精修结果 · 生成新版本中 |
|
||
| `06-result-failed.png` | 精修结果 · 新版本生成失败 |
|
||
|
||
独立屏稿均为 853 × 1844 像素（约 9:19.5），面向 iOS 16+、iPhone 竖屏、浅色模式。
|
||
|
||
## 设计系统
|
||
|
||
- 主色：`#1677FF`；辅助渐变：`#5CA8FF`、`#A7D8FF`。
|
||
- 页面底色：`#F7FAFF`；主文字：`#172033`；次文字：`#667085`。
|
||
- 失败色：`#EF4444`；赠送/免费标签使用橙色，避免与主要操作竞争。
|
||
- 字体：SF Pro / 苹方风格；圆角 12–16 pt；以 8 pt 为基础间距。
|
||
- 正文置于高不透明度表面；极光光晕只用于背景与重点操作，不承载关键信息。
|
||
- 结果页只通过“原图 / 精修后 / 氛围感”标签切换，不使用对比滑杆。
|
||
- 重新修图期间及失败后保留上一版成功图片；状态反馈只占局部，不遮挡照片。
|
||
|
||
## 可复用 ImageGen 提示词
|
||
|
||
以下提示词使用内置 ImageGen。首屏以 `../travel-album-management-redesign-v2.png` 为风格参考；后续页面以上一张已确认屏稿作为参考，确保视觉连续。
|
||
|
||
### 通用前缀
|
||
|
||
```text
|
||
Use case: ui-mockup
|
||
Asset type: shippable high-fidelity iOS app screen, full portrait canvas, no device frame
|
||
Style/medium: realistic production UIKit UI, light Aurora blue, crisp SF Pro / PingFang-like typography, SF Symbols-style icons, 12–16 pt corners, 8 pt spacing grid, subtle borders and restrained shadows.
|
||
Color palette: primary #1677FF, gradient accents #5CA8FF and #A7D8FF, background #F7FAFF, text #172033 and #667085, danger #EF4444.
|
||
Constraints: iPhone portrait 9:19.5; iOS status bar and home indicator; practical UIKit-buildable hierarchy; accessible contrast; minimum 44 pt touch targets; no dark mode; no watermark; no decorative device frame; no annotations.
|
||
Text constraints: render specified Chinese text exactly once; no gibberish, duplicate labels or unrelated copy.
|
||
```
|
||
|
||
### 01 · 相册多选
|
||
|
||
```text
|
||
Create the album management screen in multi-selection mode. Top navigation: “相册管理” and “完成”. Album summary: “旅拍相册”, “138****8000”. Filter row: “全部 128”, “已购 36”, “时间 ↓”. Use a precise three-column grid of nine travel photos. Four photos have blue checkmarks, blue outlines and subtle selected overlays; other photos show empty selectors. Fixed bottom actions: red outline “删除 4 张” and blue gradient “AI修图 4 张”.
|
||
```
|
||
|
||
### 02 · 模板选择
|
||
|
||
```text
|
||
Create a large native page sheet titled “AI修图” with subtitle “已选择 4 张照片”. Show the note “每张照片生成精修结果，氛围感可选；本次可免费生成 1 张封面”. Include three horizontal sections: “原图精修” + “必选”, “氛围感修图” + “选填”, “封面风格” + “赠送 · 不占额度”. Each section has three photographic cards, a clear single selected state and “预览” buttons. Cost card: “AI精修 · 按张收费”, “预计消耗 8 张”, “剩余 12 张”. Fixed actions: “取消” and “确定”.
|
||
```
|
||
|
||
### 03 · 模板预览
|
||
|
||
```text
|
||
Create an immersive full-screen preview for the selected “自然通透” template. Use a dark navy photographic canvas, a circular back button, title “自然通透” and subtitle “双指缩放查看细节”. The large photo shows a woman in a straw hat overlooking Santorini. Add “模板效果预览”. Bottom information panel: “自然通透”, “提亮肤色与画面通透感，保留自然质感”, “当前已选择”. Primary action: “使用此模板”. Do not add a comparison slider.
|
||
```
|
||
|
||
### 04 · 正常结果
|
||
|
||
```text
|
||
Create “照片预览” with counter “1 / 9”. Add exactly three tabs: “原图”, “精修后”, “氛围感”; select “精修后”. Show the same Santorini photo with badge “AI已修”, filename “IMG_8291.JPG” and “自然通透 · 2026/08/13”. Information card: “精修结果”, “自然通透模板 · 已生成最新版本”. Fixed actions: “AI修图”, “删除”, “刷新”. Use tabs only; no slider or press-and-hold comparison.
|
||
```
|
||
|
||
### 05 · 处理中状态编辑
|
||
|
||
```text
|
||
Use case: precise-object-edit. Keep the successful result screen, photo, tabs and layout unchanged. Replace “AI已修” with spinner + “修图中”. Replace the result card with “正在生成新版本” and “当前仍展示上一版结果，完成后自动更新”, plus an indeterminate shimmer line with no percentage. Keep the previous photo unobscured. Disable only the “AI修图” button; leave “删除” and “刷新” available.
|
||
```
|
||
|
||
### 06 · 失败状态编辑
|
||
|
||
```text
|
||
Use case: precise-object-edit. Keep the successful result screen, photo, tabs and layout unchanged. Replace “AI已修” with a local red badge “生成失败”. Replace the result card with pale-red recovery content: “新版本生成失败”, “上一版结果已保留，可重新修图”, and an outline action “重新修图”. Keep the previous photo unobscured and restore the bottom “AI修图” button to its primary blue state. Do not show a modal, stack trace or error code.
|
||
```
|
||
|
||
## QA 记录
|
||
|
||
- 六张独立屏稿尺寸一致，使用同一旅拍照片体系与组件语言。
|
||
- 精修必选、氛围感选填、四张照片触发封面、封面不占额度均已表达。
|
||
- 成功、处理中、失败三种状态均保留同一照片与结果标签，便于直接比较。
|
||
- 处理中不展示虚构百分比；重复提交按钮禁用，刷新仍可用。
|
||
- 失败状态提供“重新修图”恢复路径，且上一版结果保持可见。
|
||
- 本目录只包含设计稿与说明，未修改 UIKit、业务逻辑或 Asset Catalog。
|