Layout Study · 版式方案预览  |  11 layout options for MapleCrest — 6 homepage layouts + 5 page structures. Click any card to open the live prototype.
同一套配色与配图,只改结构与节奏。These are working HTML prototypes, not mockups.
MapleCrest · Website Layout Options

网站版式与结构方案 · 十一种

2026-10-13 · 6 种首页版式 + 5 种页面结构 = 11 个方案 · 全部为可点击原型的真实排版(浏览器直接打开)

每个方案都是完整可浏览的页面,不是效果图。同一套配色(墨黑 / 米白 / 漆褐 / 淡金)、同一批配图,只改结构与节奏——用来对比"同一品牌在不同版式下是什么感觉"。点开任意一张看实际效果。

一 · 首页版式(6 种)
版式 A

画廊全屏 · Museum Gallery

作品即展品

100vh 全屏首图 + 四角信息层(作者/工艺/地点/编号),其后单列大图纵向滚动,每图配极简规格说明,再进近黑展柜的产品区。
适合:强调"每件都是展品"的博物馆感,客单价高、非电商导向。

打开原型 →
版式 B

杂志分栏 · Editorial Grid

内容驱动

首屏文字优先(超大字标题 + 右侧小图),主区是 12 栏交错的图文网格(左右交替、留白不均),中段跑马灯串工艺词,后接三栏作品与 Journal 列表。
适合:有内容能力、想靠工艺故事养客与做 SEO。

打开原型 →
版式 C

工艺横带 · Craft Bands

地理跨度叙事

短首图之后,用 21:9 超宽横带一条条串起工艺与地点(落基山/梦莲湖/长白山/神农架/张家界),左右交替的文字叠层,带与带之间插极短观念段。
适合:把"中国 × 加拿大"的跨度变成视觉主线。

打开原型 →
版式 D

分屏叙事 · Split Sticky

滚动即讲工艺

首屏左右 50/50(左文案右大图),其后左侧三段文字随滚动切换右侧大图(髹/磨/嵌),再进四宫格器物与订阅条。
适合:用滚动节奏解释工艺步骤,沉浸、有说服力。

打开原型 →
版式 E

作品优先 · Product First

轻电音感

首屏不是大图而是宣言 + 四列作品网格,顶部常驻筛选条(大漆/螺钿/花丝/剔红…),卡片带询价与角标,其下五格工艺速览与工坊双栏。
适合:已经要卖货、希望访客三秒内看到商品。

打开原型 →
版式 H

网格线制度 · Gridline

博物馆标签感(实测最高性价比)

全站用一条 1px 发丝线切分每一段——线宽/颜色/跨度全部令牌化。首页走「3:1 横带 hero → 宣言 → [文字帽→三件作品→双图块]×2 → PICK UP 策展 → 3:1 横带 → Journal 三篇 → 订阅」。
来源:Vaarnii 的 border-b-gridline 制度 + Il Bisonte 的循环脊梁 + CIBONE 的 PICK UP 五段。

打开原型 →
二 · 页面结构(5 种)
结构 F

产品详情页

PDP · Product Detail

左 60% 主图 + 缩略图切换,右 40% sticky 信息栏:标题/询价/尺寸与配色选项/按钮/规格表/溯源卡;其下四格工艺过程图组与相关推荐。
要点:把"工艺溯源"做成产品页的固定模块,是溢价支点。

打开原型 →
结构 G

品牌故事页

Origin · 源起

全屏开篇 + 大字观念段 + 时间轴(2022→2026)+ 双地对照(加拿大/中国左右并置)+ 匠人档案 + 引语收尾。
要点:用"一个人的来路"承载品牌可信度,比口号有效。

打开原型 →
结构 I

工艺子站(大漆)

Craft Subsite

把"大漆"做成一个子站而非品类页:工艺宣言 → 源流时间线(河姆渡→宋元→明清→2024)→ 材料与工具六卡 → 制作过程四步(宽图+侧说明左右交替)→ 大漆作品(类目段堆叠、不设筛选器)→ 保养与证书 → 转其它工艺。
来源:Tortoise 的"品牌即子站" + Artek 的类目段堆叠。

打开原型 →
结构 J

列表页 · 发丝线网格

PLP · Grid + Swatch

类目头(名称+定位语)→ 左常驻材料筛选(真实色块 swatch:赤宝砂/石绿/靛蓝/金/墨/素白)+ 工艺 + 器型 + 产地 → 3 列发丝线分隔网格(线代替留白)→ load more。
来源:Muuto .bordered-grid + Mud Australia 釉色筛选 + AGMES 侧栏/抽屉双模。

打开原型 →
结构 K

画廊式作品页

PDP · Gallery Style

左 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 画廊式作品页整左大图集单件作品的完整性中远限量单件、高单价;说明后置、只走上/下一件
三之二 · 底层依据:26 条实测版式模式

上表不是凭感觉排的。本轮实测了 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 段产品列表)
P22PDP 下挂「中间层四件套」:实景/匠人/工艺/材料Vaarnii(18 个主样本唯一做满)、Il Bisonte
P24画廊式 PDP:说明置于询价按钮下 + 上/下一件(不做相关推荐)Ana Khouri
P02 / P05竖版视频 hero / 3:1 超宽横带 heroArtek / Frank Clegg、Norse Projects
P08 / P12PICK UP→NEW→RANKING→FEATURES→EDITORIAL / 推荐三连CIBONE / 中川政七商店
P11 / P14左右翻转锯齿叙事 / UGC 实景收尾Artek(交替 7 次)/ Ferm Living、Vaarnii

完整报告(34 站逐站拆解 + 26 条模式 + 8 条建议 + 数据可信度声明):
~/Desktop/项目文档/MapleCrest/MapleCrest_版式结构调研_20261013.md

四 · 本次配图(31 张,均来自实际生成)
落基山 · 横
蒙特利尔 · 横
图腾柱 · 横
温哥华雨林 · 横
天池 · 横
神农架 · 横
古塔 · 横
张家界 · 横
横带 01
横带 02
横带 03
横带 04
横带 06
横带 07
横带 08
横带 05 · 天池
落基山 · 竖
天池 · 竖
张家界 · 竖
钢笔
茶杯
手镯
细颈瓶
银杯
眼镜盒
镇纸
项链
蒙特利尔 · 竖

素材与文件位置

京ICP备2026066974号-1