# 界面、交互与视觉规范 ## 1. 设计方向与效果图边界 面向长期工作的创作者，采用深色专业工具视觉；让电影画面、故事文本和时间线成为主体，不用大量装饰卡片挤压创作空间。项目名称为 `kumo-drama`，图形标记待设计，最终需统一品牌视觉。 9 张概念图由实际图片生成 API 绘制，保留原始 PNG。它们不是浏览器截图，不是可点击原型，也不代表功能已经开发。原始尺寸均为 2048×2048；“16:9”等只表示画面内素材比例，不是 PNG 的外框比例。实际 Web 布局以下述断点规范为准。 完整图片在 [总览](README.md)；可直接在浏览器打开 [离线图片画册](designGallery.html)。 ## 2. 视觉令牌建议 | 令牌 | 建议值／规则 | 用途 | | --- | --- | --- | | 背景 | `#0B0D12` | 工作区底色 | | 主表面 | `#141821` | 编辑器、检查器和普通面板 | | 提升表面 | `#1B2030` | 菜单、选中和浮层 | | 主文字 | `#F1F3F9` | 中文正文与字段标签 | | 次文字 | `#A9B1C3` | 辅助信息；实际对比度需测量 | | 主色 | `#8B7CFF` | 当前选择、关键操作、焦点 | | 成功 | `#62D9BA` | 已完成；仍需图标和文字辅助 | | 警告 | 暖琥珀 | 待确认、过期、费用风险 | | 危险 | 克制红色 | 撤销密钥、删除、失败；不用于普通生成按钮 | | 基础间距 | 4px 网格 | 控件 8～12，区域 16～24 | | 圆角 | 控件约 8～10，面板 12～16 | 同层级一致，不把全部元素变成胶囊 | | 字号 | 正文 14～16，辅助不低于可读阈值 | 不通过极小字号塞入复杂参数 | 字体使用可合法商用的系统中文／开源字体回退，不远程泄漏用户浏览行为。状态数字可用等宽字形；颜色与对比度需以实际 DOM 验证，不根据概念图宣称 WCAG 达标。 ## 3. 页面骨架 桌面优先，目标是 1440px 及以上专业工作台；左侧导航约 64～216px 可收起，右侧参数栏约 300～360px，中心保持足够大预览。顶部放项目／分集、保存状态和积分摘要；任务通知保持轻量。 1024～1439px：收起全局导航，参数栏可切换；不让固定列把预览压成狭条。小于 1024px：优先项目查看、脚本编辑、任务和钱包；复杂时间线显示明确能力边界，不能假装完整桌面编辑器已经适配。触控端不依赖 hover 才能发现关键操作。 不同栏目共用“项目、分集、对象身份”的上下文，但状态不混用。URL 能定位具体镜头版本；切换项目前确认未保存编辑。 ## 4. 页面清单与详细交互 ### UX-01 项目总览 图片：[studioOverview.png](images/studioOverview.png)。 - 主操作“新建短剧”，次操作“继续制作”；项目卡片只显示代表封面、分集、更新时间和真实阶段。 - 无项目时是一个清晰入口，不预造假项目或假生成记录。 - 最近动态只显示授权工作区的结果；点击回到相关对象，不直接打开永久公开文件。 - 生产进度可按已完成的计划项／阶段权重计算，并注明“项目进度”；不可把它当上游推理百分比。 - 图片里的团队人数／工作室是远期表达，P0 个人工作区不开放多人协作。 ### UX-02 故事与剧本 图片：[scriptWorkspace.png](images/scriptWorkspace.png)。 - 左侧分集目录，中间编辑器，右侧创作助手；用户随时能看见正在编辑的版本。 - AI 提议放候选区，支持接受到新版本、部分采用和取消；不直接改写已确认文本。 - 自动保存草稿是免费本地／平台保存；真正 AI 调用单独确认，不能把“保存”做成付费。 - 付费卡片显示输出目标、模型、数量、上限、预计／实际计价方式和有效期。 - 改写后显示受影响资产／镜头，不强制立即全部重做。 ### UX-03 角色、场景、道具与图片 图片：[assetLibrary.png](images/assetLibrary.png)。 - 资产类型标签与项目归属清晰；同一角色的图像候选属于版本，不是多个重复角色。 - 展示正面、侧面、全身参考和已选版本；“锁定”锁的是引用身份，不是模型效果保证。 - 上传、文生图、图像编辑入口按当前真实能力显示。 - 生成前预览提示词、参考图用途、输出数量和费用；多张候选应明确按张或整次计费。 - 比较版本、设为当前、引用到镜头互相分开；删除有引用的版本要显示影响。 ### UX-04 分镜与视频 图片：[storyboardWorkspace.png](images/storyboardWorkspace.png)。 - 准备表负责内容确认；工作室负责关键帧、参数、生成和候选预览。 - 首帧、尾帧、普通参考媒体分别放槽位，不能用一个“上传图片”掩盖角色差异。 - 参数来自已发布 schema，时长、比例、分辨率的合法组合即时提示；不支持的参数不伪装可选。 - 试拍与批次生成分别报价；批次预览列出每个镜头、费用和准备缺口。 - 状态文案为“排队中”“上游处理中”“结果入库中”“待核对”，没有真实百分比就不用确定百分比。 - “重新生成”必须明确新消费；“恢复查询”“重新转存”不能混成同一个按钮。 ### UX-05 音频与字幕 图片：[audioWorkspace.png](images/audioWorkspace.png)。 - 对白行、角色音色和音轨对应；按行试听、合成选中与批量合成分别确认。 - 不支持情绪参数的音色不显示可写选项；音色目录仅来自经过验证的远程能力。 - 没有 ASR／对齐渠道时保留手动时间调整；不能拿均分时间假称精确对齐。 - 自定义真人音色默认不开放。勾选“已同意”不是充分权利证明，P1 需要完整记录、撤销和审核流程。 - 音乐与音效可上传自有授权素材；生成式入口依 P1 实际能力开启。 ### UX-06 成片与导出 图片：[editExportWorkspace.png](images/editExportWorkspace.png)。 - 中央预览、媒体箱、右侧输出档位、底部视频／对白／音乐／字幕轨。 - 首版支持排序、裁剪、基础转场、增益、字幕修改；不出现不能实现的高级插件／调色承诺。 - 导出前列出缺失素材、画幅裁切、音频峰值、字幕越界和价格；失败项明确可修正入口。 - 渲染队列与编辑状态分开，导出运行期间继续编辑产生新版本。 - 配音与原生视频音轨需显式控制，避免双重对白叠加；烧录字幕与单独 SRT 可以同时选，不必强制互斥。 ### UX-07 钱包 图片：[walletBilling.png](images/walletBilling.png)。 - “可用”“冻结”“实际消费”不合并成一个模糊余额；金额对应账本快照。 - 明细支持项目、日期、操作过滤，点击查看报价、已结算和释放差额。 - 充值套餐来自后台发布值；回跳时“正在确认付款”，不得用前端成功提示自行加积分。 - 任务未知时解释核对和冻结，不显示“免费重试”；交付补偿与现金退款有不同入口。 - 对普通用户隐藏上游成本与渠道余额。 ### UX-08 管理员渠道 图片：[adminChannels.png](images/adminChannels.png)。 - 渠道卡片支持名称、能力、启停和验证状态；配置编辑放抽屉或独立页。 - 地址由管理员输入，没有默认值。已配置 key 只回显状态与最小指纹，“替换”是写入新版本。 - “保存草稿”“只读检测”“付费能力测试”“发布配置”是不同动作；测试费用提示不能藏在 tooltip。 - 配置发布显示变更摘要、受影响的新计划和旧任务数。 - 普通停用保留在途查询，紧急撤销必须说明后果。 - P0 不提供自动换路付费媒体、不执行自定义 TS／JS、不承诺连接检测可以验证所有模态。 ### UX-09 首次安装空状态 图片：[adminEmptyState.png](images/adminEmptyState.png)。 - 空表格不插入演示渠道；“添加第一个渠道”是唯一主要操作。 - Base URL、凭据、模型 binding、端点配置均未填；不出现“已有密钥”的掩码。 - 管理员有配置向导；普通用户只有“服务尚未开放”提示，不能看到后台接口地址。 - 可以阅读功能说明，但未配置时生成按钮禁用且解释原因，不先让用户充值再发现无法使用。 ## 5. 概念图已知差异：实现必须以文字契约为准 这些图片来自生成模型，不是像素级规格。人工查看后，应明确纠正以下表达，而不是照图开发： | 图片 | 已知示意差异 | 实施时的权威规则 | | --- | --- | --- | | adminChannels | 图中可能出现“自动切换”或“现有任务随配置切换”等概括文案 | P0 媒体不自动换路；已有任务固定原配置版本，只允许原身份恢复 | | scriptWorkspace | 图内可能写“生成后立即扣除”等过度简化 | 先确认和冻结，之后按合同结算与释放，不能把冻结等同消费 | | storyboardWorkspace | 图内进度条／取消按钮是布局示意 | 无可信进度不显示确定百分比；取消只对 queued 项可用 | | audioWorkspace | “自动对齐”和自定义音色控件表达未来能力 | 精确对齐按已验证 P1 能力启用；P0 真人克隆关闭 | | editExportWorkspace | 模型自行绘制“灵石”、订阅升级、任意 FX 等元素 | 全平台统一叫“积分”；P0 无订阅与高级特效承诺；SRT 与烧录可并选 | | studioOverview | 图内出现团队人数与虚构日期 | P0 个人工作区；统计、日期和进度由真实业务数据决定 | | walletBilling | 余额、套餐、积分单位与逐条数值仅供排版 | 使用真实报价和账本规则，不能从图上抄价格或建立 seed | | 全部 | 品牌字形、用户姓名、片名与角色细节有轻微不一致 | 实施时统一设计系统与内容数据，不把九张生成图当九套样式 | 没有用修图覆盖去伪装成已实现页面；保留原始生成图与对应记录，便于评审视觉方向与重新设计。 ## 6. 通用交互状态 所有关键页覆盖：首次为空、加载、局部失败、无权限、离线、保存中、版本冲突、额度不足、渠道未配置、能力下架、任务未知、部分成功和过期输入。 按钮加载态不能只靠旋转图标；成功提示应对应真实持久化。错误保留编辑输入，不让用户因为上游失败重新填写长提示词。确认框展示明确对象、操作范围和费用；危险动作不与主要生成按钮相邻误触。 ## 7. 可访问性与效率 键盘可操作菜单、对话框、镜头列表与基础时间线；图标按钮有名称，拖拽有等价按钮；焦点可见，不仅靠颜色表示状态。尊重减少动态效果设置，不播放无意义循环动画。播放器不默认大声播放；波形与进度提供文本信息。 列表虚拟化与图片懒加载用于真实长项目；不要在页面同时加载全部原始视频。预览采用低码率代理，完整文件按需下载；移动端限制自动播放和后台流量。 ## 8. 设计验收交付物 实施前将概念图转为可度量的组件稿与页面状态稿，固定字体、令牌、断点、空态和错误态；明确每个控件对应的 API 字段与权限。至少评审一次真实短剧从空项目到钱包结算的全流程，而不是只看静态首页。