跳到主要内容

CHAPTER 2 Store Showcase Design

目标​

在不改变首页既有“编辑型作品集 / 品牌档案”视觉语言的前提下，重构 CHAPTER 2 的案例展示：完整呈现桌面端和手机端截图，明确区分两个展示模块，并将右侧三个 Store 改为“主舞台 + 市场导航”的可交互案例浏览器。

已确认方案​

采用 Store 方案 B：主舞台 + 市场导航。

右侧一次重点展示一个 Store 的完整手机端截图，同时始终保留三个市场入口。用户通过市场导航切换 KOREA、US 和 NOVILLA；当前案例拥有明确的选中状态、内容说明和切换动效。

现状与问题​

Browser 在桌面端 1280×720 和移动端 390×844 下的检查结果如下：

  • 桌面主图原始尺寸为 3818×1864，当前被放入约 1.39:1 的固定容器并使用 object-fit: cover，左右内容被裁切。
  • 三张手机截图被固定为桌面端 160×246、窄屏端 160×220，也使用 cover，无法完整展示页面。
  • 桌面主图和手机截图共用同一行与相近的视觉权重，缺少模块标签、足够留白和结构分隔。
  • Store 切换只更新底部文字、短红线和轻微位移，反馈较弱，图片本身没有切换叙事。
  • 移动端依赖 520px 宽的横向区域，第三个 Store 默认位于屏幕之外，发现性差。

设计原则​

  1. 保持现有米白纸张底色、颗粒纹理、宋体标题、等宽标签、细边框和红褐色强调色。
  2. 动画应克制、精确，采用小幅位移、透明度和细线进度，不使用大幅弹跳、强透视或炫技型 3D。
  3. 图片完整展示优先于填满容器，不能通过裁切制造统一高度。
  4. 三个 Store 入口必须始终可发现；当前 Store 必须清晰可辨。
  5. 鼠标、触控、键盘和减少动态效果偏好都应获得可用体验。

信息架构​

CHAPTER 2 保留现有章节标题和公司信息，案例展示区域拆分为两个明确模块：

Desktop Experience​

  • 位于左侧。
  • 使用轻量浏览器窗口框架完整显示 SHOKZ 韩国官网桌面截图。
  • 浏览器顶部仅保留简洁的窗口圆点、域名和外链符号，与 CHAPTER 1 的设备语言呼应但不重复抢戏。
  • 模块顶部增加 DESKTOP EXPERIENCE 等宽标签。
  • 图片使用原始宽高比和 object-fit: contain，不裁切。
  • 底部保留“SHOKZ 韩国官网 · 桌面端”说明，并补充紧凑的响应式 / 本地化标签；不新增未经确认的项目成果数据。

Mobile Markets​

  • 位于右侧，与左侧保持 56px 的视觉间距；右侧模块使用一条浅色竖向分隔线和 48px 左内边距强化边界。
  • 模块顶部增加 MOBILE MARKETS · 03 标签。
  • 内部由“主手机舞台”和“三项市场导航”组成。
  • 主手机舞台完整显示当前 Store 的手机截图，截图使用真实宽高比，不裁切。
  • 三项市场导航始终可见，顺序为 SHOKZ KOREA、SHOKZ US、NOVILLA。

市场导航​

每个导航项包含：

  • 两位序号：01、02、03。
  • Store 英文名称。
  • 中文市场名称。
  • 一张使用 object-fit: contain 的小型完整比例预览图；缩略图仅用于识别，主舞台负责完整阅读。

当前项使用红褐色进度线、浅色纸张底纹和更高文字对比度表示选中。未选项保持可读，不通过低透明度隐藏。

交互语义采用 tabs 模式：

  • 导航容器使用 role="tablist"。
  • 每个按钮使用 role="tab"、aria-selected、aria-controls。
  • 主舞台及说明区域使用 role="tabpanel"，并与当前 tab 建立关联。
  • 点击或键盘激活后更新 selectedStoreId，主图、标题和说明同步切换。

动效​

模块进入​

CHAPTER 2 首次进入视口时，按以下顺序播放一次：

  1. 标题和公司信息淡入并上移 12px。
  2. Desktop Experience 延迟约 80ms 淡入并上移 16px。
  3. Mobile Markets 延迟约 160ms 淡入并上移 16px。
  4. 三个市场导航项以约 60ms 的间隔依次出现。

总时长控制在 420–560ms，使用接近 cubic-bezier(0.2, 0.7, 0.2, 1) 的缓动。

使用一个只触发一次的 IntersectionObserver 控制模块进入状态。观察器在 CHAPTER 2 首次可见后立即断开；服务端渲染时内容保持可见，JavaScript 不可用时不隐藏内容。

