Molo
体验与视觉系统

视觉论点：这是一套轻量、克制、高信息密度的 PC 项目 SaaS。页面沿用两份 Figma 参考的白侧栏、浅灰工作区、紫色单主色和圆角白卡片；红色只服务严重风险，深色只进入运行预览与技术交付图。

Figma 参照距离

参考	Borrow	Adapt	Forbid	Distance move
Project Management Dashboard	固定侧栏、搜索顶栏、列式任务密度、白卡圆角	三列看板改为五阶段专属工作台与接力链	不复制英文卡片、素材图、图标和页面排布	从通用任务管理升级为需求到上线的证据控制
SaaS Task Dashboard	浅灰画布、KPI 密度、图表与日程的组合、紫色激活态	图表改为产研负载、风险、Bug 与 PV/UV/MAU	不复制欢迎插画、日历和通用 KPI 内容	每个指标都连接到可处理的需求、风险或物料

精确色板

#F3F3F6 · 工作区

#FFFFFF · 侧栏 / 卡片

#5B5CE2 · 主操作

#EFEFFF · 激活态

#17182B · 主文字

#74778B · 次文字

#DF4D5B · 严重风险

#1CA67A · 完成 / 通过

红色不用于装饰或一般优先级，只表示严重延期、P0 阻塞和失败门禁；橙色表示测试中与待验证；绿色表示完成、通过和已就绪。

字体与信息层级

Display · 苹方 / 冬青黑登录与会员身份改版24–32px / 800 / -0.025em；用于页面与需求标题

Body · 苹方每个风险、需求和物料都能进入对应工作台继续处理。13–16px / 1.55；增强 PC 端长时阅读可读性

Operational Label负责人 · 当前阶段 · 版本确认 · SLA10–12px；导航、筛选、表格、图谱与控制栏不再使用 7–9px 微小操作文字

CTA发起需求变更12–15px / 750；紫底白字；主次操作严格分级

登录入口与主 KV

双区构图972px 深色叙事舞台 + 468px 浅色登录区；右侧沿用两份 Figma 的白色表单、柔边框和紫色主按钮。

主题 KV五个节点沿证据轨道接力；红色只表示风险，青绿色只表示完成；矩形数据包对应 PRD、原型、代码、API 与测试报告。

实时文字品牌、中文标题、流程、账号和按钮均为真实 DOM；主图保持无字，保证响应式、可访问与现场可修改。

认证状态默认 admin / admin；错误提示靠近字段；支持显示密码、回车提交、当前页会话和右上角退出。

Molo 1600 像素宽桌面登录页最终稿 — **登录页最终视觉稿**深色证据舞台与白色认证区保持 16:10 PC 画幅，品牌叙事、表单层级和流程节点均为真实页面。
1600 × 1000 · PC

视觉指纹

白色固定侧栏和浅灰工作区形成 Figma 参考中的 SaaS 外壳。
五阶段顶部切换器不是进度条，而是进入五套独立角色工作台的主导航。
右侧固定控制轨汇总风险、打回、变更、物料接力和审计证据。
严重延期使用整条红色警报带与风险报告，不是一个孤立红点。
服务器和数据库采用深色 3D 可视化底图，在浅色界面中形成技术物料焦点。
完成阶段用 PV、UV、MAU 和质量趋势收束，不把“完成”理解成静态归档。

Molo 全流程工作台宽屏页面 — **全流程工作台**固定侧栏、五阶段横向工作区与下游物料接力在同一张宽屏中成立，避免把 PC 产品压成窄列。
1585 × 991 · PC

组件与状态

左侧项目导航
default / hover / active / count

需求状态
进行中 / 分析中 / 开发中 / 测试中 / 完成

消息中心
handoff / bug / meeting / risk

ECharts 项目图表
line / donut / bar / gauge

物料接力链
done / pending / downstream

Bug 状态按钮
待修复 / 修复中 / 待验证 / 关闭

Choices.js Select
closed / open / hover / focus / disabled

Molo Checkbox
unchecked / checked / focus / card

上传 / 邀请弹窗
role / zip / url / notify

版本复盘
burndown / efficiency / lessons

Select 使用本地 Choices.js 11.2.3，并以 Molo 的紫色焦点、浮层阴影和圆角语言重绘；脚本或样式不可用时保留原生 Select。图表使用 ECharts 5.5.1 国内 CDN，统一渐变、Tooltip、异常标记与 reduced-motion；加载失败时显示关键数据摘要。Checkbox 继续使用本地卡片组件与原生语义。

Molo 项目总览宽屏页面 — **项目总览 · 图表与数据层级**KPI、折线、环形与工作负载图表在 1585px 宽屏中保持统一卡片密度。
1585 × 991 · PC

Molo 需求详情宽屏页面 — **需求详情 · 控件与状态**阶段切换、工作区、右侧控制轨、Select 与 Checkbox 均在真实业务上下文里展示。
1585 × 991 · PC

协作时距图谱语言

浅紫蓝证据舞台图谱使用雾白、浅紫蓝渐变与 28px 工程网格，让时间节点形成视觉高潮，同时保持与 Figma SaaS 浅色工作区一致。

节点与连线阶段节点使用白色表面与对应角色色；连线标签直接显示精确时长，红色虚线同时配“超 SLA”文本，绿色实线配“按时”。

反思星图+4 天紫色中心节点连接五条白色根因卡；点击后在下方切换事实证据、实际代价、根因、负责人和门禁。

克制动效只保留 180–200ms hover / active 反馈，不使用持续发光或漂浮；reduced-motion 下全部取消。

Molo 版本审计与项目复盘宽屏页面 — **版本审计与项目复盘**协作等待、燃尽、效能和反思信号在同一宽屏复盘舞台中形成可讲述的证据闭环。
1585 × 991 · PC

布局与无障碍

Desktop baseline1440×1000；固定 244px 侧栏，内容区自适应；最低 1180px，已验证无横向溢出。

密度8px 基础刻度；卡片间距 16px；大区块圆角 16px；表格行高 58px。

焦点与语义按钮、表格、导航、标题与状态均为真实 DOM；键盘焦点可见，状态不只依赖颜色。

Motion视图进入 280ms、抽屉 280ms、toast 220ms；reduced-motion 下取消位移和过渡。

生成图像资产

login-kv.jpgCodex 内置 ImageGen；1944×2000；五节点证据轨道；用于 Molo 登录页主视觉。

server / databaseCodex 内置 ImageGen；1672×941；用于服务器运行拓扑与数据库血缘。

prd-flow-cover.jpg800×450；多页 PRD、流程、泳道、验收清单和变更影响。

prototype-editor-cover.jpg800×450；Figma / 蓝湖式 12+ 多画板编辑器与导出切图。

qa-bug-closure-cover.jpg800×450；测试矩阵、Bug 四列闭环、趋势和发布门禁。

管理平台预览直接复用 Molo 真实登录页截图，不使用占位插图。

生成图均保存在 assets/generated/；新封面已清除不可控伪文字，品牌、中文标题、版本和状态由 HTML 叠加。

进入桌面端演示

Molo体验与视觉系统