CoupangASTRAE化妆刷清洁液详情页设计案例:使用步骤与信息层级

在ASTRAE化妆刷清洁液的 Coupang 详情页设计中,我们围绕使用步骤与信息层级组织内容。通过白灰简洁、蓝色标题、黑色瓶标,把商品识别、局部说明和场景信息安排在不同层级,让读者沿着清楚的顺序继续了解产品。

服务项目所属行业所属平台
Coupang 详情页设计美妆个护Coupang
项目需求目标市场设计风格
使用步骤与信息层级韩语内容展示白灰简洁、蓝色标题、黑色瓶标
项目报价交付内容交付时间
¥1,1001版商品详情页设计未披露

设计挑战:把不同阅读任务分开

这套详情页既要保留ASTRAE化妆刷清洁液的外形识别,也要容纳使用步骤与信息层级等不同主题。我们没有让每个画面重复承载全部信息,而是将整体、局部与场景分开,控制标题、图片和说明之间的距离。

我们的设计策略

我们以白灰简洁、蓝色标题、黑色瓶标建立连续的视觉语言,让主体从背景中被清楚识别。标题采用明显的字号和字重层级,补充说明退到次一级,避免装饰、照片与文字同时争夺注意力。

在内容组织上,我们按真实作品的主题划分章节:用较大的画面建立整体关系,用局部与图示解释细节,再以有边界的文字区或清单整理补充信息。长页面通过色块、卡片和组间留白形成停顿,连续阅读时也能辨认章节切换。

品牌开场:大字与单瓶形成焦点

ASTRAE化妆刷清洁液:品牌开场:大字与单瓶形成焦点

我们用手写感蓝色大字承接主题,瓶身置于白底中央。黑色瓶标与蓝色标题形成层级,倒影增加体积但不抢占视线。

内容分组:原料图形与产品上下分层

ASTRAE化妆刷清洁液:内容分组:原料图形与产品上下分层

我们在上方放置柑橘图形,下方呈现瓶身与短标注。大段白底留出呼吸感,让主题、物件与说明各自清楚。

瓶身近景:六边形说明围绕主体展开

ASTRAE化妆刷清洁液:瓶身近景:六边形说明围绕主体展开

我们以较大的单瓶为中心,细线连接周边六边形信息区。灰白背景和较轻文字保持技术感,外形轮廓仍然突出。

人物卡片:两块信息拥有统一边界

ASTRAE化妆刷清洁液:人物卡片:两块信息拥有统一边界

我们用两张白色圆角卡片组织人物照片和说明,绿色文字作为局部强调。相同卡片宽度和边距连接两个主题。

操作教程:四步图示逐行对应

ASTRAE化妆刷清洁液:操作教程:四步图示逐行对应

我们将清洁过程分成四个步骤,蓝色编号靠近对应照片。图片与说明左右分工,长页中的操作段落因此更容易逐项阅读。

对照展示:同一刷头在左右两栏呈现

ASTRAE化妆刷清洁液:对照展示:同一刷头在左右两栏呈现

我们使用左右两栏图片组织前后状态,灰色和蓝色标题带区分栏目。相近裁切与同一尺度让读者关注画面中的视觉差别。

浸洗近景:圆形标记定位观察区

ASTRAE化妆刷清洁液:浸洗近景:圆形标记定位观察区

我们放大容器中的刷具,将圆形虚线放在需要关注的局部。说明文字留在下方卡片,场景与标记保持直接对应。

资料收尾:产品图与表格各自成区

ASTRAE化妆刷清洁液:资料收尾:产品图与表格各自成区

我们在上方放置瓶身,下方以简洁表格整理尺寸和资料主题。字重、横线与留白共同控制密度,末段保持规整。

交付与设计价值

我们通过这一版详情页,围绕使用步骤与信息层级建立连续的阅读路径。白灰简洁、蓝色标题、黑色瓶标连接不同章节,图像尺度、文字层级和留白共同区分主次,让产品总览与局部说明相互补充。

为您的产品梳理清楚的 Coupang 视觉表达

您可以向我们提供产品链接、现有素材与需要说明的重点。我们会结合商品结构、款式与使用情境,规划适合的图组或详情页内容与版式。

一站式出海解决方案服务商

AIRSANG 专注于为全球品牌提供高性价比的网站设计、搭建、开发、品牌视觉与跨境电商解决方案。

shopify建站

wordpress建站

网站ui设计

amazon亚马逊设计