108 lines
8.9 KiB
Markdown
108 lines
8.9 KiB
Markdown
|
# 2b 骨架形态优化方案
|
|||
|
|
|
|||
|
|
> 面向：`prd/2b-界面布局.md`（②段，2026-10-08 02:30 定稿）
|
|||
|
|
> 起因：用户 2026-10-08 指出现有界面「排版布局一点也不像 agent 的产品，像 10 年前的后台管理系统」。
|
|||
|
|
> 本份只讲**骨架形态**（主视觉是什么、块与块用什么空间关系）如何改，⛔ 不动功能条目（那是 `2a`）、⛔ 不写视觉词（配色/字体/间距/组件样式仍归③段）。
|
|||
|
|
> 写于：2026-10-08 08:5x，主会话。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 一、现有骨架的四宗病（都有出处，⛔ 不是观感）
|
|||
|
|
|
|||
|
|
### 病 1 · 八页同构：每页都是「从上到下堆 4–5 块」的纵向单列
|
|||
|
|
|
|||
|
|
- 出处：`2b` §二 八页，每页的结构一律是「板块清单（从上到下）1–5」。
|
|||
|
|
- 后果：八页骨架长得一模一样 —— 只是块名不同。③段照它做出来，就是八个长得一样的后台表单页。
|
|||
|
|
- 现代工作台的做法：**不同页用不同空间关系**（矩阵 / 主从 / 对照 / 时间线 / 画布 + 侧栏），让每页有各自主视觉。
|
|||
|
|
|
|||
|
|
### 病 2 · 列表是唯一的信息呈现
|
|||
|
|
|
|||
|
|
- 出处：P1「账号矩阵列表 —— **一行一个账号**」、P2「对标内容列表」、P3「条目列表」、P6「账号列表」、P7「待复盘列表」、P8「发布记录列表」⇒ **六页主视觉都是列表**。
|
|||
|
|
- 后果：产品叫「矩阵工作台」，八页里一处矩阵都没有；「待复盘列表」这类名字本身就把形态写死了 —— ③段照做只能画列表。
|
|||
|
|
- 现代工作台的做法：主视觉是**数据本身**（矩阵 / 图表 / 缩略图卡），列表只用于「需要逐条操作」的场合。
|
|||
|
|
|
|||
|
|
### 病 3 · 没有 AI／Agent 的位置
|
|||
|
|
|
|||
|
|
- 出处：P4「环节进度 —— 七个环节」与「当前环节工作区」，七个环节里哪一步出 AI 产出、产出放哪、人怎么采纳或驳回，**骨架里一个字都没有**；P7「归因结论区 —— 由人确认」暗示结论是 AI 给的，但骨架没给「AI 结论」留块。
|
|||
|
|
- 后果：产品名带 agent、功能表里有多条 AI，界面上却看不出 AI 在哪 —— 这是「不像 agent 产品」最直接的一条。
|
|||
|
|
- 现代 Agent 产品的核心交互是「生成 → 审阅 → 采纳／驳回 → 回写」，骨架必须为它留位置。
|
|||
|
|
|
|||
|
|
### 病 4 · 缺一层「形态语言」
|
|||
|
|
|
|||
|
|
- 出处：`2b` 文首两条硬规 ——「⛔ 全文零视觉词」＋「骨架冻结，③段不许新增/移动/删除板块」。
|
|||
|
|
- 后果：②段只给块名与顺序，③段只给皮肤与交互，**「这产品该长成什么样」没人管**。中间那层是空的，两头都不许碰。
|
|||
|
|
- `3c-GPT会诊.md` 的独立评审把结果说得很明白：「遮住文字后认不出是任何一家…不是克隆，是**没有品牌辨识度的通用后台**」；「卡片化＋大留白＝**没认出品类**」。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、逐页改法（八页，各给形态）
|
|||
|
|
|
|||
|
|
### P1 矩阵总览 —— 从「一列账号」改成「真矩阵」
|
|||
|
|
|
|||
|
|
- 主视觉：**账号 × 日期的网格**。纵轴账号、横轴日期（今天 / 明天 / 后天），格子 = 该账号当天的内容状态（已发 / 待审 / 缺稿）+ 一个关键数据。
|
|||
|
|
- 异常值**标在格子上**（颜色只用于异常与缺口），不再单独挂一块「异常值提示」。
|
|||
|
|
- 顶部一条**今日行动条**：今天要先处理的 N 件事（跨账号），点一条直接跳到那一件事。
|
|||
|
|
- 板块顺序改为：① 今日行动条 ② 账号矩阵（主视觉）③ 本月表现最好的一条 ④ 随手记入口（全局可达）。
|
|||
|
|
- ⚠️ 依赖 `1a` 待复核第 5 条（矩阵级视图是否真需要）。若复核为「不需要」，本页降为单账号今日，矩阵下移到账号切换 —— 这条前提不变。
|
|||
|
|
|
|||
|
|
### P2 选题雷达 —— 从「文字列表」改成「缩略图卡片流 + 倍数徽章」
|
|||
|
|
|
|||
|
|
- 主视觉：**对标内容卡片流**，每张卡带封面缩略图、标题、相对该账号平时水平的**倍数徽章**（这是这一页的记忆点）。
|
|||
|
|
- 顶部四数改成**紧凑 KPI 条**（数字为主、不加卡片框）。
|
|||
|
|
- 板块顺序：① KPI 条 ② 对标内容卡片流（主视觉）③ 选题库（待做 / 在写 / 已用 三组，组内仍用紧凑行）④ 评论区洞察（可点入）⑤ 灵感速记（全局）。
|
|||
|
|
|
|||
|
|
### P3 资产库 —— 分区保持，条目改摘录卡，详情用抽屉
|
|||
|
|
|
|||
|
|
- 主视觉：**摘录卡网格**（角度 / 结构 / 开场白 / 标题 四个分区，一次一个）。卡片只放原文摘录与出处，⛔ 不做大留白卡片。
|
|||
|
|
- 单条详情**右侧抽屉**打开，⛔ 不再把详情当独立板块往下堆（现在的写法会让主区滚很長）。
|
|||
|
|
- 板块：① 分区切换 ② 摘录卡网格 ③ 引用入口（卡上直接有）④ 详情抽屉（浮层，不算块）。
|
|||
|
|
|
|||
|
|
### P4 创作台 —— 全产品最该改的一页，骨架要给 AI 留位置
|
|||
|
|
|
|||
|
|
- 主视觉：**流水线画布（七个环节的横向轨道）+ 当前环节工作区** —— 环节轨道常驻顶部，走过的环节可回退，当前环节展开成工作区。
|
|||
|
|
- 新增一块 **AI 产出区**：当前环节的 AI 产出（生成中 / 已生成 / 失败重试）+ **采纳 / 驳回 / 改后再用** 三个动作。这是「像 agent 产品」的关键，七个环节里凡是有 AI 产出的都走这一块。
|
|||
|
|
- 资产引用区改成**右侧常驻侧栏**（创作时要随时取角度/结构/开场白），⛔ 不再是「可点入」的折叠块。
|
|||
|
|
- 板块：① 当前内容标识 ② 环节轨道（常驻）③ 当前环节工作区（主视觉）④ AI 产出区 ⑤ 资产引用侧栏（常驻）⑥ 版本列表（可点入）。
|
|||
|
|
|
|||
|
|
### P5 发布中心 —— 从「一版一版竖排」改成「对照」
|
|||
|
|
|
|||
|
|
- 主视觉：**原稿 × 各平台版本的对照视图**（左原稿，右各版本；或网格卡片，一平台一卡带平台标识）。
|
|||
|
|
- 检查结果改成**逐条 diff 清单**（硬拦项置顶、提醒项次之），每条能跳到出问题的那一处，⛔ 不再是一块「检查结果」文字。
|
|||
|
|
- 板块：① 目标选择 ② 版本对照（主视觉）③ 检查 diff 清单 ④ 确认发布（含二次确认）⑤ 发布记录（可点入）。
|
|||
|
|
|
|||
|
|
### P6 账号画像 —— 画像改成卡，记忆天然是时间线
|
|||
|
|
|
|||
|
|
- 主视觉：**画像卡（六维）＋ 记忆时间线**。记忆条目是「只追加、不覆盖」⇒ 它天然就是时间线形态，现在写成「可点入」把形态浪费了。
|
|||
|
|
- 账号列表改成**顶部横向切换条**（账号数 10–50，竖列表占地方且和矩阵页重复）。
|
|||
|
|
- 板块：① 账号切换条 ② 画像六维卡（主视觉）③ 记忆时间线 ④ 关联内容（可点入）。
|
|||
|
|
|
|||
|
|
### P7 复盘台 —— 数据即主视觉，归因区给 AI 结论留位
|
|||
|
|
|
|||
|
|
- 主视觉：**表现数据区**（关键指标 + 趋势小图，数据是主角，⛔ 不是三个裸数字块）。
|
|||
|
|
- 归因区明确分成两块：**AI 归因结论**（可编辑）+ **人确认 / 改判**（采纳或驳回）。现在的「归因结论区 —— 由人确认」把这两件事混在一块里，是这一页最大的形态问题。
|
|||
|
|
- 待复盘列表改成**左侧紧凑列表**（选一条，右边看详情），⛔ 不再占主视觉。
|
|||
|
|
- 板块：① 待复盘列表（侧）② 表现数据（主视觉）③ AI 归因结论 ④ 人确认与改判 ⑤ 回写目标提示 ⑥ 历史复盘（可点入）。
|
|||
|
|
|
|||
|
|
### P8 记录与对账 —— 对账天然是三栏对照
|
|||
|
|
|
|||
|
|
- 主视觉：**三栏对照**（内容 / 发布记录 / 收支），一屏看三样对不对得上，⛔ 不再是「一个核对区」。
|
|||
|
|
- 发布记录列表改成紧凑表（谁、何时、哪一版），单条溯源用抽屉。
|
|||
|
|
- 板块：① 发布记录表 ② 三栏对账（主视觉）③ 单条溯源（抽屉）④ 商单与收支（可点入，F12 为 P2）。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、②段要补的三件事（补上缺的那一层）
|
|||
|
|
|
|||
|
|
1. **每页加「形态」字段**：在「板块清单」旁边写明这一页的**主视觉是什么**与**块间空间关系**（矩阵 / 卡片流 / 对照 / 时间线 / 画布+侧栏）。⛔ 这不算视觉词 —— 它说的是结构与呈现，不是配色字体间距。
|
|||
|
|
2. **每页加「AI 在哪」字段**：这一页有没有 AI 产出、产出落在哪块、人怎么采纳或驳回。八页逐页给结论（没有的写「无」，⛔ 不许省略）。
|
|||
|
|
3. **全局加「形态语言」一节**：定义本产品的形态词汇（矩阵、摘录卡、对照、时间线、流水线画布、AI 产出区），并规定**不同页用不同形态、⛔ 不许八页同构**。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 四、执行顺序（不能倒）
|
|||
|
|
|
|||
|
|
1. 先改 `2b`（本方案 §二 八页改法 ＋ §三 三件事）。
|
|||
|
|
2. 再让③段按新骨架重做视觉与交互 —— `ui/_tools/check_skeleton.py` 的机检基线**必须同步更新**（它现在拿旧骨架当权威，③段改一位就报红）。
|
|||
|
|
3. ③段重做时，视觉参照另行拍板（见主会话转给用户的待拍板项）。
|
|||
|
|
|
|||
|
|
⛔ 顺序倒了会白做：只重做③段视觉治不好「像后台」—— 骨架不动，换什么皮肤都还是通用壳。
|