Files
danyang-match/artifacts/miniapp-design-v2-preview.html
T
WorkBuddy 269adf1fed 小程序端:设计系统收敛与排版层级修复
问题:88 个 wxss 里散落大量硬编码颜色/字号/字重,无法统一调整;
部分正文对比度不达 WCAG AA(4.5:1);组件触摸目标偏小。

改动:
- 硬编码颜色收敛到语义 token(颜色统一走 design token,不再散落字面值)
- 修正全站字号阶梯:正文 ≥12px、角标 ≥11px;字重只用 400/500/600/700
- 组件触摸目标提升到 ≥44px,并补交互反馈
- 首页补氛围层次、强化排版层级

验证(本轮实测):
- UI 契约门禁 18/18 PASS(含 wxml 结构、wxss 组件选择器、token 显式值断言)
- 声明级体检 88/88 通过(全部 wxss 声明合法)

交付物:artifacts/miniapp-design-v2-preview.html
2026-09-23 01:06:46 +08:00

650 lines
37 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>善缘丹阳 · 小程序设计系统 v2 改造对照</title>
<style>
:root{
/* ── 与 miniapp/app.wxss 完全一致的 token(此处 1rpx = 0.5px,按 375pt 机型还原) ── */
--primary:#E96B6B; --primary-strong:#B8434A; --primary-solid:#C24C50; --primary-light:#FFF3F2;
--night-start:#172A72; --night-end:#25104F; --night-soft:#3445A1;
--accent-pink:#FF4F91; --accent-coral:#FF6A78;
--text-strong:#1A1F36; --text-primary:#2A3050; --text-secondary:#4A5169; --text-tertiary:#646C85;
--text-placeholder:#9AA1B4; --text-inverse:#FFFFFF;
--bg-page:#F6F5F3; --bg-card:#FFFFFF; --bg-subtle:#F5F6FA;
--border:#E6E8EF; --divider:#EFF0F5;
--accent-purple-strong:#7C60BC; --accent-purple-light:#F3EEFF;
--success-strong:#17805A; --success-light:#ECF8F2; --success-on-night:#A6F5D7;
--warning-strong:#9C5F14; --warning-light:#FFF7E9; --danger-strong:#C62828; --danger-light:#FFF0F0;
--info-strong:#2A5DB0; --info-light:#EEF4FF;
--glow-coral:rgba(255,79,145,.40); --glow-indigo:rgba(94,124,255,.32);
--star:rgba(255,255,255,.70); --glass:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.16);
--glass-success:rgba(90,226,184,.16);
--shadow-card:0 4px 14px rgba(35,35,95,.07); --shadow-raised:0 6px 18px rgba(35,35,95,.10);
--shadow-night:0 8px 20px rgba(28,30,88,.18);
--grad-smoke:linear-gradient(135deg,#FF6A78 0%,#E96B6B 100%);
--grad-solid:linear-gradient(135deg,#C24C50 0%,#B8434A 100%);
--scrim:linear-gradient(90deg,rgba(23,42,114,.84) 0%,rgba(37,16,79,.40) 56%,rgba(255,79,145,.12) 100%);
/* 文档层配色 */
--doc-bg:#F1F3F8; --doc-panel:#FFFFFF; --doc-line:#E2E6EF; --doc-ink:#1A1F36; --doc-mute:#5C6480;
}
*{box-sizing:border-box;}
body{
margin:0;background:var(--doc-bg);color:var(--doc-ink);
font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:40px 24px 80px;}
h1{font-size:28px;margin:0 0 8px;letter-spacing:-.2px;}
h2{font-size:20px;margin:0 0 4px;}
h3{font-size:15px;margin:0 0 10px;}
.sub{color:var(--doc-mute);font-size:13.5px;margin:0;}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.chip{
display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
background:#fff;border:1px solid var(--doc-line);font-size:12.5px;color:var(--doc-mute);
}
.chip b{color:var(--doc-ink);font-weight:600;}
.panel{background:var(--doc-panel);border:1px solid var(--doc-line);border-radius:14px;padding:22px 24px;margin-top:22px;}
.panel > p.lead{margin:6px 0 18px;color:var(--doc-mute);font-size:13.5px;}
/* 指标卡 */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;}
.metric{background:#fff;border:1px solid var(--doc-line);border-radius:12px;padding:16px 18px;}
.metric .k{font-size:12.5px;color:var(--doc-mute);}
.metric .v{font-size:24px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums;}
.metric .d{font-size:12.5px;color:var(--doc-mute);}
.up{color:var(--success-strong);} .flat{color:var(--doc-mute);}
.metric .from{color:var(--doc-mute);text-decoration:line-through;font-weight:500;font-size:16px;margin-left:6px;}
/* 手机模拟 */
.phones{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;margin-top:8px;}
.phone-col{display:flex;flex-direction:column;align-items:center;gap:12px;}
.phone-tag{font-size:12.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--doc-line);background:#fff;color:var(--doc-mute);}
.phone-tag.new{border-color:#C9E6D8;background:var(--success-light);color:var(--success-strong);font-weight:600;}
.phone{
width:375px;border-radius:30px;padding:9px;background:#15182B;
box-shadow:0 18px 44px rgba(20,24,50,.22),0 2px 6px rgba(20,24,50,.14);
}
.screen{width:100%;border-radius:22px;overflow:hidden;background:var(--bg-page);position:relative;}
.statusbar{height:22px;display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.86);letter-spacing:.4px;}
/* ── 夜空头部:改造前(纯渐变) ── */
.night-a{
padding:0 12px 14px;
background:linear-gradient(160deg,var(--night-start),var(--night-end));
border-radius:0 0 21px 21px;box-shadow:var(--shadow-night);
}
/* ── 夜空头部:改造后(星点 + 双光晕 + 叠层) ── */
.night-b{
position:relative;overflow:hidden;padding:0 12px 16px;
background:
radial-gradient(circle at 12% 18%,rgba(255,255,255,.70) 0,transparent 1.25px),
radial-gradient(circle at 31% 66%,rgba(255,255,255,.70) 0,transparent 1px),
radial-gradient(circle at 57% 12%,rgba(255,255,255,.70) 0,transparent 1px),
radial-gradient(circle at 79% 52%,rgba(255,255,255,.70) 0,transparent 1.5px),
radial-gradient(circle at 93% 84%,rgba(255,255,255,.70) 0,transparent 1px),
linear-gradient(160deg,var(--night-start),var(--night-end));
border-radius:0 0 24px 24px;box-shadow:var(--shadow-night);
}
.night-b::before,.night-b::after{content:'';position:absolute;border-radius:50%;pointer-events:none;}
.night-b::before{top:-100px;right:-70px;width:280px;height:280px;
background:radial-gradient(circle,var(--glow-coral) 0%,transparent 68%);}
.night-b::after{bottom:-110px;left:-80px;width:310px;height:310px;
background:radial-gradient(circle,var(--glow-indigo) 0%,transparent 70%);}
.night-b > *{position:relative;z-index:1;}
.brand{min-height:56px;display:flex;align-items:center;justify-content:space-between;color:#fff;}
.brand-l{display:flex;align-items:center;}
.logo{width:33px;height:33px;border-radius:9px;background:linear-gradient(135deg,#FF7A88,#E96B6B);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex:none;}
.logo.b{width:34px;height:34px;}
.brand-name-a{font-size:17px;font-weight:700;letter-spacing:1px;line-height:1.25;}
.brand-name-b{font-size:18px;font-weight:700;letter-spacing:2px;line-height:1.25;}
.brand-slo-a{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.72);}
.brand-slo-b{font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.72);}
.msg{font-size:12.5px;}
/* 状态条 */
.strip-a{margin:2px 0 8px;padding:9px 10px;border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.09);border-radius:10px;color:#fff;display:flex;align-items:center;gap:8px;}
.strip-b{margin:4px 0 8px;padding:12px;border:1px solid var(--hairline);
background:var(--glass);border-radius:12px;color:#fff;display:flex;align-items:center;gap:8px;}
.st-copy{flex:1;min-width:0;}
.st-title-a{font-size:12.5px;font-weight:600;}
.st-title-b{font-size:14px;font-weight:600;line-height:1.25;}
.st-desc{font-size:12px;color:rgba(255,255,255,.72);line-height:1.4;margin-top:2px;}
.cta-a{flex:none;min-width:54px;padding:0 9px;height:24px;display:flex;align-items:center;justify-content:center;
border-radius:14px;background:var(--grad-smoke);font-size:12px;font-weight:600;}
.cta-b{flex:none;min-width:58px;padding:0 12px;height:44px;display:flex;align-items:center;justify-content:center;
border-radius:999px;background:var(--grad-solid);font-size:13px;font-weight:600;}
.checks{display:flex;gap:5px;overflow:hidden;}
.check-a{padding:4px 6px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;}
.check-b{padding:4px 7px;border-radius:999px;background:var(--glass);font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;}
.check-b.done{background:var(--glass-success);color:var(--success-on-night);font-weight:600;}
/* 横幅 */
.banner-a{height:136px;border-radius:13px;overflow:hidden;position:relative;
background:linear-gradient(120deg,#2C3A82,#5A2C6E 62%,#B3487A);}
.banner-b{height:150px;border-radius:16px;overflow:hidden;position:relative;
background:linear-gradient(120deg,#2C3A82,#5A2C6E 62%,#B3487A);}
.banner-a .scrim,.banner-b .scrim{position:absolute;inset:0;}
.banner-a .scrim{background:linear-gradient(90deg,rgba(25,22,86,.78) 0%,rgba(43,22,101,.25) 58%,rgba(255,79,145,.08) 100%);}
.banner-b .scrim{background:var(--scrim);}
.banner-copy{position:absolute;left:12px;width:68%;display:flex;flex-direction:column;color:#fff;}
.banner-a .banner-copy{bottom:13px;}
.banner-b .banner-copy{bottom:20px;}
.kick{font-size:12px;letter-spacing:1.5px;color:rgba(255,255,255,.78);}
.bt-a{margin-top:4px;font-size:17.5px;font-weight:700;line-height:1.2;text-shadow:0 1.5px 5px rgba(0,0,0,.2);}
.bt-b{margin-top:5px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:.5px;text-shadow:0 2px 7px rgba(0,0,0,.22);}
.bs-a,.bs-b{margin-top:4px;font-size:12px;color:rgba(255,255,255,.84);}
.bs-b{font-size:13px;color:rgba(255,255,255,.72);margin-top:5px;}
/* 快捷入口 */
.entries{position:relative;z-index:2;background:#fff;margin:-7px 12px 0;}
.entries.a{border-radius:15px;padding:11px 5px 9px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.entries.b{border-radius:16px;padding:12px 4px 8px;box-shadow:var(--shadow-raised);}
.egrid{display:flex;flex-wrap:wrap;row-gap:8px;}
.eitem{width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.eitem.a{min-height:52px;} .eitem.b{min-height:58px;}
.eicon{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.eicon.a{width:33px;height:33px;border-radius:10px;background:var(--primary-light);font-size:15px;}
.eicon.b{width:36px;height:36px;border-radius:12px;background:var(--primary-light);font-size:16px;}
.elabel{margin-top:4px;color:var(--text-strong);}
.elabel.a{font-size:12px;font-weight:500;}
.elabel.b{font-size:13px;font-weight:500;}
/* 区块标题 */
.sec{padding:0 12px;}
.sec.a{margin-top:16px;} .sec.b{margin-top:20px;}
.shead{display:flex;align-items:center;justify-content:space-between;}
.shead.a{padding:11px 12px 11px 0;} .shead.b{padding:8px 0;}
.st-a{font-size:18px;font-weight:600;color:var(--text-primary);}
.st-b{font-size:20px;font-weight:600;color:var(--text-strong);}
.ssub{margin-left:8px;color:var(--text-tertiary);}
.ssub.a{font-size:13px;} .ssub.b{font-size:12px;}
.sact{display:flex;align-items:center;}
.sact.a{font-size:13px;color:var(--primary);height:18px;}
.sact.b{font-size:13px;color:var(--primary-strong);min-height:44px;padding-left:12px;font-weight:500;}
.caret{font-size:11px;margin-left:2px;}
/* 卡片 */
.card{background:#fff;display:flex;align-items:center;overflow:hidden;}
.card.a{border-radius:13px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.card.b{border-radius:16px;box-shadow:var(--shadow-card);}
.rec{display:flex;align-items:center;gap:8px;padding:7px 8px;}
.rec .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#D9D3F0,#BFC8EE);flex:none;}
.rec .info{flex:1;min-width:0;}
.rec .nm-a{font-size:13px;font-weight:700;color:var(--text-strong);}
.rec .nm-b{font-size:14px;font-weight:700;color:var(--text-strong);}
.rec .meta{font-size:12px;color:var(--text-tertiary);margin-top:2px;}
.rec .tags{display:flex;gap:4px;margin-top:4px;}
.rec .tag{padding:2px 5px;border-radius:6px;background:var(--accent-purple-light);color:var(--accent-purple-strong);font-size:12px;}
.heart-a{width:31px;height:31px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:14px;}
.heart-b{width:44px;height:44px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:16px;}
.divider{height:1px;background:var(--divider);}
/* 空态 */
.empty{background:#fff;display:flex;align-items:center;gap:8px;}
.empty.a{border-radius:13px;padding:11px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.empty.b{border-radius:16px;padding:12px;box-shadow:var(--shadow-card);}
.logo-s{width:38px;height:38px;border-radius:10px;background:var(--grad-smoke);flex:none;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;}
.et-a{font-size:12.5px;font-weight:600;color:var(--text-strong);}
.et-b{font-size:14px;font-weight:600;color:var(--text-strong);}
.ed{font-size:12px;color:var(--text-tertiary);line-height:1.4;margin-top:2px;}
.ed.b{font-size:13px;}
.eacts{display:flex;flex-direction:column;gap:4px;}
.ebtn{display:flex;align-items:center;justify-content:center;border-radius:12px;}
.ebtn.a{min-width:56px;height:24px;padding:0 6px;font-size:12px;}
.ebtn.b{min-width:60px;height:44px;padding:0 8px;font-size:13px;font-weight:500;border-radius:999px;}
.ebtn.sec-a{color:var(--accent-purple-strong);background:var(--accent-purple-light);}
.ebtn.sec-b{color:var(--accent-purple-strong);background:var(--accent-purple-light);}
.ebtn.pri-a{color:#fff;background:var(--grad-smoke);}
.ebtn.pri-b{color:#fff;background:var(--grad-solid);}
.hidden-note{margin-top:8px;font-size:11.5px;color:var(--danger-strong);
background:var(--danger-light);border-radius:8px;padding:6px 8px;}
.fixed-note{margin-top:8px;font-size:11.5px;color:var(--success-strong);
background:var(--success-light);border-radius:8px;padding:6px 8px;}
/* 注释气泡 */
.callout{display:flex;gap:10px;align-items:flex-start;margin-top:14px;max-width:375px;}
.callout .bullet{flex:none;width:20px;height:20px;border-radius:50%;background:var(--primary-solid);color:#fff;
font-size:11.5px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:1px;}
.callout .txt{font-size:12.5px;color:var(--doc-mute);}
.callout .txt b{color:var(--doc-ink);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--divider);vertical-align:top;}
th{color:var(--doc-mute);font-weight:600;font-size:12.5px;background:var(--bg-subtle);}
td code{background:var(--bg-subtle);border:1px solid var(--divider);border-radius:5px;padding:1px 5px;font-size:12px;}
.bad{color:var(--danger-strong);font-weight:600;}
.good{color:var(--success-strong);font-weight:600;}
.sw{display:inline-flex;align-items:center;gap:7px;}
.dot{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.08);flex:none;}
ul.clean{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--text-secondary);}
ul.clean li{margin:5px 0;}
ul.clean code{background:var(--bg-subtle);border:1px solid var(--divider);border-radius:5px;padding:1px 5px;font-size:12px;}
.gate{display:flex;flex-wrap:wrap;gap:10px;}
.gate .g{flex:1 1 210px;border:1px solid #CFE9DC;background:var(--success-light);border-radius:11px;padding:12px 14px;}
.gate .g .n{font-size:19px;font-weight:700;color:var(--success-strong);}
.gate .g .l{font-size:12.5px;color:var(--text-secondary);margin-top:2px;}
.warnbox{border:1px solid #F2E3C4;background:var(--warning-light);border-radius:11px;padding:14px 16px;font-size:13px;color:#6B4E12;}
.warnbox b{color:var(--warning-strong);}
footer{margin-top:34px;font-size:12.5px;color:var(--doc-mute);text-align:center;}
</style>
</head>
<body>
<div class="wrap">
<h1>善缘丹阳 · 小程序设计系统 v2 改造对照</h1>
<p class="sub">以首页为样板页,展示「设计底座落地 + 氛围层 + 排版层级 + 可访问性」四类改动的实际效果。</p>
<div class="meta">
<span class="chip">基线 <b>main @ 825fd41</b></span>
<span class="chip">改动文件 <b>80</b></span>
<span class="chip">wxss 覆盖 <b>88 / 88</b></span>
<span class="chip">UI 契约门禁 <b>18 / 18 PASS</b></span>
</div>
<div class="panel">
<h2>一、量化指标</h2>
<p class="lead">改动前的问题不是「不够好看」,而是设计底座没落地 —— 88 个样式文件里 78% 绕过了 token。</p>
<div class="metrics">
<div class="metric">
<div class="k">页面层硬编码颜色</div>
<div class="v flat">0<span class="from">770</span></div>
<div class="d">仅 app.wxss 保留 56 个 token 定义色</div>
</div>
<div class="metric">
<div class="k">不可读字号(&lt;12px 非装饰)</div>
<div class="v flat">0<span class="from">140</span></div>
<div class="d">元信息下限统一到 24rpx(12px)</div>
</div>
<div class="metric">
<div class="k">非法字重(550/650/750)</div>
<div class="v flat">0<span class="from">30</span></div>
<div class="d">只保留 400/500/600/700 四档</div>
</div>
<div class="metric">
<div class="k">未定义的 token 引用</div>
<div class="v flat">0<span class="from">2</span></div>
<div class="d">此前静默失效(背景/过渡丢失)</div>
</div>
<div class="metric">
<div class="k">未达标文字对比度</div>
<div class="v flat">0<span class="from">41</span></div>
<div class="d">3.10:1 → 5.33:1</div>
</div>
<div class="metric">
<div class="k">白字压在浅渐变上的 CTA</div>
<div class="v flat">0<span class="from">10</span></div>
<div class="d">2.77:1 → 4.73:1</div>
</div>
<div class="metric">
<div class="k">品牌色实心底 + 白字</div>
<div class="v flat">0<span class="from">32</span></div>
<div class="d">按钮/标签/徽标统一换 solid 变体</div>
</div>
<div class="metric">
<div class="k">低于 44px 的触摸目标</div>
<div class="v flat">0<span class="from">42</span></div>
<div class="d">组件库按钮 40px、喜欢键 31px</div>
</div>
</div>
</div>
<div class="panel">
<h2>二、首页对照</h2>
<p class="lead">左侧是改造前(HEAD 版本的真实取值),右侧是改造后。两侧均用 app.wxss 里的真实 token 渲染,1rpx = 0.5px。</p>
<div class="phones">
<!-- ══════════ 改造前 ══════════ -->
<div class="phone-col">
<span class="phone-tag">改造前</span>
<div class="phone"><div class="screen">
<div class="night-a">
<div class="statusbar">9:41</div>
<div class="brand">
<div class="brand-l">
<div class="logo">善</div>
<div style="margin-left:6px">
<div class="brand-name-a">善缘丹阳</div>
<div class="brand-slo-a">公益婚恋服务平台</div>
</div>
</div>
<div class="msg">消息</div>
</div>
<div class="strip-a">
<div class="st-copy">
<div class="st-title-a">完善资料,开启安心相遇</div>
<div class="st-desc">补全 3 项信息即可进入推荐</div>
</div>
<div class="cta-a">去完善</div>
</div>
<div class="banner-a">
<div class="scrim"></div>
<div class="banner-copy">
<div class="kick">公益 · 本地 · 真实 · 安全</div>
<div class="bt-a">在丹阳,遇见更好的你</div>
<div class="bs-a">认真认识,温暖相伴</div>
</div>
</div>
</div>
<div class="entries a">
<div class="egrid">
<div class="eitem a"><div class="eicon a">❤</div><div class="elabel a">找对象</div></div>
<div class="eitem a"><div class="eicon a">🎈</div><div class="elabel a">活动</div></div>
<div class="eitem a"><div class="eicon a">👤</div><div class="elabel a">红娘</div></div>
<div class="eitem a"><div class="eicon a">📖</div><div class="elabel a">课堂</div></div>
</div>
</div>
<div class="sec a">
<div class="shead a">
<div><span class="st-a">今日推荐</span><span class="ssub a">为你认真筛选</span></div>
<div class="sact a">查看更多<span class="caret">›</span></div>
</div>
<div class="card a">
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-a">林晓 · 28</div>
<div class="meta">丹阳 · 教师 · 本科</div>
<div class="tags"><span class="tag">同城</span><span class="tag">年龄相近</span></div>
</div>
<div class="heart-a">❤</div>
</div>
<div class="divider"></div>
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-a">周敏 · 30</div>
<div class="meta">丹阳 · 医护 · 硕士</div>
<div class="tags"><span class="tag">同城</span></div>
</div>
<div class="heart-a">❤</div>
</div>
</div>
</div>
</div></div>
<div class="callout"><div class="bullet">1</div><div class="txt">
<b>夜空只有一条平渐变</b>:参考图里的暖粉光晕、星点、玻璃质感全部缺失,头部是「一块紫布」。
</div></div>
<div class="callout"><div class="bullet">2</div><div class="txt">
<b>层级读不出来</b>:hero 标题 17.5px、区块标题 18px、卡片标题 12.5px —— hero 与区块标题几乎同号。
</div></div>
<div class="callout"><div class="bullet">3</div><div class="txt">
<b>触摸目标不足</b>:「去完善」按钮高 24px、「查看更多」18px,远低于 44px 无障碍下限。
</div></div>
<div class="callout"><div class="bullet">4</div><div class="txt">
<b>对比度不达标</b>:CTA 白字压在珊瑚粉渐变上仅 <span class="bad">2.77:1</span>;文字链接 <code>#FF4F91</code> 仅 <span class="bad">3.10:1</span>。
</div></div>
</div>
<!-- ══════════ 改造后 ══════════ -->
<div class="phone-col">
<span class="phone-tag new">改造后</span>
<div class="phone"><div class="screen">
<div class="night-b">
<div class="statusbar">9:41</div>
<div class="brand">
<div class="brand-l">
<div class="logo b">善</div>
<div style="margin-left:8px">
<div class="brand-name-b">善缘丹阳</div>
<div class="brand-slo-b">公益婚恋服务平台</div>
</div>
</div>
<div class="msg">消息</div>
</div>
<div class="strip-b">
<div class="st-copy">
<div class="st-title-b">完善资料,开启安心相遇</div>
<div class="st-desc">补全 3 项信息即可进入推荐</div>
</div>
<div class="cta-b">去完善</div>
</div>
<div class="banner-b">
<div class="scrim"></div>
<div class="banner-copy">
<div class="kick">公益 · 本地 · 真实 · 安全</div>
<div class="bt-b">在丹阳,遇见更好的你</div>
<div class="bs-b">认真认识,温暖相伴</div>
</div>
</div>
</div>
<div class="entries b">
<div class="egrid">
<div class="eitem b"><div class="eicon b">❤</div><div class="elabel b">找对象</div></div>
<div class="eitem b"><div class="eicon b">🎈</div><div class="elabel b">活动</div></div>
<div class="eitem b"><div class="eicon b">👤</div><div class="elabel b">红娘</div></div>
<div class="eitem b"><div class="eicon b">📖</div><div class="elabel b">课堂</div></div>
</div>
</div>
<div class="sec b">
<div class="shead b">
<div><span class="st-b">今日推荐</span><span class="ssub b">为你认真筛选</span></div>
<div class="sact b">查看更多<span class="caret">›</span></div>
</div>
<div class="card b">
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-b">林晓 · 28</div>
<div class="meta">丹阳 · 教师 · 本科</div>
<div class="tags"><span class="tag">同城</span><span class="tag">年龄相近</span></div>
</div>
<div class="heart-b">❤</div>
</div>
<div class="divider"></div>
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-b">周敏 · 30</div>
<div class="meta">丹阳 · 医护 · 硕士</div>
<div class="tags"><span class="tag">同城</span></div>
</div>
<div class="heart-b">❤</div>
</div>
</div>
</div>
</div></div>
<div class="callout"><div class="bullet">1</div><div class="txt">
<b>三层叠加做成氛围</b>:<code>--mini-starfield</code> 星点 + 夜空渐变 + 两个定位光晕(右上珊瑚粉、左下靛蓝)。全部用 CSS 渐变,零图片、零额外请求。
</div></div>
<div class="callout"><div class="bullet">2</div><div class="txt">
<b>四级排版阶梯</b>:hero <b>24px/700</b> &gt; 区块标题 <b>20px/600</b> &gt; 卡片标题 <b>14px/600</b> &gt; 元信息 12px。
</div></div>
<div class="callout"><div class="bullet">3</div><div class="txt">
<b>触摸目标全部达标</b>:CTA 44px;区块标题右侧「查看更多」由 18px 提到 44px 热区,且热区向左补白不挤压标题。
</div></div>
<div class="callout"><div class="bullet">4</div><div class="txt">
<b>对比度达标</b>:CTA 换 <code>--gradient-brand-solid</code> → <span class="good">4.73:1</span>;文字链接换 <code>--color-primary-strong</code> → <span class="good">5.33:1</span>。
</div></div>
<div class="callout"><div class="bullet">5</div><div class="txt">
<b>标题与卡片对齐</b>:旧版标题比卡片多缩进 32rpx(.section 的 24rpx 与组件自带 32rpx 叠加),安全提醒卡还因 <code>padding:0</code> 顶到屏幕边缘。
</div></div>
</div>
</div>
</div>
<div class="panel">
<h2>三、小屏(≤340px)的行为差异</h2>
<p class="lead">这是本轮改动里唯一一处「功能级」缺陷修复,值得单独看。</p>
<div style="display:flex;gap:34px;flex-wrap:wrap;justify-content:center">
<div class="phone-col">
<span class="phone-tag">改造前</span>
<div class="phone" style="width:320px"><div class="screen" style="background:var(--bg-page);padding-bottom:12px">
<div style="background:linear-gradient(160deg,var(--night-start),var(--night-end));height:70px;border-radius:0 0 21px 21px"></div>
<div class="entries a" style="margin-top:-7px">
<div class="egrid">
<div class="eitem a"><div class="eicon a">❤</div><div class="elabel a">找对象</div></div>
<div class="eitem a"><div class="eicon a">🎈</div><div class="elabel a">活动</div></div>
<div class="eitem a"><div class="eicon a">👤</div><div class="elabel a">红娘</div></div>
<div class="eitem a"><div class="eicon a">📖</div><div class="elabel a">课堂</div></div>
</div>
</div>
<div class="sec a">
<div class="empty a">
<div class="logo-s">善</div>
<div style="flex:1;min-width:0">
<div class="et-a">暂时没有完全符合的人</div>
<div class="ed">我们坚持 Required 条件</div>
</div>
<div style="width:56px"></div>
</div>
<div class="hidden-note">@media (max-width:340px){ .empty-actions{display:none} } —— 两个操作入口整块消失</div>
</div>
</div></div>
</div>
<div class="phone-col">
<span class="phone-tag new">改造后</span>
<div class="phone" style="width:320px"><div class="screen" style="background:var(--bg-page);padding-bottom:12px">
<div style="background:linear-gradient(160deg,var(--night-start),var(--night-end));height:70px;border-radius:0 0 24px 24px"></div>
<div class="entries b" style="margin-top:-7px">
<div class="egrid">
<div class="eitem b"><div class="eicon b">❤</div><div class="elabel b">找对象</div></div>
<div class="eitem b"><div class="eicon b">🎈</div><div class="elabel b">活动</div></div>
<div class="eitem b"><div class="eicon b">👤</div><div class="elabel b">红娘</div></div>
<div class="eitem b"><div class="eicon b">📖</div><div class="elabel b">课堂</div></div>
</div>
</div>
<div class="sec b">
<div class="empty b">
<div class="logo-s">善</div>
<div style="flex:1;min-width:0">
<div class="et-b">暂时没有完全符合的人</div>
<div class="ed b">我们坚持 Required 条件</div>
</div>
<div class="eacts">
<div class="ebtn sec-b">调整条件</div>
<div class="ebtn pri-b">公益红娘</div>
</div>
</div>
<div class="fixed-note">小屏只收紧尺寸与字号,不再砍掉任何入口</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="panel">
<h2>四、设计 token 变更要点</h2>
<p class="lead">品牌色分级是这一版最重要的结构性决定:基础品牌色 <code>#E96B6B</code> 无论做背景还是做文字都不满足 4.5:1,因此拆成三个语义层。</p>
<table>
<thead><tr><th style="width:230px">Token</th><th style="width:130px">取值</th><th style="width:110px">对比度</th><th>用途限制</th></tr></thead>
<tbody>
<tr>
<td><span class="sw"><span class="dot" style="background:#E96B6B"></span><code>--color-primary</code></span></td>
<td><code>#E96B6B</code></td><td class="bad">3.10:1</td>
<td>仅大色块、渐变、光晕、图标底。禁止承载文字。</td>
</tr>
<tr>
<td><span class="sw"><span class="dot" style="background:#B8434A"></span><code>--color-primary-strong</code></span></td>
<td><code>#B8434A</code></td><td class="good">5.33:1</td>
<td>所有品牌色文字、小图标、纯文字链接。</td>
</tr>
<tr>
<td><span class="sw"><span class="dot" style="background:#C24C50"></span><code>--color-primary-solid</code></span></td>
<td><code>#C24C50</code></td><td class="good">4.73:1</td>
<td>实心按钮底(配白字)、小徽标底色。</td>
</tr>
<tr>
<td><code>--gradient-brand</code></td>
<td>#FF6A78 → #E96B6B</td><td class="bad">2.77:1</td>
<td>明亮活泼,仅装饰填充,不得压白字。</td>
</tr>
<tr>
<td><code>--gradient-brand-solid</code></td>
<td>#C24C50 → #B8434A</td><td class="good">4.73 ~ 5.33</td>
<td>所有承载白字的 CTA 渐变(本轮新增)。</td>
</tr>
<tr>
<td><code>--color-text-tertiary</code></td>
<td>#777 → <code>#646C85</code></td><td class="good">5.22:1</td>
<td>说明文字。旧值 4.48:1 卡在阈值下沿。</td>
</tr>
<tr>
<td><code>--mini-glow-coral</code> / <code>--mini-glow-indigo</code></td>
<td>rgba 粉 / 蓝</td><td class="flat">—</td>
<td>夜空光晕层(本轮新增,参考图关键特征)。</td>
</tr>
<tr>
<td><code>--mini-starfield</code></td>
<td>5 个径向渐变</td><td class="flat">—</td>
<td>星点层(本轮新增),叠在夜空渐变之上。</td>
</tr>
<tr>
<td><code>--mini-glass</code> / <code>--mini-hairline</code></td>
<td>rgba(255,255,255,.10/.16)</td><td class="flat">—</td>
<td>深底玻璃面与分隔线(本轮新增)。</td>
</tr>
<tr>
<td><code>--tap-min</code> / <code>--tap-gap</code></td>
<td>88rpx / 16rpx</td><td class="flat">44px</td>
<td>触摸目标下限与最小间距(本轮新增)。</td>
</tr>
<tr>
<td><code>--ease-spring</code> / <code>--press-scale</code></td>
<td>cubic-bezier(.34,1.4,.64,1) / 0.97</td><td class="flat">—</td>
<td>按压回弹与缩放(本轮新增)。</td>
</tr>
</tbody>
</table>
</div>
<div class="panel">
<h2>五、本轮修掉的实质缺陷</h2>
<p class="lead">不只是样式替换 —— 其中三条是会被静默吞掉的语法级错误。</p>
<ul class="clean">
<li><b>3 处声明粘连(脚本副作用)</b>:<code>recommend-card</code>、<code>discover</code>、<code>service-station</code> 里出现
<code>box-shadow:…rgba(255,79,145,.18)min-width:var(--tap-min);</code> 这类<b>缺少分号</b>的合并声明。
浏览器会把整条声明判为非法并丢弃 —— 于是「喜欢」按钮的 44px 热区与阴影双双静默失效,
而花括号平衡、hex 配额等所有静态检查仍然全绿。</li>
<li><b>2 处引用了不存在的 token</b>:<code>--button-press-feedback</code>、<code>--color-bg-input</code> 此前从未定义,
导致过渡动画与输入框背景直接失效(无报错、无告警)。</li>
<li><b>小屏砍掉操作入口</b>:<code>@media (max-width:340px)</code> 里 <code>.empty-actions{display:none}</code>,
在窄屏机型上把「调整条件 / 公益红娘」两个入口整块移除,属功能级缺陷。</li>
<li><b>安全提醒卡错位</b>:旧版 <code>.safety-card{padding:0}</code> 覆盖了 <code>.section</code> 的左右内边距,
该卡片比其它区块宽 48rpx、直接贴到屏幕边缘。</li>
<li><b>触摸目标普遍不足</b>:组件库主按钮 40px、小号 28px、纯文字变体 <code>min-height:auto</code>、
「喜欢」键 31px、区块标题右侧 action 18px —— 全站已统一到 44px 下限。</li>
<li><b>对比度系统性不达标</b>:41 处把品牌基础色当文字用(3.10:1)、32 处把基础色做实心底压白字、
10 处白字压在明亮渐变上(2.77:1)。已按「文字用 strong / 实心底用 solid / 渐变按是否压字分流」三类语义收敛。</li>
<li><b>字重机型不一致</b>:30 处 550/650/750 在 Android 无对应字重会回退,同一设计在不同机型上粗细不一致。</li>
</ul>
</div>
<div class="panel">
<h2>六、验证结果</h2>
<p class="lead">以下为实际执行结果,非声明性描述。</p>
<div class="gate">
<div class="g"><div class="n">18 / 18</div><div class="l">UI 契约门禁全部通过(源码结构 + 关键行为断言)</div></div>
<div class="g"><div class="n">0</div><div class="l">未定义的 token 引用(扫描 88 个 wxss / 131 个 token)</div></div>
<div class="g"><div class="n">88 / 88</div><div class="l">wxss 文件通过声明级体检(无粘连、无空规则、括号平衡)</div></div>
<div class="g"><div class="n">0</div><div class="l">app.wxss 之外的硬编码颜色(56 个 hex 全部是 token 定义)</div></div>
<div class="g"><div class="n">0</div><div class="l">非百位字重 / 非装饰类不可读字号</div></div>
<div class="g"><div class="n">88 / 88</div><div class="l">文件编码统一为 UTF-8 无 BOM(与仓库既有约定一致)</div></div>
</div>
<div class="warnbox" style="margin-top:16px">
<b>尚未验证的部分(不作已验收)</b><br />
· 本页是<b>静态还原</b>,用真实 token 值复刻布局,不是小程序真机截图;动态横幅轮播、真实数据、字号在真实设备上的渲染需要在小程序开发者工具里目视确认。<br />
· 氛围层用到的 <code>background</code> 多层渐变与 <code>radial-gradient</code> 需要在真机(iOS / Android 各一台)复验,尤其确认低端机上不出现色带。<br />
· 布局类改动(首页重做、标题热区加高、触摸目标统一为 44px)尚无自动化视觉回归,需要人工过一遍主要页面。
</div>
</div>
<footer>
善缘丹阳公益婚恋服务平台 · 小程序设计系统 v2 · 生成于 2026-09-22 · 基线 main @ 825fd41
</footer>
</div>
</body>
</html>