香水网站有一个绕不开的问题：气味没法通过屏幕传达。访客闻不到，只能读「前调、中调、后调」和一串原料名。很多香氛网站于是用大量的模特大片和光影来营造氛围，却和这支香本身的气味关系不大。
这篇拆解 Foundax 案例库里的 SEN 留息。它是一个虚构的植物调香氛品牌，只有一支无花果淡香精 FIG. 01。它的做法是：不去描述气味，而是用一组意象把气味「翻译」成画面：一颗无花果，凝成一滴透明液体，在水里荡开，最后被收进切割玻璃瓶。
香氛网站难在哪
- 气味无法展示。 屏幕只能传达画面和文字，访客只能靠想象。
- 香调术语抽象。 「青绿木质」「柔木」对多数人没有具体感受。
- 氛围图容易千篇一律。 模特、光影、花瓣，放在哪个品牌上都成立。
- 单品品牌缺少内容。 只有一支香时，网站很容易只剩一个商品页。
所以留息的设计目标是：用一段可以跟着滚动的意象，让访客「看见」这支香从哪里来、是什么气质，再把它交到商品页上。
设计概念：从果实到气息
整个首页是一段被钉住的长滚动，分成五个章节，每章只有一个画面和一个动词：
- From fig to feeling.：一颗切开的无花果和一片舒展的叶子，交代原料。
- Extract.：青绿凝成一滴透明液体，讲「提取」。
- Unfold.：液滴落进水面荡开，讲香气在皮肤上展开的层次。
- Enclose.：切割玻璃瓶把香液收住，讲「保存」。
- 最后，成为你的气息：瓶身贴上标签，变成一件可以拥有的东西。
每一章只讲一件事，画面之间用连续的变形衔接，访客不会在中途迷失。
视觉语言：极简留白，只留给一件东西
页面几乎只有一种底色和一种文字颜色，画面中央始终只有一个主体：果实、液滴、水花或瓶子。大面积留白和缓慢的节奏，本身就在传达这支香的克制。
- 雾白
#F1F2EE页面底色，像一张干净的试香纸 - 墨绿
#2C322A标题与正文，比纯黑更柔和 - 苔灰
#73796E次要文字与章节标记 - 浅灰绿
#CCD0C7分隔线与进度条
| 用途 | 字体 | 为什么 |
|---|---|---|
| 标题与章节动词 | Libre Baskerville，正体与斜体 | 古典衬线字带一点植物图鉴的气质，斜体用在 Extract、Unfold 这类动词上 |
| 中文 | 思源宋体、宋体 | 与英文衬线字的气质一致 |
四个招牌时刻
果实
先交代原料
首屏是一颗切开的无花果和一片叶子，英文大字 From fig to feeling 点出整段旅程的方向。
液滴
青绿凝成一滴
无花果淡出，一滴透明液体从画面上方落下，章节动词 Extract 用斜体写在左侧。
水花
在一滴之间荡开
液滴落入水面，溅起一圈水冠。水花由 WebGL 实时渲染，而不是一段视频。
成瓶
以光为器
切割玻璃瓶由透明到成形，瓶盖落下、标签出现，香气最终成为一件可以拥有的物件。
六幕页面分镜
01
首屏：无花果的另一种存在
画面中央只有一颗无花果和一片叶子。标题、英文大字和一行轻声的介绍，留出大量空白。
02
提取：把青绿，凝成一滴
无花果退场，一滴透明液体落下。画面里只剩一个主体，页面底部的进度条告诉访客走到了哪一章。
03
展开：一瞬，荡开
液滴落入水面，溅起水冠。它对应香气在皮肤上展开的层次，是整段旅程里最有动感的一刻。
04
成瓶：以光为器，收住气息
切割玻璃瓶逐渐成形，瓶盖悬在上方。清透的香液和切面，把「看不见的」轻轻留下。
05
完成：最后，成为你的气息
瓶身贴上 SEN / FIG. 01 的标签，香调写成「无花果 · 绿叶 · 柔木」，旁边是进入商品介绍的入口。
06
商品：FIG. 01
大幅瓶身图配香调、容量和价格，「选购这缕气息」进入商品页；下方还可以重看香气的诞生。
从体验到下单
旅程结束后，页面马上接上一张完整的商品卡：香调、50 ml 容量和价格，按钮进入 Foundax 原生的商品页、购物车和结账。下方还有配送与退换说明，以及一篇关于无花果和青叶的品牌手记。想了解这部分功能，可以看 Foundax 功能介绍。
这类长滚动叙事要照顾不想看动画的人。开启「减少动态效果」时，留息把整段旅程收成一屏静态画面，商品信息和购买入口照常可用，这也符合 W3C WCAG 2.2 对动画可关闭的建议。
可以直接借鉴的清单
- 不描述气味，而是选一组能代表它的意象：原料、形态、质感。
- 每一章只放一个主体、一个动词，让长滚动保持清楚。
- 用留白和节奏表达品牌气质，比堆叠氛围图更有辨识度。
- 用进度条告诉访客走到哪里，避免长叙事让人迷失。
- 旅程结束后马上接上商品信息和购买入口。
- 为「减少动态效果」准备一个完整的静态版本。
常见问题
只有一款商品，也值得做这么长的首页吗？
单品牌更需要内容来建立辨识度。留息的长滚动只有五个章节，看完就直接到商品，不会让想买的人等太久。
水花效果会不会拖慢网站？
水花由 WebGL 实时渲染，只在香气旅程里运行；开启「减少动态效果」或在编辑器中时不会加载这段动画。
留息是真实品牌吗？
不是。SEN 留息是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 留息案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。