Главная Обзор Помощь
Вход
18307996893
/
kangshifu-board
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: main
Ветки Метки
kangshifu-board
/
TASK-v16-research.md

TASK-v16-research.md 6.4 KB
Постоянная ссылка История Исходник

v16：按 dr6 + dr1 的真实实现方式重构（先调研，再动手）

上一轮 v15 我做错了一件事：只给了方向，没让执行方去看这两张图背后的真实实现。 结果它按我口述的「Bento、深色卡、留白」三个词自由发挥，做出一个有形无神的东西—— 中间三张短卡空得只剩数字，深色卡里塞了五种颜色的阶段条，底部按钮笨重。

这一轮必须先调研，再动手。调研不到位不许开始改代码。

零、你要执行的第一步：调研（占本轮前 30% 时间）

已查明的线索（我查到的，你可以直接从这里出发，也可以自己找更好的）

参考图 出处 已确认事实
refs/dr6.png Crextio HR Dashboard Nixtio 设计团队 在 neuform.ai/template/crextio-hr-dashboard 有 Remix 模板（React Router + Tailwind 体系），页面需渲染才出内容。dribbble 上有同组作品
refs/dr1.png Donezo Project Management dribbble 设计师作品 dribbble.com/shots/27713660-Donezo-Project-Management-Dashboard 等至少 3 个同名作品页
dr7 SugarCRM Customer Journeys SugarCRM 官方产品 有官方文档站 support.sugarcrm.com，是真实在跑的 CRM 产品，不是设计稿

网络限制（我实测过，别浪费时间）

可以访问   dribbble / mobbin / refero / linear / attio / neuform / sugarcrm / github
完全不通   behance / pinterest / awwwards / i.pinimg.com / cdn 图床

behance、pinterest、awwwards 是网络层不通（curl 返回 000），不是你方法错。

调研要回答的问题（一条都别跳过）

  1. Crextio 的 Bento 栅格怎么切的：是 12 列还是不对称？大卡和小卡的面积比是多少？ 小卡里放了什么内容才不显得空？（这是 v15 最失败的地方——我们的短卡只有「9 张 / 82 分 / S1」）
  2. 那块深色卡里到底放几样东西：Crextio 的深色块信息密度是多少？用了几个色？ 我们上一版塞了 5 个不同颜色的阶段条 —— 这大概率是错的，去确认深色卡上到底该不该出现多种颜色。
  3. 卡片内边距与留白的真实比例：Crextio/Donezo 的卡内 padding、卡内元素 gap、行高，各是多少？ （别猜，能读到 CSS 就读 CSS，读不到就从高清图上量像素）
  4. 字重与层级：标题、数字、标签分别用什么字号字重？为什么小卡里只有 3 行却不显空？
  5. Donezo 的数据卡为什么短而不空：它四个数字卡每个都带「趋势说明」，这一行是什么内容？

调研产出要求

必须落盘到 docs/v16-research.md，每条结论后面注明来源（URL 或「从图 X 量得，数值 Y」）。 结论必须是可执行的设计参数（列数、比例、px 值、色值数量），不是形容词。

写不出可执行参数 = 调研失败，停下来先补调研，不许靠感觉往下走。

一、拿到真实实现的方式（按优先级试）

  1. 读线上真实产品的 CSS：linear.app、attio.com、sugarcrm 这几个站能通， 用 curl 抓 HTML/CSS，或在浏览器里 getComputedStyle 读出真实数值（列宽、padding、字号、行高、圆角）。 这是最可靠的一手数据，比看设计稿准。
  2. neuform 的 Crextio 模板：页面是 JS 壳，需要浏览器渲染。渲染出来看它的 DOM 结构和 computed style。
  3. dribbble 作品详情页：能找到设计师和作品说明，有时附带风格标签与配色说明。
  4. 实在拿不到的，从高清原图量像素：dr6 是 2869KB 的原图，足够量出比例关系。

二、改造要求（调研通过后才开始）

目标不变：让工作台跟 dr6/dr1 摆在一起像同一个时代的产品。

必须解决的 v15 遗留问题

  1. 中间三张短卡太空（最严重）

    • 现在：只有「9 张 / 82 分 / S1」三行，四周全白
    • 要求：按调研结论，决定是并成两列加宽、还是每卡补一行有信息量的说明、还是换掉内容本身
    • 判定标准：把这三张卡单独截图，跟 Crextio 的小卡并排，密度像不像

  2. 深色卡里的阶段条颜色太杂

    • 现在：蓝/紫/橙/红 五种颜色堆在深色底上
    • 要求：按调研结论确认深色卡上允许出现几种颜色，大概率只留一种状态色
    • 另：「我的环节」这一格属于个人视角，不该出现在「现场」卡里 —— 换掉或去掉

  3. A 卡内部不规则空白

    • 「待评分」文字与右侧数字「76」拉得太远，视线要横跨半张卡
    • 要求：这行改成左右两段式，不要中间飘一个大空白

  4. 底部卡片按钮笨重

    • 灰底大按钮压在轻盈卡片上，重量不匹配
    • 要求：按调研结论选一种——轻量文字按钮 / 极浅描边按钮 / 或移进详情页

  5. v12 回归：左卡连续空白 56px

    • 上一版没解决就放弃了，明确写「未解决」
    • 本轮要么解决，要么给出为什么解决不了的实测依据（比如两种约束在数值上互斥）

硬约束（不许突破）

  • 交互位置不动：href、data-link、data-stage、data-allstages 保持
  • 底色中性灰白，强调色沿用 --kf-accent: #5B5BD6，不许改成 dr6 的奶油黄或 dr1 的森林绿
  • dr2（暗色玻璃版）完全不参考
  • 空状态（未选身份 / 本月无成果 / 没人卡住）必须实测
  • 移动端 393px 必须同步，不许横向溢出
  • 不许为了填满版面硬加信息（v15 加「各阶段已交」勉强算合理，加「我的环节」就是错的——记这个教训）

三、验收

scripts/verify-v15.mjs 已有的项继续跑，再加：

  1. 三张短卡内容密度：每卡文字字符数 / 卡面积，跟调研得到的 Crextio 基准比值对照
  2. 深色卡内不同色相数量（要求 ≤2）
  3. 底部按钮实测高度与背景（要求与非按钮元素重量匹配）

跑完把「改动前 / 改动后」数字都写进 docs/v16-before-after.md。

四、纪律

  • 先出 docs/v16-research.md，我看不到这份文件之前不要改代码。
  • 每完成一个区块 commit 一次。
  • 做不到就写「没做到 + 为什么」，不许把没做的说成做了。
  • 唯一自检标准：把新截图跟 refs/dr6.png、refs/dr1.png 并排看，像不像同一个时代的产品。