表格即视觉。这是一种以表格为主要视觉语言的现代商务风格——没有插画、没有色块、没有装饰图形,信息通过严密的行列网格、克制的分割线和精准的数字对齐来传递。它呈现的是编辑级报表的专业气质:可以承载较高信息密度,但密度必须由内容必要性决定,并通过留白和细线呼吸。
配色
暖白底 #FBFAF6 作为画布,承载所有内容;表格行间分隔用 #EDE9DC(暖灰),区块强分隔用 #1F1E1A(深墨)1px——只出现在标题下沿、表头底部和合计行。文字色阶三档:标题/重点数字 #1F1E1A、正文 #2A2924、辅助/标签 #8B8478。状态徽章用文字+边框/底色表达——运营中 用 #1F1E1A 实底反白、观察 用 #EDE9DC 浅底深字、达成 用透明底+1px 边框。整体低饱和、高明度的暖中性色系,禁止任何彩色。
排版
标题用粗壮无衬线(PingFang SC Semibold / 思源黑体 Semibold),字号大、字距收紧 -0.015em,行高 1.15 传达紧凑感。正文用 Regular 字重,强调功能性。所有数字必须用 tabular-nums 等宽数字字体——KPI、金额、百分比、计数全部右对齐到个位/小数点,多列数字必须能视觉连成一条竖线。表头标签全大写、字距 0.08em、灰色 #8B8478,与正文形成层级。中文不用衬线、不用手写体;英文配 Inter / Helvetica Neue / Arial 等几何无衬线。
装饰母题
几乎没有装饰。允许的视觉元素只有四种:
- 细分割线(#EDE9DC,1px)——构成所有表格行间的呼吸骨架
- 强分割线(#1F1E1A,1px)——只用在标题下沿、表头底部、合计行上下,像账本的封边
- 状态徽章——
运营中 / 观察 / 达成 / 收缩中,用底色或边框表达,2px 圆角 - ▲▼ 趋势符号——只在 KPI delta 处使用一次,不开装饰图形
不要渐变、不要阴影、不要圆角超过 2px、不要任何位图、不要图标。
布局
以表格 + KPI 横栏为典型结构。只有当页面内容确实是经营数据、明细、矩阵或进度表时才使用高密度表格;普通内容页仍保持低到中密度。典型结构:
- 顶部标题区(小字 eyebrow + 大字 H1 + 右对齐元信息),下方一条 1px 暖灰分隔线
- KPI 横栏(4 列等宽,列间细竖线分隔),上下用 1px 暖灰线封边
- 主表格区(表头粗线、行间细线、合计行底色稍深 #F2EFE5),列宽用 colgroup 严格控制
- 页脚(左侧状态信息点列、右侧报告标识),1px 暖灰线封顶
所有元素严格对齐到网格——左边距、栏间距、行高、数字右对齐位置全部统一。对齐是这套风格的信仰,错位一像素都比配色错误严重。
信息密度可以较高,但必须可读,并通过留白和细线呼吸;不要为了"报表感"多塞行列。信息过多时优先合并、分组、突出关键行,而不是把页面填满。
动画
几乎不用。必要时只用两种:
- 表格行从下淡入(translateY 4px → 0 + opacity 0→1,0.3s,ease-out)——逐行错峰 40ms,传达"逐条审视"的节奏
- KPI 数字 count-up(0.4s,ease-out)——只在首次出现时一次
不做柔和缓动、不做循环、不做炫技入场。动画的目的是让信息按讲述节奏出现。
适合场景
经营周报、季度复盘、年度总结、KPI 看板、销售明细、财务报表、产品矩阵对比、项目进度汇总、运营数据复盘、市场调研结果——任何需要"让数据表格自己说话"的商务汇报场合。
配图
不支持配图。
不要
- 不要任何彩色(红黄绿蓝紫橙一概不要,状态用底色深浅或文字标签表达)
- 不要圆角过大(最多 2px)、不要阴影、不要渐变
- 不要插画、照片、位图、emoji、图标
- 不要装饰性字体、手写体、衬线体
- 不要花哨入场动画或循环动画
- 不要为了报表感牺牲可读性——这套风格的"好看"等于"信息清晰"
- 不要让数字列不对齐——tabular-nums 和右对齐是硬要求
- 不要斑马纹(zebra striping)——靠行间细线就够,斑马纹会污染数据可读性