Target-state design system · iOS UIKit implementation map

把 Proster 重做成一个可信的照片工作台

这套 HTML 是目标态高保真蓝图,可以领先当前 App 实现,但每个页面必须能映射回真实 iOS 页面、组件和 DesignSystem token。它用于指导 App UI 重做,不是当前 UIKit 的被动截图。

01

照片是主角

首页围绕照片选择组织,结果页围绕海报观看组织。装饰和操作区都要让位给照片与成片。

02

系统负责生成

生成前只保留必要偏好:比例、照片使用倾向、开始生成。不要把用户拖进模板槽位管理。

03

结果后纠偏

用户看到结果后再调整已用/未用照片、更多图版式和重新生成,避免前置复杂决策。

04

轻量陪伴

用更具象的审美助手承载短反馈。形象可以灵动,但不是聊天入口,也不抢照片主视觉。

Embedded page restoration · Tap for detail

页面还原总览

这里直接嵌入每个关键页面的手机还原。桌面端适合横向对照页面关系,手机端按完整流程纵向浏览;需要看 UIKit 落点和规则时,再打开详情页。

01
选照片 首页:照片工作台

轻反馈只辅助选图,不打断用户。

打开详情
02
生成中 处理页:端侧流水线

把质检、理解、排版翻译成用户语言。

打开详情
03
看结果 结果页:海报决策台

海报第一,推荐理由放在操作区。

打开详情
04
解释取舍 照片使用抽屉

未使用不是否定,而是可纠偏的取舍。

打开详情
05
准备模型 模型准备页

只在需要时出现,可跳过并降级。

打开详情

Design to UIKit

实现映射原则

共享 token 先行

颜色、字体、间距、圆角和阴影从 shared/tokens.css 读取,再映射到 UIColor.AppUIFont.AppAppSpacingAppRadius

页面可以领先代码

蓝图表达目标态体验,但每页必须写明未来 UIKit 落点。没有代码落点的视觉想法不能进入页面蓝图。

状态必须可维护

一个页面可以有多个状态区块,但每个状态必须对应真实产品状态,比如空态、生成中、失败、候选切换或抽屉展开。