项目概述

在StocksKick的 Shopyy 网站中，我们围绕鞋款主题展示与尺码选择组织页面。我们用大幅鞋款主题海报建立第一印象，再通过服务图标和分类商品矩阵进入选款。整站以黑白界面、大幅鞋款海报与规整商品卡片连接不同内容，让主题浏览、目录比较与单品查看形成连续的路径。

设计挑战

鞋履网站既要展示鞋型与配色，也要让尺码选择保持清楚。我们将主题海报、目录比较、单品照片和规格选项分开安排，让视觉表达与具体选择各有位置。

设计策略：鞋款主题展示与尺码选择

我们用大幅鞋款主题海报建立第一印象，再通过服务图标和分类商品矩阵进入选款。首页负责建立方向，分类页承担比较，单品页继续说明外观与规格；不同层级通过导航和内容入口连接。

我们用Poppins 无衬线字形组织标题、导航与正文，通过字号、字重和段落宽度区分主次。黑白界面、大幅鞋款海报与规整商品卡片贯穿主要页面，组内信息保持紧凑，栏目之间留出更大空白，让图片、说明和操作入口各有位置。

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

首页海报会自动切换，页头分类连接不同商品目录。详情中保留多角度缩略图、成组尺码按钮和可展开的信息区；这些交互围绕换图、比较和查看说明展开，保持黑白界面下的操作层级。

首页：用鞋款海报集中表达主题

我们以横向鞋款海报作为首屏主体，页头则保持 Logo、搜索和分类导航的规整排列。海报中的大面积鞋款画面与标题形成视觉中心，周围界面使用黑白色，让主题配色能够突出。

Poppins 的标题与导航保持简洁字形，搜索框和功能图标沿同一条水平线排列。首屏给主题留出足够空间，商品细节留到后续页面逐步展开。

首页商品区：把服务提示与选款入口分层

我们在海报下方接入服务提示和商品陈列，让访客从主题浏览过渡到具体款式。图标与短句组成轻量的信息带，下方商品卡片则用统一图幅、名称和价格建立比较秩序。

白色内容区和固定列宽减少界面干扰，图片之间保持均匀间隔。标题与卡片之间留出停顿，让服务信息和商品信息各自成组。

分类页：让鞋型与配色便于横向比较

分类页使用多列商品卡片展示鞋款，把照片、名称与价格放在固定顺序中。我们让鞋子的轮廓占据足够面积，列表中的不同配色可以先通过图像完成初步比较。

黑色文字配合浅背景，卡片之间保留稳定的行列间距。目录工具与商品区分开排列，访客可以先缩小范围，再进入单品查看尺码。

单品页面：大图和尺码矩阵共同承接选择

我们把红色鞋款的大幅实拍放在左侧，右侧排列商品标题、价格和尺码按钮。相同宽度的规格按钮形成矩阵，US 与 EU 对应信息直接出现在选择区域。

商品照片用较大面积交代轮廓与材质，右栏则以字重和间距区分标题、价格、尺码。界面继续采用黑白按钮，重点落在当前鞋款和可选规格上。

详情下半部：多角度图片与折叠说明并行

这一屏保留鞋款大图及底部缩略图，右侧继续显示尺码、数量、购买入口和 Detail、Customer Reviews 信息区。我们把查看角度与读取说明放在相邻区域，向下还有相关鞋款推荐。

缩略图采用一致的小尺寸，折叠信息用细线和加减符号区分。商品图与文字之间保持宽留白，使密集的规格和照片仍能各自被看清。

关于页面：用小标题划分较长说明

我们将品牌说明写入独立页面，以分段小标题组织交易、商品与服务相关内容。它沿用商城页头，同时把主体空间交给文字阅读。

Poppins 的小标题与正文通过字重区分，段落之间保留空白。较长内容按主题拆开，访客可以顺着小标题定位所需信息，再从页头返回商品目录。

联系页面：把服务时间和沟通渠道放在一起

联系页面将服务时间、邮箱与 WhatsApp 逐项排列。我们用简单的纵向结构把这些信息集中在同一内容区，避免访客在页脚多处查找。

正文保持左对齐，独立信息组之间留出行距，页头与页脚延续商城结构。这一页以清楚呈现文字为主，保持轻量的阅读节奏。

手机详情：按图片、名称和尺码依次展开

在手机端，我们先给鞋款照片完整宽度，再让商品名称、价格和规格向下展开。桌面的并排关系转为纵向，让照片和尺码信息都能保留足够空间。

图像下方以清楚的标题与间距承接商品信息，按钮延续桌面的黑白语言。读者可以先确认款式，再继续查看适合自己的尺码。

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

在StocksKick的网站中，我们以鞋款主题展示与尺码选择为线索，用黑白界面、大幅鞋款海报与规整商品卡片连接首页、分类和单品页面。图像表达主题，文字解释具体信息，目录和规格入口承接下一步操作；手机端继续保留同样的顺序，让整站形成连贯的视觉与浏览体验。

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

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