OPPO 设计风格指南
> 「致善式创新。」—— OPPO 创始人 陈明永
🆕 v1.1 页面生成器
# 输入产品名/Slogan → 生成 OPPO 风格 HTML
python3 scripts/oppo_page_generator.py --product "Find N3" --slogan "折叠新标杆" --accent "#1EA366"
# 交互模式
python3 scripts/oppo_page_generator.py -i
# 看示例
python3 scripts/oppo_page_generator.py --example
特性:品牌绿 CTA + 自然米白背景(#F5F0E8)+ 圆角胶囊按钮 + 克制留白 + 数据卡片 + 样张网格。
配色
| 角色 | 色值 | 用途 |
|---|---|---|
| 品牌绿 | #1EA366 |
Logo、CTA |
| 旗舰黑 | #1A1A1A |
Find 系列 Hero |
| 自然色 | #F5F0E8(米白)、#E8D5C4(奶咖) |
背景色系统 |
| 哈苏橙 | #E56E26 |
哈苏合作标识 |
> 关键差异:OPPO 的绿比小米的橙更"安静"。整体色调偏自然、温柔。
排版
| 层级 | 字体 | 特征 |
|---|---|---|
| Hero | OPPO Sans / 系统 Bold, 36-48px | 留白极大 |
| 产品名 | 24-32px, Bold | — |
| 正文 | 15-17px, Regular, 浅灰 | 1.8 行距——Apple 级别的呼吸感 |
布局
- 极致克制——一个屏幕最多 2 个信息块
- 产品为中心——大量留白环绕产品图
- 自然色彩过渡——暖米色+奶咖色分区
影像
| 规则 |
|---|
| 样张:哈苏色彩科学,自然、不饱和 |
| 产品图:暖光+微距+反射纹理 |
| 人物:自然光、表情松弛、不摆拍 |
文案
| 原则 | 示例 |
|---|---|
| 诗意 | 「点亮暗光」「留住心跳」 |
| 人文 | 「用影像讲述每一个故事」 |
| 克制 | Find 系列一句话:「Find N3,折叠新标杆」 |
风格关键词: 绿色、自然色、哈苏、克制留白、诗意文案