DESIGN.md 7.5 KB
Fmode MVP Demo · 独立设计方案
依据与边界
仅以用户指定的 SPEC、PRD、用户画像三份文档为产品依据。不参考旧版、现有原型、竞品或既有视觉规范。 2026-10-14 用户授权：制作独立交互原型；允许明确标识的模拟数据；双端均要求高质量 UI。 本目录不进入生产包，不修改 src。原型用于阶段 ②A 设计评审，不代表真实后端验收通过。
视觉主张
四套可切换的完整配色共用同一布局和语义状态系统；导航、工作区、内容面、边框与主要操作色成组变化。
2026-10-14 第一轮修订：用户确认「灰白与清晰蓝」及「克制稳定」动效。 第二轮反馈：浅色层级仍不清晰、视觉主体不足，PC 设置布局需修复。此次采用深浅分区，保留业务导航与数据，重组设置页；最新视觉待用户体验确认。
| 配色 | 主要表面与导航 | 主要操作色 | 视觉层级 |
|---|---|---|---|
| 铂金曜黑 | 炭黑导航 #202124、铂金灰 #F2F3F5、纯白面 | 曜黑 #25272A | 中性色阶与硬朗明度边界 |
| 冰白靛蓝 | 浅灰蓝导航 #E9EDF5、冰白 #F6F8FC、纯白面 | 靛蓝 #4056C7 | 轻盈冷调，选中态清晰 |
| 暖瓷陶橘 | 深褐灰导航 #302C29、暖灰 #F3F0EB、瓷白面 | 陶橘 #AF482B | 温暖材质感，低面积强调色 |
| 岩灰鸢紫 | 深岩灰导航 #282735、淡灰 #F1F0F5、纯白面 | 鸢紫 #6952A3 | 冷静克制，强化导航与内容区分 |
- 桌面以四栏会话为视觉锚点，内容优先，避免装饰性仪表盘。
- 移动采用独立结构、44px 起的触达区、16px 输入字号和底部安全区。
- 中英文采用 Segoe UI / 微软雅黑字体栈；代码与指标使用等宽字体。
- 字号 8 档：11 / 12 / 13 / 14 / 16 / 20 / 28 / 36。
- 圆角 4 档：6 / 10 / 16 / 999。
- 每套配色均提供浅色、深色模式；模式与配色分别选择并持久化，页面和浏览器主题色即时同步。
- 头像、指标、导航选中、悬停、焦点、边界及弹层均使用当前配色的专属令牌，不提供独立强调色色盘。
- 成功、告警、失败和信息状态使用固定语义色，与品牌操作色分离；状态标签同时使用文字和图形。
- 主要操作、导航文字和辅助文字通过对比度回归检查，状态颜色不受配色切换影响。
内容组织
本产品是工作应用，不设营销 Hero。
- 主工作区：桌面会话四栏；手机聚合首页。
- 支撑信息：会话内项目上下文、右侧成果；手机成果抽屉。
- 深度信息：项目关联、只读任务详情、运行流水和指标。
- 核心操作：发送消息、打开成果、从异常进入会话；不增加看板派发、评论或通话。
交互主张
- 桌面模块切换：160ms 轻淡入，不平移页面；导航 DOM 保持稳定。
- 桌面会话、任务、项目选择：仅详情区淡入，不带动列表和导航。
- 搜索、筛选、发送消息、数据刷新：增量更新 DOM，保留输入焦点、光标与滚动，不播放页面入场。
- 手机底部 Tab 切换：短淡入；进入详情 / 返回列表：200ms、16px 的方向性过渡，无弹跳。
- 桌面侧抽屉从右侧进入，手机底部抽屉从底部进入：240ms；退出 160ms，有完整关闭阶段。
- 居中弹窗与文件预览：短淡入淡出，不缩放、不上下漂移、不使用背景模糊。
- 按钮、Tab 和选中态：120ms 色彩过渡；取消成果卡片上浮和 Toast 位移。
- 弹窗打开时背景 inert，Escape 关闭、键盘焦点限制在弹窗，退出动画结束后焦点归还。
- 尊重 prefers-reduced-motion：JavaScript 动画与 CSS 动画均停用，交互仍立即生效。
双端架构
| 页面 | 桌面 | 手机 |
|---|---|---|
| 默认入口 | /desktop/chat | /mobile/home |
| 会话 | 导航 / 会话列表 / 消息 / 成果 | 会话列表 → 全屏消息 + 成果抽屉 |
| 通讯录 | 分类、搜索、分组列表 | 分类、搜索、44px 行操作 |
| 项目 | 列表 + 项目关联详情 | 列表 → 详情，返回保留位置 |
| 事件 | 按天分组，分类筛选 | 同口径单列，筛选可横滚 |
| 工作台 | 指标卡片与异常摘要 | 单列实况卡片 |
| 任务 | 按数字生命过滤，列表 + 详情 | 列表 → 详情 |
| 成果 | 项目分组 / 时间线 | 同双视图，底部文件预览 |
| 详情 | 身份 / 一份指标 / 交付记录 | 单列，未接入不可发消息 |
| 我的 | 左侧账号、右侧分组设置 | 单列账号与分组设置，大触达区 |
| 登录 | 品牌说明 + 表单 | 紧凑独立表单 |
桌面主导航：会话、通讯录、项目、事件、工作台、成果、我的。 手机底部：首页、会话、通讯录、工作台、我的。 任务看板由工作台或会话中的任务入口到达；两端从默认页不超过两次点击。
桌面断点：≥1280 四栏；1150–1279 压缩四栏；940–1149 成果改抽屉；768–939 图标导航。 首次 <768 进入移动端；之后不因窗口变化改变端偏好。强制桌面在手机宽度时提供可见的端切换提示。
设置布局修复
- 原布局在 1440×900 下内容高约 1250px，字段与操作距离过远，常用设置落在首屏以外。
- 桌面 ≥1150px 使用账号 / 设置两栏；账号信息集中于左侧，外观、端切换、凭证分组于右侧。
- <1150px 使用单列，账号信息横向组织；手机重新排为单列键值对。
- 1440×900 基线下右侧设置内容可完整同屏呈现；低高度允许正常滚动。
- 设置控件与文字采用约束列宽，强调色可换行；侧栏支持短窗口内滚动。
- 普通业务页以独立白色工作面和清晰外边界承载内容；会话保留四栏，无额外页面边框。
桌面居中修正
- 页面在扣除主导航和滚动条后的可用工作区内居中，不相对于整个浏览器窗口偏移导航。
- 通用页面最大宽度 1440px、阅读型页面 980px、设置页 1240px，保留各自适合的内容密度。
- 使用自动左右外边距：未到最大宽度时保留 24px 留白，达到最大宽度后均分剩余空间。
- 标题、筛选和列表随同一内容容器对齐；会话四栏铺满工作区，手机页面保持原布局。
- 布局回归增加左右留白差不超过 1px 的断言，并覆盖 1920px、2560px 宽屏。
演示场景
所有人物、项目、任务、消息、用量都是虚构演示数据，不来自真实服务。
- 主项目「秋季品牌焕新」：策划数字生命「知夏」收到指令，交付策略文档与执行清单。
- 运维场景：「栖云」部署任务因环境凭证待更新而阻塞，可查连续失败、阻塞时长、运行流水。
- 未接入场景：「墨白」展示身份档案，进入会话不可用。
- 通用状态实验室：正常、加载、空、错误、权限不足；消息发送失败、连接重连。
- 任务看板只读，评论和附件仅展示。
- 登录仅模拟校验与会话，不发送验证码；文件仅在浏览器模拟进度，不上传。
验收边界
可验收：页面与导航覆盖、模拟交互、列表筛选、详情联动、双端布局、键盘可达、状态设计、主题与端切换。 不可据此验收：Matrix 消息、预签名上传、真实鉴权、服务端租户隔离、跨租户授权、真实 kanban、生产服务收敛、历史虚拟滚动、生产 ui-kit 组件覆盖率及生产构建体积。 图像/视频成果入口只在存在可用内容时出现；当前内置成果为文本、HTML 文档和 CSV，不展示假图片或假视频。