Fmode v2 · 设计方向确认稿

阶段②A —— 请你先看这一版方向，确认后我再细化组件规范。

本稿是什么：设计方向确认稿，不是最终视觉稿。目的是让你先拍板「长什么样、信息怎么排」，避免像老项目那样漂移 3 次。
配色说明：色值全部取自 ui-kit 官方令牌 + indigo 靛蓝主色（裁决 12），零硬编码。
已落实的调研结论：① 聊天与状态分三层、每层只渲染一次 ② 禁止假进度条，用步骤列表 ③ 异常用左色条不用整行红底 ④ 触达区 ≥44px。

一、桌面 · 会话页（四栏）

这是产品的核心场景（P1 业务同事）。四栏：导航 56 / 列表 300 / 主区 flex / 右栏 340。
关键设计：中间那条「正在处理…」状态条是全页面唯一渲染"在干嘛"的地方 —— 老项目在标题栏、任务条、右栏三处重复渲染，这里收敛成一条。

桌面 1440×900 · 会话页
💬
👥
📋
📊
📦
胡
🔍 搜索会话
数字
数据分析助手
已完成 3 份报表，正在生成第 4 份
10:24
运维
运维值守
⚠ 任务失败：依赖服务不可用
09:51
文案
文案生成器
有空，等待新任务
昨天
@李工
李工 同事
名下 2 个数字生命
昨天
数字
数据分析助手
运行中 · 最后活动 2 分钟前
🔍
⋯
正在生成第 4 份季度报表
已用时 3 分 12 秒 · 点击查看步骤
▾
✓拉取数据源（1.2s）
✓清洗与聚合（8.4s）
▸渲染图表并导出 PDF
○上传至成果库
今天 10:20
数字
早上好，我已开始处理今天的报表任务。
胡
把第 3 季度的也一起做了
数字
收到，第 3 季度已排入队列。当前正在处理第 4 份。
实况▸
运行指标
CPU12%
内存34%
余额¥128.50 ↗
最近成果
📄
Q2 季度报表.pdf
10:12
📊
销售趋势.xlsx
昨天
要请你确认的点： ① 导航默认是图标条（56px）还是展开（236px）？ ② 左栏最左那条彩色竖线（异常标记）的观感是否合适？ ③ 状态条 + 步骤列表这个「唯一状态渲染位」的形态是否接受？

二、任务看板（新增模块 · P2/P3 核心）

这是老项目没有的新模块。数据来自 Hermes kanban 真任务。
关键设计：阻塞/失败用左色条 + 图标 + 阻塞时长，不用整行红底 —— 长列表里更安静，但仍能一眼扫到「已阻塞 436h」这种要命的信息。

桌面 · 任务看板
🔍 搜索任务
进行中 2 阻塞 1 失败 1 待办 3 已完成 14
⚠
用户身份对齐 — 手机号登录复用超管
@fullstack未开始
已阻塞 436 小时 · 等待外部条件
⛔
定时同步脚本修复
@ops09:51
连续失败 41 次 · 脚本路径不存在
▸
《进化工程》16 章改稿
@writer已用时 1h 24m
✓
魔镜形象分析系统 V2.0 重写
@fullstack昨天完成
任务详情

用户身份对齐 — 手机号登录复用已有超管账号

阻塞@fullstack优先级 2
⚠ 已阻塞 436 小时（18 天）
阻塞类型：等待外部条件 · 连续失败 0 次
运行流水
run #16 · blockedgave_up
run #15 · donecompleted
评论（1）
fullstack 09-26 05:15
本轮（run 16）结论：代码修复已就绪，线上未生效…
一期只读：不提供派发/评论/改状态入口。要下新任务请回会话页发指令。

三、移动端 · 首页 + 会话

移动端走高可达路线：单列、大触达区（≥44px）、头像 44px、输入框 ≥16px 防 iOS 放大。

