项目概述

在Chroma Dewy的 Shopyy 网站中，我们围绕妆效主题与色彩商品陈列组织页面。我们将眼妆特写与主题文案组合成首页海报，下方以眼影色盘和品类图片连接商品浏览。整站以橙色标识、浅色画布与高饱和彩妆图片连接不同内容，让主题浏览、目录比较与单品查看形成连续的路径。

设计挑战

彩妆网站需要表达妆效，也需要让颜色与工具便于比较。我们把人物特写用于呈现主题，把色盘、刷具与包装交给规则网格展示，避免两种信息互相干扰。

设计策略：妆效主题与色彩商品陈列

我们将眼妆特写与主题文案组合成首页海报，下方以眼影色盘和品类图片连接商品浏览。首页负责建立方向，分类页承担比较，单品页继续说明外观与规格；不同层级通过导航和内容入口连接。

我们用Josefin Sans 无衬线字形组织标题、导航与正文，通过字号、字重和段落宽度区分主次。橙色标识、浅色画布与高饱和彩妆图片贯穿主要页面，组内信息保持紧凑，栏目之间留出更大空白，让图片、说明和操作入口各有位置。

动效与功能：围绕当前选择展开

首页横幅保留左右切换箭头，页面下方通过品类图进入不同商品目录。详情中的数量选择、图像区域和说明分组围绕单品展开，手机导航收成清楚的菜单入口，保持连续的浏览路径。

首页海报：让眼妆成为第一视觉焦点

我们把两组眼妆特写放在海报右侧，左侧安排主题说明，橙色 Chroma Dewy 标识位于简洁页头。近距离眼部画面直接展示色彩与质感，左右箭头为其他主题保留切换入口。

Josefin Sans 的轻盈字形连接导航与商品文字，浅色背景给高饱和妆效留出空间。图像与文案各有区域，首屏不必同时塞入完整商品说明。

新品区域：用规则网格比较色彩

我们用多列色盘卡片组织 New Arrivals，不同眼影颜色在浅背景上形成直观比较。图下的名称与价格保持简短，下一段再接 Brushes、Eyes、Lips 等品类图片。

同样大小的色盘与一致卡片宽度建立秩序，品类入口之间留出均匀间距。品牌橙色只作局部识别，真正的色彩主角来自商品本身。

刷具分类：让形态与套装结构清楚出现

刷具分类页把单支刷具和套装图片放在同一网格中，上方以 Makeup Brushes 标题说明当前范围。我们让刷头、手柄和套装数量先通过图片表达，名称与价格接在下方。

白底和较宽卡片间距减少视觉拥挤，细字导航与居中分类标题保持轻量感。目录工具单独占位，不打断商品矩阵的比较节奏。

商品页面：用主题包装图承接单品信息

The Volturi 商品页以红黑色包装图占据左侧，右侧排列名称、价格、数量和简短说明。我们让主题图像先交代视觉特征，再让文字信息承接具体查看。

红色背景与页面浅底形成鲜明边界，操作区使用细线框和较紧凑间距。图片与文字之间保留空白，让深色主题仍能在整站的轻界面中清楚呈现。

详情延伸：让补充区域与相关推荐分开

详情向下保留商品缩略图、评价区域与 You May Also Like 推荐。我们用分区间距连接这些内容，让主商品信息与继续选款的入口各有位置。

推荐图片采用统一列宽，人物、包装和工具图仍沿用浅色底的陈列方式。小标题与纵向留白划分不同内容组，读者可以沿页面继续查找感兴趣的商品。

手机首页：收拢导航，保留主题与新品

手机端将横向导航收进红色 MENU 入口，品牌标识与搜索信息在上方纵向排列。主题海报之后接 New Arrivals，延续先看妆效、再看商品的顺序。

较窄宽度中，商品图片获得更大面积，标题和价格沿纵向展开。红色菜单条与浅底内容区区分明确，读者可以在浏览主题时随时回到分类入口。

手机单品：图片与说明按顺序展开

在手机商品页，我们先展示面包屑和包装大图，再排列名称、价格与数量区域。图片保持完整主题，桌面的双栏信息转为连续阅读。

标题以左对齐和自然换行适应窄屏，价格与操作区之间保留间距。浅底、细框和品牌色继续连接其他页面，使单品页保持同样的视觉语言。

设计总结：让主题与具体信息相互承接

在Chroma Dewy的网站中，我们以妆效主题与色彩商品陈列为线索，用橙色标识、浅色画布与高饱和彩妆图片连接首页、分类和单品页面。图像表达主题，文字解释具体信息，目录和规格入口承接下一步操作；手机端继续保留同样的顺序，让整站形成连贯的视觉与浏览体验。

为您的品牌规划清楚的 Shopyy 网站

您可以向我们提供现有网址、品牌素材与需要的页面范围。我们会结合商品类型、目标市场和内容重点，一起梳理适合的页面、视觉与功能。