# 八二小区抄手官网：信息架构与视觉语言规范 V1

> 阶段：策划评审稿，不进入页面开发。
> 依据：2026 品牌手册、VI 体系、2025 招商手册、店招与空间应用文件、产品实拍图。
> 核心原则：参考头部餐饮品牌官网的清晰结构与产品表达，但不复制其视觉；建立“成都巷子烟火 × 现代快餐秩序”的八二品牌语言。

## 1. 网站战略

### 1.1 核心目标优先级

1. **建立品牌认知**：讲清“八二小区抄手从哪里来、为什么值得记住”。
2. **建立产品食欲**：用真实产品、现包过程和风味体系形成首要视觉记忆。
3. **建立门店信任**：展示真实门店、明档现包、堂食与外卖双场景。
4. **承接合作咨询**：结构化说明合作模式、支持与流程，表述合规、不过度承诺。
5. **支持后续增长**：预留门店查询、品牌动态、区域版本和后台管理能力。

### 1.2 主要用户

- 消费者：第一次认识品牌、查看产品与门店。
- 潜在合作方：了解品牌、门店模型、合作流程与基本条件。
- 商场/物业及行业伙伴：判断品牌形象、经营形态和标准化能力。
- 媒体与招聘候选人：查找品牌资料、发展历程和联系方式。

### 1.3 首页一句话定位建议

**一碗成都抄手，把巷子里的热乎日常端到更多城市。**

辅助表达可从 VI 现有资产中保留：

- 汤鲜味美，味道正宗
- 现包现卖，新鲜供应
- 馅大皮薄，好吃不贵

不建议把“低成本、冠军、最高毛利、轻松建店、稳赚”等招商表达放到品牌首屏。

---

## 2. 一级目录建议

首期建议控制为 **6 个一级导航 + 1 个固定行动按钮**：

1. 首页
2. 品牌故事
3. 招牌产品
4. 门店空间
5. 品牌动态
6. 合作加盟
7. 固定按钮：查找门店 / 合作咨询（根据当前业务优先级二选一）

移动端底部可固定两个轻量行动入口：**电话咨询**、**合作申请**。

---

## 3. 一级—二级—三级目录及内容

### 3.1 首页 `/`

| 二级模块 | 三级内容 | 主要目的 | 建议素材 / 行动 |
|---|---|---|---|
| 首屏品牌舞台 | 品牌名、定位语、招牌抄手、双行动按钮 | 3 秒建立品牌与品类认知 | 招牌干海椒抄手或藤椒抄手主视觉；查看菜单 / 品牌故事 |
| 品牌速写 | 起源于八二小区、童婆婆与小秦哥的传承线索 | 提供记忆点，不在首页讲完整长故事 | 人物/IP、成都街巷纹样；了解品牌 |
| 招牌产品 | 4–6 款主推抄手 | 建立食欲和风味丰富度 | 竖版产品实拍；进入产品页 |
| 新鲜现场 | 每日现包、前夹肉、面粉、明档制作 | 建立品质信任 | 手部制作、案板、热气、出锅近景 |
| 一店两种日常 | 堂食体验、外卖便利 | 解释现代抄手快餐模式 | 门店实景、打包场景；查找门店 |
| 成都品牌印象 | 成都墙画、建设巷、街巷语言 | 建立地域文化资产 | 墙画与 VI 辅助图形，避免旅游纪念品式堆砌 |
| 品牌历程 | 2019 至今关键节点 | 证明发展过程 | 只使用有留档依据的数据 |
| 合作摘要 | 店型、支持、流程概览 | 承接合作兴趣 | 了解合作；不在首页展示收益数字 |
| 页尾联系 | 热线、地址、公众号、备案 | 完成联系与合规信息 | 电话、二维码、地图链接 |

### 3.2 品牌故事 `/about/`

