+
+
善缘丹阳 · 小程序设计系统 v2 改造对照
+
以首页为样板页，展示「设计底座落地 + 氛围层 + 排版层级 + 可访问性」四类改动的实际效果。
+
+ 基线 main @ 825fd41
+ 改动文件 80
+ wxss 覆盖 88 / 88
+ UI 契约门禁 18 / 18 PASS
+
+
+
+
一、量化指标
+
改动前的问题不是「不够好看」，而是设计底座没落地 —— 88 个样式文件里 78% 绕过了 token。
+
+
+
页面层硬编码颜色
+
0770
+
仅 app.wxss 保留 56 个 token 定义色
+
+
+
不可读字号（<12px 非装饰）
+
0140
+
元信息下限统一到 24rpx(12px)
+
+
+
非法字重（550/650/750）
+
030
+
只保留 400/500/600/700 四档
+
+
+
未定义的 token 引用
+
02
+
此前静默失效（背景/过渡丢失）
+
+
+
未达标文字对比度
+
041
+
3.10:1 → 5.33:1
+
+
+
白字压在浅渐变上的 CTA
+
010
+
2.77:1 → 4.73:1
+
+
+
品牌色实心底 + 白字
+
032
+
按钮/标签/徽标统一换 solid 变体
+
+
+
低于 44px 的触摸目标
+
042
+
组件库按钮 40px、喜欢键 31px
+
+
+
+
+
+
二、首页对照
+
左侧是改造前（HEAD 版本的真实取值），右侧是改造后。两侧均用 app.wxss 里的真实 token 渲染，1rpx = 0.5px。
+
+
+
+
+
改造前
+
+
+
9:41
+
+
+
+
完善资料，开启安心相遇
+
补全 3 项信息即可进入推荐
+
+
去完善
+
+
+
+
+
公益 · 本地 · 真实 · 安全
+
在丹阳，遇见更好的你
+
认真认识，温暖相伴
+
+
+
+
+
+
+
+
+
+
+
+
+
林晓 · 28
+
丹阳 · 教师 · 本科
+
同城年龄相近
+
+
❤
+
+
+
+
+
+
周敏 · 30
+
丹阳 · 医护 · 硕士
+
同城
+
+
❤
+
+
+
+
+
+
1
+ 夜空只有一条平渐变：参考图里的暖粉光晕、星点、玻璃质感全部缺失，头部是「一块紫布」。
+
+
2
+ 层级读不出来：hero 标题 17.5px、区块标题 18px、卡片标题 12.5px —— hero 与区块标题几乎同号。
+
+
3
+ 触摸目标不足：「去完善」按钮高 24px、「查看更多」18px，远低于 44px 无障碍下限。
+
+
4
+ 对比度不达标：CTA 白字压在珊瑚粉渐变上仅 2.77:1；文字链接 #FF4F91 仅 3.10:1。
+
+
+
+
+
+
改造后
+
+
+
9:41
+
+
+
+
完善资料，开启安心相遇
+
补全 3 项信息即可进入推荐
+
+
去完善
+
+
+
+
+
公益 · 本地 · 真实 · 安全
+
在丹阳，遇见更好的你
+
认真认识，温暖相伴
+
+
+
+
+
+
+
+
+
+
+
+
+
林晓 · 28
+
丹阳 · 教师 · 本科
+
同城年龄相近
+
+
❤
+
+
+
+
+
+
周敏 · 30
+
丹阳 · 医护 · 硕士
+
同城
+
+
❤
+
+
+
+
+
+
1
+ 三层叠加做成氛围：--mini-starfield 星点 + 夜空渐变 + 两个定位光晕（右上珊瑚粉、左下靛蓝）。全部用 CSS 渐变，零图片、零额外请求。
+
+
2
+ 四级排版阶梯：hero 24px/700 > 区块标题 20px/600 > 卡片标题 14px/600 > 元信息 12px。
+
+
3
+ 触摸目标全部达标：CTA 44px；区块标题右侧「查看更多」由 18px 提到 44px 热区，且热区向左补白不挤压标题。
+
+
4
+ 对比度达标：CTA 换 --gradient-brand-solid → 4.73:1；文字链接换 --color-primary-strong → 5.33:1。
+
+
5
+ 标题与卡片对齐：旧版标题比卡片多缩进 32rpx（.section 的 24rpx 与组件自带 32rpx 叠加），安全提醒卡还因 padding:0 顶到屏幕边缘。
+
+
+
+
+
+
+
+
三、小屏（≤340px）的行为差异
+
这是本轮改动里唯一一处「功能级」缺陷修复，值得单独看。
+
+
+
改造前
+
+
+
+
+
+
善
+
+
暂时没有完全符合的人
+
我们坚持 Required 条件
+
+
+
+
@media (max-width:340px){ .empty-actions{display:none} } —— 两个操作入口整块消失
+
+
+
+
+
改造后
+
+
+
+
+
+
善
+
+
暂时没有完全符合的人
+
我们坚持 Required 条件
+
+
+
+
小屏只收紧尺寸与字号，不再砍掉任何入口
+
+
+
+
+
+
+
+
四、设计 token 变更要点
+
品牌色分级是这一版最重要的结构性决定：基础品牌色 #E96B6B 无论做背景还是做文字都不满足 4.5:1，因此拆成三个语义层。
+
+ | Token | 取值 | 对比度 | 用途限制 |
|---|
+
+
+ --color-primary |
+ #E96B6B | 3.10:1 |
+ 仅大色块、渐变、光晕、图标底。禁止承载文字。 |
+
+
+ --color-primary-strong |
+ #B8434A | 5.33:1 |
+ 所有品牌色文字、小图标、纯文字链接。 |
+
+
+ --color-primary-solid |
+ #C24C50 | 4.73:1 |
+ 实心按钮底（配白字）、小徽标底色。 |
+
+
+ --gradient-brand |
+ #FF6A78 → #E96B6B | 2.77:1 |
+ 明亮活泼，仅装饰填充，不得压白字。 |
+
+
+ --gradient-brand-solid |
+ #C24C50 → #B8434A | 4.73 ~ 5.33 |
+ 所有承载白字的 CTA 渐变（本轮新增）。 |
+
+
+ --color-text-tertiary |
+ #777 → #646C85 | 5.22:1 |
+ 说明文字。旧值 4.48:1 卡在阈值下沿。 |
+
+
+ --mini-glow-coral / --mini-glow-indigo |
+ rgba 粉 / 蓝 | — |
+ 夜空光晕层（本轮新增，参考图关键特征）。 |
+
+
+ --mini-starfield |
+ 5 个径向渐变 | — |
+ 星点层（本轮新增），叠在夜空渐变之上。 |
+
+
+ --mini-glass / --mini-hairline |
+ rgba(255,255,255,.10/.16) | — |
+ 深底玻璃面与分隔线（本轮新增）。 |
+
+
+ --tap-min / --tap-gap |
+ 88rpx / 16rpx | 44px |
+ 触摸目标下限与最小间距（本轮新增）。 |
+
+
+ --ease-spring / --press-scale |
+ cubic-bezier(.34,1.4,.64,1) / 0.97 | — |
+ 按压回弹与缩放（本轮新增）。 |
+
+
+
+
+
+
+
五、本轮修掉的实质缺陷
+
不只是样式替换 —— 其中三条是会被静默吞掉的语法级错误。
+
+ - 3 处声明粘连（脚本副作用）：
recommend-card、discover、service-station 里出现
+ box-shadow:…rgba(255,79,145,.18)min-width:var(--tap-min); 这类缺少分号的合并声明。
+ 浏览器会把整条声明判为非法并丢弃 —— 于是「喜欢」按钮的 44px 热区与阴影双双静默失效，
+ 而花括号平衡、hex 配额等所有静态检查仍然全绿。
+ - 2 处引用了不存在的 token：
--button-press-feedback、--color-bg-input 此前从未定义，
+ 导致过渡动画与输入框背景直接失效（无报错、无告警）。
+ - 小屏砍掉操作入口：
@media (max-width:340px) 里 .empty-actions{display:none}，
+ 在窄屏机型上把「调整条件 / 公益红娘」两个入口整块移除，属功能级缺陷。
+ - 安全提醒卡错位：旧版
.safety-card{padding:0} 覆盖了 .section 的左右内边距，
+ 该卡片比其它区块宽 48rpx、直接贴到屏幕边缘。
+ - 触摸目标普遍不足：组件库主按钮 40px、小号 28px、纯文字变体
min-height:auto、
+ 「喜欢」键 31px、区块标题右侧 action 18px —— 全站已统一到 44px 下限。
+ - 对比度系统性不达标：41 处把品牌基础色当文字用（3.10:1）、32 处把基础色做实心底压白字、
+ 10 处白字压在明亮渐变上（2.77:1）。已按「文字用 strong / 实心底用 solid / 渐变按是否压字分流」三类语义收敛。
+ - 字重机型不一致：30 处 550/650/750 在 Android 无对应字重会回退，同一设计在不同机型上粗细不一致。
+
+
+
+
+
六、验证结果
+
以下为实际执行结果，非声明性描述。
+
+
18 / 18
UI 契约门禁全部通过（源码结构 + 关键行为断言）
+
0
未定义的 token 引用（扫描 88 个 wxss / 131 个 token）
+
88 / 88
wxss 文件通过声明级体检（无粘连、无空规则、括号平衡）
+
0
app.wxss 之外的硬编码颜色（56 个 hex 全部是 token 定义）
+
+
88 / 88
文件编码统一为 UTF-8 无 BOM（与仓库既有约定一致）
+
+
+ 尚未验证的部分（不作已验收）
+ · 本页是静态还原，用真实 token 值复刻布局，不是小程序真机截图；动态横幅轮播、真实数据、字号在真实设备上的渲染需要在小程序开发者工具里目视确认。
+ · 氛围层用到的 background 多层渐变与 radial-gradient 需要在真机（iOS / Android 各一台）复验，尤其确认低端机上不出现色带。
+ · 布局类改动（首页重做、标题热区加高、触摸目标统一为 44px）尚无自动化视觉回归，需要人工过一遍主要页面。
+
+
+
+
+