每个方案都是完整可浏览的页面,不是效果图。同一套配色(墨黑 / 米白 / 漆褐 / 淡金)、同一批配图,只改结构与节奏——用来对比"同一品牌在不同版式下是什么感觉"。点开任意一张看实际效果。
100vh 全屏首图 + 四角信息层(作者/工艺/地点/编号),其后单列大图纵向滚动,每图配极简规格说明,再进近黑展柜的产品区。
适合:强调"每件都是展品"的博物馆感,客单价高、非电商导向。
首屏文字优先(超大字标题 + 右侧小图),主区是 12 栏交错的图文网格(左右交替、留白不均),中段跑马灯串工艺词,后接三栏作品与 Journal 列表。
适合:有内容能力、想靠工艺故事养客与做 SEO。
短首图之后,用 21:9 超宽横带一条条串起工艺与地点(落基山/梦莲湖/长白山/神农架/张家界),左右交替的文字叠层,带与带之间插极短观念段。
适合:把"中国 × 加拿大"的跨度变成视觉主线。
首屏左右 50/50(左文案右大图),其后左侧三段文字随滚动切换右侧大图(髹/磨/嵌),再进四宫格器物与订阅条。
适合:用滚动节奏解释工艺步骤,沉浸、有说服力。
首屏不是大图而是宣言 + 四列作品网格,顶部常驻筛选条(大漆/螺钿/花丝/剔红…),卡片带询价与角标,其下五格工艺速览与工坊双栏。
适合:已经要卖货、希望访客三秒内看到商品。
全站用一条 1px 发丝线切分每一段——线宽/颜色/跨度全部令牌化。首页走「3:1 横带 hero → 宣言 → [文字帽→三件作品→双图块]×2 → PICK UP 策展 → 3:1 横带 → Journal 三篇 → 订阅」。
来源:Vaarnii 的 border-b-gridline 制度 + Il Bisonte 的循环脊梁 + CIBONE 的 PICK UP 五段。
左 60% 主图 + 缩略图切换,右 40% sticky 信息栏:标题/询价/尺寸与配色选项/按钮/规格表/溯源卡;其下四格工艺过程图组与相关推荐。
要点:把"工艺溯源"做成产品页的固定模块,是溢价支点。
全屏开篇 + 大字观念段 + 时间轴(2022→2026)+ 双地对照(加拿大/中国左右并置)+ 匠人档案 + 引语收尾。
要点:用"一个人的来路"承载品牌可信度,比口号有效。
把"大漆"做成一个子站而非品类页:工艺宣言 → 源流时间线(河姆渡→宋元→明清→2024)→ 材料与工具六卡 → 制作过程四步(宽图+侧说明左右交替)→ 大漆作品(类目段堆叠、不设筛选器)→ 保养与证书 → 转其它工艺。
来源:Tortoise 的"品牌即子站" + Artek 的类目段堆叠。
类目头(名称+定位语)→ 左常驻材料筛选(真实色块 swatch:赤宝砂/石绿/靛蓝/金/墨/素白)+ 工艺 + 器型 + 产地 → 3 列发丝线分隔网格(线代替留白)→ load more。
来源:Muuto .bordered-grid + Mud Australia 釉色筛选 + AGMES 侧栏/抽屉双模。
左 62% 连续大图集(带图注),右 sticky:标题/询价/规格选择/按钮在前、说明在后(区别于常规电商),底部上/下一件而非相关推荐;下挂「中间层四件套」:工艺过程 → 匠人块 → 材料特写 → 实景 In Situ。
来源:Ana Khouri 的 excerpt-position-below-add-to-cart-button + nav-pagination-previousnext;Vaarnii 的 PDP 四件套(18 个主样本里只有它做满四段)。
| 方案 | 首屏给了什么 | 叙事重心 | 接触距离 | 建议场景 |
|---|---|---|---|---|
| A 画廊全屏 | 一张全屏山水 + 四角标注 | 作品本体 | 远(先看再说) | 品牌先行,作品集/展览同步上线 |
| B 杂志分栏 | 大字标题 + 小图 | 观念与内容 | 中 | 有持续内容产出,做长期 SEO |
| C 工艺横带 | 短图 + 一条条超宽横带 | 地理与工艺跨度 | 中远 | 强调"中加两地"差异化的主线 |
| D 分屏叙事 | 左文右图各占一半 | 工艺步骤 | 中 | 要讲清"贵在哪",转化教育型客户 |
| E 作品优先 | 宣言 + 四列作品网格 | 作品本身 | 近(直接询) | 已有作品可展示、跑投放与转化 |
| H 网格线制度 | 3:1 横带 hero + 左下信息层 | 结构化目录 | 中远 | 实测最高性价比:一条线解决质感问题,可叠加到 A–E 任一方案上 |
| I 工艺子站 | 工艺宣言(非产品) | 单一工艺的完整世界 | 中远 | 大漆/螺钿/花丝各做一子站,替代"品类页" |
| J 列表页 | 类目名 + 定位语 | 材料导航 | 近 | 发丝线网格 + 真实色块筛选,工艺品牌首选 |
| K 画廊式作品页 | 整左大图集 | 单件作品的完整性 | 中远 | 限量单件、高单价;说明后置、只走上/下一件 |
上表不是凭感觉排的。本轮实测了 34 个同类站(日本民艺 / 北欧设计 / 独立珠宝 / 手工皮具 / 工艺画廊 / 美术馆商店), 从真实 DOM 与 CSSOM 里拆出 26 条可直接复用的版式模式,标注了每条的来源站与适用场景。 其中 13 个站被 Cloudflare/403 拦下,报告中已逐站如实标注,未做任何填充。
| 模式 | 内容 | 实测来源 |
|---|---|---|
| P26 ★ | 全站统一网格线制度(线宽/颜色/跨度令牌化) | Vaarnii、TAKT(16 条 hr)、Nikari、Moore & Giles 等 8 站 |
| P07 | 文字帽 → 商品行 → 图块 循环(只用 5 种区块) | Il Bisonte(循环 4 次) |
| P18 | 色卡/材料 swatch 式筛选 | Mud Australia(釉色)、Il Bisonte(filter-swatch) |
| P16 | 发丝线分隔作品网格(线代替留白) | Muuto .bordered-grid、Vaarnii border-y-gridline |
| P19 | 类目段堆叠(PLP 无筛选器,靠锚点) | Artek(12 段产品列表) |
| P22 | PDP 下挂「中间层四件套」:实景/匠人/工艺/材料 | Vaarnii(18 个主样本唯一做满)、Il Bisonte |
| P24 | 画廊式 PDP:说明置于询价按钮下 + 上/下一件(不做相关推荐) | Ana Khouri |
| P02 / P05 | 竖版视频 hero / 3:1 超宽横带 hero | Artek / Frank Clegg、Norse Projects |
| P08 / P12 | PICK UP→NEW→RANKING→FEATURES→EDITORIAL / 推荐三连 | CIBONE / 中川政七商店 |
| P11 / P14 | 左右翻转锯齿叙事 / UGC 实景收尾 | Artek(交替 7 次)/ Ferm Living、Vaarnii |
完整报告(34 站逐站拆解 + 26 条模式 + 8 条建议 + 数据可信度声明):
~/Desktop/项目文档/MapleCrest/MapleCrest_版式结构调研_20261013.md




























~/Desktop/MapleCrest_网站版式方案_20261013/A_画廊全屏.html … G_品牌故事页.html~/Desktop/MapleCrest/hero-new/~/Desktop/MapleCrest/banner_ultrawide_20261013/~/Desktop/MapleCrest/产品图_20261013/~/Desktop/MapleCrest/website-versions/https://maplecrest.com.cn/