| 二级栏目 | 三级内容 | 表达重点 |
|---|---|---|
| 品牌起源 | 八二小区、童婆婆、小秦哥、童年味道 | 用真实人物与城市生活讲故事，减少“传奇化” |
| 一碗传承 | 手艺如何传下来、为什么坚持现包 | 从情感转向产品方法 |
| 品牌历程 | 2019 首店、2020、2021、2022、2025、现在 | 每个节点配真实照片或证明材料 |
| 品牌主张 | 现包现卖、新鲜供应；汤鲜味美、味道正宗 | 形成统一品牌语言 |
| VI 与人物形象 | 人物 Logo、围裙、抄手碗、辅助图形 | 解释“朴实人物 + 现代抽象包装” |
| 荣誉与报道 | 榜单、荣誉、媒体报道 | 有证书/链接再展示；不使用无依据行业位次 |
| 企业信息 | 主体、总部、联系方式 | 建立商务信任 |

### 3.3 招牌产品 `/menu/`

| 二级栏目 | 三级内容 | 建议产品 |
|---|---|---|
| 招牌抄手 | 品牌记忆款、辣度、风味标签 | 招牌干海椒、藤椒、酸辣、传统水饺味 |
| 汤炖抄手 | 汤底、食材、适合人群 | 土鸡竹荪、姬松茸炖鸡、番茄牛腩 |
| 川味与跨界风味 | 地域风味、口味层次 | 火锅、酸菜鱼、烟笋牛腩 |
| 面食系列 | 汤面、干拌面、牛肉面等 | 以当期门店真实菜单为准 |
| 米饭与小吃 | 饭、小吃、汤品 | 作为完整快餐组合，不抢抄手主角 |
| 一只抄手的诞生 | 面皮、选肉、拌馅、包制、煮制 | 真实制作过程，不用虚构工艺数字 |
| 菜单与过敏原 | 价格、门店差异、辣度、过敏原提示 | 后期可后台维护；标注“以门店实际为准” |

产品页建议筛选维度：**招牌 / 鲜汤 / 麻辣 / 干拌 / 不辣**，而不是按内部供应链分类。

### 3.4 门店空间 `/stores/`

| 二级栏目 | 三级内容 | 表达重点 |
|---|---|---|
| 门店形象 | 外立面、门头、夜景 | 真实、完整、不拉伸；门头名称清晰 |
| 明档现包 | 现包窗口、操作台、制作场景 | 体现透明感与烟火气 |
| 堂食空间 | 座席、材质、动线、用餐场景 | 木色、米白、砖红形成秩序 |
| 成都文化图形 | 建设巷、成都墙画、围挡、玻璃贴 | 作为空间点睛，不做满屏复古拼贴 |
| 门店模型 | 生食店、生熟店、综合店、旗舰店 | 消费者页简述；详细参数放加盟页 |
| 查找门店 | 城市、区域、地址、营业时间、导航 | 首期无完整数据时可先上线“重点门店” |
| 区域店招规则 | 省内 / 省外名称与店招差异 | 官网主品牌统一，区域应用按实际规范说明 |

### 3.5 品牌动态 `/news/`

| 二级栏目 | 三级内容 |
|---|---|
| 品牌新闻 | 新店、重要活动、品牌升级 |
| 新品上新 | 新口味、季节产品、套餐 |
| 门店故事 | 店员、顾客、城市社区故事 |
| 食味内容 | 成都抄手文化、吃法、风味知识 |
| 媒体资料 | Logo 下载、品牌简介、商务联络（后期） |

不建议首期为了“看起来丰富”批量制造空新闻；没有持续运营计划时，首页只保留 3 条精选动态。

### 3.6 合作加盟 `/partner/`

| 二级栏目 | 三级内容 | 合规要求 |
|---|---|---|
| 为什么是八二 | 品牌故事、产品结构、门店实景 | 讲事实，不承诺收益 |
| 合作模式 | 生食店、生熟店、综合店、旗舰店 | 面积、人员、预算均标注参考条件 |
| 运营特点 | 现包、产品组合、堂食+外卖 | 禁用“冠军、稳赚、轻松经营”等绝对化语言 |
| 六大支持 | 品牌、技术、新品、运营、营销、外卖 | 明确支持内容与边界 |
| 合作流程 | 咨询、评估、签约、选址、设计、培训、试营业 | 用流程图清晰展示 |
| 费用说明 | 加盟费、保证金、设计、设备、装修、管理费 | 必须经最新政策确认；标注因城市/店型变化 |
| 风险提示 | 投资有风险，实际经营受多因素影响 | 表单提交前必须可见 |
| 申请表单 | 姓名、电话、城市、预算、店铺情况、计划时间 | 隐私告知、同意勾选、防垃圾提交 |
| 联系方式 | 全国热线、工作时间 | 电话按钮移动端直拨 |

