让创作者看清每一镜。
基于 PRD v1.2 与 MyReels 实际故事台的产品设计规范。保留「剧本 → 资产 → 分镜 → 成片」的熟悉路径，以明确的版本、状态与费用反馈，减少创作过程中的误操作。
01 / 设计方向与参考边界
内容先于工具
深色中性背景让位于视频画面。缩略图和镜头标题先于提示词；完整参数放在检查器中。
选择必须可见
当前查看 v3，不代表最终采用 v3。已采用版本、审核状态、生成状态独立表达。
每次操作都有归属
项目、镜头号、版本号贯穿预览、任务、账单和导出。避免下载错版本和重复扣费。
实际参考：2026-10-19 查看 MyReels 官网与已登录故事台分集页；观察到深灰底、青色选择态、左分集／中分镜列表／右资产库，以及角色、场景、物品分类。此稿沿用工作流与空间组织，重新设计层级、尺寸与交互；不复制其品牌或私有素材，不声称完成全站审计。
设计师暂定：品牌占位名 KADR、冷青强调色、俄语主界面、虚构短片《最后的光》。这些是可修改的设计选择，不是用户已确认的品牌与定价。未把此前讨论的 VPN 加入产品范围。
02 / 颜色、字体与基础尺寸
背景 / Background
#101214 · --bg面板 / Surface
#181B1E · --panel浮层 / Raised
#202428 · --raised主操作 / Accent
#9BDAED · --accent主文字 / Text
#F0F3F5 · --ink辅助文字 / Muted
#A0AAB4 · --muted| 规范项 | 数值 | 使用要求 |
|---|---|---|
| 字体 | Inter / 系统无衬线 / Segoe UI / Arial | 俄文与拉丁字形统一；中文规范使用系统回退。交付稿无外部字体依赖。生产环境自行托管审核过的字体。 |
| 文字层级 | 页面标题 28–30 / 分区 17 / 正文 14 / 控件 12 / 元数据 10–11 px | 密集桌面场景允许 10–11px 元数据，关键内容不得仅放在小字中。移动输入应至少 16px，正文不少于 14px。 |
| 字重与行高 | 400 / 500 / 600；正文 1.5，长文本 1.7–1.9 | 避免全大写俄语长句；数字、时码使用等宽或 tabular-nums。 |
| 间距 | 4 / 8 / 12 / 16 / 24 / 32 / 48 px | 以 4px 为基础，区域间距大于字段间距。密集分镜卡片 12px 内边距。 |
| 圆角 | 标签 4 / 控件 6–7 / 卡片 8–10 / 弹窗 14 px | 圆角服务层级，不采用全页面胶囊化控件。 |
| 描边与选中 | 1px #30363C；选中 #6B9EAF | 选中镜头同时有浅青背景、左侧强调线和 aria-pressed。 |
| 触控与键盘 | 桌面控件 32–36px；触控最小目标 44px | 所有功能可键盘访问；焦点 2px 青色描边，不移除。图标操作提供可读名称。 |
| 动效 | 120–180ms | 仅反馈与状态切换；不循环闪烁，遵循减少动态效果偏好。 |
生产验收目标：普通文字对比度 ≥ 4.5:1，大字和必要非文字控件 ≥ 3:1。样稿色板还需在具体控件与禁用态上逐项验收，不以色板单项对比代替整页审查。
03 / 布局与信息架构
| 区域 | 桌面基准 | 职责 |
|---|---|---|
| 全局导航 | 左侧 68px | 项目、分镜、素材、剪辑；底部任务、规范入口（仅样稿）和账号。 |
| 项目顶栏 | 70px | 组织／项目、保存状态、成员、导出。导出只在创作场景出现。 |
| 流程导航 | 55px | 项目、剧本、素材、分镜、剪辑；不把无限画布变成 P0 依赖。 |
| 故事台 | 174px 分集 + 弹性分镜 + 300px 检查器 | 分镜是唯一主数据视图。检查器展示所选镜头的预览、提示词、参考与生成参数。 |
| 推荐工作宽度 | 1440–1920px | 1280px 缩紧元数据；1000px 以下收起分集侧栏；720px 以下检查器下移。 |
| 移动范围 | 360–720px | 支持查看任务、账单和审核。复杂剪辑不强制塞入小屏，时间轴局部横滚。 |
页面清单：项目空间、剧本解析、素材库、故事分镜、剪辑与导出检查、登录／注册／找回、套餐、余额与账单、账号设置、成员权限，以及无限画布（P1）、版本审核、任务中心、导出记录。顶端“设计稿页面”选择器是评审工具，生产产品应移除。
04 / 核心组件
按钮层级
每个操作区域只设一个主按钮。危险操作与主操作分离。禁用按钮旁写明原因；高风险确认需要明确的对象与后果。
生成状态
草稿 排队中 生成中
已产出 失败
已产出不等于已审核。未知进度用阶段和排队位置，不虚构百分比。
审核状态
待审核 已通过
需修改
颜色配合文字或图标。审核结果绑定资产版本，不绑定容易变动的显示名。
采用状态
已采用 v2
查看 v3 不切换 v2。点击“采用并使用”后提示受影响时间轴，由用户显式更新。
- 分镜卡：镜头号、缩略图、标题、简短动作、完整模型名、时长、分辨率、审核状态、查看版本与采用版本。
- 参考槽：缩略图 + 语义角色 + 名称 + 固定版本。总数、类型配额、时长限制需同时校验；模型模式切换时指出失效引用，不静默丢弃。
- 版本比较：同镜头同规格并排，保留时间、参数差异、费用；当前采用态独立。样稿为静态图，正式版需同步播放与差异标记。
- 输入组件：标签常驻；帮助信息在输入前可见；错误紧邻字段；不可仅以 placeholder 表达含义。长提示词使用可扩展文本区。
- 任务抽屉：显示任务 ID、镜头、版本、阶段、费用预留与可执行操作。关闭抽屉不取消任务。
- 弹窗：遮罩、标题、对象、后果、取消和确认；Escape 关闭非破坏性弹窗；焦点限制在弹窗并回到触发控件。
05 / 创作流程与 PRD 对应
| 场景 | 设计要求 | PRD |
|---|---|---|
| 脚本解析 | 严格原文默认；台词、说话者、顺序差异必须可见。生成候选不覆盖人工确认。 | SCR-01/02 |
| 生成前确认 | 固定镜头与版本、参数、参考、估价与封顶；确认后提交幂等请求。 | MOD / BIL-01/03 |
| 切换采用版本 | 查看不等于采用；采用后列出受影响的时间轴与字幕。已有导出快照不改变。 | VER / EDT |
| 保存冲突 | 本地未保存、服务端已保存、保存失败分开；版本冲突只允许另存或重新载入，不静默覆盖。 | 第12节 / P0 |
| 授权撤回 | 阻断新任务引用；说明既有成片处理规则与授权记录，不自动删除无关工程。 | CHR-03 / VOI-03 |
| 导出 | 准备检查、采用版本快照、分辨率、音轨、字幕、AI 标识。缺失镜头时阻断完整导出；部分导出需单独明确选择。 | EXP / QA |
画布、专业多轨、实时协同为 P1/P2 方向，第一版视觉稿不暗示这些已经开发完成。检查器中的局部编辑仅存在于浏览器内存，刷新会恢复演示数据。
06 / 登录、注册与账号
- 登录与注册：以 +7 手机号验证码演示。实际认证渠道由运营主体与合规评审确认；不将手机号界面设计等同于法律结论。VK / Yandex / Gosuslugi 暂不画成已接入。
- 同意：注册协议和个人数据同意分别勾选，不预选。真人肖像／声音授权不混入通用注册勾选。协议可阅读、可保存，记录版本与时间。
- 验证码：展示脱敏号码、六位输入、错误与过期、重发倒计时、尝试次数限制。失败时保留号码，可返回修改。样稿固定 123456，无 SMS。
- 找回：仍能接收短信走重新验证；无法访问原号码走人工恢复流程，不能直接凭新号码接管旧账号。
- 账号设置：昵称、界面语言、已验证联系方式、会话撤销、数据副本和删除请求。修改电话须验证旧号或完成恢复审核，再验证新号。
- 权限：所有者管组织、账单与删除；管理员管被授权项目；编辑者受预算约束；审阅者无生成与账单权限。邀请带角色、项目范围、有效期与撤销能力。
- 成员移除：立即停止新访问和会话；历史审计保留。唯一所有者离开前需移交；额度调整不能越过组织预算。
07 / 订阅、支付与账单
样稿使用试用／个人／团队三个档位，仅用于展示信息密度。1,490 ₽、4,990 ₽ 及存储席位均为假设，不作为定价建议或收费承诺。余额账本示例：充值 2,500 ₽ − 已结算 100 ₽ = 余额 2,400 ₽；预留 60 ₽ 后可用 2,340 ₽。
| 页面／状态 | 必须呈现 | 不可做 |
|---|---|---|
| 套餐选择 | 币种、计费周期、席位、存储、用量是否包含、超额规则、税务说明、升级生效时间。 | 把单次价格藏成月付年缴；用“无限生成”遮掩实际限制。 |
| 支付确认 | 订单、服务内容、最终金额、收单方式、续费日期；自动续费单独选择。候选展示 СБП 和 Мир。 | 预选自动续费；前端成功跳转直接增加余额。 |
| 待确认 | 支付已发起／待银行确认、订单号、查询入口、避免重复支付说明。 | 把超时一律当失败，诱导重复付款。 |
| 成功／失败 | 由服务端对账结果决定；成功显示权限生效和收据；失败说明是否扣款、可恢复动作。 | 捏造正式电子收据或宣称真实支付接通。 |
| 订阅管理 | 当前套餐、有效期、续费金额与日期、停用续费、降级后超额处理、导出与保留期限。 | 把关闭续费当成即时删除项目。 |
| 余额与账单 | 可用、预留、结算、退款分别记录；订单／任务／镜头可追溯；按组织授权查看。 | 用“已退款”代替仅释放内部额度。 |
| 退款 | 申请、审核中、原路退款中、完成、失败；技术失败与艺术效果争议按已公布规则处理。 | 把供应商拒退自动等同于用户无退款权。 |
充值仅用于平台服务，不设计转账、提现或用户之间转赠。54-FZ、增值税、外国主体适用性与收单合同由会计和律师确定；设计不得把未确定税率硬编码成法定事实。
08 / 必备状态与文案
| 状态 | 推荐呈现 | 用户下一步 |
|---|---|---|
| 首次空项目 | “从剧本、素材或一个镜头开始。” 单一主要入口。 | 导入或新建，不用假内容冒充已有作品。 |
| 加载中 | 固定骨架保持版式；任务恢复单独展示。 | 允许离开，不重复提交。 |
| 离线／保存失败 | “尚未同步 · 本地草稿已保留”；未落地时不得声称已保存。 | 重试、另存草稿、恢复连接。 |
| 授权缺失 | 具体素材、缺失授权与受影响镜头。 | 补充授权或更换素材；扣费前阻断。 |
| 余额不足 | 所需预留、当前可用余额、差额。 | 充值、缩小批次或取消。 |
| 生成失败 | 技术原因、是否收费、预留是否释放；原采用版本保留。 | 修正参数或明确新尝试后重试。 |
| 注册／验证码失败 | 字段旁错误，保留已填写的非敏感输入。 | 修改号码、重发或联系支持。 |
| 支付待确认 | “正在核对付款，请勿重复支付。” | 查询状态、查看订单。 |
| 订阅到期 | 明确限制与数据保留期限；展示续费与迁出入口。 | 续费或导出，不突然隐藏所有资产。 |
| 权限不足 | “你可查看此项目，生成需要编辑者权限。” | 联系管理员；不显示不可执行的活跃按钮。 |
俄语文案区分：Сохранено（已保存）、Создано（已产出）、Одобрено（已通过）、Используется（已采用）。价格使用 ₽，小数／日期按俄语地区格式；界面语言与内容语言分离。正式上线需俄语母语审校。
新增页面 / 创作协作与交付
11 无限画布 · P1
脚本、人物、场景、镜头和采用版本的节点关系。节点可拖动、选择，支持缩放与备注。连线创建、节点执行及持久保存未接入；这是有限画板上的无限画布交互方向预览。
12 版本审核
v2 与 v3 并排对照，时间点评论，审核与采用分离。审核结果与分镜共享内存状态；图片为静态示意，并非真实视频帧差异。
13 任务中心
排队、失败、产出、取消状态；重试新建尝试并保留原错误。此页为独立任务演示，不假装生成了新的资产。
14 导出记录
以 19 秒三镜片段展示不可变导出快照；与当前 40 秒项目区分。展示素材包选项，不提供虚构 MP4 下载。
验证：画布拖动与 90% 缩放，评论添加，审核后显式采用，任务详情与导出快照。所有演示数据在刷新后重置。
15 / 完整页面设计 v0.3
当前提供 65 个页面视图，含原有 14 页与新增 47 页；另外补充解析确认、镜头分段、参考超限、队列恢复、角色授权、分享失效、保存冲突、导出设置与运营配置弹窗。
创作与素材
创作首页、新建、概览、章节、项目设置、AI 编剧、图像/视频工具、导演台、AI 助手、模板、角色、场景道具与生物、音色、文件、导入、回收站。
交付与团队
字幕编辑、音频混音、质量检查、客户审阅与分享、用量、安全、组织、通知、帮助、支持工单与法律页面布局。
社区与平台
作品广场、作品详情、创作者、发布、知识库、开发者预览；运营总览、租户、订单、内容审核、GPU 节点和审计。
参考核对与范围变化
2026-10-19 只读查看 MyReels 首页、使用指南及已有创作画布。公开可见功能包括故事台、导演台、AI 编剧/助手、节点类型、模板、文件、知识库、消息和开发者入口。作品广场的点赞、收藏、关注、评论、打赏与发布来自官方使用指南描述；未声称已验证所有私有页面或竞品后台。社区设计按用户最新要求扩展原 PRD；平台运营来自本产品 PRD S0。
交互与状态边界
操作以浏览器内存演示为主，刷新重置。模型未连接，音视频示例不播放，文件选择不上传；无实际登录、支付、消息发送、公开发布或服务器设置。字幕 SRT 可下载为明确标记的示例。安全与法律页是布局而非已实施保护或有效法律文件。导演台焦距只演示构图裁切，不是实际 3D 相机。
响应与验收
桌面优先，390px 窄屏采用单列，表格局部滚动，创作复杂工具保留原理演示。各页标题、跳转、表单及重要错误分支在浏览器检查；详细交付范围在全部页面目录中按需求编号映射。
09 / 交付范围与验收
本次可检查
65 个页面入口；分镜切换与搜索、版本选择、生成确认、素材详情、导出阻断、任务抽屉、验证码错误／成功、注册同意、支付成功／失败、续费取消、账号删除确认、成员角色示例。
明确未实现
真实鉴权、SMS、持久保存、模型生成、上传接口、真实支付、真实发票、视频播放、音频处理、拖拽剪辑与邮件发送。演示动作均有标记。
开发前待定
正式品牌、主体、登录渠道、价格、GPU 成本、套餐配额、存储保留期限、支付服务商、法律文件。不可由 UI 样例反推业务已获批准。
- 在 1440px 桌面与窄屏检查主要布局，长俄语文本不遮挡主要动作。
- 点击第 02 镜时右侧详情与版本一致；查看与采用不可混淆。
- 搜索无结果有恢复路径；失败与排队状态的图标、颜色、文字一致。
- 错误验证码留在表单，正确演示码进入项目；注册前必须分别勾选同意。
- 支付失败不激活套餐；正式版本必须由 webhook／对账确认到账。
- 导出缺失镜头会阻断；已采用版本切换提示时间轴更新。
- 所有资产随目录离线可打开；不依赖外部 CDN、在线字体和统计 SDK。
源文件：index.html、studio.css、studio.js、tokens.json；素材：assets/film-contact-sheet.png。所有价格和客户信息是虚构示例。此交付是设计评审原型，不是已实现的产品。
来源：项目 PRD v1.2；MyReels 官网及实际故事台观察
双系统与界面语言
用户前台 55 页，支持 English / Русский，首次访问默认俄语。平台后台 10 页，支持中文 / English，首次访问默认中文。两端拥有独立入口、导航与语言偏好；语言切换不改变表单的业务选项值。
账号页与顶部语言选择同步。界面语言与剧本、台词、项目名称和上传文件的内容语言相互独立。设计规范文档保留中文，供内部设计评审使用。