跳到主要内容

Chapter 01 高精度还原设计说明

目标与范围​

仅重做首页 Chapter 01，包括首屏 Hero 和其下方的“开发 / 设计 / 增长理解”能力条。Chapter 02–06 的结构、内容、样式和交互保持不变。

视觉基准为 output/imagegen/merchant-journal-real-projects-v2.png 的 Chapter 01。项目画面使用 static/assets/home/Novilla官网.png 和 static/assets/home/Novilla官网手机端.png，不使用生成图里的低清截图。

实现方式​

采用真实 HTML/CSS 设备框架：右侧桌面截图放入浏览器外框，移动端截图放入独立手机外框并叠在桌面画面右下方。标题、说明、按钮、项目标签、Chapter 编号和能力条均保留为真实 DOM，以确保清晰度、可访问性和响应式能力。

不将整个项目展示烘焙为单张合成图，不使用 Canvas，也不添加运行时动画依赖。

桌面布局​

  • Hero 延续暖白纸张背景、轻微颗粒质感、宋体大标题、陶土红强调色和钴蓝按钮。
  • 左侧保持三行标题“把品牌设计，落成可增长的 Shopify 体验”，关键词“可增长的”使用陶土红。
  • 右侧浏览器画面使用 Novilla PC 截图，保持约 1.95:1 的可视比例与顶部浏览器控制栏。
  • 手机设备宽度约为桌面项目框的 27%，叠在其右下角，使用细黑描边、圆角和克制投影。
  • 项目标签位于桌面框下方：NOVILLA · DESKTOP + MOBILE 与 RESPONSIVE STOREFRONT。
  • Chapter 01 竖向编号、正文基线、按钮尺寸和留白比例对齐参考图。
  • 能力条紧接 Hero，下方三等分，使用上下细线和列间分隔线。

响应式​

  • 平板：保持左右分栏，适度缩小标题、项目框和手机叠放比例，避免遮挡项目标签。
  • 手机：改为文字在上、项目展示在下；设备框保持真实截图比例，手机框叠放但不遮挡主要桌面内容。
  • 能力条在窄屏纵向排列或保持可读的紧凑三栏，优先保证内容完整、无横向溢出。

交互与可访问性​

  • 首屏文字和设备展示使用一次性轻微上移淡入。
  • 项目设备组 hover 时上浮 2–4px；按钮提供 hover、active 和清晰键盘 focus 状态。
  • 遵循 prefers-reduced-motion，关闭非必要动画与位移。
  • PC 和手机截图使用描述性替代文本；纯装饰的设备细节不进入可访问性树。

验收标准​

  • Chapter 01 的信息层级、分栏比例、设备叠放、颜色、字体气质和能力条结构与参考图高度一致。
  • 真实 Novilla PC/移动截图清晰、裁切合理，不拉伸、不失真。
  • Chapter 02–06 不发生结构性或视觉性改动。
  • 桌面、平板和手机视口无内容遮挡或横向页面溢出。
  • 首页结构测试、TypeScript 检查和生产构建通过；桌面与手机端均完成浏览器截图核对。