### 3.7 全站公共层

- 顶部：Logo、一级导航、门店/合作行动按钮。
- 面包屑：二级页与内容详情页使用。
- 页尾：企业主体、总部地址、合作热线、公众号、隐私政策、备案信息。
- 搜索引擎：每页独立 title、description、分享图、结构化数据。
- 无障碍：图片替代文字、键盘焦点、对比度、减少动效模式。
- 后台：产品、门店、新闻、加盟表单、基础 SEO 字段可维护。

---

## 4. 视觉语言规范

### 4.1 核心视觉概念

**成都巷子里的热乎一碗，经过现代设计整理后走向全国。**

三个关键词：

- **热乎**：汤汽、现包、出锅、人与人的距离。
- **正宗**：成都风味、建设巷语境、真实手艺。
- **利落**：现代快餐的清晰菜单、秩序、效率。

需要避免：廉价加盟页、满屏大红、仿古招牌堆叠、过多印章、过度“网红国潮”、虚假蒸汽和 AI 食物图。

### 4.2 色彩

根据 VI 文件提取的建议网页色板（开发前以品牌源文件再次校色）：

| 角色 | 建议色值 | 用法 |
|---|---|---|
| 八二砖红 | `#B54634` | 品牌主色、重点区块、按钮 |
| 辣椒红 | `#C03C2A` | 产品辣味标签、强调态，控制面积 |
| 面皮米金 | `#CCAB7A` | 背景、卡片、文化纹样 |
| 汤面暖白 | `#F5F0E6` | 全站主背景，替代纯白 |
| 锅底深褐 | `#2E241B` | 正文、深色舞台、页尾 |
| 石灰灰 | `#989696` | 次级信息、分割线 |

比例建议：暖白 55% / 米金 20% / 深褐 15% / 砖红 8% / 辣椒红 2%。红色用于“食欲与行动”，不是所有容器的默认底色。

### 4.3 字体

VI 指定杨任东竹石体 Heavy/Bold/Regular/Light 与 Source Sans Variable Black。

网页执行原则：

- Logo 与品牌标准字必须使用官方图形资产，不以网页字体重打。
- 大标题可在确认网页授权与字体文件后使用杨任东竹石体；未确认前用粗黑体替代。
- 正文使用高可读中文无衬线字体栈；数字和英文可用 Source Sans / 系统无衬线。
- 标题避免大段全粗；正文行高 1.65–1.8，移动端最小正文 15–16px。

### 4.4 Logo 与地域名称

- 官网主品牌建议统一使用 **“八二小区抄手”**，保证品牌资产集中。
- “建设巷八二小区抄手”和省外“成都抄手”属于门店应用规则，不在同一页头同时堆叠多个 Logo。
- 若业务确认需要区域分站，可在后续通过城市/区域字段切换店招名称，而不是建立两套互相竞争的官网。
- Logo 四周保持安全区；不得压在复杂产品图、红色花纹或高对比纹理上。

### 4.5 版式

- 桌面端：12 栏网格，内容最大宽度 1200–1280px。
- 页面节奏：大图品牌舞台 → 留白内容 → 产品密度 → 深色/红色行动区。
- 标题采用“大数字/短句 + 小型英文眉标”，但每页不超过 2 次超大数字。
- 卡片圆角轻量（8–16px），不使用互联网 SaaS 式悬浮白卡堆叠。
- 线条、圆环、花形和碗形来自 VI 辅助图形，透明度降低作为结构背景。

### 4.6 摄影

产品摄影：

- 以真实菜品为唯一主角；保留汤面油光、辣椒颗粒、皮薄褶皱和热气。
- 产品详情优先 4:5；菜单卡片 1:1；首页横幅 16:9 或 3:2。
- 同系列统一机位、器皿、背景温度和裁切比例。
- 不随意替换菜品颜色，不把红油做成荧光红，不用 AI 重绘真实菜品。

