🎨

独立站设计提升方案

2026-08-14 凌晨全站巡检 · 桌面端逐页截图实测 · 待 Austin 审核后执行

📊一、整体评价:底子很好,缺的是"临门几脚"

8.5
品牌视觉一致性
8
信息架构 / 漏斗
7.5
组件设计质量
6.5
第三方组件融合
7
细节打磨

逐页截图看下来的结论:这个站不需要"重新设计",需要的是定点打磨。色板(粉/奶油/墨)、圆角体系、爪印纹理、卡片语言全站统一执行得很扎实,首页漏斗(承诺→产品→理由→证据→答疑→社群)叙事完整。真正拉低观感的是几个"外来户"和几个空态——都是小手术。

✅ 做得好的(保持别动)
  • 首页 Hero 双拍立得「照片→手办」对比——一图讲清产品,是全站最强的一个设计。
  • 四步流程卡(粉色虚线箭头+编号爪印徽章)、Why 四卡、礼物对比表——信息密度和可读性都在线。
  • 视频模块四格竖版(工序角标+底部字幕)比大多数竞品的花絮区做得精致。
  • 页脚:深色区+四社媒+支付墙+Secure Checkout,收尾完整。

🎬二、视频模块位置(你的问题 1)

现状:视频模块在首页第 9 位(画廊之后、FAQ 之前),大约在页面 60% 深度——大部分访客滚不到这里。它的使命是「真实性证明」,但证据放在了结案陈词之后。

首页现在的叙事线

Hero 承诺信任条邮件条四步流程双品卡Why 四卡评论(隐藏)画廊🎬 视频FAQ社群
方案 A:上移到「四步流程」之后推荐

逻辑:流程卡讲"我们怎么做",视频立刻证明"真的在这么做"——承诺和证据背靠背,说服力 1+1>2。访客在 30% 页面深度就能看到真人真手,之后再看产品卡时信任已经建立。这也是转化文案的经典结构:Claim → Proof → Offer。

改后首页结构
Hero
信任条
邮件条
四步流程「我们怎么做」
🎬 视频「眼见为实」
双品卡(信任建立后再卖货)
Why 四卡
画廊
FAQ
社群

顺手一并做:视频模块的 CTA「See more from the studio →」保持;流程卡第 3 步「Hand-painted, one at a time」可加一行小字「watch it happen ↓」把视线往下引。

方案 B:上移到「双品卡」之后、Why 之前备选

逻辑:先看完产品再看证据,适合"先种草后验证"的路径。比 A 弱的地方:产品卡出现时信任还没建立,而我们无真实评论,此时最需要证据前置。

方案 C:位置不动,Hero 加入口最小改动

Hero 副按钮「See how it's made」改为锚点直达视频模块(现在跳 How It Works 页)。改动最小,但"滚不到就看不到"的根本问题没解决,且削弱 HIW 页入口。

💡 我的建议

A。另外提醒:现在四格里是渲染图占位(你拍板保留的),上移会让占位内容更显眼——如果工作室实拍视频快到了,可以等素材到位后连"换素材+挪位置"一次做完;如果还要等几周,先挪位置也没问题,占位图本身质感不差。

三、评论模块现状与建议(你的问题 2)

Judge.me 现在挂在哪

位置状态说明
摆件 PDP✅ 已挂评论区 + Q&A 双标签(实测 Q&A 已开启),在 VS 表之后、FAQ 之前
钥匙扣 PDP✅ 已挂同上
首页🔒 骨架隐藏中pc_reviews 模块在首页第 7 位已就位但 enabled:false——不渲染,访客看不到
✅ 首页适不适合放评论区?——适合,而且已经为它留好了位置

社会证明是首页标配(行业天花板 Pet Printed 首页就是评论墙扛转化)。当初设计时就埋了这个模块,逻辑是:零评论期显示空评论区比没有评论区更伤信任,所以先隐藏。

点亮时机建议:攒够 6 条带图真实评论再开。操作只需把 enabled 改 true(一分钟的事,到时我来)。在那之前,首页的"证据担当"就是视频模块——这也是它值得上移的又一个理由。

⚠️ 顺带的设计发现:PDP 评论空态很"素"

现在 PDP 评论区标题是 Judge.me 自带的朴素样式(左对齐小字 "Customer Reviews"),空态是一个孤零零的 "Be the first to write a review" 按钮——和全站的粉色卡片语言脱节。建议:给 widget 标题套品牌样式(居中 + eyebrow「REAL REVIEWS」),空态文案改成品牌语气(如 "No reviews yet — the first tiny twin ships soon 🐾")。CSS 就能做,列入 P0-4。

四、视频大小与加载速度(你的问题 3)

先说结论:加载体验已经被架构保护住了,你只需要管"上传规格"

