小程序全量视觉评审 v1.1(静态数据 + 真实渲染)· 小齐 2026-09-22 01:1x

范围:miniprogram-v2 全量(95 个页面目录 / 119 个 wxss / 112 个 wxml)
方法:①全量代码扫描 + WCAG 对比度计算(脚本 /tmp/vi_audit.py)②真实渲染截图(miniprogram-automator 驱动微信开发者工具,cli auto --auto-port 9420,46/46 页全截,脚本 /tmp/vi_shots.js)③深读 7 张代表版式:home / selection / hotel-booking / merchant-store(mid=8) / orders / profile / guide-article

一、总评

方向对、底子好,但系统性差;金色可读性是当前最大实际风险。

二、六项发现(按严重度)

🔴 1. 金色做文字色,对比度 2.09:1(正文标准 4.5:1)

金色在两个属性场景的使用分布(94 个文件受影响):

场景处数判定
color:(文字色)494🔴 全部不达标
border*(描边)223✅ 描边可用金
background*(底色)144⚠️ 底上配的字决定成败
outline 等30+—

实测对比度(WCAG):

色组合on 纸白 #FBF7EEon 纸底 #F5F1E8判定
金 #C9A96E(现状文字色)2.091.99🔴
深金 #7A5E28(建议文字色)5.685.39✅
深金 #8A6D35(现有 gold-tint)4.554.31🟡 大字可、正文临界
墨 #1C171316.6315.77✅
弱化文本 #96918A(现状)2.932.77🔴
金底 + 纸白字(现状按钮)2.09—🔴
金底 + 墨字(建议)7.94—✅

修法(不动"主色=金"的裁定,只分工):金保留给背景/描边/图标/装饰;文字场景统一换深金;金底上的字换墨色。

🔴 2. 间距与字号没有规范("看起来不够高级"的根源)

🟡 3. 双轨色彩体系并存

旧页面变量(--red 931 次、--ink 529、--muted 342、--line 330、--paper 296、--white 252)与新 token(--color-* 92 种、5730 次引用)并行。能跑,但换主题必漏。

🔴 4. 裸 hex 残留(更正我 09-21 的"0 残留"结论)

全量扫出 124 处裸 hex;排除 token 定义文件(vi-tokens 61 处=定义本身)与 .out/ 构建产物后,真实残留约 52 处:

🟡 5. 字重 8 种(600/650/700/800 混用)、行高 37 种

650 这种非标准值 3 处,属手滑;建议收敛 400/500/600/700 四档。

⚪ 6. 死代码:72 个 class 定义未引用

样例:fade-up、cta-primary、pc-grid、scene-art 等(部分是动效类,由 JS 动态添加,清理前需逐个核实,不能盲删)。

三、修复建议(按优先级)

#动作工作量效果
1新增 --color-gold-text:#7A5E28,把 494 处 color: var(--red/--color-gold) 批量替换小(脚本可批量)可读性硬伤清零
2金底按钮/胶囊字 纸白→墨(144 处背景场景里筛出)小按钮可读
3弱化文本 #96918A → text-secondary小次要信息可读
4merchant-store 33 处裸 hex 走 token(派小冈或我顺手修)小新页合规
5建 8pt 间距 token + 6 级字号 token,新代码先行、存量渐进中节奏统一
6双轨合并:旧变量在 app.wxss 里指向新 token(--red: var(--color-gold-text)),全量改名二期小起步换主题不漏
7死 class 逐个核实后清理小减维护面

四、这套风格"到底怎么样"(一句话版)

它是一个有识别度、有性格的视觉方向(暖纸+金+叶形圆角),骨相是好的;现在的问题不是"丑",是"松"——金色当文字色用坏了(494 处不可读),间距字号没规矩(45 种字号/467 种内边距)。把这两件事修掉,它能从"有想法的草稿"变成"成体系的品牌视觉"。

五、真实渲染评审(v1.1 增补 · 46/46 页截图,深读 7 版式)

观感结论:比静态数据的预期更好——"神山刊物"的品牌气质成立

超出预期的亮点:

  1. 气质统一在真实渲染里成立:7 个版式全部贯彻暖纸底 + 衬线标题 + 金色点缀 + 叶形圆角,第一屏就有辨识度。
  2. 排印是最大加分项:guide-article 有首字下沉(金色大字"清")+ 衬线大标 + 金色眉题,是正经的编辑排印水准;profile 深墨头块 + 金色数字统计(02 福钥/03 印章…)是全站最有个性的版式。
  3. 品牌文案质感好:"向着一座山,走进一片地方""把今晚交给山风,也把旅程留在一盏灯里"——文案和视觉是一体的。
  4. 合规口径全部上屏:"线下直结·平台不参与交易""以下订单与金额均为数据示意"在每个交易触点都有。
  5. 双入口真跑通:merchant-store?mid=8 真机渲染全链路(真数据:地址/热线/简介/标签全在)——小冈 feat 的实锤。
  6. 手写风圈注("已记录""主理人推荐")是讨喜的细节。

