vivo 设计风格指南
🆕 v1.1 页面生成器
# 输入产品名/Slogan → 生成风格 HTML
python3 scripts/vivo-design-style_page_generator.py --product "产品名" --slogan "Slogan"
# 交互模式 / 示例
python3 scripts/vivo-design-style_page_generator.py -i
python3 scripts/vivo-design-style_page_generator.py --example
特性：品牌色 CTA + 毛玻璃导航 + Hero 独占一屏 + 核心亮点卡片 + 产品图网格。
> 「Camera & Music.」—— 本心而为。
配色
| 角色 | 色值 | 用途 |
|---|---|---|
| 品牌蓝 | #415FFF |
Logo、CTA |
| vivo 紫 | #7B61FF → #C084FC |
X 系列渐变、高端气质 |
| 柔光白 | #FAFAFA / #F5F0EB |
背景——比纯白更暖 |
| 蔡司蓝 | #003C82 |
蔡司合作标识 |
| 金色点缀 | #D4AF37 |
旗舰限定版 |
排版
| 层级 | 字体 | 特征 |
|---|---|---|
| Hero | 衬线或无衬线 Bold, 36-48px | X 系列偏优雅 |
| 产品名 | 20-28px, Bold | — |
| 正文 | 15-17px, Regular | 1.75 行距 |
布局
- 影像样张优先——vivo 的核心卖点是拍照，首页全是照片
- 柔光色调——整个页面偏暖白，不像小米的冷白
- 产品细节特写——强调后摄模组设计（蔡司小蓝标）
影像
| 规则 |
|---|
| 样张：柔和自然光人像、夜景、逆光 |
| 产品图：暖色背景+微距纹理 |
| 蔡司合作：独立专区，专业摄影术语 |
文案
| 原则 | 示例 |
|---|---|
| 影像叙事 | 「照亮你的美」「光，自有答案」 |
| 轻奢语境 | 「蔡司专业影像」「vivo X 系列」 |
| 人像专注 | 「专业人像模式」「电影感虚化」 |
风格关键词: 柔光、暖白、蔡司、人像、轻奢
