feat: 优化 AI 修图模板与全屏预览

2026-08-13 13:48:11 +08:00
parent 60502784db
commit f2a005e008
22 changed files with 410 additions and 116 deletions
@@ -0,0 +1,85 @@
+# 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。
@@ -0,0 +1,76 @@
+# AI 修图完整链路设计稿 V2
+
+## 本轮调整
+
+- 第 1、2 张沿用 V1 的浅色“轻盈极光蓝”风格。
+- 第 3–6 张改为统一的黑色专业影像工作区，突出照片本身。
+- 暗色页面不做简单反色：背景、浮层、边框、文字和按钮均使用独立暗色语义层级。
+- V1 完整保留在 `../ai-retouch-v1/`，便于对比和回退。
+
+## 交付内容
+
+| 文件 | 页面 / 状态 | 风格 |
+|---|---|---|
+| `00-flow-overview-v2.png` | 六张关键屏稿总览 | 混合流程 |
+| `01-album-multi-selection.png` | 相册管理 · 已选择 4 张 | 浅色 |
+| `02-template-selection.png` | AI 修图模板选择 Sheet | 浅色 |
+| `03-template-preview-dark.png` | 模板全屏预览 | 暗色 |
+| `04-result-success-dark.png` | 精修结果 · 成功 | 暗色 |
+| `05-result-processing-dark.png` | 精修结果 · 生成中 | 暗色 |
+| `06-result-failed-dark.png` | 精修结果 · 生成失败 | 暗色 |
+
+## 暗色设计 Token
+
+- 页面背景：`#05070D`，允许向深海军蓝 `#07111F` 做非常轻微的层次过渡。
+- 抬升表面：`#111827`；边框：`#263244`。
+- 主文字：`#F8FAFC`；次文字：`#9CA3AF`；未选中标签：`#C7CED9`。
+- 品牌主色：`#1677FF`；蓝色高光：`#5CA8FF`。
+- 失败色：`#EF4444`，仅用于失败徽标、恢复入口和局部边框。
+- 图片保持明亮自然，不叠加全屏蒙层；信息区和操作区不出现白色表面。
+
+## 可复用 ImageGen 暗色编辑提示词
+
+以下提示词使用内置 ImageGen，以对应 V1 页面作为 edit target；第 3 张暗色稿确定后，也作为第 4–6 张的风格参考。
+
+### 通用暗色编辑约束
+
+```text
+Use case: precise-object-edit
+Restyle the target into a cohesive dark professional photography workspace.
+Preserve the exact iPhone portrait dimensions, photo content and crop, person identity and pose, all Chinese copy, hierarchy, controls and safe-area spacing.
+Use background #05070D, elevated surface #111827, border #263244, primary #1677FF, text #F8FAFC and secondary #9CA3AF.
+Keep the bright photo unchanged as the focal point. Use white text and SF Symbols-style white icons. Use brand blue only for selected state and primary actions.
+No white page areas, no comparison slider, no device frame, no annotations, no watermark and no additional copy.
+```
+
+### 模板预览
+
+```text
+Keep “自然通透”, “双指缩放查看细节”, the Santorini photo and “模板效果预览”. Change the lower information panel to charcoal with white heading, muted description and blue “当前已选择”. Change the complete bottom safe area to black and retain the blue “使用此模板” action.
+```
+
+### 修图结果
+
+```text
+Keep “照片预览”, “1 / 9” and the three tabs “原图 / 精修后 / 氛围感”. Use a charcoal segmented control with “精修后” selected in blue. Keep “AI已修”, the filename metadata, the photo and the result information. Change the result card and secondary actions “删除 / 刷新” to dark surfaces; keep “AI修图” blue.
+```
+
+### 处理中状态
+
+```text
+Based on the approved dark result screen, change only the badge to spinner + “修图中”. Keep the previous photo visible. Change the card to “正在生成新版本” and “当前仍展示上一版结果，完成后自动更新”, with an indeterminate shimmer line and no percentage. Disable only “AI修图”.
+```
+
+### 失败状态
+
+```text
+Based on the approved dark result screen, change only the badge to “生成失败”. Keep the previous photo visible. Use a charcoal recovery card with restrained red border, “新版本生成失败”, “上一版结果已保留，可重新修图” and “重新修图”. Keep the main “AI修图” button blue. Do not use a white or pale-red card.
+```
+
+## QA 记录
+
+- 第 1、2 张与 V1 像素级复用，没有重新生成。
+- 第 3–6 张均为 853 × 1844，暗色背景、表面、文字和操作层级一致。
+- 成功、处理中、失败三态保留同一结果标签、照片和底部操作布局。
+- 处理中无虚构百分比；失败状态有明确恢复动作；旧结果始终可见。
+- 本目录只新增设计稿与说明，未修改 UIKit、业务逻辑或 Asset Catalog。