Violet
GreenLife 可持续生活电商

GreenLife 可持续生活电商

电商体验设计

为倡导可持续生活方式的品牌打造的电商体验,以自然美学与内容化叙事连接审美与消费决策。

客户GreenLife 环保电商
周期
4个月
发布日期
2024年11月
电商可持续发展绿色消费UI设计

项目起点:让消费成为审美与价值的共同选择

GreenLife 希望建立的不只是一个售卖产品的平台,而是一种关于生活方式的提案。品牌希望将可持续消费从“理念”转化为更具吸引力的日常选择,让用户在每一次下单时,都能感受到价值观与审美判断的统一。

视觉方向:自然、克制与呼吸感

我们为项目提炼出的核心关键词是:纯净有机松弛。整体视觉不追求电商惯常的强刺激,而是通过更柔和的秩序与留白,让内容本身更具质感。

色彩与版式

我们舍弃了高饱和促销色,转而建立一套以大地色系与森林绿为主的色彩系统。字体方面采用衬线与无衬线的搭配关系,在理性的信息结构中保留杂志式的阅读气质。

色彩系统展示

移动端优先的浏览体验

考虑到主要访问场景来自移动端,我们重新梳理了浏览、收藏与下单路径,让操作更加直觉,也更贴合单手使用习惯。

  • 大拇指区操作:核心交互集中于屏幕下半区。
  • 手势驱动:左滑收藏,右滑加入购物袋。

移动端界面展示

关键体验设计

  1. 碳足迹可视化

    每件商品都被标注了生产过程中的碳排放数据,并与传统同类商品进行对照。用户在结账完成后,可以直观看到本次消费在环保维度上的实际影响。

    “这个功能让我第一次清楚感受到,原来消费选择也可以被看见、被量化。” — 用户反馈

  2. 透明溯源

    通过“溯源”入口,用户可以查看商品从原材料产地到生产工厂的完整链路信息,让品牌关于环保与责任的承诺更具可信度。

碳足迹功能演示

轻量化性能策略

作为一个关注可持续理念的品牌官网,性能同样是设计的一部分。我们通过以下方式降低页面负担,提升整体访问效率:

  • 图片智能压缩:优先使用 WebP / AVIF 格式。
  • 按需加载:仅在需要时加载可见区域内容。
  • 暗色模式:在 OLED 设备上进一步降低能耗。

项目成果

上线首月,GreenLife 即获得 B Corp 认证,并被设计杂志《Wallpaper*》评为“年度最佳可持续设计”项目之一。

  • 月活用户:增长 150%
  • 复购率:提升至 45%