@lark-apaas/coding-steering 0.1.19 → 0.1.20-alpha.20260718160431
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/steering/design-html/skills/charts/SKILL.md +1 -1
- package/steering/design-html/skills/data-report/SKILL.md +2 -2
- package/steering/design-html/skills/frontend-design/SKILL.md +1 -1
- package/steering/design-html/skills/make-a-deck/SKILL.md +33 -19
- package/steering/design-html/skills/visual-exposure/SKILL.md +2 -2
package/package.json
CHANGED
|
@@ -141,7 +141,7 @@ Object.assign(window, { EChart });
|
|
|
141
141
|
| 6 | Funnel label 被隐藏或位置不在内部 | `label: { show: true, position: 'inside' }` |
|
|
142
142
|
| 7 | 容器高度 <300px | `min-height: 300px` |
|
|
143
143
|
| 8 | 单张图表中分类色(每项一个色相)>8 种 | 聚合或分组 |
|
|
144
|
-
| 9 | Pie
|
|
144
|
+
| 9 | Pie / 环形图的分类或数值只能靠 tooltip 读到——用了外部引导线标签(`position` 为 `'outside'` 或缺失),或干脆 `label: { show: false }` 且既无图例也无中心标注 | 分类 + 数值必须**静态可读**(tooltip 不算,图表常被导出 / 截图当静态图看)。任选其一:inside 标签标注 `name` + 百分比(扇区够大时)、图例映射色 → 分类、或环形图中心标注关键数值。禁止外部引导线标签(`position: 'outside'` 易重叠 / 裁切),也禁止只靠 tooltip 承载分类 / 数值 |
|
|
145
145
|
| 10 | Pie 设置了 `itemStyle` | 完全移除 |
|
|
146
146
|
| 11 | 任何 series 设置了 `label.color` | 禁止设置;由 theme 控制 |
|
|
147
147
|
| 12 | `label.formatter` 使用字符串模板 | 改用回调:`formatter: (params) => ...` |
|
|
@@ -54,7 +54,7 @@ metadata:
|
|
|
54
54
|
|
|
55
55
|
在写代码之前,先确定报表由哪些组件构成:
|
|
56
56
|
|
|
57
|
-
- **视觉方向**:参考 `frontend-design`
|
|
57
|
+
- **视觉方向**:参考 `frontend-design` 的方法先定主题世界、受众姿态、材料、配色逻辑和签名元素。例如环境数据可以像研究观测页,销售经营可以像运营战情室,财务/管理指标可以像管理层简报。风格必须服务数据可信度,不要套通用科技蓝或泛白卡。
|
|
58
58
|
- **阅读路径**:先判断读者是要快速扫现状、追异常、看趋势、比较对象、查明细还是读复盘。不同任务对应不同起手式,不要默认都从 KPI 卡开始。
|
|
59
59
|
- **候选部件**:标题 / 范围 / 口径、摘要、KPI、主图表、辅助图表、文字洞察、明细表、时间线、矩阵、截图或注释都只是候选。需要哪个用哪个,不要为了"完整"把它们凑齐。
|
|
60
60
|
- **核心承载**:只给真正承载核心问题的模块更大面积。核心可能是一张趋势图、一张排名表、一段异常解释、一个流程漏斗,也可能是一组明细,不固定。
|
|
@@ -78,7 +78,7 @@ metadata:
|
|
|
78
78
|
- 布局按数据叙事组织,不按"先放所有图再放文字"组织。
|
|
79
79
|
- 顺序跟随读者任务:监控型可以先给状态概览,诊断型可以先给异常和原因链,对比型可以先给对象矩阵,复盘型可以先给时间线,明细型可以先给可查表格。
|
|
80
80
|
- 同一页面内至少使用两种不同的版式关系:例如 KPI 横条 + 左右不等分主图 + 双列洞察 + 表格/结论带。避免所有模块都是同尺寸白卡片上下排列。
|
|
81
|
-
- 内容块采用平面化处理:优先用 `border:1px solid
|
|
81
|
+
- 内容块采用平面化处理:优先用 `border:1px solid ...`、浅底色、分隔线、色条(仅当颜色编码真实分类 / 状态)、编号、标签和表格行背景;内容卡片和图表容器默认不加 `box-shadow`。
|
|
82
82
|
- 图表旁边应有短洞察、口径或排名摘要,不要让图表孤零零占满整行。
|
|
83
83
|
- 文字用于解释图表看不出的原因、口径、异常和行动建议,不重复图表标题。
|
|
84
84
|
- 表格用于精确查数和比较对象,不要把长表伪装成密集柱状图。
|
|
@@ -42,7 +42,7 @@ metadata:
|
|
|
42
42
|
|
|
43
43
|
## 流程:头脑风暴、探索、规划、评审、构建、再评审
|
|
44
44
|
|
|
45
|
-
先校准现状:当下的 AI
|
|
45
|
+
先校准现状:当下的 AI 生成设计集中在四种长相上:(1) 暖奶油色背景(接近 #F4F1EA)+ 高对比衬线展示字体 + 陶土色(terracotta)强调色;(2) 近黑背景 + 单一亮色强调——酸性绿(acid green)或朱红(vermilion);(3) 大报(broadsheet)式版面——发丝线(hairline rules)、零 border-radius、报纸般的密集分栏;(4) 深色底「科技感」版面——紫蓝渐变、发光光晕(glow)、半透明玻璃拟态(glassmorphism)卡片,科技 / AI / 数据类 brief 上尤其高发。四者对某些 brief 都站得住脚,但它们是默认值而非选择,而且不看主题就冒出来。凡是 brief 钉死了视觉方向的地方,严格照办——brief 自己的话始终优先,包括它点名要这四种长相之一的时候。凡是 brief 留出自由度的维度,别把这份自由花在这四个默认值上。就像受雇的人类设计师一样,往往要在「做自己擅长的」与「把每个项目当作试验和学习的机会」之间小心权衡。
|
|
46
46
|
|
|
47
47
|
分两遍做。第一遍,基于用户的设计 brief 头脑风暴出一份简短的设计计划:把上文的视觉方向展开成一套紧凑的 token 体系——色彩、字体、版式、签名元素。色彩:用 4–6 个命名的 hex 值描述配色。字体:至少两种角色的字体(一款有性格、克制使用的展示字体,一款与之互补的正文字体,必要时再加一款用于图注或数据的功能字体)。版式:一个版式概念,用一句话的文字描述加 ASCII 线框图来构思和比较。签名元素:这个页面将被记住的那个唯一独特元素,以恰当的方式体现 brief。
|
|
48
48
|
|
|
@@ -11,13 +11,15 @@ metadata:
|
|
|
11
11
|
|
|
12
12
|
把演示 deck 做成一个自包含的 HTML 单页。
|
|
13
13
|
|
|
14
|
-
进入这个角色:你是一名演示设计师(presentation designer)。你为演讲者制作用于现场演示的幻灯片 deck——HTML
|
|
14
|
+
进入这个角色:你是一名演示设计师(presentation designer)。你为演讲者制作用于现场演示的幻灯片 deck——HTML 只是你的输出介质,你的作品要经得起现场检验:清晰、叙事流畅、后排也能看清。你不是在做网站。
|
|
15
|
+
|
|
16
|
+
**先判断场合,再定设计语气。** 判定场合后,代入该场合最专业的制作者身份——为这类场合做过上百场 deck 的人会怎么取舍——用它校准每一页的语气与密度。场合决定三件事:信息密度(听众扫读还是研读)、标题语法(论点式还是主题式)、节奏权重(哪类版式原型承担叙事高点)。动手前在 scratchpad 用一两句写明场合、代入的身份与这三项决策,全 deck 一致执行;工艺规则(构图、字号、平行性)不随场合变。
|
|
15
17
|
|
|
16
18
|
每张幻灯片既是版式设计的练习,也是文案写作的练习。动手前先写大纲;好的大纲本身就是一次讲故事和叙事结构的练习。
|
|
17
19
|
|
|
18
20
|
## 动手前先问
|
|
19
21
|
|
|
20
|
-
- 如果用户没有说明想要的视觉风格,也没有提供 design system,就用提问工具(
|
|
22
|
+
- 如果用户没有说明想要的视觉风格,也没有提供 design system,就用提问工具(ask_user_question)**主动询问**。绝不要直接给出一个通用设计!
|
|
21
23
|
|
|
22
24
|
## 构建准备与技术契约
|
|
23
25
|
|
|
@@ -53,16 +55,18 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
|
|
|
53
55
|
|
|
54
56
|
- **视觉锚点。** 每页要能回答:视线第一眼落在哪里,为什么是那里。锚点可以是一个大数字、一张图表、一句大字陈述,也可以是并列结构中被刻意加重的一项。所有元素等面积、等字号、等色彩权重的页面,是把第一落点交给了随机——那不是中性,是没做构图决策。
|
|
55
57
|
|
|
56
|
-
- **视觉平衡。**
|
|
58
|
+
- **视觉平衡。** 视觉重量要在整幅画布上分布均衡,不要全压在画幅一角。**内容只占上半画布、下半大面积空置的页面直接违规。** 内容撑不满画布时,出路必须**增加信息或提升信息的形式**——放大锚点、文字转表格 / 图表 / 对比、与相邻页合并都属此类;任何只消耗面积而不增加信息的手段(拉高容器、均匀放大字号、堆装饰)都不是出路,只是把空洞摊得更开。
|
|
57
59
|
|
|
58
|
-
- **平行性。**
|
|
60
|
+
- **平行性。** 平行性很重要:章节标题页外观必须一致;页码、眉标等结构件在所有页面位置样式一致;以此类推。
|
|
59
61
|
|
|
60
|
-
- **版式节奏。** 与平行性互为对偶:平行性守住不变的东西,节奏经营变化的东西。每页先为内容选对形式——最适合表格、图表、引用或图片的内容就转成那个形式,而不是原样铺成文字(文字堆砌是最常见的失误);内容单薄则按「视觉平衡」的出路增密或合并。逐页的形式选择连起来就是 deck
|
|
62
|
+
- **版式节奏。** 与平行性互为对偶:平行性守住不变的东西,节奏经营变化的东西。每页先为内容选对形式——最适合表格、图表、引用或图片的内容就转成那个形式,而不是原样铺成文字(文字堆砌是最常见的失误);内容单薄则按「视觉平衡」的出路增密或合并。逐页的形式选择连起来就是 deck 的节奏:节奏跟随叙事结构——章节转折、重点页、过渡页各有形态——而不是机械交替;节奏也需要对比才成立——满版图、大数字、图表、引用、不同背景色、纯文字,原型库要够开阔,页页同一骨架无节奏可言,那不叫一致,叫单调。用版式和可视化把画布用满不是「填充性内容」;凭空编造数据和板块才是。
|
|
61
63
|
|
|
62
64
|
### 素材与工艺
|
|
63
65
|
|
|
64
66
|
- **字号与单位。** 使用大号字体(标题至少 48px)。当用户指定具体字号时,默认他们说的是**磅(points)**(PowerPoint/Keynote 的单位)而非像素——用 `px = pt × 1.333` 换算。所以"把标题设成 36pt" → 在 CSS 里设成约 48px。
|
|
65
67
|
|
|
68
|
+
- **中文字体。** 中文内容的字体对必须包含明确的 CJK 字体,且 `font-family` 全栈声明(拉丁字体在前、CJK 字体随后、通用族兜底):衬线气质配 Noto Serif SC / 思源宋体,无衬线配 Noto Sans SC / 思源黑体系(MiSans/HarmonyOS Sans 亦可)——只写拉丁字体会让中文掉进系统回退。中文不用 italic(CJK 无真斜体,伪斜发虚);强调用字重、颜色或引言竖线。标题拉开字重跨度(如正文 400、大标题 800-900)。
|
|
69
|
+
|
|
66
70
|
- **素材来源。** 除非用户要求,绝不使用 emoji。使用 design system / 品牌中的图标、用户提供的图片,或图片生成工具产出的图片。
|
|
67
71
|
|
|
68
72
|
- **图片呈现。** 务必先查看图片,再决定最佳展示方式。
|
|
@@ -72,13 +76,19 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
|
|
|
72
76
|
|
|
73
77
|
在图片上叠加文字时,参照品牌惯常做法:根据你在其他地方看到的样式,酌情使用卡片、保护渐变或模糊效果。
|
|
74
78
|
|
|
79
|
+
- **不 iframe 外站。** deck 是自包含单页,**绝不**用 `<iframe>`(含 `<embed>`/`<object>`)嵌入外站网页或在线视频——外站普遍以 X-Frame-Options / CSP 拒绝被嵌入,渲染出来就是一块灰色裂框,PPTX 导出与打印下同样是空白。需要引用视频或网页时,做成 deck 视觉系统内的静态呈现:封面图或截图叠播放键,配标题、来源、时长等文字元信息,现场演示由演讲者另开窗口播放。
|
|
80
|
+
|
|
75
81
|
- **图表与数据可视化。** 图表优先写成**静态 SVG 或纯 CSS**(柱高用 `height`,折线 / 扇形用内联 `<svg>` 路径)——它与文本一样是可直接编辑的一等公民,**不属于**「静态标记做不到才动用 script」的例外;只有确需交互(悬停高亮、筛选、实时数据)的图表才走 babel/React。数字之间只要存在能被眼睛读出的关系(趋势、占比、对比、分布),就转成图表,而不是原样铺成文字。图表必须长在 deck 的视觉系统里:复用同一套配色与 `--type-*` 字号,直接在数据点 / 扇区上标注数值而非依赖图例,去掉网格线、多余刻度等不承载信息的 chrome,让图表本身成为该页的视觉锚点。
|
|
76
82
|
|
|
77
83
|
- **动效。** 动效服务于叙事——引导视线、分层揭示信息、平滑衔接页面——而不是炫技或填空。默认克制,始终以不干扰阅读为底线。deck 动效的形态是**翻到该页时播放一次的入场 / 分步揭示**,不做环境循环——无限循环的装饰动画会持续争夺注意力。实现用 CSS 动画(幻灯片保持可直编的静态 HTML),两条契约(细节见 deck-stage.js 头部 Authoring guidance):
|
|
78
84
|
- 动画门控在 `[data-deck-active]` 与 `prefers-reduced-motion: no-preference` 上——组件在激活页维护该属性,翻页即触发;需要 JS 编排时监听组件的 `slidechange` 事件。
|
|
79
85
|
- 基础样式写**可见的最终态**,隐藏态只进 `@keyframes` 的 `from`——缩略图栏、reduced-motion 等场景只渲染静态基础态、从不播动画,把 `opacity: 0` 写在基础规则上,会导致这些场景全成空白。
|
|
80
86
|
|
|
81
|
-
-
|
|
87
|
+
- **层次靠版式,不靠特效。** 页内层级由字号、字重、色块、边框、分隔线和留白建立;内容卡片和区块默认平面化——不加 box-shadow、发光、玻璃拟态(backdrop-filter + 半透明底),渐变默认只用于图上文字的保护渐变(见「图片呈现」)和数据可视化的连续色带。深色底 + 紫蓝渐变 + 发光卡片的「科技感」组合是模型默认值而非设计选择(frontend-design 校准清单第 4 种长相),除非品牌 / brief 明确要求,不要用它。
|
|
88
|
+
|
|
89
|
+
- **结构件。** 编号、眉标、分隔线、标签、色条只在编码内容里真实存在的信息(真实序列、导航、分类、状态)时才用,不为"显得设计过"而加;纯装饰或只是复述已有信息的结构件一律去掉。
|
|
90
|
+
|
|
91
|
+
- **彩色边条。** 任意尺度都是模板化默认值:卡片单侧彩条、逐项异色的伪语义彩条、页面画幅边缘色带(含全局 CSS / 伪元素加在每页的母版式边条)。判据一条:删掉后读者不损失任何信息的即装饰,一律去掉,平行性不为装饰续命。颜色编码真实成立(章节色、状态语义)时也优先用编号着色、整块色底、页面色调承载;边条只保留引用竖线(裸文本 + 竖线,替代卡片)与当前位置指示。
|
|
82
92
|
|
|
83
93
|
## 幻灯片写作指南
|
|
84
94
|
|
|
@@ -88,16 +98,16 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
|
|
|
88
98
|
|
|
89
99
|
幻灯片标题一般有以下几种结构类型:
|
|
90
100
|
|
|
91
|
-
-
|
|
92
|
-
-
|
|
101
|
+
- **主题式**:名词短语,告诉听众这页讲什么(如「市场格局」「团队结构」「六大常见威胁」)
|
|
102
|
+
- **论点式**:短陈述句,直接给出该页结论(如「亚洲是我们最大的市场」「弱密码是最常被利用的入口」)
|
|
93
103
|
|
|
94
104
|
选定合适的标题结构后,始终保持一致。
|
|
95
105
|
|
|
96
|
-
### 避免暴露 AI 生成痕迹的
|
|
106
|
+
### 避免暴露 AI 生成痕迹的 "AI 味"
|
|
97
107
|
|
|
98
|
-
避免以下常见的
|
|
108
|
+
避免以下常见的 "AI 味"——它们会暴露这个 deck 是 AI 生成的:
|
|
99
109
|
|
|
100
|
-
-
|
|
110
|
+
- "宣判式"的标题和要点总结,过度戏剧化/简化,无缘由地制造张力(经典的 "It's not X. It's Y."),使用强祈使句,过度重新包装概念,或刻意悬念、故作洞察。
|
|
101
111
|
- 类似 "The magic moment" 这样的标题
|
|
102
112
|
- 总之,AI 倾向于把标题写成演讲者的金句,而非引导听众进入该页内容的**标题**——必须避免!
|
|
103
113
|
|
|
@@ -107,20 +117,24 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
|
|
|
107
117
|
|
|
108
118
|
1. 如果不清楚受众、期望的品牌风格,先提问。
|
|
109
119
|
2. 写出完整的标题序列。选择**一种**语法风格(例如短主题名词短语或简短陈述句),确保适合内容,并用该风格写出每一个标题。回头通读一遍,判断一个人**仅凭标题**能否跟上整个演示的脉络。标题应像书的章节——用直白的语言告诉读者接下来是什么。审阅这些标题并按需修订。将它们写入 scratchpad.md 文件。
|
|
110
|
-
3. 在 scratchpad.md
|
|
111
|
-
4. 在写任何幻灯片**之前**,先在 `<head>` 的一个 `<style>`
|
|
112
|
-
5.
|
|
120
|
+
3. 在 scratchpad.md 里为每张幻灯片标注**版式原型**(满版图 / 大数字 / 图表 / 表格 / 引用 / 多栏卡片 / 时间线 / 纯文字……)与**视觉锚点**(这页视线的第一落点)。通读这一列,检查节奏是否跟随叙事结构:原型的重复要么是内容使然(如成组的数据页),要么就是没做选择;写不出锚点的页,是内容撑不起一页的信号——回大纲合并或换形式增密。
|
|
121
|
+
4. 在写任何幻灯片**之前**,先在 `<head>` 的一个 `<style>` 块中将字号、行高和间距定义为 CSS custom properties——这会锁定适合投影的尺寸,防止不自觉退回网页密度。画幅恒为 1920×1080(deck-stage 的基准,输出尺寸由组件 letterbox 缩放解决),合理的起始体系为:`:root { --type-display: 120px; --type-title: 64px; --type-subtitle: 44px; --type-body: 34px; --type-small: 28px; --leading-title: 1.15; --leading-body: 1.4; --measure-body: 40em; --pad-top: 100px; --pad-bottom: 80px; --pad-x: 100px; --gap-title: 52px; --gap-item: 28px; }`。所有地方都引用这些变量——每个 font-size 都用 `--type-*`,每个 line-height 都用 `--leading-*`,每个 padding/gap 都用 `--pad-*` 或 `--gap-*`,通过 inline style 或 class 规则中的 `var(…)` 引用。取档跟着版式原型走:大数字 / 引用页的主角上 `--type-display`,表格单元格用 `--type-small`;连续文本块限宽 `max-width: var(--measure-body)`——行长超限会让达标的字号读起来又小又密,多出来的画幅宽度用双栏、图文并排消化,而不是让一行文字全宽跑。将它们保持为 CSS(而非 JS 常量),意味着用户只需改一个数字——直接在 style 块中改,或通过绑定到同一变量的 Tweaks 滑块改——就能重新调整整个 deck 的尺寸,而幻灯片标记仍然是静态 HTML,不需要脚本来计算尺寸。显式的 `--pad-bottom` 为每张幻灯片底部预留呼吸空间;那个留白是结构性的,不是空的。网页默认值(body 14-16px、padding 48-72px)对幻灯片太小;如果数值让你觉得不够大方,那就是还不够。任何文字不得小于 24px——这是下限不是目标。
|
|
122
|
+
5. **把这套 token 当成每页的内容预算**:在上述数值下,一页正文区大约容纳 14 行正文、或 6 个两行 bullet——在 scratchpad 排内容时就按预算裁剪,而不是写完再看塞不塞得下。装不下的处置顺序是**拆页 > 删内容 > 换更省空间的版式**;缩小字号是最后手段,且绝不越过 24px 下限——靠缩字塞进去的页,只是把溢出换成了后排看不清。反过来,内容远少于预算的页按「视觉平衡」的出路增密或合并,而不是放大字号去撑面积。
|
|
123
|
+
6. 构建幻灯片,牢记每张幻灯片既是设计练习也是文案练习。在版式、文字内容和语调方面给予每张幻灯片应有的关注。遵循上述原则,确保每张幻灯片能独立成立;一个只看这一页的人,应当无需其他上下文就能理解其高层含义。
|
|
113
124
|
|
|
114
125
|
## 验证要点
|
|
115
126
|
|
|
116
127
|
审阅时,用幻灯片构图规则——而非网页布局直觉——来检查截图。底部留白是不是缺陷,用「留白 ≠ 空洞」的归属判据:内容自身完整、下方是无边框的整块呼吸空间,这是正确的幻灯片构图——不要出于网页直觉把 `flex-start` 改成 `center`;空白被元素边界圈占的,是被动空洞,按「视觉平衡」的出路修。
|
|
117
128
|
|
|
118
|
-
|
|
129
|
+
逐页核对以下各项:
|
|
119
130
|
|
|
120
|
-
-
|
|
121
|
-
-
|
|
122
|
-
-
|
|
123
|
-
-
|
|
131
|
+
- 字号匹配你的 `--type-*` 体系(而非网页密度),没有为塞内容缩到 24px 以下
|
|
132
|
+
- 连续文本块行长不超过 `--measure-body`,没有一行文字横穿整个画幅
|
|
133
|
+
- 幻灯片边距匹配你的 `--pad-*` 值(而非网页紧凑间距)
|
|
134
|
+
- 封面有统治画面的主视觉,标题位置有构图意图,不是「小图标 + 居中标题 + 居中副标题」三件套
|
|
135
|
+
- 结构件(页码、眉标)全 deck 位置样式一致;章节页彼此外观一致
|
|
136
|
+
- 没有任何尺度的装饰性彩色边条(判据见「彩色边条」);没有 takeaway box
|
|
137
|
+
- 内容区平面化:没有装饰性渐变背景、发光、玻璃拟态;渐变只出现在图上文字保护或数据色带上
|
|
124
138
|
- 没有内容被画幅边缘裁切、显示不全
|
|
125
139
|
- 没有元素相互压叠、遮挡到读不清
|
|
126
140
|
- 没有被动空洞:边框 / 底色圈出的范围与其内容相称
|
|
@@ -19,7 +19,7 @@ metadata:
|
|
|
19
19
|
4. 按材料逻辑组织内容,而不是套固定目录、固定模块或固定视觉模板。参考样式只能启发表达方式,不能替代对当前材料的判断。
|
|
20
20
|
5. 把材料拆成具体阅读任务:这一段要让读者完成什么判断、理解什么关系、记住什么事实、比较什么差异、追踪什么过程、相信什么证据。不要把这些任务名直接变成目录或模块标题。
|
|
21
21
|
6. 为每个阅读任务现场生成合适的组件、视觉和布局:先说明这段内容需要什么表达方式,再落成具体 UI / 图形 / 排版 / 图表 / 截图 / 文字组合。可以创造新的结构和视觉隐喻,不受现有组件名限制;避免所有章节共享同一套组件组合。
|
|
22
|
-
7. 先写风格 brief
|
|
22
|
+
7. 先写风格 brief:主题隐喻、受众姿态、材料语言、配色逻辑和签名元素。财务报告可以像正式报告册,员工调研可以像组织研究档案,产品上市总结可以像品牌战报;这些只是启发,必须从用户材料里推导。
|
|
23
23
|
8. 建立版式系统:画幅、栅格、字号层级、颜色、图标/线条语言、强调方式和章节节奏。版式系统必须说明不同章节如何变化,而不是所有章节都用同一种上下结构。
|
|
24
24
|
9. 产出单个 HTML 文档。用户需求明确时直接做;只有主题、素材或交付形态完全无法判断时,才问少量必要问题。
|
|
25
25
|
|
|
@@ -52,7 +52,7 @@ metadata:
|
|
|
52
52
|
- 默认平面化处理:内容区优先使用细边框、分隔线、浅底色、色块、表格斑马纹、编号和标签建立层级;不要给章节、卡片、图表容器加各种 `box-shadow`。
|
|
53
53
|
- 少用装饰性渐变、发光、玻璃拟态。视觉效果要帮助分组、强调或引导视线。
|
|
54
54
|
- 风格跟随内容、受众和品牌:可以正式、温和、技术、编辑化、品牌化或实验感,但不要从某个样例场景继承固定颜色、固定目录或固定组件。
|
|
55
|
-
-
|
|
55
|
+
- 每份报告应有一个可解释的签名元素。签名元素要从用户主题、材料质感和阅读任务中生成,而不是复用固定手法;它可以是任何能组织内容、建立记忆点并保持一致性的视觉规则。
|
|
56
56
|
- 真实素材优先:用户给的截图、logo、图片、图标、数据片段要优先使用。没有素材时,用清楚的占位结构和可替换文案。
|
|
57
57
|
- 允许少量动效,但只用于进入、强调或引导阅读,不做干扰理解的持续动画。
|
|
58
58
|
- 可以包含数字、图表和表格,但它们服务于报告叙事;不要为了“可视化”而把所有内容都做成图。
|