精选 · 开放 · 免费

Glossier

值得作为一个典范,展示如何运用摄影和排版作为主要设计驱动力,而非复杂的 UI 组件,来实现'简洁'的现代 DTC 设计。

beauty ecommerce clean
Glossier 网站截图

原站: https://www.glossier.com

在 OpenDesign 中打开

设计 DNA

视觉语言

一个以纯白和纯黑为主导的极简配色方案,辅以产品摄影中的柔和粉彩(尤其是粉色)和用于低调文字的中性灰色。

布局结构

全宽、摄影驱动的布局,留有大量空白,包含一个巨大的排版英雄区叠加层和整洁、基于网格的内容区块。

交互形态

标准的电子商务交互,为模态框、轮播和区块揭示提供平滑的基于透明度的过渡,保持平静而精致的用户体验。

动效规则

微妙且功能性,主要利用 ease-in-out 过渡来处理字号、透明度和可见性变化,以引导用户浏览整个编辑流程。

en · zh-CN · zh-TW · ja · ko