截图印证/新增的问题:

  1. 🔴 金底白字按钮在图上肉眼可见发虚("按场景找玩法""查看票夹")——2.09:1 不是纸面数字,是真看不清。
  2. 🔴 金色小字眉题吃力:"神山指南""MY JOURNEY·我的行程"这类 22–24rpx 金色小字,截图里明显发灰。
  3. 🟡 hotel-booking 顶部双层导航冗余:系统导航"住宿预约"下面又出现页内"‹返回 + 神山指南",层级重复。
  4. 🟡 merchant-store 服务四宫格显示"床/单/核/服"单字圈,语义不清像文字截断,建议换完整词或图标。
  5. 🟡 merchant-store 主按钮"预订住宿"是墨灰底而非金底——与"主色=金"策略不一致(若有意做次级强调,建议在规范里写明规则)。
  6. ⚪ 示意数据年份停在 2024(orders/guide-article 多处)——2026 年了,测试种子该更新。
  7. ⚪ profile 蓝色提示条 / 绿色对勾:功能色与暖色系略跳,在规范内(info-wash token),可接受。

v1.1 修订后的总评

这套风格的"骨相"和"皮相"都在线:方向有性格、排印有水准、文案有温度;唯一的硬伤是金色文字的对比度(数据 494 处、图上肉眼可见)。把金色分工修掉(文字→深金 #7A5E28、金底字→墨),再把间距/字号收进规范,它就是一套可以对外讲的品牌视觉。

六、gpt6 独立交叉评审(v1.2 增补 · 双模型对表)

方法:8 张代表页截图(压缩 320px JPEG)通过团队 gpt-6-astra 通道(scripts/gpt6.sh 同款 zhi-api 通道,vision 实测可用)做盲评——不喂我的诊断,只要它独立判断。原文 /tmp/gpt6_review.md。

gpt6 独立结论:4.5/10「有配色方向,没有成型的视觉秩序」

它下的判语比我的 v1.1 更狠、也更接近刘总的直觉("套了藏地配色的通用业务模板")。六大根源与我的诊断五点完全吻合(两个模型独立得出 ⇒ 高置信度):

病因小齐(静态+截图)gpt6(盲评)
完成度断层/跨页无统一骨架✅ 主因✅ 根源①「跨页像多个模板拼接,缺共同骨架」
商品无图/内容素材弱✅✅ 根源⑥+整改3
金色滥用✅ 每屏一焦点✅ 整改2「金色只承担强调」
层级弱/小字墙✅ 45 种字号✅ 根源③「灰蒙蒙的小字墙」
组件不统一✅ 两种错误态✅ 根源④「控件彼此抢角色」
测试数据上屏✅✅ 根源⑥「编号式名称」

gpt6 补充的、我没抓到的点

  1. 主次颠倒:装饰占位置、决策信息(价格/房型/日期/订单状态)反而弱——预订页的核心决策元素视觉上不比说明文字强。
  2. 底部黑色悬浮控件(mo-sheet/底部操作条)多页反复出现,"游离于内容之外"。
  3. 密度两极:列表页拥挤 vs 玩法页大块空白,都不像精细编排。

两个模型的分歧点(如实呈报,待刘总定夺)

合并后的整改优先级(双模型一致部分加粗)

  1. 统一基础规范(间距/字号/圆角/按钮等级跨页一致)——最快消除"拼装感"
  2. 重做文字对比(正文深色、辅助中灰、金色只做强调;放大价格/房型/日期/状态)——直接回应"灰蒙蒙小字墙"+金色 2.09 硬伤
  3. 商品卡图文化+种子数据质感化——最直接提升可信度与转化
  4. 控件收敛(每区一个主动作;统一筛选/状态/标签;处理底部悬浮控件冲突)
  5. 密度节奏重排(列表页加有效信息、攻略强化分节、玩法页压缩空白)
  6. (静态数据项)merchant-store 33 处裸 hex 走 token;死 class 72 个核实后清理

七、过程记录与剩余边界(如实声明)

  1. 真实渲染截图(v1 初版受阻,v1.1 已打通):关键缺失是 cli auto --project <路径> --auto-port 9420——IDE 的"服务端口"(59172,CLI/HTTP 用)与"自动化端口"(ws)是两个开关,后者须 CLI 显式开启。打通后 46/46 页一次全截成功(/tmp/vi_shots/)。wxml→HTML 自动转换与 screencapture 两条路确认不可行(还原度不足/无权限),弃用。
  2. 截图复跑方式:IDE_PORT=9420 node /tmp/vi_shots.js(无参读 app.json 全量;可传具体路由如 pages/merchant-store/merchant-store?mid=8)。
  3. 剩余未覆盖:①深读仅 7 版式,其余 39 页截图已截但未逐张评(可按需补);②动效手感(magnetic/skeleton/抽屉)静态图评不了,需真机体验;③iOS/Android 真机渲染差异(本次是开发者工具模拟器)。

-- 署名:小齐