项目概述

在 Firstep Metal Technology 的 Shoplazza 网站设计中，我们围绕金属制造企业的两项展示需求展开：先让客户了解产品服务于哪些工程场景，再把商品和规格放到容易查找的位置。AIRSANG 用工厂实景、蓝白色系和明确的标题层级，连接首页、建筑工程分类与围栏商品详情；公司介绍则在首页后段补充品牌背景，让产品浏览与企业认知形成衔接。

设计挑战

围栏、脚手架、搬运车等产品横跨不同应用场景，如果只把商品连续排列，访客需要自行判断每类产品与项目的关系。我们把应用场景、商品目录和单品选择分开组织：先用工厂画面交代制造语境，再以分类和卡片呈现产品，进入详情后集中核对图片、价格与规格。视觉上保留蓝色作为识别线索，同时用白底和模块间距区分不同信息组。

设计策略：从制造场景走向具体产品

01 先建立制造语境，再展开产品目录

我们用厂房实景作为首页首屏，把品牌的制造与供应主题放入半透明文字卡片；随后以建筑工程、交通设施、工业仓储和住宅商业等场景划分浏览入口。先说明使用方向，再展示商品，使不同项目需求有对应的起点。

02 用两类英文字体区分强调与阅读

我们在首屏英文主题、新品等重点标题中采用字面厚实的 Archivo Black，正文与部分分类文字使用带衬线特征的 Arvo；中文说明由系统后备字体呈现。蓝色承担栏目、链接与价格提示，深色文字放在白底或浅色卡片上，通过字号、字重与留白区分主次。

03 让实际交互围绕选品与规格展开

分类页将筛选放在商品左侧、排序放在商品区上方；围栏详情把规格选项、数量与购买入口放在同一信息列。我们把交互反馈安排在选择发生的位置，让规格选中态与相邻字段共同说明当前选择。

首页首屏：用工厂实景交代品牌定位

我们把厂房、围栏与蓝天组成完整的背景，让访客第一眼看到金属制造的实际环境。左侧半透明圆角卡片承载英文主题与中文补充，减少复杂背景对文字的干扰；顶部白色区域放置标识、搜索和账户等入口，蓝色导航带再单独划分栏目。

英文主题以 Archivo Black 的厚重字形建立重点，中文说明采用较轻字重，主次之间留出段落间距。我们没有把背景整体染成品牌色，而是让蓝色集中在搜索边框与导航，保留工厂照片本身的细节与材质。

应用分类：把产品与使用场景对应起来

我们用左文右图组织“PRODUCT CATEGORIES”：左侧交代应用范围，右侧以四组场景图对应建筑、交通、仓储及住宅商业。图片帮助识别使用环境，文字补充分类含义，比单独列一串产品名称更容易理解内容范围。

这一组分类使用蓝色标题与带衬线的英文正文，标题的尺度明显大于解释文字。左右分区之间保留空白，右侧图片保持规则排列；应用分类之后再进入新品商品区，让场景认知与单品浏览分成两个阅读阶段。

新品商品区：统一卡片中的图片与价格位置

我们把新品组织为四列商品卡片，围栏与金属床架沿相同的图片尺度排列，名称和菲律宾比索价格放在下方。商品图保留各自的环境和材质，统一的容器与信息位置则帮助用户在不同品类之间继续浏览。

“NEWPRODUCT LAUNCH”采用蓝色粗体标题，与下方商品区拉开距离。卡片间隔和上下留白为长商品名称留出空间，下方再衔接搬运车场景横幅，以图像转换阅读节奏。统一的陈列结构连接不同产品，场景横幅则补充这些产品的使用语境。

工程分类页：用横幅定位，再进入筛选与商品

进入建筑工程分类页，我们用搬运与仓储场景构成宽幅标题区，面包屑和“Construction Engineering/建筑工程”叠加在图片上，先说明当前位置。下方才开始安排筛选与商品，避免标题、条件和产品挤在同一条信息带上。

标题采用白色 Archivo Black，并以较大的字号在背景中保持识别；商品区回到白底蓝字，让图片横幅与目录内容形成明确边界。横幅后的留白也为页面角色切换保留过渡：从认识分类，转向逐项查看产品。

