All works

Beauty / Detail page

SkinCeuticals

为精华系列重构详情页信息结构,把成分说服力前置到决策路径的第一屏。

Client
SkinCeuticals
Year
2024
Role
视觉设计 / 版式
Deliverables
详情页 · 主图 · 场景图
SkinCeuticals 精华产品置于苔藓与岩石上的主视觉

01 / Overview

客户希望在不改动产品摄影预算的前提下,提升精华系列在天猫旗舰店的详情页转化。原页面信息密度高,但成分与功效被压在第四屏之后,用户在滑动过程中容易流失。

我们把详情页当作一条阅读动线来设计:先建立质感与信任,再给出成分证据,最后收口到规格与售后,让每一屏都只回答一个问题。

02 / Challenge

三个具体约束决定了设计方向:

  • 素材只有既有产品图,需要靠版式与光影补足高端感。
  • 成分信息专业术语多,直接罗列会拉长阅读成本。
  • 移动端占比 86%,所有版式需要在 750px 宽度下先成立。

03 / Solution

以苔藓与岩石构建自然实验室的视觉基调,用大面积留白与低饱和绿灰色调把注意力收回到瓶身。成分部分改成图示化的三段结构:问题、成分、结果,每段配一句不超过 14 字的短句。

主图输出了 4 个版本用于搜索场景 A/B,最终选定纯背景加轻投影的版本,在缩略图尺寸下识别度最高。

详情页设计在桌面端与移动端的呈现效果
Desktop & mobile layout — 2024

Results

42% 转化率提升
1.8× 页面停留时长
76% 加购率提升

Next project

EcoFlow