v16-research.md 18 KB
v16 调研：dr6 / dr1 的真实实现参数
任务书：
TASK-v16-research.md。本文件先于任何 src 代码改动写成。 每条结论后面都带来源；来源分三类：
- 【CSS】：真实产品线上页面
getComputedStyle或 CSS 文件里读到的值（一手）- 【量图】：在
refs/dr6.png（3200×2400）/refs/dr1.png（2400×1800）原图像素上量的值（工具见 §0）- 【文档】：产品方自己的文档 / 设计系统页 拿不到的东西写「未拿到」，不编。
0. 工具与限制（先说清楚哪些数据可信）
| 项 | 情况 |
|---|---|
| 看图 | 本轮环境没有 vision_analyze，用 Read 看图 + 在 Chromium 画布里逐像素取样（/tmp/v16r/img.mjs：原生分辨率截图、行/列色带扫描、裁剪放大、单点取色） |
| dr6 / dr1 原图 | 都是 2× 倍图（下文所有「px」已折算成 1× CSS px，并在括号里给原图像素） |
| dribbble | 可访问到 https://dribbble.com/shots/27713660，但返回 HTTP 202 空壳（bot 保护），DOM 里没有内容、拿不到图床。Donezo 的一手 CSS 未拿到，只有 dr1 原图可量 |
| neuform Crextio 模板 | 页面可渲染，但只有作品预览 + 设计系统摘要；「HTML」按钮要登录（弹 LoginRequiredModal），Remix 模板源码未拿到 |
| Crextio 设计系统摘要 | ✅ 拿到了（neuform 作品页 Design System 区块，见 §2.3）——这是 Crextio 的作者级参数 |
| linear.app / attio.com | ✅ 真实产品线上页，getComputedStyle 读到网格、卡内 padding、圆角、字号/字重/行高 |
| SugarCRM | support.sugarcrm.com 301 → support.sugarai.com；/documentation/ 返回 200 但正文是 gzip 二进制/登录壳，没读到 Dashboards / Customer Journeys 的界面参数。dr7 不在 refs/ 里（只有 dr1、dr6 两张），所以 SugarCRM 本轮没有可量的一手数据 |
| behance / pinterest / awwwards | 未尝试（任务书已确认网络层不通） |
所以：dr6/dr1 的比例、留白、字号全部来自「量图」；色彩/字重/圆角这类体系值优先用 neuform + linear/attio 的【CSS】交叉验证。
1. 问题一：Crextio（dr6）的 Bento 栅格怎么切 —— 是不对称 3 列，不是 12 列
1.1 实测
【量图】dr6 内层面板 x = 180–3019（原图 px），面板内边距 28（14 CSS px）。
第 2 行（主 Bento 行）：
| 列 | x 起 | x 止 | 宽（1× px） | 占面板 | 高（1×） | 内容数量 |
|---|---|---|---|---|---|---|
| 头像卡 Lora | 180 | 678 | 249 | 26.1% | 465 | 1 个模块（照片 + 姓名 + 价格胶囊） |
| Progress | 680 | 1 133 | 227 | 23.8% | 156 | 3（标题+↗ / 主数字+副文 / 柱状图） |
| Time tracker | 1 134 | 1 593 | 230 | 24.1% | 133 | 3（标题+↗ / 圆环计时 / 3 个控制钮） |
| Onboarding | 1 594 | 2 444 | 425 | 44.6% | 234 | 4（标题+% / 三段进度条 / 深色任务卡 / 列表） |
第 3 行：Pension 249（26%）| 日历 617（64.7%）| （右侧为空）——和上面 2 张卡同列对齐。 第 1 行（页头 KPI）：口径/进度胶囊占 ~58%，右侧 3 个 KPI（78 / 56 / 203）是无边框的大数字组，不占卡。
结论（可执行）：
- 栅格是 三等分（≈ 26% / 24% / 24%）+ 一张 44.6% 的宽卡，即「4 列不等宽」的自定义模板，不是 12 列等分；卡与卡 gap = 14px（原图 28），行 gap 也 = 14。
- 尺寸规则是「卡宽由内容决定」，不是「卡宽统一、内容去填」：宽卡（Onboarding 425px、日历 617px）都是内容多的；窄卡只放 3 个模块。
- 面积比：窄卡 (227~249 × 133~156) ≈ 0.13–0.14 × 宽卡 (425 × 234)。我们在 v15 里把三张短卡做成了 360×194 的近正方形——形状就从一开始就错了：dr6 的小卡是「约 230×140 的横条」。
1.2 小卡里放什么才不空（每题数主数字 / 辅助标签的个数【量图】）
| 卡 | 主数字 | 辅助标签/刻度 | 图形 | 文字块 |
|---|---|---|---|---|
| Progress | 1 个（6.1 h） | 1 个副标签（Work Time / this week 两行）+ 7 个刻度（S M T W T F S）+ 1 个悬浮值（5h 23m） | 7 根柱 | 5 块 |
| Time tracker | 1 个（02:35） | 1 个副标签（Work Time）+ 刻度环 | 圆环 + 3 个按钮 | 4 块 |
| 深色任务卡 | 1 个（2/8） | 每个任务行 2 行（任务名 + 时间） | 5 个图标圆 + 2 个勾选 | 6 行（标题 + 5 任务） |
- 不空的原因不是「字多」，是「块多」：dr6 最窄的卡也有 3 块 + 1 个图形，图形占了卡面积的 35–50%（Progress 柱状图 1 720×1 090 原图 ≈ 卡面积的 36%）。
- 对照我们 v15 的短卡：3 块纯文字、0 图形（「卡池 / 9 张 / 8 人提交」）——这就是「空」的根因。
1.3 对我们的可执行落法（见 §6.4）
- 三张短卡：宽度缩到 ≤ 全部宽度的 27%（1440 下 ≈ 360px 以内），用 2 块 + 1 个小型图形（如 5 段迷你条、环形、数字打头的大小号对照），不做近正方形空卡。
- 或者（更贴 dr1）改回 4 张窄卡，每张 1 标题 + 1 大数字 + 1 趋势行（见 §5）。
2. 问题二：深色卡放几样东西、用几个色
2.1 dr6 深色卡（Onboarding Task）实测
【量图】深色块（#303030，原图 2319–2944 × 1254–2107 → 313 × 427 CSS px）：
| 项 | 值（1× px） | 说明 |
|---|---|---|
| 卡内 padding 左 | 39.5（左图 2319 → 图标圆心/文字起点 2398） | 与卡宽 313 比 = 12.6% |
| 卡内 padding 上 | 35（顶 1254 → 标题带 1304 起） | |
| 一行任务的高度 | 124（图标圆 78 + 上下空 46） | 图标圆 39px，行高远大于图标 |
| 相邻任务图标圆心距离 | 62 | |
| 行内文字阶梯 | 任务名 20px（基线距图标圆心 −4.7px）→ 时间 12.6px（+9px） | |
| 不透明体总数 | 6 行（1 标题行 + 5 个任务行） | |
| 彩色像素 | 全卡 208 个取样彩色像素，全部是 #FFD85F（两枚完成勾，2865–2898 × 1487–1646） |
|
| 灰度层 | 底 #303030 / 图标底 #EDEDED / 已完成标题 #878787 / 副文 #B0B0B0 左右 |
结论（可执行）：
- 深色卡上色相数 = 1（只有强调黄），其余全是灰阶：底（深灰）— 图标底/主文字（近白）— 副文字（中灰）— 已完成（更暗的灰 + 删除线）。
- 状态表达不靠颜色，靠形态：已完成 = 删除线 + 勾选；未完成 = 实心文字 + 灰点。
- 信息密度：一块深卡 6 行、1 个大数字、1 个标题、1 个强调色。深色卡不是「信息仓库」，是「今日清单」。
2.2 全页深色块数量
【量图】dr6 只有 1 块深色内容卡（Onboarding Task）。页面自身的深色只有：顶栏当前页胶囊（Dashboard）与几个深色图标按钮。dr1 同样是 1 块（右侧 Time Tracker 深绿卡）。
2.3 Crextio 设计体系（neuform 作品页 Design System 摘要）【文档】
来源：
https://neuform.ai/template/crextio-hr-dashboard（页面渲染后 Design System 区块文本）
- 色板：Primary
#F5C518（黄）、Secondary/Tertiary#FFF8D6（奶油浅黄）、Neutral#303032（深色卡底就是它，量图#303030与之一致）—— 体系里只有 1 个强调色相。 - 间距：BASE RHYTHM 4px，SECTION PADDING 32px，GAP 8px；CARD PADDING: 20px / 10px；GAPS 8 / 12。
- 圆角：8 / 12 / 24 / 40 / 9999（以 8 为锚）。
- 阴影：卡片
0 1px 2px rgba(0,0,0,.05)（极浅），另一档0 4px 6px -1px rgba(0,0,0,.1)；描边 1px 黑 / 白。 - 字体：Heading Medium，Body Regular/Medium，System Font。
2.4 一手交叉验证（linear.app / attio.com）【CSS】
- linear.app/features 卡：圆角 16、padding 32 24、卡底
rgb(15,16,17)、无描边、无阴影。 - attio.com：圆角 12（内层 6–7）、描边 1px rgba(0,0,0,.05)。
- 两者正文/元信息一律同一字重 500，色阶只靠颜色深浅（attio：
rgb(36,38,41)主 /rgba(0,0,0,.55)次 /rgba(0,0,0,.4)弱）。
3. 问题三：卡内 padding 与 gap 的真实值
| 场景 | 值 | 来源 |
|---|---|---|
| Crextio 设计体系：卡 padding | 20 / 10 | 【文档】neuform |
| Crextio 设计体系：卡内 gap | 8 / 12；卡与卡 gap 8；区块 32；节奏 4 | 【文档】neuform |
| dr6 Progress/Time tracker/Onboarding 卡：内容离卡边 | 10（卡起 x=340/567/797 CSS → 标题 x=350/577/807） | 【量图】行 636 |
| dr6 宽卡 Onboarding：标题→大数字 | 0（同一基线行，标题 20 左，数字 32 右） | 【量图】 |
| dr6 窄卡 Progress：标题行→主数字 | 14；主数字→柱状图 18 | 【量图】 |
| dr6 日历卡：月标题→星期行 ~24 | 【量图】 | |
| dr6 深色卡 padding | 39.5（≈12.6% 卡宽）、行距 62、行高 124 | 【量图】§2.1 |
| dr1 KPI 卡 padding | 18–20（卡 x=486 ↔ 标题 x≈505；卡宽 249） | 【量图】 |
| dr1 KPI 卡内部 | 标题→数字 33，数字→结论行 31，结论行→卡底 30 | 【量图】§5 |
| dr1 卡与卡 gap | 8（973→1021→1052 之间） | 【量图】 |
| dr1 区块间距 | 50（KPI 行底 755 → 下一行卡顶 826 之外还有 40 的结构；取 28+）——按 20–32 档 | 【量图】 |
| linear 卡 padding | 32 24（卡 976×336） | 【CSS】 |
| attio 卡 padding | 面板 24（relative flex h-24 … padding 0 24px） |
【CSS】 |
结论：
- 密度高的产品卡内 padding 在 10–20；linear 那种「一张卡就是一个大图」的展示卡才用 32。我们的工作台是信息卡，用 dr6/dr1 的 20 上下（我们现为 20，OK）+ 卡内块间距 12–14（dr6 标题→数字 14）；gap 卡与卡 dr1 = 8、dr6 = 14，我们现在 24 偏松。
- 卡内「同一组」元素（标题 + 大数字）gap 要小（0–14）；「不同组」之间（数字 → 说明，说明 → 下一组）gap ≥ 30（dr1 31/33）。
4. 问题四：字重与层级
4.1 dr1（Donezo）量图
| 角色 | 字号（cap 高 ×1.43） | 字重（视觉） |
|---|---|---|
| 卡片标题 End Projects | ~16px（cap 22 原图） | SemiBold / 600 |
| 大数字 10 / 12 / 24 | ~28px（cap 39–40 原图） | Regular–Medium（笔画很细） |
| 结论行 Increased from last month | ~12px（cap 16） | Regular，绿 #3C7A40 |
| 页面标题 Dashboard | ~32px | 600 |
4.2 dr6（Crextio）量图
| 角色 | 字号 | 字重 |
|---|---|---|
| 欢迎语 | 32 | Medium（neuform：Heading = Medium） |
| 页头 KPI 78/56/203 | 36 | Light–Regular（极细数字） |
| 卡标题 Progress / 18% | 16（宽卡数字 32 与标题同一基线） | Medium–SemiBold |
| 主数字 6.1 h / 02:35 | 24 | Light，单位 h 12px 副色 |
| 副标签 Work Time / this week | 12，行高 1.5 | Regular |
4.3 一手交叉验证【CSS】
- linear.app：nav 13/400，卡片 kicker 13/510，卡片标题 20/510，正文 17/400，大标题 64/510。→ 字重几乎只有 400 和 510（=Medium）两档，层级靠字号跨度（13 → 20 → 64）和颜色，不靠 600/700。
- attio.com：12–15px 全部 500，只有卡标题 16/600。→ 两档。
结论（可执行）：
- 全页只用 2 档字重：400（正文/元信息）+ 600（标题/标签）；大数字用 500，不要 600（dr1/dr6 的大数字都比标题细）。
- 层级靠字号的大跨度：元信息 12 → 标题 16 → 大数字 28/32 → 页面标题 32。我们现为 12/14/16/20/32，缺 28 这一档（大数字都挤在 32，和页面标题同大）。
- 「小卡只有 3 行却不显空」：dr1 卡是 标题 16/600 + 数字 28/400 + 结论 12/400——三种字号、两种字重、三块、跨 16px 的卡；它不空是因为字号差 12→28 把卡面撑出节奏，而不是多了内容。
5. 问题五：Donezo 数据卡为什么短而不空
dr1 四个数字卡（y 486–755 原图 → 高 135 CSS px，宽 249 / 249 / 232 / 225）每个都是同一种三行结构：
Ended Projects (16/600，左) [↗ 圆形图标按钮 36px，右]
10 (28/400，左)
[⌃6] Increased from last month (12/400，绿) ← 第 3 行：趋势徽章 + 一句话结论
- 每个卡第 3 行都有一句「和上期比发生了什么」，不是静态说明：25% of cards 是
Increased from last month（绿），第 4 张是On Discuss（中性灰）——结论行本身随状态换写法。 - 迷你趋势徽章（绿色小方块 + 上箭头 + 数字）是把「趋势」压缩成徽章而不是折线图：卡小、信息不小、图形只占 20×14px。
- 「Total Projects」那张只有一张卡是深绿实底，作为一行里的锚点；其余三张纯白。
- 结构层数：3 行（标题 / 数字 / 结论）× 1 个角标图标 = 4 块，卡高 135。面积利用率 = 卡内内容 97×200 / 卡 135×249 ≈ 58%，留白全部竖向均匀分布（33 / 31 / 30）。
结论：能做短卡，前提是第 3 行是「有信息量的动态结论」（和上期比、和谁比、卡在谁身上），并且留白三边均匀（不是上下堆挤、中间一大坨）。
6. 本轮要执行的设计参数（汇总，全部在上面有出处）
6.1 栅格
| 项 | 值 |
|---|---|
| 列 | 12 列，gap 16（dr6 14 / dr1 8 的中间；现为 24） |
| 第一行 | A 8 列 / B 4 列（保持）——B 卡宽 4 列是合适的深色卡尺寸（dr6 深卡 313px、dr1 深卡 ~225px，我们的 ~360 偏宽但可接受） |
| 短卡行 | 4 列（dr1 式）：12 栅格里每张 3 列（1440 下 ≈ 268px，接近 dr1 的 232–249）；同时满足 v15 的「三张」下限（≥3 张）——第 4 张用现有 core 数据（已决策张数），不造新指标 |
| 卡 padding | 20（不变）；卡内组间距 12；卡内「组与组」≥ 30 |
6.2 深色卡（B）
- 色相 ≤ 2，且只允许 1 个「暖强调」：状态点允许 1 色（dr6 = 黄；我们用
--kf-s4琥珀作唯一状态色），删掉 S1–S5 五色点——改成一列纯灰阶的进度条（rgba(255,255,255,.28)轨道 + 白.9填充），像 dr6 的勾选与灰点那样「靠形态表达状态」。 - 底色保留
#18181B（亮度达标），辅助文字提到#B4B4BC、主文字#F4F4F5。 - 结构 6 行以内：标题行（现场 · 1 个状态点）+ 大数字行 + 卡住的人（≤3 行）+ 阶段进度（5 行细条）。「我的环节」删除（个人视角，不属于「现场」——dr6 的深卡只放「今天要做的」，不放个人统计）。
6.3 A 卡
- 「待评分」行改成 左右两段式：左侧卡名（可省略号）+ 右侧数字/「去评」胶囊，同一行两端对齐，中间放弹性空白
flex:1的引导线（dr1/attio 的列表行都是「左标题 + 右值」）。去掉中间大空白。 - A 卡下部「卡池进度 / 待评分」竖排成一张通栏列表（dr6 的 Onboarding 列表、dr1 的 Project 列表都是单列多行），不再左右两栏——两栏 32px 间距是 v15「中间一大块空」的来源之一。
6.4 底部按钮
- 去掉 C 卡上的紫底实心按钮（dr6/dr1 里强调色实心按钮只出现在深色/彩色卡里，例如 dr1 的 Start Meeting 在白色 Reminders 卡上——但那是一张「行动卡」），C 卡是数据卡 → 改成
16/600文本 + 箭头 的.go链接（我们已有--kf-accent-ink）。 - 机会卡底部的「候选 / 已立项 / 已否决」三连：dr6/dr1 没有这种灰底大按钮组 → 改成 静默文字行（12px，选中项用 12/600 + 强调色下划线），高度 24。
6.5 字号
| 角色 | 字号 / 字重 |
|---|---|
| 大数字（短卡、A 卡 me-nums） | 28 / 500 |
| 卡标题、小节标题 | 16 / 600 |
| 正文、列表 | 14 / 400–500 |
| 标签、副文、结论行 | 12 / 400（可 500） |
| 页面大标题 | 32 / 600 |
| 深色卡大数字 | 32 / 600（反白，唯一允许 600 的数字） |
字重只留 400 / 500 / 600 三档（现网页大概率没超）。
6.6 56px 回归（v12 A 卡连续空白）
【量图】现版 A 卡（1440 截图）：待评分 标题行底 y=242 → 去我也 区块顶 y=298，空 56px。
根因：A 卡 .me 是 flex 列，.me-split 用 margin-top:auto 贴底、两栏内容高度不等，左栏（卡池进度 3 行）比右栏多出 2 行，右侧内容沉底后留下 56 的空带。
可执行修法：改为 §6.3 的单列通栏列表后，.me-split 不再 margin-top:auto，列表本身决定高度；A/B 等高时多出的高度由阶段格按钮带吸收（.stagebar 允许 align-content:space-between），不再产生连续空白。若仍出现 >24 空白，验收脚本项 7 会报。
7. 调研没做到的部分（如实）
- Crextio 的 Remix 模板源码 / 真实 HTML：neuform 要登录，未拿到；dr6 的间距是 2× 原图量的，误差 ±1px。
- Donezo 的一手实现：dribbble 202 空壳，只有 dr1 原图可量；字重是视觉估计（无法拿到
font-weight）。 - SugarCRM Dra7 客户旅程页：
support.sugarcrm.com已 301 到support.sugarai.com，文档正文未以明文可取；dr7 也不在refs/里。本文件没有引用 SugarCRM 任何数值。 - 字号精确值：dr1/dr6 的字号由「cap 高 ×1.43」推算（CJK/拉丁混排 cap≈0.7em），与真实差 ±1px；商用字体不同会有偏差。所以 §6.5 的档位在「量图值 ±2」内取整，并与 linear/attio 的 13/20/16/12 档互相对齐。