# ArkZeal 商城建站蓝图 · 第一版

日期：2026-09-14。面向美国市场，主语言英语，价格币种 USD。

## 设计主张

以「日常照护与人与犬的关系」作为品牌主线，首页文案为 **Everyday care. A lifetime of love.**。视觉采用暖奶油色、森林绿、自然光摄影、宽留白和衬线大标题。五款包装的蓝、青、黄、紫、橙负责产品识别，网站保持统一底色。避免把页面做成连续的广告海报。

品牌场景图片由 AI 生成，商品包装用用户提供素材。生产来源按真实资料表述；美国市场定位不延伸为“美国制造”。品牌故事以理念表达为主，收到真实创业经历前不虚构创始人、年份、兽医团队或救助项目。

## 页面与导航

主导航：Shop all、Find your focus、Our story、FAQ。右侧 Contact 与购物袋。移动端折叠菜单，品牌与购物袋始终易于找到。

| 页面 | 目的 | 主要内容 |
|---|---|---|
| 首页 | 理解品牌并进入商品 | 品牌首屏、五类入口、故事、产品、护理日常、品牌原则、分类导购、FAQ、邮件订阅 |
| Shop all | 浏览和比较五款商品 | 分类筛选、产品图、名称、价格、详情入口 |
| Find your focus | 按关注方向定位产品 | 五类选择器与对应商品；不进行健康诊断或疗效推荐 |
| 五款产品详情 | 理解产品与购买条件 | 包装图、规格、价格、库存、成分、最终标签、用法警示、客服和相关产品 |
| Our story / About | 建立品牌认知 | 人犬关系、日常照护理念、品牌的内容原则 |
| FAQ | 消除常见疑问 | 产品选择、标签查询、联系客服、订单问题 |
| Contact | 商品与订单支持 | 姓名、邮箱、可选订单号、留言；正式店铺使用 Shopify 联系模板 |
| 政策页 | 展示真实经营规则 | Shipping、Returns & refunds、Privacy、Terms。现在为规划入口，待运营事实确认 |

页脚分 Explore、Help、邮件订阅三组，另列隐私与条款。未提供真实社交账号前不使用平台首页假链接。

## 首页逐模块设计

| 顺序 | 模块与英文文案方向 | 视觉与图片 | 交互和移动端 |
|---|---|---|---|
| 1 | Everyday care. A lifetime of love. | hero.png：庭院金毛与主人；hero-mobile.png：同场景竖版 | Explore the collection；手机图文上下排列，标题是网页文字 |
| 2 | They make your world. Make care part of theirs. | 简洁文字带，不额外堆图 | 三条简短信息，手机纵向排列 |
| 3 | Little things. Whole-dog thinking. | joint、digestive、coat、calming、daily 五张分类图 | 分别进入对应分类；手机两列，第五块横排 |
| 4 | Because they give us everything. | story.png：人与狗亲密相处 | 深绿文字区，进入 About；手机图文堆叠 |
| 5 | A thoughtful addition to their day. | 三款真实商品图，进入完整五款集合 | 产品卡显示名称、价格；手机两列 |
| 6 | Care looks good on every day. | routine.png：居家梳毛 | 三步日常理念：了解爱犬、阅读资料、有疑问时咨询 |
| 7 | Care, with a little more thought. | 三枚轻量线条图标 | 清楚资料、个体需求、日常习惯；不伪造认证 |
| 8 | Where would you like to start? | 简洁绿色导购面板 | 选择关注方向后打开分类，无需收集宠物病史 |
| 9 | Good questions. A clearer start. | 文字与折叠问答 | 原生可展开 FAQ，键盘可操作 |
| 10 | For the love of everyday life. | closing.png：人与狗掌相触 | 邮件订阅，正式接入后采用明确同意及实际隐私条款 |
| 11 | 页脚 | 字标、分栏链接 | 手机重排，链接与输入框易点击 |

不单独配图的导航、FAQ、政策与原则模块使用文字、留白及图标，使页面可读性优先。所有需要摄影的品牌模块已配有生成图。

## 五款产品页

复用一个产品布局，各款使用自己的包装、分类场景与配方数据。当前名称和价格沿用此前后台；包装名称与配方编号的对应关系详见《产品资料核对》。

