项目概述

在MMJerseys的 Shopyy 网站中，我们围绕联赛目录与球衣选款组织页面。我们把联赛导航、目录入口与新品矩阵放在不同层级，让先找球队和直接看款式的访客都能找到入口。整站以白底商品矩阵、红色导航重点与黑色文字连接不同内容，让主题浏览、目录比较与单品查看形成连续的路径。

设计挑战

球衣的联赛、球队、赛季和款式会同时影响选择。我们需要先把目录层级说清楚，再让商品图片和规格承接具体判断，避免所有分类与商品说明挤在同一层。

设计策略：联赛目录与球衣选款

我们把联赛导航、目录入口与新品矩阵放在不同层级，让先找球队和直接看款式的访客都能找到入口。首页负责建立方向，分类页承担比较，单品页继续说明外观与规格；不同层级通过导航和内容入口连接。

我们用Arial、Helvetica 无衬线字形，顶部活动条以窄体字强调信息组织标题、导航与正文，通过字号、字重和段落宽度区分主次。白底商品矩阵、红色导航重点与黑色文字贯穿主要页面，组内信息保持紧凑，栏目之间留出更大空白，让图片、说明和操作入口各有位置。

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

目录采用悬停展开的下拉菜单，商品区保留标签切换和款式缩略图；详情中将尺码、号码及附加选项继续向下排列。我们以清楚的选中状态和分组间距连接浏览与选择，不用额外动画抢走球衣图像的注意力。

首页商品区：先比较球衣外观，再看款式名称

我们把 New Arrivals、World Cup 2026 等标签放在商品矩阵上方，当前画面展示新品卡片。每张卡片先给出球衣正面，再安排名称、价格和补充信息；同一行的图片尺度保持接近，便于比较配色与图案。

这一段采用白底和较细的黑色文字，让不同球队的鲜明颜色成为主角。标签与商品之间保留一段空白，卡片内部则保持紧凑，读者可以先扫视一排款式，再停下来读具体名称。

联赛目录：用球队入口缩小选择范围

在 Premier League 分类中，我们把球队名称排成上方的文字入口，再用下方商品网格承接款式。页面标题、子分类与 Refine、Sort By 各占一个层级，目录信息虽然多，仍有清楚的先后次序。

红色只用于导航和新品标记，商品区继续保留浅背景。较大的球衣图片搭配统一的卡片宽度，让分类页承担比较任务；具体规格留到详情页，不让列表卡片被过多文字撑开。

商品详情：让实拍图与选择信息并排出现

我们把球衣大图放在左侧，右侧依次安排名称、价格、活动条和 Similar Style 款式入口。图中蓝红条纹球衣占据主要视觉区域，缩略图则提供同款的补充角度。

右栏以窄段落和分组空白组织信息，黄色活动条形成局部强调。图片和文字各有明确宽度，访客可以一边核对外观，一边顺着信息栏继续选择。

规格区域：把款式和定制选项分组展开

这一屏延续左侧的球衣照片和底部缩略图，右侧用密集但对齐的缩略卡片呈现相关款式，下面再接尺码与定制选项。我们把不同决定拆成顺序，而不是合并成一个很长的下拉框。

小图片之间保持固定间距，文字选项使用浅色边框和留白分组。款式多时，这种网格能维持比较秩序；尺码、号码等字段靠近商品信息，减少在不同区域之间来回寻找。

关于页面：用简短段落补充业务背景

关于页面使用居中标题和短段落介绍业务，保留与商城相同的页头和页脚。我们把这页的任务限定为补充背景，让访客读完说明后仍能从导航继续返回目录。

正文使用清楚的无衬线字形和较宽行距，段落之间留出停顿。这里沿用白底黑字，没有再堆叠商品海报，品牌说明与选款页面形成不同的阅读节奏。

联系页面：让留言入口有明确的视觉位置

我们把联系说明放在页面上部，再用蓝色圆形留言图像突出下一步入口。邮箱、提示文字和入口之间保留分组间距，读者可以先理解联系渠道，再选择自己的沟通方式。

这页延续简洁的白色内容区，蓝色入口与上方红色商城导航形成区域差异。它承担的是沟通引导，商品目录和价格信息仍留在各自的页面中。

手机首页：用海报和双列商品延续主题

在窄屏中，我们保留顶部活动条、球衣主题海报和下方新品入口，商品矩阵转为适合手机宽度的排列。海报先建立主题，列表紧接着进入具体选款。

标题和商品名称按卡片宽度换行，图像保持足够尺寸。我们通过纵向间距区分海报、标签与商品，让手机浏览仍能沿着同样的内容顺序展开。

手机商品页：让大图先交代款式

手机端先展示球衣大图和角度缩略图，商品名称、价格及活动信息接在后面。我们把桌面左右两栏转成纵向阅读，让每一组内容获得足够宽度。

球衣图片保持醒目的面积，文字采用左对齐并控制组内间距。款式与规格继续沿页面展开，图像、名称和选择信息之间保持连续关系。

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

在MMJerseys的网站中，我们以联赛目录与球衣选款为线索，用白底商品矩阵、红色导航重点与黑色文字连接首页、分类和单品页面。图像表达主题，文字解释具体信息，目录和规格入口承接下一步操作；手机端继续保留同样的顺序，让整站形成连贯的视觉与浏览体验。

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

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