Store 切换​

  • 当前导航进度线在 220–280ms 内完成宽度变化。
  • 新手机舞台以 10–16px 的水平位移和透明度变化进入，时长约 320–380ms。
  • 标题、市场说明与手机图使用同一个 React key 触发一致的入场，不出现内容与图片错配。
  • 手机框可在切换时产生不超过 1.01 的轻微缩放，结束后回到稳定状态。
  • Hover 只做 2–3px 位移、边框加深和进度线预览，不改变当前 Store，避免误触发。

减少动态效果​

在 prefers-reduced-motion: reduce 下：

  • 取消位移、缩放和分段延迟。
  • 保留即时内容切换和选中样式。
  • 动画时长压缩到近乎即时，但不影响可读性和状态表达。

响应式设计​

大屏（1101px 及以上）​

  • 保持左右双模块布局。
  • Desktop Experience 约占 50–54%，Mobile Markets 约占 46–50%。
  • 主手机与市场导航在右侧内部并排，手机舞台占较大权重。

中屏（701–1100px）​

  • 两个模块改为纵向堆叠，避免手机舞台被压缩。
  • Desktop Experience 先出现，Mobile Markets 后出现。
  • 820–1100px 时，Mobile Markets 内部保持主手机与导航并排。
  • 701–819px 时，市场导航置于主手机下方并形成三等分按钮。
  • 不使用横向页面滚动。

移动端（700px 及以下）​

  • CHAPTER 2 完全纵向排列。
  • 桌面截图按原始比例完整显示。
  • 主手机居中展示，宽度受容器限制并保持完整比例。
  • 三个市场入口在手机下方形成三等分按钮，全部在屏幕宽度内可见。
  • 说明文本位于导航之后，不采用 sticky 横向说明条，不显示原生横向滚动条。

组件与状态边界​

保持变更聚焦在 PortfolioHomepage，但将 CHAPTER 2 内部拆成清晰的小组件或渲染单元：

  • DesktopStoreStage：只负责桌面截图框架和说明。
  • MobileStoreShowcase：接收 Store 数据和当前 Store，负责主舞台及市场导航。
  • StoreMarketTab：负责单个市场入口的可访问状态和视觉反馈。

唯一业务状态仍为 selectedStoreId。Store 数据继续来自现有 stores 常量，不引入外部请求、轮播依赖或第三方动画库。

CHAPTER 2 额外维护一个只从 false 变为 true 的可见状态，用于触发首次进入动画；它不参与 Store 数据选择，也不会在滚动离开后反复重播。

图片加载与异常处理​

  • 保留图片的明确 width 和 height，降低布局偏移。
  • 初始选中的 KOREA 主舞台图片使用积极加载策略；导航预览和切换后的主图使用延迟加载或浏览器默认策略。
  • 舞台和缩略图设置与页面一致的纸张色占位背景，加载过程中不出现纯黑空块。
  • 图片加载失败时保留替代文本和设备框架，导航仍可切换，不让整个模块失效。

测试与验证​

自动化检查​

  • 结构测试验证三个 Store 数据和图片路径仍存在。
  • 新增结构断言，验证 Desktop / Mobile 模块标签、tablist / tab / tabpanel 语义和完整图片展示类名。
  • 验证不再依赖原来的固定手机画廊最小宽度及横向滚动布局。
  • 运行 pnpm test:homepage、pnpm typecheck 和 pnpm build。

Browser 视觉验证​

使用用户指定的 Browser 验证：

  • 桌面端 1280×720：主图和手机图完整显示，左右模块边界明确，无水平溢出。
  • 移动端 390×844：三个 Store 入口全部可见，无横向滚动，图片保持完整比例。
  • 依次切换 KOREA、US、NOVILLA，确认图片、标题、说明和选中状态同步。
  • 检查 hover、键盘焦点、点击切换和减少动态效果模式。
  • 检查控制台无新增错误。

根据仓库的 AGENTS.md，如果使用 Shopify Theme Check，只检查本次修改涉及的文件，不执行全量检查。本项目当前是 Docusaurus 首页实现，预计主要使用项目现有测试、类型检查和构建命令。

验收标准​

  1. SHOKZ 桌面截图完整显示，不裁切左右内容。
  2. 三张手机截图在主舞台中均可完整显示，不裁切底部内容。
  3. Desktop Experience 和 Mobile Markets 在桌面端具有明确的间距、标签和模块边界。
  4. 三个 Store 入口始终可发现，当前项状态清楚。
  5. Store 切换具有克制、流畅且一致的图片与文字动画。
  6. 390px 宽度下不存在由 CHAPTER 2 引起的水平页面滚动，三个入口无需横向拖动即可使用。
  7. 键盘和减少动态效果场景可用。
  8. 项目既有测试、类型检查和构建通过，Browser 验证无新增控制台错误。