门店与人物摄影：

- 优先明档现包、手部动作、真实顾客和完整门头。
- 门店图保持透视与比例，不拉伸；必要时留白或背景延展。
- 避免空店广角、过度 HDR、员工摆拍列队。

### 4.7 图形与 IP

- 人物 Logo 是品牌识别核心，单页只安排 1 个主视觉位置。
- 辅助图形可使用碗、抄手轮廓、成都街巷、辣椒、圆环与花形。
- IP 插画用于品牌故事、流程提示和空状态，不替代真实产品与门店照片。
- 图形线条保持手作感，但排版必须现代、干净、有网格秩序。

### 4.8 组件

- 主按钮：砖红实底、暖白文字；高度 48–52px。
- 次按钮：透明底、深褐描边。
- 产品卡：图像占比 70% 以上，名称、风味、辣度，不堆长文案。
- 风味标签：鲜汤 / 麻辣 / 干拌 / 不辣，使用小色块而非大量彩色图标。
- 数据模块：只有可证明的数据才用大数字。
- 时间轴：品牌历程横向桌面、纵向移动端。
- 加盟流程：步骤编号 + 简短动作 + 责任说明。
- 表单：一步一屏或分组填写，明确隐私与风险提示。

### 4.9 动效

- 首屏：轻微景深或蒸汽视频，默认静音；弱设备与减少动效模式显示静态图。
- 产品：滚动时轻微上移/淡入，不做旋转飞入。
- 数字：不使用夸张滚动计数造成营销感。
- 页面切换与按钮反馈控制在 160–300ms。

### 4.10 移动端

- 首屏文字不超过 3 行，产品第一屏必须看到实物。
- 导航折叠后仍保留“门店/合作”行动入口。
- 产品卡由多列改为横向滑动或单列大图。
- 门店地图、电话、导航按钮适配单手操作。
- 加盟表单字段分组，避免一次出现十多个输入框。
- 不出现横向溢出；图片采用明确比例与 `object-fit`。

---

## 5. 内容语气

建议语气：**成都、直接、热乎、有人情，但不油腻。**

推荐句式：

- “今天包，今天卖。”
- “皮薄，馅足，汤要鲜。”
- “从八二小区出发，把一碗成都味端到更多城市。”
- “堂食坐下来吃，忙时也能带走。”

避免句式：

- 行业第一、冠军品牌、绝对领先、零风险、稳赚。
- 轻松开店、无需经验也能成功、保证回本。
- 最高毛利、最低成本等无完整口径和证明的比较性表述。

---

## 6. 首期上线建议

### 必做页面

1. 首页
2. 品牌故事
3. 招牌产品
4. 门店空间
5. 合作加盟
6. 联系与法律页面（隐私政策、备案、表单授权）

### 可第二期上线

- 全部门店地图与城市筛选
- 品牌动态详情体系
- 媒体资料下载
- 招聘
- 区域化店招/分站
- 产品营养与过敏原数据库

---

## 7. 开发前仍需确认

1. 官网最终主名称：统一“八二小区抄手”，还是需要按访问地区呈现“成都抄手”。
2. 最新门店数量、直营/合作口径及证明材料。
3. 2019–2026 历程节点准确文字与对应照片。
4. 当前有效加盟政策、费用、店型、热线与风险提示。
5. 企业主体、总部地址、备案主体、隐私联系人。
6. 可公开的重点门店地址与营业时间。
7. 杨任东竹石体的网页使用授权与字体文件。
8. 产品正式菜单、分类、价格、辣度及过敏原信息。

## 8. 本轮评审需要确认的 4 个决定

1. 是否认可 6 个一级导航。
2. 是否认可“成都巷子烟火 × 现代快餐秩序”的视觉方向。
3. 是否认可官网主品牌统一用“八二小区抄手”。
4. 首期核心转化优先“查找门店”还是“合作加盟”。

以上确认后，下一阶段输出：**低保真页面原型 → 首页视觉方向稿 → 全站组件与响应式设计 → 开发。**