跳到主要内容

Lueur — 植物系护肤落地页

植物系护肤落地页

植物系护肤品牌的销售站点:三款产品以三个动作的仪式呈现,活性成分明写,购物车完整,内容页零 JavaScript。

2026-07
  • 艺术指导
  • 产品与包装设计
  • 前端开发
AstroTypeScriptCSSVercel
Lueur — 植物系护肤落地页 预览
  1. 01

    商品以三个动作的仪式呈现,而非一排网格

  2. 02

    每款产品都明写活性成分与价格

  3. 03

    内容页不下发任何 JavaScript,购物车作为独立孤岛

需求

一个以「克制」为主张的植物系护肤品牌:配方短、成分看得懂、没有叫不出名字的东西。一个臃肿的网站,会在第一句话之前就先否定产品。

只有三款产品——一支精华、一瓶面霜、一支油。这么短的目录不该按商店来陈列,而应该被讲述。

约束

  • 三款产品。 摆成网格太少,一款一页又太多。
  • 不打折也要卖出去。 品牌定位不允许红色横幅和倒计时。
  • 第一次购买靠的是信任,而不是促销:必须让人看懂瓶子里装的是什么。

决策

先讲仪式,再讲目录。

三款产品不是并排陈列,而是被呈现为三个动作——清洁、修护、保湿。访客不再在三件互相竞争的商品之间取舍,而是发现一段各归其位的顺序。客单价的性质也变了:买的不是一件产品,而是补齐一个步骤。

写出成分,而不是功效话术。

每款产品都把活性成分明写出来——精华是稳定型维生素 C 与山茶,面霜是透明质酸与芦荟,油是玫瑰果与补骨脂酚。整整一节专门解释这些成分。这是「配方短」这个承诺的直接兑现:配方短,才读得完。

用 Astro,而不是应用框架。

这个站点是带购物车的内容,不是一个应用。Astro 在内容页不下发任何 JavaScript,只为真正需要交互的孤岛——购物车、表单——加载脚本。于是产品页以纯 HTML 抵达:这是对感知速度贡献最大的一个选择,而它完全看不见。

结果

一条完整的购买链路:由仪式进入,产品页带活性成分与价格(38、34、42 欧元),侧边购物车带合计,结账,页尾收集邮箱。评价与常见问答在付款前收掉最后的疑虑。

如果重做

页面顶部的社会认同来自演示内容。在真实站点上,我会把它移到成分介绍之后:访客还不知道你卖的是什么,就先看到一个平均评分,那不叫证明,那叫装饰。

Sérein