Files
chookoo.net/tools/产品网站内容填写模板.md
2026-04-27 17:16:17 +08:00

431 lines
18 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Chookoo 产品网站 — 内容填写模板
> **使用说明**
> 1. 本文档列出网站上所有需要填写的内容字段,请逐项填写。
> 2. 所有文字内容需要 **中文** 和 **英文** 两个版本。
> 3. 图片请提供源文件,并按要求的尺寸和命名规范提交。
> 4. 填写完成后,将本文档和所有图片一起交给开发人员,我们会直接替换到网站上。
> 5. 标有 **必填** 的字段为空则网页会显示异常,请务必填写。
---
## 一、品牌基础信息
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| B1 | 品牌Slogan | 首页顶部标语,不超过15个字 | 是 | | |
| B2 | 品牌介绍第1段 | "关于我们"区域的品牌故事第1段,3-5句话 | 是 | | |
| B3 | 品牌介绍第2段 | 品牌故事第2段,3-5句话 | 否 | | |
| B4 | 品牌介绍第3段 | 品牌故事第3段,1-2句总结性语句 | 否 | | |
| B5 | 品牌理念关键词 | 3-4个关键词,用逗号分隔,如:科技,关爱,智能,守护 | 是 | | |
| B6 | 联系电话 | 客服电话号码 | 是 | | |
| B7 | 联系邮箱 | 客服邮箱地址 | 是 | | |
| B8 | 公司地址 | 公司详细地址 | 是 | | |
| B9 | 公司名称 | 用于页脚版权声明 | 是 | | |
### 品牌相关图片
| 编号 | 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名(请使用此命名) |
|------|----------|----------|------|------|------------------------|
| BI1 | 网站Logo(导航栏) | **高度不低于 100px**,宽度自适应,背景透明 | PNG | 用于顶部导航栏和关于我们区域,深色背景上要清晰可见 | `logo.png` |
| BI2 | 网站Logo(白色版) | **高度不低于 100px**,宽度自适应,背景透明 | PNG | 白色文字版本,用于深色页脚区域 | `白字logo.png` |
| BI3 | 首页Hero背景图 | **3640 × 2048 px** 或同比例(16:9 横向) | JPG | 首页顶部全屏背景图,图片会铺满整个屏幕,重要内容请放在中间区域 | `hero.jpeg` |
---
## 二、轮播图(首页主展示区)
> 网站首页主展示区有 **5张** 轮播幻灯片,每张展示一个产品或活动。
> 请为每张幻灯片填写以下信息。
### 幻灯片 1
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| S1-1 | 幻灯片类型 | 填 `product`(产品展示)或 `activity`(活动)或 `notice`(公告) | 是 | | |
| S1-2 | 产品主标题 | 如果类型是product,填产品名称;如果是activity/notice,填活动/公告标题 | 是 | | |
| S1-3 | 产品副标题 | 一句话描述产品核心卖点,不超过20字 | 是 | | |
| S1-4 | 活动公告内容 | 仅当类型为activity/notice时填写,1-2句详情 | 否 | | |
**幻灯片1图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | **800 × 800 px**(正方形)或 **800 × 1000 px**(竖版),背景透明 | PNG | 产品主体图片,会居中显示在卡片中 | `slide-1-product.png` |
| 角标小图(可选) | **200 × 200 px**(正方形),背景透明 | PNG | 右上角圆形小图标,如关联产品缩略图 | `slide-1-badge.png` |
---
### 幻灯片 2
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| S2-1 | 幻灯片类型 | 同上 | 是 | | |
| S2-2 | 产品主标题 | 同上 | 是 | | |
| S2-3 | 产品副标题 | 同上 | 是 | | |
| S2-4 | 活动公告内容 | 同上 | 否 | | |
**幻灯片2图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | 同上 | PNG | | `slide-2-product.png` |
| 角标小图(可选) | 同上 | PNG | | `slide-2-badge.png` |
---
### 幻灯片 3
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| S3-1 | 幻灯片类型 | 同上 | 是 | | |
| S3-2 | 产品主标题 | 同上 | 是 | | |
| S3-3 | 产品副标题 | 同上 | 是 | | |
| S3-4 | 活动公告内容 | 同上 | 否 | | |
**幻灯片3图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | 同上 | PNG | | `slide-3-product.png` |
| 角标小图(可选) | 同上 | PNG | | `slide-3-badge.png` |
---
### 幻灯片 4
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| S4-1 | 幻灯片类型 | 同上 | 是 | | |
| S4-2 | 产品主标题 | 同上 | 是 | | |
| S4-3 | 产品副标题 | 同上 | 是 | | |
| S4-4 | 活动公告内容 | 同上 | 否 | | |
**幻灯片4图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | 同上 | PNG | | `slide-4-product.png` |
| 角标小图(可选) | 同上 | PNG | | `slide-4-badge.png` |
---
### 幻灯片 5
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| S5-1 | 幻灯片类型 | 同上 | 是 | | |
| S5-2 | 产品主标题 | 同上 | 是 | | |
| S5-3 | 产品副标题 | 同上 | 是 | | |
| S5-4 | 活动公告内容 | 同上 | 否 | | |
**幻灯片5图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | 同上 | PNG | | `slide-5-product.png` |
| 角标小图(可选) | 同上 | PNG | | `slide-5-badge.png` |
---
## 三、产品卡片(首页底部产品列表)
> 首页底部展示 **5张** 产品卡片,横向排列,可滚动。点击卡片后上方展示区会显示该产品的详细信息。
### 产品卡片公共图片要求
| 图片用途 | 尺寸要求 | 格式 | 说明 |
|----------|----------|------|------|
| 产品卡片缩略图 | **400 × 400 px**(正方形),背景透明 | PNG | 用于卡片上的小缩略图,会被裁剪显示在 **175 × 90 px** 的区域内 |
| 产品展示区大图 | **800 × 1000 px**(竖版)或 **800 × 800 px**(正方形),背景透明 | PNG | 用于点击卡片后在上方展示区显示的大图,会被显示在 **400 × 220 px** 的区域内 |
---
### 产品卡片 1
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| C1-1 | 产品ID | 英文唯一标识符,只能用小写字母、数字和连字符,如 `cat-toilet-pro` | 是 | | — |
| C1-2 | 适用宠物 | 填 `cat`(猫)、`dog`(狗)或 `both`(通用) | 是 | | — |
| C1-3 | 产品名称 | 卡片上显示的产品名称,不超过8个字 | 是 | | |
| C1-4 | 产品副标题 | 卡片上一句话描述,不超过15个字 | 是 | | |
| C1-5 | 展示区副标题 | 点击后上方展示区的详细描述,2-3句话 | 是 | | |
| C1-6 | 特性1 | 展示区产品特性,每条不超过15字 | 是 | | |
| C1-7 | 特性2 | 同上 | 是 | | |
| C1-8 | 特性3 | 同上 | 是 | | |
| C1-9 | 特性4 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 卡片缩略图 | `product-1-thumb.png` |
| 展示区大图 | `product-1-display.png` |
---
### 产品卡片 2
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| C2-1 | 产品ID | 同上 | 是 | | — |
| C2-2 | 适用宠物 | 同上 | 是 | | — |
| C2-3 | 产品名称 | 同上 | 是 | | |
| C2-4 | 产品副标题 | 同上 | 是 | | |
| C2-5 | 展示区副标题 | 同上 | 是 | | |
| C2-6 | 特性1 | 同上 | 是 | | |
| C2-7 | 特性2 | 同上 | 是 | | |
| C2-8 | 特性3 | 同上 | 是 | | |
| C2-9 | 特性4 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 卡片缩略图 | `product-2-thumb.png` |
| 展示区大图 | `product-2-display.png` |
---
### 产品卡片 3
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| C3-1 | 产品ID | 同上 | 是 | | — |
| C3-2 | 适用宠物 | 同上 | 是 | | — |
| C3-3 | 产品名称 | 同上 | 是 | | |
| C3-4 | 产品副标题 | 同上 | 是 | | |
| C3-5 | 展示区副标题 | 同上 | 是 | | |
| C3-6 | 特性1 | 同上 | 是 | | |
| C3-7 | 特性2 | 同上 | 是 | | |
| C3-8 | 特性3 | 同上 | 是 | | |
| C3-9 | 特性4 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 卡片缩略图 | `product-3-thumb.png` |
| 展示区大图 | `product-3-display.png` |
---
### 产品卡片 4
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| C4-1 | 产品ID | 同上 | 是 | | — |
| C4-2 | 适用宠物 | 同上 | 是 | | — |
| C4-3 | 产品名称 | 同上 | 是 | | |
| C4-4 | 产品副标题 | 同上 | 是 | | |
| C4-5 | 展示区副标题 | 同上 | 是 | | |
| C4-6 | 特性1 | 同上 | 是 | | |
| C4-7 | 特性2 | 同上 | 是 | | |
| C4-8 | 特性3 | 同上 | 是 | | |
| C4-9 | 特性4 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 卡片缩略图 | `product-4-thumb.png` |
| 展示区大图 | `product-4-display.png` |
---
### 产品卡片 5
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| C5-1 | 产品ID | 同上 | 是 | | — |
| C5-2 | 适用宠物 | 同上 | 是 | | — |
| C5-3 | 产品名称 | 同上 | 是 | | |
| C5-4 | 产品副标题 | 同上 | 是 | | |
| C5-5 | 展示区副标题 | 同上 | 是 | | |
| C5-6 | 特性1 | 同上 | 是 | | |
| C5-7 | 特性2 | 同上 | 是 | | |
| C5-8 | 特性3 | 同上 | 是 | | |
| C5-9 | 特性4 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 卡片缩略图 | `product-5-thumb.png` |
| 展示区大图 | `product-5-display.png` |
---
## 四、产品详情页
> 以下信息会显示在点击"了解更多"后跳转的产品详情页。
> 产品ID必须与上面"产品卡片"中的ID一致。
> 目前网站支持最多 **14个** 产品详情页。
### 每个产品需要填写的内容模板
> 请复制以下模板,每个产品填一份。
#### 产品:___________(产品ID___________
**基本信息:**
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| D-1 | 产品标签 | 1-3个标签,用逗号分隔。可选标签类型:猫用/狗用/通用/热销/新品/配件/服务。英文对应:For Cats / For Dogs / Universal / Bestseller / New / Accessory / Service | 是 | | |
| D-2 | 产品副标题 | 详情页顶部的一句产品描述,不超过25字 | 是 | | |
**产品亮点(4条):**
| 编号 | 填写说明 | 必填 | 中文内容 | 英文内容 |
|------|----------|------|----------|----------|
| D-H1 | 第1个亮点,如"毫米波雷达监测心率呼吸",不超过15字 | 是 | | |
| D-H2 | 第2个亮点 | 是 | | |
| D-H3 | 第3个亮点 | 是 | | |
| D-H4 | 第4个亮点 | 是 | | |
**产品特性(4组):**
> 每组特性包含:图标颜色、标题、描述文字。图标颜色只能从以下4种中选择一种:
> - `blue`(蓝色 — 适合技术/监测类特性)
> - `green`(绿色 — 适合环保/清洁类特性)
> - `purple`(紫色 — 适合智能/APP类特性)
> - `orange`(橙色 — 适合安全/保障类特性)
| 编号 | 图标颜色 | 标题(中文) | 标题(英文) | 描述(中文,不超过25字) | 描述(英文) |
|------|----------|-------------|-------------|-------------------------|-------------|
| D-F1 | blue/green/purple/orange | | | | |
| D-F2 | blue/green/purple/orange | | | | |
| D-F3 | blue/green/purple/orange | | | | |
| D-F4 | blue/green/purple/orange | | | | |
**产品规格表:**
> 规格行数不限,按实际产品参数填写。每行包含:参数名称(中英文)、参数值。
| 参数名称(中文) | 参数名称(英文) | 参数值 |
|-----------------|-----------------|--------|
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
**产品图片:**
| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
|----------|----------|------|------|--------|
| 产品主图 | **800 × 800 px**(正方形),背景透明 | PNG | 详情页左侧大图展示,区域为正方形 | `detail-{产品ID}-main.png` |
| 缩略图(可选) | **160 × 160 px**(正方形),背景透明 | PNG | 主图下方的小缩略图,如有多角度视图可提供多张 | `detail-{产品ID}-thumb-1.png` |
---
## 五、宠物故事(首页故事卡片)
> 首页底部展示 **3条** 宠物故事卡片。
### 故事卡片图片要求
| 图片用途 | 尺寸要求 | 格式 | 说明 |
|----------|----------|------|------|
| 故事封面图 | **600 × 400 px**3:2 横向),或 **800 × 450 px**16:9 横向) | JPG | 故事卡片的封面图片,显示在 **宽度自适应 × 220px** 高的区域内 |
| 作者头像 | **80 × 80 px**(正方形) | JPG/PNG | 圆形头像,显示为 **36 × 36 px** 的圆形 |
---
### 故事 1
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| ST1-1 | 故事标题 | 不超过12个字 | 是 | | |
| ST1-2 | 故事摘要 | 2-3句话的简介,不超过50字 | 是 | | |
| ST1-3 | 标签1 | 故事分类标签,如:健康恢复、AI识别、暖心故事 | 是 | | |
| ST1-4 | 标签2 | 同上 | 否 | | |
| ST1-5 | 作者昵称 | 如"小橘妈妈" | 是 | | |
| ST1-6 | 宠物信息 | 品种和年龄,如"橘猫 · 3岁" | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 故事封面图 | `story-1-cover.jpg` |
| 作者头像 | `story-1-avatar.jpg` |
---
### 故事 2
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| ST2-1 | 故事标题 | 不超过12个字 | 是 | | |
| ST2-2 | 故事摘要 | 2-3句话,不超过50字 | 是 | | |
| ST2-3 | 标签1 | 同上 | 是 | | |
| ST2-4 | 标签2 | 同上 | 否 | | |
| ST2-5 | 作者昵称 | 同上 | 是 | | |
| ST2-6 | 宠物信息 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 故事封面图 | `story-2-cover.jpg` |
| 作者头像 | `story-2-avatar.jpg` |
---
### 故事 3
| 编号 | 字段名 | 填写说明 | 必填 | 填写内容(中文) | 填写内容(英文) |
|------|--------|----------|------|------------------|------------------|
| ST3-1 | 故事标题 | 不超过12个字 | 是 | | |
| ST3-2 | 故事摘要 | 2-3句话,不超过50字 | 是 | | |
| ST3-3 | 标签1 | 同上 | 是 | | |
| ST3-4 | 标签2 | 同上 | 否 | | |
| ST3-5 | 作者昵称 | 同上 | 是 | | |
| ST3-6 | 宠物信息 | 同上 | 是 | | |
| 图片 | 文件名 |
|------|--------|
| 故事封面图 | `story-3-cover.jpg` |
| 作者头像 | `story-3-avatar.jpg` |
---
## 六、二维码图片
> 以下二维码图片用于页脚和弹窗中展示。
| 编号 | 二维码用途 | 显示尺寸 | 建议源图尺寸 | 格式 | 说明 | 文件名 |
|------|-----------|----------|-------------|------|------|--------|
| QR1 | 微信公众号 | 80×80px(页脚)/ 120×120px(弹窗) | **240 × 240 px** | PNG | 微信公众号二维码 | `qr-wechat.png` |
| QR2 | 微博 | 同上 | **240 × 240 px** | PNG | 微博二维码 | `qr-weibo.png` |
| QR3 | 小红书 | 同上 | **240 × 240 px** | PNG | 小红书二维码 | `qr-xiaohongshu.png` |
| QR4 | 抖音/TikTok | 同上 | **240 × 240 px** | PNG | 抖音二维码 | `qr-tiktok.png` |
| QR5 | 在线商城 | 160×160px(弹窗) | **320 × 320 px** | PNG | 在线商城/店铺二维码 | `qr-shop.png` |
| QR6 | 联系咨询 | 160×160px(弹窗) | **320 × 320 px** | PNG | 客服/咨询二维码 | `qr-contact.png` |
| QR7 | 视频号 | 120×120px(弹窗) | **240 × 240 px** | PNG | 视频号二维码 | `qr-video.png` |
| QR8 | 抖音(故事页) | 120×120px(弹窗) | **240 × 240 px** | PNG | 抖音二维码(故事页专用) | `qr-douyin.png` |
---
## 七、图片尺寸汇总速查表
| 图片类型 | 建议源图尺寸 | 比例 | 格式 | 是否需要透明背景 |
|----------|-------------|------|------|----------------|
| 导航栏Logo | 高度 ≥ 100px,宽度自适应 | 自由 | PNG | **是** |
| 白色版Logo | 高度 ≥ 100px,宽度自适应 | 自由 | PNG | **是**(白色文字) |
| Hero背景图 | **3640 × 2048 px** | 16:9 | JPG | 否 |
| 轮播图产品主图 | **800 × 800 px** | 1:1 | PNG | **是** |
| 轮播图角标小图 | **200 × 200 px** | 1:1 | PNG | **是** |
| 产品卡片缩略图 | **400 × 400 px** | 1:1 | PNG | **是** |
| 产品展示区大图 | **800 × 1000 px** | 4:5 | PNG | **是** |
| 详情页产品主图 | **800 × 800 px** | 1:1 | PNG | **是** |
| 详情页缩略图 | **160 × 160 px** | 1:1 | PNG | **是** |
| 故事封面图 | **800 × 450 px** | 16:9 | JPG | 否 |
| 故事作者头像 | **80 × 80 px** | 1:1 | JPG/PNG | 否(圆形裁剪) |
| 二维码(页脚) | **240 × 240 px** | 1:1 | PNG | 否 |
| 二维码(弹窗大图) | **320 × 320 px** | 1:1 | PNG | 否 |
---
## 八、填写检查清单
填写完成后,请对照以下清单自查:
- [ ] 品牌基础信息(B1-B9)全部已填写
- [ ] 5张轮播幻灯片(S1-S5)内容已填写
- [ ] 5张产品卡片(C1-C5)内容已填写
- [ ] 每个产品的详情页信息(D系列)已填写
- [ ] 3条宠物故事(ST1-ST3)内容已填写
- [ ] 所有需要的中英文双语内容都已填写
- [ ] 所有图片已按要求的尺寸和格式准备好
- [ ] 图片文件名与模板中指定的文件名一致
- [ ] 二维码图片(QR1-QR8)已准备(如暂无可后续补充)