两层保护现在都在:① 视频传进 Shopify 后走 Shopify CDN 自动转码——真正发给买家的不是你上传的原片,是按访客网速自适应的压缩流;② 首页四格用的是 preload=metadata + 进入视口才播放——打开首页时只拉几 KB 的元信息,不滚到那里根本不下载视频。所以视频"拖慢整站"的前提基本不存在。

上传规格建议(给团队照抄的口径)

项目建议值为什么
时长6–15 秒花絮的黄金长度;超过 20 秒完播率骤降
分辨率1080×1920 竖版(1080p)四格卡片实际显示宽度 ~300px,1080p 绰绰有余;4K 纯浪费转码时间
格式MP4(H.264)兼容性最稳;iPhone 拍的 HEVC/MOV 也行,Shopify 会转
单条文件大小≤ 50MB(理想 10–30MB)不是硬限制(Shopify 上限 1GB),而是 50MB 内转码快、后台管理轻、传输不折腾
同屏数量首页 ≤4 条(现状即是)Studio 页瀑布流靠懒加载,条数不限
💡 给工作室的一句话版本

「竖屏 1080p、6–15 秒、单条 50MB 以内,MP4 或 iPhone 原片都行」——原片超了就先用手机自带压缩转 1080p 再传。

🔥五、P0 优化清单(影响转化,建议全做)

#问题方案动哪里
P0-1视频模块位置过深上移到四步流程之后(方案 A)index.json order 调序,5 分钟
P0-2Klaviyo 弹窗是"外来户":黑底白字默认样式,弹出来像别家网站的广告,和粉奶油品牌严重打架在 Klaviyo 后台把弹窗+底部小挂件改成品牌皮肤:Cream 底、粉按钮、圆角 20px、爪印点缀;挂件文字别用全黑底Klaviyo 后台(我可浏览器代操作)
P0-3向导标题字体掉链子:LET'S CREATE THEIR TINY TWIN 用的是正文字体,全站唯一没用标题字体的大标题,下单最关键页面反而最不"品牌".pcz-title 改用 Fredoka(与全站 H1 一致),步骤徽章字体同步核对pc-customizer.liquid CSS,10 分钟
P0-4PDP 评论空态素、不像自家人Judge.me widget 标题品牌化 + 空态文案改品牌语气(见第三节)品牌 CSS + Judge.me 设置
P0-5空购物车页太冷:"Your cart is empty" 默认样式,是全站唯一没有品牌温度的页面加爪印插画/emoji + 文案改「Nothing tiny in here yet 🐾」+ 粉色按钮引导去两个产品cart.json / 品牌 CSS

六、P1 打磨清单(变得更精致)

#项目建议
P1-1公告条 emoji 重复三条消息现在 🎨 出现两次;改为 🎨 / ✨ / 🎁 各司其职
P1-2流程卡→视频联动第 3 步「Hand-painted」卡加一行 "watch it happen ↓" 小字锚点(配合 P0-1)
P1-3画廊区标注渲染图对下方 "real customer before & afters join the wall soon" 已有预期管理 ✅ 保持;实拍到位后此区与视频模块二选一收缩,避免双"证据区"冗余
P1-4向导步骤条移动端移动端只剩圆点无文字(现状合理),建议当前步骤名显示在卡片标题里已覆盖 ✅ 无需改
P1-5404 页推荐位已修(不再推 Rush);顺手加品牌化 404 文案「This page wandered off like a cat 🐱」
P1-6移动端全站复检本轮巡检以桌面端为主;执行日用 375px 视口把首页/PDP/向导全滚一遍,重点看向导照片格和 CT 卡片

🗓七、执行计划(你点头后我开工)

  1. 第一批(纯代码,半天内完):P0-1 视频上移 → P0-3 向导字体 → P0-4 评论区品牌化 → P0-5 空购物车 → P1-1 emoji → P1-2 锚点 → P1-5 404 文案。全部走 API 直写 + 改前备份 + 前台截图验收。
  2. 第二批(要开后台):P0-2 Klaviyo 弹窗品牌化——我用浏览器进 Klaviyo 后台改样式,改完截图给你确认。
  3. 第三批(跟着素材走):真实视频到位 → 换掉四格占位;真实评论 ≥6 条 → 点亮首页 pc_reviews;实拍图到位 → 画廊区收缩整合。
  4. 验收:每批做完桌面+移动双端截图对比,硬刷新口径(你现在懂的 😄)。
📋 你只需要拍板三件事
  • 视频模块位置:选 A / B / C?(我推荐 A)
  • P0 清单 5 项全做,还是砍掉某项?
  • Klaviyo 后台我可以代操作吗?(要动你已登录的浏览器)
巡检方式:桌面端 1280px 逐页截图(首页全滚动 / 摆件 PDP / 定制向导 / Studio / 购物车 / 页脚),结合全部 366 个主题文件源码交叉核对
出方案:2026-08-14 凌晨 · 巡检与方案均未改动任何线上视觉(等你审核)· 文案与代码修复见同日晨报