93 lines
4.2 KiB
Markdown
93 lines
4.2 KiB
Markdown
# 宠小它 — Logo 与品牌识别说明（设计 Brief）
|
||
|
||
> 角色：供 **设计师定稿** 与 **研发切图** 使用；本文为产品侧能交付的完整度。
|
||
> 关联：品牌名与 Slogan 见《产品设计文档》v1.9、《品牌替换清单-宠小它.md》。
|
||
|
||
---
|
||
|
||
## 1. 品牌一句话
|
||
|
||
| 项 | 内容 |
|
||
|----|------|
|
||
| 名称 | 宠小它 |
|
||
| 主 Slogan | 用心宠小它，温暖伴一生 |
|
||
| 副 Slogan | 智慧宠物门店服务系统 |
|
||
| 调性关键词 | **温暖、可靠、偏年轻、不低幼**；服务属性强于纯社交卖萌 |
|
||
|
||
---
|
||
|
||
## 2. Logo 形态建议（可并行出稿）
|
||
|
||
| 形态 | 用途 | 说明 |
|
||
|------|------|------|
|
||
| **图形标（Icon / 符号）** | 小程序图标、推送小图、Tab 角标、水印 | 需 **16～24px 仍可辨认**，避免细线、过多细节 |
|
||
| **字标（Wordmark）** | 报告页顶栏、海报、公众号头图 | 「宠小它」三字，字重与字距需单独调；可加英文副标 *ChongXiaoTa* 可选 |
|
||
| **组合标** | 开屏、门店物料、官网 | 图形 + 字标左右或上下组合；规定 **安全区与最小宽度** |
|
||
|
||
**方向 A（推荐优先试稿）**：**抽象小生灵轮廓**（猫/狗合一的极简形）+ **柔和负形或一笔曲线**（暗示「陪伴」），避免写实照片风。
|
||
**方向 B**：**字母/笔画几何化**——「小」字一点或「它」的偏旁做记忆点（需避免与现有字体库撞车，宜定制字标）。
|
||
**方向 C 慎用**：单独 **爪印/狗骨头**——易同质化，若采用需与图形强组合或定制变形。
|
||
|
||
---
|
||
|
||
## 3. 色彩（与现有产品对齐）
|
||
|
||
当前前端主品牌色（见 `global.css`）：
|
||
|
||
| 用途 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| **主绿（首选）** | `#2db96d` | `--c-brand`，用于 Logo 主形、主按钮联想 |
|
||
| **深绿（强调）** | `#1e9a55` | `--c-brand-dark`，描边、深色底反白时辅助 |
|
||
| **浅绿（背景）** | `#eaf8f0` | `--c-brand-light`，卡片底、浅色水印 |
|
||
|
||
**扩展（可选，设计师定）**：暖色点缀 **琥珀/橙** `#f5913e`（与现有 `--c-orange` 一致）仅用于 **活动/促销子品牌**，**主 Logo 默认不用橙色**，避免识别分裂。
|
||
|
||
**反白稿**：需提供 **纯白 Logo + 透明底** 用于绿底/深色图；**单色黑** 用于传真/黑白印刷。
|
||
|
||
---
|
||
|
||
## 4. 安全区与最小尺寸（验收用）
|
||
|
||
- **安全区**：Logo 完整外接矩形四周预留 **≥ 0.5× Logo 高度** 的留白（组合标以整块外轮廓计）。
|
||
- **数字端最小高度**：字标/组合标 **≥ 16px**（逻辑像素）；纯图形标 **≥ 24×24**（小程序 Tab 常见）。
|
||
- **禁止**：拉伸变形、改色为未定义色、加投影/描边破坏统一规范（营销特例需单独规范）。
|
||
|
||
---
|
||
|
||
## 5. 错误使用示例（给设计与市场对照）
|
||
|
||
- 把 Logo 压在 **高杂讯照片** 上且未加底托；
|
||
- **同时**使用未定义的第三色与强渐变；
|
||
- 与竞品 **同构图** 的爪印/骨头 **无差异**；
|
||
- 在 **过小区域** 使用完整组合标导致字糊成一团——应改用 **纯图形标**。
|
||
|
||
---
|
||
|
||
## 6. 交付物清单（建议设计师输出）
|
||
|
||
| 交付物 | 规格 | 用途 |
|
||
|--------|------|------|
|
||
| 矢量源文件 | AI / SVG | 研发与延展 |
|
||
| 小程序 **AppIcon** | 1024×1024 PNG，圆角由平台裁切 | 微信提审 |
|
||
| 多倍率 PNG | @2x @3x，透明底 | 小程序内嵌 |
|
||
| 字标横排/竖排 | SVG + PNG | 报告、海报 |
|
||
| 单色稿 | 黑 / 白 | 印刷、水印 |
|
||
| 一页 **PDF 简版规范** | 色值、最小尺寸、错误示例 | 对外统一 |
|
||
|
||
---
|
||
|
||
## 7. 与工程衔接（研发）
|
||
|
||
- 替换 `static` / `tab` 图标前，**先替换设计稿**，避免线上半新半旧。
|
||
- 小程序 **navigationBar** 与 **分享卡片封面** 若用 Logo，需各提供 **反白/深色** 两套或统一底色素材。
|
||
|
||
---
|
||
|
||
## 8. 概念草案图（AI 生成 · 非最终稿）
|
||
|
||
与本文件同目录：**[`logo-concept-draft.png`](./logo-concept-draft.png)**（仅 **图形标方向** 之一），为视觉参考，**不替代**设计师矢量定稿；商标、版权与是否采用以法务/设计确认为准。
|
||
|
||
---
|
||
|
||
*修订：首版由产品侧起草；定稿后以设计团队输出为准并更新本文色值与路径。*
|