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 为风格参考；后续页面以上一张已确认屏稿作为参考，确保视觉连续。
通用前缀
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 · 相册多选
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 · 模板选择
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 · 模板预览
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 · 正常结果
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 · 处理中状态编辑
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 · 失败状态编辑
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。