Real case study / 01

SilkGearPremium Tech Retail

让高客单、多品类科技产品，从“看见设备”走到“理解为什么值得选”。

WhaleLeap 负责网站设计与 Shopify 开发。本案例选取产品详情与集合页，对照设计稿和当前线上界面，展示产品信息、浏览与购买入口如何组织。

查看 SilkGear 线上店铺

公开交付截图：场景化科技产品集合入口。

01 / Challenge

产品很多，但用户不能只靠参数做决定。

SilkGear 是一家澳大利亚科技零售品牌，覆盖机器人、智能设备、户外移动设备等品类。页面需要帮助第一次到访的用户理解产品用途，缩小选择，再进入具体商品的购买决策。

02 / Scope

网站设计与 Shopify 开发。

WhaleLeap 负责网站设计与 Shopify 开发，设计由团队设计师 ZIWEI 参与执行。本次选取 Hypershell 桌面与移动端商品页，以及科技产品集合页，展示设计和当前线上页面的结构。

03 / Diagnosis

核心问题不是页面数量，而是每一层应该回答什么。

主页负责解释品牌为何精选这些科技产品；集合页负责帮助用户按需求或设备类型缩小选择；商品页负责把图片、规格、购买动作与保障信息放在同一决策上下文；门店信息负责把线上兴趣延续到线下体验。

04 / Decisions

四个决定，共同减少选择成本。

按使用场景组织发现

优先呈现可理解的品类名称和产品用途，让导航承担筛选任务。

用编辑式主页建立判断

先表达 SELECTED / OBSESSED 的选品立场，再进入 Best Sellers 与 New Arrivals。

让 PDP 服务高客单决策

把主视觉、辅助角度、价格、购买入口与相关产品放在连续阅读区域。

保留真实门店出口

在页脚持续呈现墨尔本门店地址、营业时间、联系信息与会员入口。

05 / Design to storefront

Hypershell：从产品展示到购买选择。

这类设备需要同时解释外观、用途和购买选项。设计稿将两类信息放在同一视野；当前线上页面可看到型号选择、产品信息折叠项，以及购买和到店体验入口。

SilkGear Hypershell 桌面设计稿，产品图片与购买信息并置 — 设计将产品展示与购买信息并置，下方衔接场景、配套商品、FAQ 与会员内容。预览为设计稿上部。

当前 Hypershell 商品页首屏，包含型号选择、产品信息、加入购物车和到店体验入口 — 当前页面保留了产品与购买信息并置的结构；型号、价格和素材已随运营更新。截图仅包含首屏。

线上截图采集于 2026 年 10 月 1 日。设计稿与当前店铺并非同一版本，不作为逐像素还原或商业效果提升的证明。

06 / Mobile & collection

从分类浏览，到移动端购买。

Hypershell 移动端设计稿，依次展示产品、说明、型号信息和购买入口 — 移动端设计采用单列阅读顺序。此处预览产品与购买区域，原图包含完整设计；配套商品区保留设计稿原有的空白占位。

Hypershell 移动端商品页，单列呈现产品图片、说明和购买选项 — 单列组织产品图片、说明与购买选项，下方衔接场景内容、FAQ 和会员入口。此处预览产品与购买区域，原图包含整页。

SilkGear Robot Companion 集合页设计稿，品类主视觉下方为双列商品网格 — Robot Companion 集合页设计：品类主视觉衔接双列商品网格。此处为设计稿上部，原图包含完整页面，不含画布标签或评论。

SilkGear Robotics and Mobility 集合页，分类主视觉下方排列商品图片、名称与价格 — 当前 Robotics & Mobility 页面使用三列商品网格，分类名称、主视觉和商品组合均已更新。此处为页面上部，原图包含当前完整网格及页脚。

查看线上产品页查看线上集合页

07 / Outcome

可确认的结果，是一套已经公开运行的零售路径。

当前公开结果是：用户可以从品牌选品主张进入场景化品类，再到具体商品与购买动作，并可继续查看会员和墨尔本实体门店信息。这里不把“已经上线”解释成转化提升，也不提供未经授权的营收或流量数字。

08 / Limitations

本案例有意保留三条边界。

不公开未获授权的后台数据、投放数据或商业指标。
不将第三方应用、品牌运营或后续内容更新自动归入 WhaleLeap 的交付范围。
不使用客户评价或百分比结果代替可以直接查看的页面证据。

09 / Related service & guide

需要的是同类 Shopify 结构判断，而不是复制 SilkGear 的视觉。

建站服务负责把品牌、品类、PDP 与交付边界组织成可维护的系统；GA4 / GTM Tracking Plan 则说明上线后如何定义事件和验证数据。两者解决的是不同阶段的问题。