移动 390×844 · 聚合首页
首页
🔍
⚠
有 2 项需要关注
1 个任务阻塞 · 1 个执行失败
›
最近会话 全部 2 ›
数字
数据分析助手
已完成 3 份报表，正在生成第 4 份
10:24
运维
运维值守
⚠ 任务失败：依赖服务不可用
09:51
最新成果 全部 8 ›
📄
Q2 季度报表.pdf
数据分析助手 · 1.2 MB
10:12
📊
销售趋势.xlsx
数据分析助手 · 340 KB
昨天
🏠首页
👥通讯录
📋项目
📊工作台
👤我的
移动 · 会话页（全屏）
‹
数字
数据分析助手
运行中
📦
生成第 4 份报表
3:12 ▾
数字
早上好，我已开始处理今天的报表任务。
胡
把第 3 季度的也一起做了
数字
收到，已排入队列。
＋
发消息…
➤
移动端要请你确认的点： ① 首页「需关注」横幅是否合适？还是应该更弱/更强？ ② 底部 Tab 是 5 个（首页/通讯录/项目/工作台/我的）—— 老项目是这 5 个，是否保持？ ③ 会话页顶部状态条压缩成一行（只留「生成第 4 份报表 3:12」）是否够用？

四、设计方向的三条硬规则（请重点看）

规则 1 · 状态只渲染一次

「这个数字生命现在在干嘛」在全页面只出现一处 —— 桌面是会话页的中间那条状态条；移动是顶部压缩条。

老项目的问题：同一个状态在标题栏徽标、任务条、右栏实况三处各渲染一遍，措辞还不一样。
规则 2 · 不造假进度

AI 任务耗时不可预测，所以用步骤清单（✓ 已完成 / ▸ 进行中 / ○ 待办）+ 已用时。 进度条只用于分母已知的场景（上传下载、token 配额）。

编一个「37%」出来是欺骗，会损伤信任。
规则 3 · 异常可见不喧哗

阻塞/失败用左色条（3px）+ 图标 + 文字。色条安静但可扫读；图标和文字保证色盲用户也能识别。

不用整行红底、不用闪烁、不用弹窗打断。

五、与老项目的对比（一眼看出改了什么）

老项目
✗ ui-kit 采用率 1.3%（149 个组件只用 2 个）
✗ 硬编码色值 321 处
✗ 令牌前缀 3 套并存
✗ 字号定义了 8 档、实际用了 25 档
✗ 圆角定义 4 档、实际用了 24 档
✗ 全局样式 2079 行
✗ 布局尺寸全硬编码，窄窗不可用
✗ 触达区 5 处 < 44px
✗ 状态 三处重复渲染
✗ 视觉方向漂移 3 次从未定稿
v2 目标
✓ ui-kit 整目录接入，≥30 个组件
✓ 硬编码色值 0 处（可脚本断言）
✓ 令牌 单一真源（ui-kit）
✓ 字号锁 8 档
✓ 圆角锁 4 档
✓ 业务样式全部进组件（全局 ≤300 行）
✓ 布局令牌化 + 四级降级
✓ 触达区全部 ≥44px
✓ 状态只渲染一次
✓ 视觉方向已定稿（裁决 12）

六、待你确认的问题清单

Q1 视觉方向：中密度 + 圆角 14-18 + 轻阴影 + indigo 主色 —— 这个观感是你要的吗？
Q2 导航默认态：桌面左侧导航默认图标条（56px，省空间）还是展开（236px，更好懂）？
Q3 状态呈现：状态条 + 步骤清单这个形态接受吗？还是你更想要进度条？
Q4 异常表达：左色条 3px + 图标 + 文字的方案，够不够醒目？
Q5 移动首页：「需关注」横幅 + 最近会话 + 最新成果 的三段式是否合适？
Q6 缺失的页面：本稿只画了会话页 / 任务看板 / 移动首页+会话。
    还有 登录、通讯录、成果、工作台、项目、事件、数字生命详情、我的 共 8 个页面未画。
    → 是先把这 3 个页面的方向定下来，我再补其余 8 个？还是你想先看全部 11 个再一次性拍板？

Fmode v2 · 设计方向确认稿 · 2026-10-14 · 阶段②A
本文件仅供评审，不进生产包