R524809
190 lines
12 KiB
Markdown
190 lines
12 KiB
Markdown
# Smart Fin Chart 视觉与图表风格规范
|
||
|
||
> 用途：把本项目的页面和图表复刻成同一种视觉语言，或把本规范直接交给其他 AI 生成新页面、图表或 ECharts 配置。
|
||
>
|
||
> 本文以现有实现为准：`css/style.css`、`js/theme.js` 与各图表配置。它不替代数据口径或交互需求。
|
||
|
||
## 1. 风格定位
|
||
|
||
**正式主题名：轻快消费（Light Consumer Finance）**。它建立在“Joey 风格”的克制财经媒体底子上：
|
||
|
||
- 页面：暖灰白底、白色内容卡、深棕作为品牌锚点，安静、清爽、有纸张感；
|
||
- 图表：低饱和莫兰迪基础色，叠加清晰但不荧光的青绿、蓝、琥珀、珊瑚与紫；
|
||
- 气质：专业、可亲近、信息密度高但不冰冷。更像编辑过的消费公司研究报告，而不是交易终端、科技 SaaS 或奢侈品画册；
|
||
- 色彩策略：**页面保持中性，数据才使用颜色；一张图只设置一个视觉主角。**
|
||
|
||
不要把它误做成两种极端：不是厚重老钱/深棕复古风，也不是高饱和糖果色的消费品牌海报。
|
||
|
||
## 2. 设计令牌（直接复用）
|
||
|
||
### 页面基础色
|
||
|
||
| 角色 | 色值 | 用法 |
|
||
| --- | --- | --- |
|
||
| 页面背景 | `#F5F4F1` | 大面积暖灰白，不用纯白铺满全页 |
|
||
| 内容表面 | `#FFFFFF` | 图表卡片、弹窗、选中态 |
|
||
| 主文字 | `#333333` | 标题、正文、坐标轴重点文字 |
|
||
| 次级文字 | `#8C8C8C` | 副标题、数据来源、脚注、弱提示 |
|
||
| 分隔/网格 | `#E8E8E8` | 卡片分割线、图表横向网格 |
|
||
| 坐标轴线 | `#D0D0D0` | 仅分类横轴等必要位置 |
|
||
| 品牌强调/交互 | `#6B4A2B` | 选中 Tab、主要按钮、hover 文字 |
|
||
| 品牌浅底 | `#F0E9E1` | 选中 Tab、筛选 chip、浅强调块 |
|
||
|
||
### 通用莫兰迪扩展色
|
||
|
||
用于非固定财务语义的分类图、桑基图或适量的次级系列。它们是备用色，不是要求一张图全用完。
|
||
|
||
| 色名 | 色值 | 视觉感觉 |
|
||
| --- | --- | --- |
|
||
| 棕 | `#6B4A2B` | 温暖、稳定、品牌锚点 |
|
||
| 沙 | `#D5C7B4` | 最弱的暖中性色 |
|
||
| 珊瑚 | `#EC7B73` | 柔和警示或重点 |
|
||
| 绿 | `#2F8A5B` | 稳健正向 |
|
||
| 橙 | `#D98324` | 温暖重点 |
|
||
| 紫 | `#9B4FA8` | 指标/同比强调 |
|
||
| 蓝 | `#3B6EA5` | 常规数据类别 |
|
||
| 海军蓝 | `#1F4E79` | 深层级、强对比类别 |
|
||
| 红 | `#B8342A` | 显著负向/风险，慎用 |
|
||
| 鼠尾草绿 | `#8AAB7E` | 柔和的正向或过渡类别 |
|
||
|
||
## 3. 图表语义色（优先级高于通用色）
|
||
|
||
同一业务语义跨图必须保持一致；不要在单张图内重写近似颜色。
|
||
|
||
### 财务与经营指标
|
||
|
||
| 语义 | 色值 | 推荐图形角色 |
|
||
| --- | --- | --- |
|
||
| 经营现金流/正向贡献 | `#36A28F` | 柱、瀑布正向项 |
|
||
| 投资现金流/基准值/现金 | `#4D83D1` | 柱、瀑布起点和终点 |
|
||
| 筹资现金流/负债 | `#EEA64F` | 柱 |
|
||
| 现金净增加/关键压力项/负向贡献 | `#D95567` | 高辨识度折线、瀑布负向项 |
|
||
| 核心/净利润 | `#F08B5A` | 主柱 |
|
||
| 同比、转化率等唯一强调指标 | `#8256B2` | 主折线 |
|
||
|
||
**瀑布图固定规则：**总计/基准 `#4D83D1`，正向 `#36A28F`，负向 `#D95567`。透明占位柱不着色。
|
||
|
||
### 渠道业务
|
||
|
||
| 语义 | 色值 | 推荐图形角色 |
|
||
| --- | --- | --- |
|
||
| 零售店 | `#3F7FBE` | 堆叠柱、区域/渠道分类 |
|
||
| 线上 | `#E36D63` | 堆叠柱、渠道分类 |
|
||
| 机器人商店 | `#71AD81` | 堆叠柱、渠道分类 |
|
||
| 批发 | `#E4A349` | 堆叠柱、渠道分类 |
|
||
| 营收增速 | `#8256B2` | 柱线组合中的唯一折线 |
|
||
|
||
### 多类别 IP/占比图（10+ 类）
|
||
|
||
按色相顺序使用，残差项始终为中性灰：
|
||
|
||
`#D64545` → `#E8913C` → `#D9C043` → `#7FA83C` → `#3E9E6E` → `#3FB6D0` → `#2E5FA8` → `#8E86E0` → `#8A3FA8` → `#D081C4` → `#8C8C8C`
|
||
|
||
规则：红—橙—金—橄榄—翡翠—青—蓝—紫的连续色相谱；冷色相邻时交替深浅；“其他”“外采”“未单列”等残差类别固定用灰。该谱只用于高类别数的占比/构成图，不应用于普通两三系列柱线图。
|
||
|
||
## 4. 页面样式语言
|
||
|
||
### 布局和容器
|
||
|
||
- 外层是暖灰白画布，内容居中，桌面端采用“窄侧栏 + 主内容 + 窄目录”的研究报告式三栏；
|
||
- 白色图表卡片圆角 `10px`，仅有极浅阴影 `0 1px 3px rgba(0,0,0,.06)`，不使用厚重浮层；
|
||
- 卡片之间留出约 `28px` 空白。卡片顶部工具栏高度约 `52px`，下方用 `#E8E8E8` 细线分隔；
|
||
- 侧栏和 Tab 容器为半透明白（约 58%–60%），一像素浅边框、`9–10px` 圆角；移动端转为贴顶的半透明暖灰条，并带轻微 backdrop blur；
|
||
- 主操作按钮为深棕底白字；次操作为白底浅灰边框，hover 时变深棕字/边。选中态使用深棕字加 `#F0E9E1` 浅底，不要大面积实色块。
|
||
|
||
### 字体与文字层级
|
||
|
||
- 字体：`PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif`；
|
||
- 页面卡片标题：`14px / 600`；侧栏标题：`12px / 600`；来源文件：`11px` 等宽字体；
|
||
- 图表主标题：居中、`19px / bold`、`#333333`；副标题：`13px`、`#8C8C8C`、`line-height: 20px`；
|
||
- 图例：`14px`、`#333333`；坐标轴文字：重点分类 `14px`，数值刻度 `13px`；数据标签通常 `11–13px`；脚注 `12px`、灰色；
|
||
- 文案不使用全大写、超粗黑体或夸张字号。层级靠字重、灰度、间距建立，不靠多种彩色文字。
|
||
|
||
## 5. 所有图表共享的画法
|
||
|
||
### 留白、坐标轴与网格
|
||
|
||
- 图表白底；标题顶边距约 `18px`，图例在约 `85px`，绘图区从约 `145px` 开始，形成稳定的“标题 → 副标题 → 图例 → 数据”节奏；
|
||
- 数值轴隐藏轴线和刻度，仅保留 `#E8E8E8`、`1px` 的浅色横向网格；分类横轴可保留 `#D0D0D0` 细轴线，但不显示刻度；
|
||
- 不做渐变背景、斑马条纹（矩阵/热力图除外）、3D、强阴影或粗黑边框；
|
||
- 图表不依赖 hover 才展示关键数据：数据标签默认可见；密集处通过上下错位、外置、白色描边和避让解决。
|
||
|
||
### 图例、标签与 tooltip
|
||
|
||
- 图例优先置于副标题和绘图区之间，横排居中，项目间距约 `28px`；让图表库按类型生成图例图标：柱=矩形，线=短线+空心圆；
|
||
- 折线：不平滑（直线），线宽通常 `3px`；白心圆点，直径 `9px`，彩色描边 `2.5px`；标签同线色，必要时加 `3px` 白描边；
|
||
- 柱：无渐变、无厚边框、圆角克制或不加；主图中柱宽按密度保持适中；柱顶 `11px` 深灰数值标签。很矮的柱也尽量显示标签；
|
||
- 堆叠占比：足够宽的段内白字/深字；过窄段把标签置于右侧，文字变深灰并加白描边；
|
||
- tooltip 使用系统默认浅底即可，字体遵循中文无衬线；指示器用 shadow/cross，不渲染为夸张的彩色悬浮卡；
|
||
- 每张图底部保留灰色脚注，解释口径与来源。背景可铺低干扰水印：深暖灰 `rgba(120,100,80,.10)`、`20px bold`、约 `20°` 斜向、300×200px 网格重复。
|
||
|
||
## 6. 关键图表配方
|
||
|
||
| 图形 | 推荐结构 | 色彩与样式规则 |
|
||
| --- | --- | --- |
|
||
| 现金流/利润 + 同比 | 多柱 + 单条双轴折线 | 柱用固定财务色；只保留一条紫色或珊瑚色重点折线；折线置顶，白心圆点、`3px` 线、显示标签 |
|
||
| 渠道收入结构 + 增速 | 堆叠柱 + 单条折线 | 渠道色按零售蓝、线上珊瑚、机器人绿、批发琥珀固定；增速只用紫线；不要再引入第二条抢眼折线 |
|
||
| 瀑布图/同比拆解 | 蓝色起终点 + 绿/红贡献柱 | 正负值同时显示 `+/-` 标签；透明占位列；分类横轴可斜 32°，其余保持克制 |
|
||
| 多条经营比率线 | 4 条以内为宜 | 选深青、芥黄、茄紫、玫红等明度与色相均有区分的低饱和色；靠实/虚线、线宽、标签上下位置进一步区分 |
|
||
| IP 占比饼图 | 非环图 + 两侧外标签 + 右侧纵向图例 | 扇区之间 `2px` 白边；名称按扇区同色，数值灰色；右侧图例使用“名称 + 次行数值/占比”；hover 阴影轻微 |
|
||
| 100% 堆叠/区域份额 | 归一化堆叠柱 | 颜色固定映射业务类别，不能随年份换色；小段标签外置并避让；不要因标签多删去数据 |
|
||
| 热力图 | 低增长蓝 → 暖白 → 高增长珊瑚 | 色阶为 `#9CC4D0 → #F3EEE6 → #EC7B73`；格中深灰数值；水平色尺说明高低；缺失值留白 |
|
||
| 桑基图 | 低饱和节点 + 平滑渐变流向 | 节点取主题分类色，连线取源到目标的渐变；文字深灰、重点节点可用珊瑚/绿色，避免彩虹化 |
|
||
|
||
## 7. 配色决策规则
|
||
|
||
1. 先判断语义：财务、渠道、瀑布先使用固定语义色；只有无固定业务含义的分类才从扩展色选。
|
||
2. 一图只有一个主角：柱负责区分类别，折线只留一个高辨识度强调色。避免红、橙、紫同时作为抢眼元素。
|
||
3. 颜色不是唯一编码：折线还用线宽、实虚线、白心圆点、标签优先级区分；不要仅依赖色差。
|
||
4. 2–4 个系列人工挑色即可；5–9 个系列保证相邻/同图的色相与明度明显不同；10+ 类使用预设色相谱。不要为全页所有图强制颜色互不重复。
|
||
5. “其他、未披露、残差、外采”优先灰色/沙色；负向或风险优先珊瑚红，普通分类不要随意占用红色。
|
||
|
||
## 8. 可直接交给 AI 的提示词
|
||
|
||
将方括号内容替换成具体业务。若目标 AI 能生成代码，也可要求它输出 CSS 变量和 ECharts/图表库配置。
|
||
|
||
```text
|
||
请设计一个中文消费公司财报数据页面，视觉风格为“轻快消费（Light Consumer Finance）”：
|
||
以克制财经媒体/编辑研究报告为底子，而非交易终端或科技 SaaS。页面用暖灰白 #F5F4F1 背景、白色 #FFFFFF 图表卡片、10px 圆角、极浅阴影；主文字 #333333，辅助文字 #8C8C8C，细分隔和网格 #E8E8E8。品牌和选中态只使用深棕 #6B4A2B，浅强调底 #F0E9E1。
|
||
|
||
中文字体使用 PingFang SC / Hiragino Sans GB / Microsoft YaHei。图表标题居中、19px bold；副标题 13px 灰；图例 14px；数值轴浅灰横网格、弱化轴线和刻度。保留充足留白，画面安静、专业、可亲近。
|
||
|
||
为 [图表主题] 生成 [图表类型]。关键数据默认显示，不依赖 hover：柱顶显示深灰数字；折线是直线、3px、9px 白心彩边圆点，并显示同色标签（必要时白色描边）。图例放在副标题和绘图区之间，柱图例为矩形、线图例为短线加空心圆。
|
||
|
||
按固定业务语义配色：[在此选择财务色或渠道色]。一张图只保留一个视觉主角；柱承载分类，最多一条高辨识度折线。禁止霓虹色、渐变填充、3D 图表、粗黑边框、厚阴影、深色背景、过多鲜艳色和无意义装饰。
|
||
|
||
卡片底部添加简短灰色脚注说明数据口径和来源；可选地铺很淡的 20° 斜向暖灰水印，但绝不影响读数。
|
||
```
|
||
|
||
### 财务色替换段
|
||
|
||
```text
|
||
财务语义固定为：经营现金流/正向贡献 #36A28F，投资现金流/基准/现金 #4D83D1，筹资现金流/负债 #EEA64F，现金净增加/关键压力/负向贡献 #D95567，净利润 #F08B5A，同比或转化率的唯一强调折线 #8256B2。瀑布图总计蓝、正向青绿、负向珊瑚红。
|
||
```
|
||
|
||
### 渠道色替换段
|
||
|
||
```text
|
||
渠道语义固定为：零售店 #3F7FBE，线上 #E36D63，机器人商店 #71AD81，批发 #E4A349；若有营收增速，仅用一条 #8256B2 紫色折线。跨年度或跨图保持同一渠道不换色。
|
||
```
|
||
|
||
## 9. 实施检查清单
|
||
|
||
- [ ] 页面背景不是纯白，卡片是白色且阴影很淡。
|
||
- [ ] 主文字/次文字/网格分别使用深灰、灰色、浅灰，品牌深棕没有滥用。
|
||
- [ ] 图表使用业务语义色，且同一语义跨图一致。
|
||
- [ ] 一张图没有多个同时抢眼的红橙紫强调系列。
|
||
- [ ] 折线为直线、白心圆点；柱和折线的图例图标能区分。
|
||
- [ ] 网格以浅色横线为主，轴线、边框和阴影都很轻。
|
||
- [ ] 标签、图例、脚注不重叠；很小的堆叠段有可读的外置标签。
|
||
- [ ] 视觉表达是“轻快、克制的消费公司研究报告”，不是金融终端或营销海报。
|
||
|
||
## 10. 来源与维护
|
||
|
||
- 页面令牌：`css/style.css`
|
||
- 通用色板、字体、坐标轴、图例、系列样式、水印：`js/theme.js`
|
||
- 正式方向与使用规则：`CLAUDE.md` 的“配色”部分、`docs/交接说明_2026-08-28.md`
|
||
- 关键图表示例：`js/charts/ppmt_cashflow_composition.js`、`ppmt_core_profit.js`、`ppmt_bridge.js`、`ppmt_ip_share.js`、`ppmt_region_channel_yoy_timeseries.js`
|
||
|
||
如果修改正式色板，应同步更新 `js/theme.js` 与本文，并以语义映射的稳定性优先于单张图的局部好看。
|