图面上的橙位一律取琥珀,暖橙黄留给图标底与高亮这类有面积的场景。绿色出现在两处:图表序列,以及「绿灯」这类语义必须准确的地方。冷色出现在一处:分类图表的第四槽——并列项满四条时,色相间距把它逼出暖区。描边线在面色分层不足时启用。
叙事离开正文的那几刻才转深——开场、章节转身、单占一页的金句、需要收住的结尾。判据是那一页只承载一个态度,信息密度交给白纸。没有结语页的材料照样成立;深色页保持稀缺,重量来自对比。
深色场景取暖调深棕黑作底——黑得有温度;文字转米白,朱砂红换提亮版。色相守住,只提明度:还是那个签名,写在暗处。
红是签名——一页之内,朱砂红落笔至多三处。
统一使用 Phosphor Icons。图标裸用,色彩本身即辨识度;描色由所在底色决定。
圆角随体量缩放,与内边距共用一套尺度——4 / 8 / 16 / 24 / 32,取值落在档上。
胶囊形只给可点击的按钮
形状即可点击性信号:可点走胶囊,不可点一律方角。体量相近时圆角是唯一的区分依据,档位由体量定,不由名称定。
嵌套圆角同心
外层圆角 = 内层圆角 + 内边距,此处 28 = 8 + 20,四边留白相等才成立。算式为负即不该嵌——内元素已离开角弧。
内边距单档 24px
内边距纵横皆同,内容左缘全篇共线。价格用卡片承载:数字放大着朱砂红,原价与限制降一档随行。
圆角块表格:坐在米白面上,末行圆角随容器裁切。表头靠面色区分;线只出现在行与行之间,只做分隔。面色一律取色阶实色——半透明墨压暗底面只剩明度衰减,在暖色系里烧出中性灰。
| 状态 | 判断标准 | 管理动作 |
|---|---|---|
| 关键指标均在可控范围 | 按计划推进,只看例行更新 | |
| 任一指标偏差,但有恢复计划 | 进入经营分析会,确认纠偏方案 | |
| 出现实质风险 | 专题决策,必要时调整目标与资源 |
状态灯用纯色圆点,状态名走 title
| 项目名称 |
| 项目名称 |
空白本身就是「请填写」的信号,留空即可。
无表头的定义型表格,键列收到内容宽,值列紧随。
选型 ECharts。图表是论证——每张图先回答「它证明什么」,答得上才画。标题写麦肯锡式的结论判断。
先判图表在做什么,再取色板:论证图一条序列承载主张、其余压成背景,是默认模式;分类图为 N 条并列项而设,条条等重。
上涨、收益、推荐项用朱砂红;下降、成本、对照项用暖灰——中文语境红涨绿跌,红做强调。第三序列取琥珀,暖橙黄留给图标底与高亮。
主序列朱砂红承载论点 · 对照暖灰 · 类目标签即图例 · 值轴不画网格
按槽位顺序连号取用,三条序列取 1–3——色板作为一个集合解出,间距锁在相邻槽位之间。两套按底色切换。槽位 4 是冷色:并列项满四条时,色相间距把它逼出暖区。
分类色序槽位 1–4 · 端点直标取代图例 · 悬停看 tooltip · 只留水平网格与 X 轴基线
槽位色相锁死 29 / 73 / 178 / 284 · 网格与基线转米白低透明 · 直标转米白降一档
四条并列项条条等重,全取分类槽位——朱砂红一上场就是在说「看这条」。端点直标取代图例,在色相之外给出第二条线索,色觉触及不到的读者照样对得上序列。直标不着序列色,跟着底色走文字层——浅底墨色,深底米白降一档;色块与文字的配对留在 tooltip 里。
连续量另起一套:等级由明度承担,色相只做归属。顺序色阶单色相走朱砂 29°,深端落在朱砂红本身;双向色阶取分类槽位 2 与 3 作两端,在米白处交汇,零点因此与纸面同色。分类槽位是给并列项的,铺到热力图与等值图上会把「量」读成「类」。
只留 X 轴基线 #EDE6DC 与 1px 同色的水平网格。刻度与图注 11–12px 暖灰,标签平放,放不下就换图型。tooltip 白底描边、8px 圆角。填充取平色,图面留在二维,Y 轴单侧;序列超过四条改小倍数。色块彼此挨着时中间留 2px 缝——四个分类色深浅相当,直接相接会连成一片;缝是空出来的,不是描上去的,换底色不用改配置。
朱砂印章
唯一装饰母题,红底白字或白底红框,用在值得「盖章确认」的信息上。画面保持素净,让印章独享注意力。
暖色家族
全篇色彩皆偏暖——纸、墨、灰、点色同属一个温度;红做签名,黄做温度,主次分明。
全局语义
通篇只称「楠姐」,标题、图片替代文本与分享卡片同守此称。称呼一致,亲近感才连得上。
版式与动效
一页一主张,标题即结论,信息层级三层以内;一个组合只设一个色彩锚点;强调块靠面色与留白立起来,不描侧边强调线;过渡统一 300ms + 缓动曲线。