分类商品网格：把比较工具放在目录旁

我们将供货、价格与供应商等筛选分组放在左侧，排序入口安排在商品区域右上方，右侧以规则网格展示脚手架、防护围栏及工程配套商品。筛选处理范围，排序处理顺序，商品图和名称则各有固定位置。

蓝色用于筛选标题、链接和价格，细线与白底维持轻量的分隔。商品名称较长，因此图片与文字之间保持层次，不让整个网格都变成同样密度的文字墙；访客可以先看产品轮廓，再继续读具体名称和价格。

围栏详情：把单品识别与选择区域并置

Garden Fence 详情采用左图右文。左侧大图展示绿色围栏与花园环境，右侧集中安排名称、价格、规格、数量及购买入口，让图片与具体商品信息保持直接对应。页面上方仍沿用蓝白导航，进入详情后不会切换成另一套视觉语言。

我们给图片保留较大面积，右侧信息列则通过字段间距区分价格、规格和数量。深色实心购买按钮与浅色辅助操作形成差异，使浏览者能沿着“看商品—核对信息—选择规格”的顺序往下阅读。

规格切换：让选中的尺寸有清楚反馈

这张图中，我们将围栏规格切换到“1500*1000”，对应选项以深色选中态区分，并在规格标题旁显示当前选择。另一个“1500*2000”保留在同一区域，用户可以直接对照两个选项。

我们把规格反馈放在商品信息列中，而不是用额外弹窗打断阅读。点击后，选中边框、深色底色和当前规格文字共同提供反馈；数量与购买入口继续位于下方，规格选择与下一步操作保持相邻。

公司介绍模块：在首页后段补充企业背景

我们把公司介绍放在首页后段，以居中的蓝色标题和两段英文说明交代菲律宾市场、本地制造以及标准化与定制产品方向。下方再以日期、工厂和人员等线性图标组织企业资料，让品牌背景与商品目录有所区分。

这一模块保留了更宽的横向阅读空间和上下间距。标题使用蓝色建立识别，正文回到深色文字；图标采用统一的线条风格，与前面的工厂照片形成另一种信息表达。我们将品牌背景放在商品浏览之后，先让访客认识产品，再补充企业信息。

手机首页：在窄屏中重新分配图文空间

手机端把标识与账户等图标放在顶部，搜索框另占一行，下方保留横向导航带。主视觉继续使用工厂照片，文字卡片随视口缩窄，英文主题与中文说明按纵向阅读展开，之后接上产品分类。

我们通过缩短每行文字的长度，让首屏仍能保留品牌主题与工厂背景。蓝色导航和搜索样式延续桌面视觉；顶部导航保持横向排列，下面的主视觉与分类内容转为纵向展开，让品牌主题与产品内容延续同一阅读方向。

手机商品页：先看围栏，再进入规格信息

在手机详情页中，围栏图片先占据主要宽度，缩略图、面包屑与商品名称随后出现，价格及其他信息继续向下展开。桌面的左右分栏转为上下阅读，使产品图不必与规格信息争夺同一行空间。

我们保留图片与商品标题之间的间距，蓝色标题承接桌面端的信息识别方式。图像先交代产品与环境，后续文字再承接核对；随着页面向下展开，规格与数量继续承接在商品信息之后，图像与字段分别获得完整的可用宽度。

设计总结：让制造背景与选品路径保持衔接

在 Firstep 的网站表达中，我们用工厂照片建立制造语境，用应用分类和商品网格整理产品，再把围栏规格放到详情页集中选择。蓝白色系、强调型标题与衬线正文贯穿不同页面，让品牌识别与产品信息各有层级。

交互围绕实际浏览任务展开：用户可以通过真实分类链接进入商品目录，在详情中切换围栏规格；页面滚动则逐步连接应用场景、产品和公司介绍。整套页面围绕“了解制造背景、找到应用方向、查看具体产品、选择规格”展开，让企业表达与商品浏览保持清晰的先后顺序。

为您的品牌规划清晰的 Shoplazza 网站

您可以向我们提供现有网址、产品目录、品牌素材和需要的页面范围，一起梳理适合自身业务的页面结构、视觉与功能。