docs(research): 美化方案并入视觉裁定(§6 七问定案)

两案之争全部落定:首屏=融合(加 tagline 不 banner 化);纸面板=
选圆角纸卡(书评轨);代码块=多行窗条+灰阶三点;图库=亮直贴/
暗轻衬底;热力图=亮灰维持暗色补救(绿系亮色不换);标题 27px
维持(要轻减字重不减号);灰阶 5 档够用(hairline 更淡+行距微
增)。视觉轨 glm-5.3-flash:max,25 张证据图亮暗双态逐问裁定。

验证: 裁定含信心等级+落地注意+双模式分判;与 §5 问题清单一一
      对应

Spec: none (方案定案文档,待用户审批实施)

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-26 23:07:56 +08:00
1 parent 7c5455278b
commit 975cf5e58b
1 file changed
+55
+55
View File
@@ -147,3 +147,58 @@
- 截图环境:`npm run build`(34 页)→ `python3 scripts/build-perf/gz-server.py 18800 dist`(写稿时仍在跑,用后可杀:`pgrep -f gz-server` 取 PID kill);脚本 `/tmp/beauty-shots/shoot.cjs` 与 `shoot-mockup.cjs`(`NODE_PATH=$(pwd)/node_modules node …`)。
- 对比度计算:sRGB 相对亮度公式手算(§1-4 数值即此口径),可直接进验收注释。
## 6. 视觉裁定结果(glm-5.3-flash:max 视觉轨,2026-10-26 定案)
> §5 七问全部裁定完毕,⚠视觉待验标记以此为准失效;卡片 M/N/S 的两案之争已定。
裁定基准:灰阶克制(不彩色不弹跳宁轻勿闹)· 专业质感(被设计过≠被装饰过)· 双模式同判。
证据:/tmp/beauty-shots/ 现状 12 张 + mock 10 张全部读图;另对书评页头部(亮/暗)与热力图区(亮/暗)做 2× 特写裁片 4 张复核细节。
---
## #1 首屏:现状 IdCard 直连 vs mock hero
**裁定:两案融合**(取 mock 的 tagline + 标题升一档;保留现状的信息密度与紧凑行距,不 banner 化)| 信心:高
理由:现状 IdCard(头像+名+3 图标)到 2026 列表之间无一句身份语,读感偏"档案页";mock hero 仅一行「写作者 · 读者 · 快门按压者,拥抱开源。」+社交图标,无插画无 CTA,克制成立——不过度、不空洞,且"被设计过"确实更强。
落地注意:tagline 控制在 ≤20 字级,移动端随 hero 收紧行高;禁加背景辉光、大字标语等 banner 元素。
## #2 书评纸面板:通栏 hairline vs 圆角纸卡
**裁定:选 mockup**(保留现状"标题区外置"结构;正文列由 hairline+微纸底升级为圆角米灰纸卡)| 信心:高
理由:现状正文列只有极淡暖底 + 顶部通栏 hairline,"一页纸"的物体感弱;mock 的细边框+圆角+米灰底让纸卡成立。暗色不冲突:现状暗列与 mock 暗卡都已转暖棕纸色(夜灯感),转换自然。
落地注意:本文实测 7000px 长文——卡片左右边框在视口内就是两根竖线,边框用 1px hairline 级、圆角收敛;移动端收 padding 保字宽。
## #3 代码块:裸块 vs 终端窗条
**裁定:选 mockup(窗条加分),但只给多行块** | 信心:高
理由:现状暗色技术页一排单行裸块退化为"纹理条",块与底仅靠细边框区分;mock 窗条提供 `bash · deploy@vps` 标题(是信息不是装饰)+ 一条灰阶色带,暗色下块轮廓明显更立。
落地注意:≥4 行的块才挂窗条,单行命令保持裸 pill;红黄绿三点可换灰阶三点——窗条+mono 标题已足够传达终端梗,守住红线更稳。
## #4 图库衬底:直贴 vs stage 米灰衬底
**裁定:两案融合**(亮色维持白底直贴;暗色给照片加轻衬底/描边)| 信心:中
理由:亮色现状就是干净的白盒画廊(21 张彩照自供色),灰衬板会成全页最大 UI 块、抢照片的戏;暗色实拍夜景照(明珠塔/暗楼群/暗日落)边缘融底,轻衬底恰好能救。mock 图库两图均截在动画中途(扇形堆叠+页脚透字),终态布局证据不足。
落地注意:暗色衬底用 ~4% 白底或 1px hairline,衬底圆角不得大于照片圆角,避免"框中框"。
## #5 热力图:灰档量级辨识 & 绿系利弊(只评不站队)
**裁定:双模式分别判——亮色灰档够用;暗色低两档实缺。绿系利弊各半** | 信心:高
理由:2× 特写下亮色灰档可辨、密集黑簇(周峰值列)一目了然;暗色最低两档与底色粘连、接近丢失。绿系=明度+色相双编码、暗色读数大增、geek 熟悉感;代价是成为全页最大色块,与照片条/彩点连成"颜色带",压灰阶骨架重心、违"宁轻勿闹"。
落地注意:若动,只动暗色或用去饱和苔绿(sage);亮色不建议换绿。
## #6 书架页标题 27px 是否过重
**裁定:维持现状(不过重,不降到 22px)** | 信心:中
理由:书架页唯一层级锚点,27px 与 17px 级书名卡的差距正是层级本身;降到 22 与卡题贴脸,稀疏页面会更散。暗色下白字光晕(halation)放大视觉重量,是"显得重"的主因。
落地注意:与图库/文章页标题保持同轨字号(一致性优先于单页微调);要轻就减字重(700→600)不减号。
## #7 灰阶层级:hairline+日期单薄?5 档够不够
**裁定:两案融合**(hairline 保留但更淡,行距向 mock 靠拢;5 档灰够用,不追 12 档)| 信心:高
理由:现状 hairline+右对齐日期是"档案感"资产,并不单薄;mock 全靠行距分组更透气,但长列表会失锚。页面可感知灰阶本就 4-6 阶,rauno 的 12 档是设计体系储备,页面级硬凑只会出"渐变灰"噪感。
落地注意:暗色 hairline 再降一档亮度(现状略亮、切分感偏强);行距 +2~4px 优先于删线。
---
## 三行总评
1. **当前视觉成熟度:约 7.5/10**——已是完整自洽的灰阶克制系统(暖纸正文列/彩色书脊卡/mono 元数据/双模式纸色转换),缺口集中在 hero 身份语、暗色低灰阶辨识度、代码块"仪器感"。
2. **最值的一张卡:代码块终端窗条**——信息(上下文标题)+质感双收益、暗色收益最大、实现风险最低;书评纸卡次之。
3. **最危险的过度设计倾向:把画廊"道具化"**(stage 衬底+扇形堆叠动效是 mock 截图里已现形的方向)——与 hero banner 化、绿热力图同属"为设计感加戏",画廊应是白盒,动效层越薄越贵。
## 证据瑕疵备注
mock-home-dark 列表缺《海风中失落的血色馈赠》一行(截图态);mock 图库亮/暗两图均抓在动画中途。以上不影响各问主证据链,仅 #4 信心降为中。