先说一句：你现在打开站，可能还看不到全部改动
Shopify 这档套餐没有手动清缓存的入口，页面缓存最长滞后约 1 小时。下面每张改后图都是用「实时区块渲染 ＋ 后台最新样式」拼出来的真实结果，和缓存刷新后你看到的一致。
改前 / 改后
5 组按你定的规矩，每条改动都配同视角对比图。
（图上标的「真正的动画 WebP」是当时的判断，后来查出 Shopify 会把 WebP 转码成更大的 GIF，最终采用的是优化过的 GIF —— 详见下方「追加两件」第 ② 条。）
逐条清单
17 条 + 追加 2 条每条都在写入后逐项读回核对，并用实时区块渲染绕过缓存验证。
Studio 页手机端破版
- 改法
- 手机端说明与日期改上下堆叠
- 结果
- 文字宽度 59px → 整个卡片宽
- 顺手
- 日期色对比度 2.14 → 4.9；说明文字 3.9 → 6.1
三个角度图标
- 改法
- 手画三个 SVG，同一只宠物的正 / 侧 / 背
- 验证
- 38px 小尺寸下三个角度仍可分辨
- 体积
- 内联 SVG，不增加任何请求
页脚小字看不清
- 改法
- 深底灰字提亮一档
- 结果
- 对比度 4.00 → 4.53
- 范围
- 13 页全站页脚一起受益，旧色值零残留
主按钮白字（按你的定调）
- 浅底小按钮
- 底色改深粉 → 2.91 / 3.11 → 5.45
- 主 CTA
- 维持亮粉，一动不动
- 例外
- 页脚那个按钮见下方 B4
页脚客服邮箱点不中
- 改法
- 可点高度补到 44px，用负边距抵消
- 结果
- 18px → 44px，视觉位置一像素没动
「Claim 10%」订阅按钮
- 高度
- 38px → 44px
- ⚠️ 偏离方案
- 它在深棕页脚上，按方案改深粉会让它从背景里消失（醒目度 4.75→2.54）
- 改成
- 保持亮粉底、文字改品牌深棕 → 对比度 4.75 达标，按钮反而更跳
粉色小标签、小标题偏淡
- 改法
- 新增一档「粉色文字专用」色，主色不动
- 结果
- 3.25–3.98 → 4.99–5.45（白底 / 米底都达标）
- 范围
- 博客标签、各页小标题、运费页 Step 徽章、REQUIRED 标签
产品卡统一
- 范围
- 集合页 · 搜索页 · 购物车推荐位 · 404 推荐位
- 价格
- 12px 灰字 → 22px Fredoka 品牌粉
- 按钮
- 用伪元素画视觉、点击落到整卡链接上（不做加购）
集合页控件太小
- Filter
- 26px → 44px
- 排序项
- 34px → 44px
- 清空搜索
- 24×24 → 44×44
- 顺手
- 手机抽屉导航子项 34px → 44px
博客列表图片超采
- 改前
- 固定取 900px 大图
- 改后
- 响应式 280 / 420 / 560px 按需取
- 画面
- 零变化，纯省下载量
Studio 页图片超采
- 改前
- 固定取 1000px（实际只显示 256px）
- 改后
- 响应式 260 / 380 / 520px
联系页表单标签点不动
- 改法
- 标签可点高度补到 44px，负边距保持版面
- 结果
- 21px → 44px
Send message 按钮
- 结果
- 对比度 3.11 → 5.45
- 顺手
- 收编了两处不在设计系统里的「野色」#F45C8C
图库圆点横向热区
- 改前
- 横向 18px（纵向 45px 早已达标）
- 改后
- 横向 44px · 纵向 44px
- 验证
- 连测三个圆点，全部 44×44 命中
- 视觉
- 圆点本身仍是 8.95px，只是彼此离得远一些
调色板图标精修
- 形状
- 棕色圆盘 → 经典调色板＋拇指孔
- 配色
- 换成品牌五色
- 体积
- 93KB → 15KB，且是真正的动画 WebP
HIW 四步图标
- 改前
- 系统表情 📸🪄🎨📦
- 改后
- 与首页同一套自画动图
- 成本
- 图早画好了，只是没挂过去
配色改动
主色一动不动全部在现有粉色系里调深浅，不引入新色相。Bubblegum #FF5D8F 作为品牌主色完全没动，公告条也维持原样（按你的定调）。
| 用在哪 | 改前 | 对比度 | 改后 | 现在 |
|---|---|---|---|---|
| 页脚小字 | #9C8791 | 4.00 | #A99098 | 4.53 ✓ |
| 粉色小标签 / 小标题 | #E0447A | 3.65–3.98 | #C1305F | 4.99–5.45 ✓ |
| 浅底小按钮 | #F45C8C | 3.11 | #C1305F | 5.45 ✓ |
| 页脚订阅按钮文字 | 白字 | 2.91 | 深棕字 | 4.75 ✓ |
| Studio 页日期 | #B7A5AE | 2.14 | #8A7580 | 4.90 ✓ |
| 主色（不动） | #FF5D8F | — | 品牌红线，全站强调色维持 | |
| 公告条（不动） | #E0447A | 3.98 | 按你的定调维持亮粉 | |
顺手多做的
3 件Studio 页日期色 2.14
- 怎么发现
- 修破版时顺手量到的，不在原清单里
- 为什么值得说
- 2.14 比我报告里列的任何一条都差
- 已改
- 2.14 → 4.90
收编两处「野色」
- 是什么
- #F45C8C —— 一个不在设计系统里的粉，用在联系页按钮和输入框边框
- 已改
- 按钮归到新的深粉档，边框归到品牌主色
查了一件我以为的大事
- 起因
- 集合页产品卡里发现「快速加购」组件，担心客户绕过定制向导下无照片废单
- 结论
- 虚惊一场 —— 主题设置层面已经关掉了，按钮尺寸 0、点不到
- 留个记号
- 以后动集合页时别把它打开
我踩的坑 / 要更正的
3 条① 上轮报告的「152KB」不准，实测是 322KB
上轮我写「三个图标 4.6MB → 152KB，文件名和格式对上了」。这次实测：四个图标后台共 322KB。尺寸确实从 512px 降到了 80px、体积也确实降了 93%，但那个数字报小了。
至于「格式对上了」那句 —— 我一开始判断是我们传错了，后来查出真相是 Shopify 自己在转码，跟我们传什么无关。完整调查见下方「追加两件」第 ② 条。
② 图库圆点：我第一次改法是错的，改了三次才对
第一次我用 margin 拉开圆点间距，结果间距是拉开了，可点范围一点没变 —— margin 是元素外面的空隙，不属于热区。第二次改用 padding，又因为按钮是固定宽度，反而把圆点本身挤没了、完全点不中。
第三次才找对：上轮扩纵向热区用的是一个隐藏的伪元素（只扩了上下、左右是 0），把它改成四向扩展、再配合拉开间距避免相邻热区重叠，才拿到 44×44。中间那次坏状态存在了几分钟，已经恢复并重新验证。
③ 后台接口写完立刻读，会读到旧版本
改完样式马上读回来做验证，两次读到的都是写入前的内容，害我以为改动没生效、差点重复改。等 8 秒再读就对了。这条记进施工手册，免得下次再上当。
追加两件（你点头后做的）
已完成① 照片指南页最后三个表情也画掉了 —— 这页现在零表情图标
三条黄金法则原本用 ☀️ 太阳 / 🧎 跪姿人 / 🎯 靶心。其中 🧎 在 Mac 上渲染成一个黄色小人，跟「蹲下来平视宠物」几乎没关系。
换成了：太阳（自然光）· 相机与小狗被一条虚线穿过（视线齐平）· 对焦框框住一张清晰的脸（对焦清晰）。这一版画了四稿——前三稿在 38px 下认不出来，最后把每个图标砍到只表达一件事才成立。
② 转 WebP 这件事：查出来的真相跟我原来说的不一样
我先按你说的把三个图标转成了真 WebP 传上去，然后一验证发现不对劲 —— 网站发给用户的还是 GIF，而且比我传的更大。
查到底了：Shopify 会把 .webp 后缀的动图自动转码成 GIF，而 .gif 文件则是原样发出去的。实测对照：
| 文件 | 后台存的 | 网站实际发给用户的 | 结论 |
|---|---|---|---|
| 相机 .webp | 76 KB 真 WebP | 102 KB 的 GIF | 被转码，还变大了 |
| 调色板 .webp | 15 KB 真 WebP | 43 KB 的 GIF | 被转码，还变大了 |
| 相机 .gif | 76 KB | 76 KB | 原样发出 |
所以之前那个「名叫 webp 其实是 GIF」根本不是我们传错了，是平台自己转的 —— 我上一轮把这事说成是我们的失误，那个判断是错的，在此更正。
更要紧的是：网页里那句「优先用 webp」的写法一直在让用户下载更大的文件。已经全部改成直接用 .gif，并把没用的 .webp 删掉了。
③ 那省下来的一半从哪来 —— 减帧
既然格式换不了，就从画面本身下手。逐个量出来的结论：
| 图标 | 改前发给用户 | 改后 | 怎么省的 | 省 |
|---|---|---|---|---|
| 相机 | 102 KB | 63 KB | 颜色数降到 63（实测色差 0.77，看不出来） | 39% |
| 魔法棒 | 27 KB | 23 KB | 不减色 —— 它是黑白渐变，一减色差飙到 16.4 会崩 | 15% |
| 调色板 | 43 KB | 15 KB | 换成直接发 .gif，不再被转码放大 | 66% |
| 包裹 | 93 KB | 21 KB | 帧率原本 33 帧/秒——一个指甲盖大的图标用不着，砍到 16.7 | 78% |
| 合计 | 265 KB | 122 KB | 动画一帧不卡、画面看不出差别 | 54% |
你要的「省一半」达成了，只是路子跟原来设想的完全不同。
✅ 全部结清，没有待办
精修后的调色板图标 Austin 已确认满意，维持现状（2026-08-18）。这一轮 19 条到此全部关闭，没有留下需要你回头处理的事。