1. 主图区：原有商品图完整显示，保留瓶身、标签比例；切换至同类品牌场景图。后续增加经确认的真实背标及细节图。
2. 产品信息：标题、USD 价格、120 soft chews、Chicken flavor、For dogs、真实库存状态。
3. 购买区：当前后台所见库存为零，样稿展示售罄。不得擅自打开缺货继续销售。
4. 成分简介：按用户配方表整理，使用可搜索的网页文字。每粒含量、完整辅料与标签须在差异复核后录入。
5. 详情折叠区：Product details、Formula overview、Directions & cautions、Shipping & returns。
6. 成分模块：以文字卡片整理已列出的主要成分，不使用原料图片暗示未确认成分。
7. 相关商品：最多三款，保留类别差异。

未来标签模块应明确：每粒或每份基准、单位、活性成分/保证分析的正确分类、辅料、适用对象、警示、储存、体重用量和制造信息。不给五款套用相同用量。

## 视觉规范

| 元素 | 方案 |
|---|---|
| 主背景 | 奶油色 #F8F6EE |
| 主文字 / 按钮 | 森林绿 #203B2D |
| 辅助背景 | 沙色 #E9DFCE、鼠尾草绿 #DFE6D7 |
| 标题 | 编辑式衬线，明显字号层级 |
| 正文 | 清楚易读的系统无衬线，足够行距 |
| 图片 | 品牌图自然光与柔和色彩；商品图保持原包装，不任意变色 |
| 按钮 | 简洁实体主按钮，文字链接配方向提示 |
| 动效 | 轻量反馈；支持减少动画偏好 |

当前文字标是排版样稿；正式主题应替换为用户认可的原始 Logo 文件。未确认商标注册状态，不使用注册标记。

## 移动端与可用性

- 首屏采用独立竖版图，正文独立于图片；商品广告图中的字不承担全部产品信息。
- 不横向溢出；长产品名自然换行，按钮与字段有清晰焦点。
- 产品详情图文上下排列；主图采用完整适配，避免裁掉图片文字。
- FAQ、菜单、购物袋可用键盘操作。图片提供替代文字。
- 分类筛选、页面返回、表单反馈和空购物袋状态都有样稿。
- 图片正式上线时通过 Shopify 图片能力生成多尺寸，首屏优先加载，下方延迟加载；PNG 母版保留。

## Shopify 落地方式

继续复用 Horizon 框架，在已有 **ArkZeal storefront review draft** 副本内工作。当前线上主题与原有 Ritual 草稿分别保留。设计样稿是本地静态预览，尚未安装成 Shopify 主题。

| 内容 | 落地位置 | 实施要求 |
|---|---|---|
| 首页 | 草稿主题分区 | 优先复用主题分区；必要时增加专用分区实现图文和分类布局 |
| 商品资料 | 现有五款产品与专用模板 | 沿用产品记录，不重建重复商品；先保存内容副本，核实后更新全局字段 |
| 主要成分与标签 | 产品元字段 | 每款独立内容，避免把全部文字烧进图片 |
| 品牌故事与 FAQ | 页面 + 草稿模板 | 对现有页面核对可见性与链接；保留重要原文备份 |
| 客服 | 原 Contact 页面 | 复用 Shopify 联系表单；收到真实客服资料后补充 |
| 菜单 / 页脚 | Navigation | 更新英语标签和目标地址，检查隐藏页面造成的无效链接；全局修改需谨慎核对 |
| 商品集合 | All products 及五个方向 | 使用现有五款记录建立清楚归属 |
| SEO | 页面标题、摘要、图片 alt | 以最终产品事实为准，避免堆砌未经证实功效 |

主题草稿与商品、页面、菜单等全局数据不是同一范围：修改全局内容前要核对对当前商店的影响。之前已创建 About / FAQ 基础内容，FAQ 可见性与菜单链接尚须复查。

## 当前交付与下一步

已完成：完整设计蓝图；首页、集合、导购、五款详情、About、FAQ、Contact 与政策入口的可点击样稿；10 张 AI 品牌图；5 张用户商品图接入；五款配方摘要及资料差异清单。

下一步：工厂复核产品差异，同时可继续完成草稿主题的视觉与页面结构。收到最终背标与复核结论后更新产品详情和有矛盾的商品图片，再进行手机、链接、表单、库存与购买流程检查。

域名、付款、税务、运费、付费应用/订阅、正式发布和不可逆操作，均需在具体方案可审阅后向用户确认。本地样稿里的联系、订阅和购物袋不发送信息、不创建订单。

## 交付文件

- index.html：本地样稿入口，保留相邻文件与 assets 文件夹一起使用。
- 产品资料核对.md：五款对应表、工厂复核项及来源位置。
- image-prompts.json：10 张生成图的提示词、生成方式与路径。
- assets/：生成品牌图与复制的五款商品图。

此版没有公开发布，也不代表工厂差异已复核或付款/物流已配置完成。