|
|
@@ -1,4 +1,4 @@
|
|
|
-# 设计风格库：网页 20 种 + PPT 20 种（HTML 原生优先）
|
|
|
+# 设计风格库：网页 20 种 + PPT 20 种 + 信息图 20 种（HTML 原生优先）
|
|
|
|
|
|
> **2026-06 重构**。基于对全球 10 大网站类型 + 10 大演示类型、各 top5 公认最佳设计（共 100 个真实案例）的调研反推。
|
|
|
> 旧版 20 种「平面/装置设计师哲学」库的致命问题：大胆风格几乎全是 AI-生成-only（粒子/光影/手绘），**用户默认无生图能力、default 全走 HTML 时，大胆半场直接清零，只剩极简——这是「default 千篇一律」的根因**。本库每一种都标了「纯 HTML/CSS 无生图」下的**还原度**。
|
|
|
@@ -7,7 +7,9 @@
|
|
|
|
|
|
## 这个库怎么用
|
|
|
|
|
|
-1. **先按输出类型选半区**：做网页/落地页/官网 → 网页 20 种；做 PPT/deck/演示 → PPT 20 种。
|
|
|
+1. **先按输出类型选分区（三选一，不是两选一）**：做网页/落地页/官网 → 网页 20 种；做 PPT/deck/演示 → PPT 20 种；做信息图/数据可视化/单张长图 → 信息图 20 种。
|
|
|
+ - 判据是**产出形态不是题材**：可点击的站点走网页区，要翻页的走 PPT 区，**一张(或一组)以数据为主角、能脱离交互独立阅读的图走信息图区**。
|
|
|
+ - 拿不准的两个常见情形：Dashboard 原型走网页区（它是产品界面）；一页 deck 里嵌的数据页仍走 PPT 区（它要翻页）。
|
|
|
2. **温度体系**：每种标了 `大胆 / 中性 / 安静`。**故意让大胆款占多数**——模型的确定性偏差天然偏安静极简，库的配比要把它往大胆推。
|
|
|
- 方向 A（稳妥底盘）从安静/中性里按需求选；方向 B 取不同温度拉反差；**方向 C 由 SKILL 的「秒数轮盘」强制注入大胆款**。
|
|
|
- ❌ 三个方向不要都落在「米白+留白+一个点缀色」——那是最常见的失败模式。
|
|
|
@@ -358,6 +360,159 @@
|
|
|
- 字体:Newsreader / Source Serif(阅读级)或Inter(宣言式)；标题可Archivo超粗
|
|
|
|
|
|
|
|
|
+---
|
|
|
+
|
|
|
+## 信息图风格库(20种)
|
|
|
+
|
|
|
+> **2026-08 新增**。此前本库只有网页与 PPT 两个半区，但「信息图/可视化」在 SKILL 里是四大适用场景之一——做信息图时轮盘只能落进网页半区，抽到的是社区站/落地页的风格，硬套上去。这个半区补的就是这个洞。
|
|
|
+> 判据：**产出是一张(或一组)以数据为主角、可脱离交互独立阅读的图**，就走这里；是可点击的站点走网页分区，是要翻页的走 PPT 分区。
|
|
|
+
|
|
|
+#### 大胆派
|
|
|
+
|
|
|
+**个人数据印刷年报 / Personal Annual Report（Feltron式）** `大胆·还原94%`
|
|
|
+- 参考:Nicholas Felton《Feltron Annual Report》2005–2014（2006-2011 卷入 MoMA 永久馆藏）；Stefanie Posavec；Bloomberg Businessweek 年度特辑
|
|
|
+- 适配:个人或团队年度总结、quantified-self、产品年度回顾、Wrapped 类复盘、长周期自我审计
|
|
|
+- 视觉DNA:配色=未涂布纸暖白底+单一朱红做贯穿accent+石板蓝第二数据序列+第三色只绑一个语义绝不复用。字体=Helvetica系紧排，巨号数字压顶，小字注脚密集。母版四件套：①巨数字模块条 ②极坐标周期图(24h/12月) ③日历热力格 ④贯穿全幅的时间或地理带。标志=把私人琐碎数据当企业年报做的反差、模块化印刷网格、1px分割线、黑白打印仍可读
|
|
|
+- HTML实现:CSS Grid分模块+1px border切网格；极坐标图内联SVG手算极角(不引图表库)；日历用Grid+子元素高度填充。纯排版+SVG，零素材，HTML极强项
|
|
|
+- 字体:Archivo / Helvetica Neue(紧排巨数字) + Inter(小字注脚)
|
|
|
+
|
|
|
+**解释性图解 / Explanation Graphics（Nigel Holmes式）** `大胆·还原76%`
|
|
|
+- 参考:Nigel Holmes(1978–1994任TIME图表总监，1994创立Explanation Graphics)；主张用图画与幽默解释抽象数字，也是chartjunk之争的靶心
|
|
|
+- 适配:科普解释、把复杂概念讲给外行、大众媒体专栏配图、儿童与教育向
|
|
|
+- 视觉DNA:配色=高饱和平涂三四色+黑描边。字体=圆润无衬线+手写感标注。母版=把图表本体画成实物隐喻(钞票摞成柱、温度计当量表、跑道当进度条)。标志=拟物化图表、幽默、小人像、粗描边、零渐变
|
|
|
+- HTML实现:图表骨架CSS/SVG可做，**灵魂在手绘插画**——纯HTML下只能降级为几何色块，须明确标注降级；有生图能力时用huashu-gpt-image生插画元素再合成
|
|
|
+- 字体:Nunito / Baloo 2(圆润) + Caveat(手写标注)
|
|
|
+
|
|
|
+**巨幅剖面手绘 / Cross-Section Epic（SCMP Arranz式）** `大胆·还原55%`
|
|
|
+- 参考:Adolfo Arranz(SCMP资深图表编辑，Malofiej国际信息图奖多枚金奖，代表作《City of Anarchy》九龙城寨剖面)；Malofiej被称为信息图界的普利策
|
|
|
+- 适配:建筑/历史/器物解剖、单张读十分钟的长卷、博物馆级科普
|
|
|
+- 视觉DNA:配色=暗底(深墨/深褐)+暖色高光+做旧纸质感。构图=单张巨幅、等距或正剖视角、密集引线标注环绕主体。标志=手绘细节、引线标注、剖面视角、一张图讲完整个故事
|
|
|
+- HTML实现:🔴 **纯HTML做不出手绘剖面**——本风格必须有插画素材，无素材时不要假装。HTML只承担引线标注层与缩放滚动交互。拿不到素材就换风格
|
|
|
+- 字体:Source Serif(标题) + Inter(标注)
|
|
|
+
|
|
|
+**杂志撞色数据页 / Magazine Pop Data（Businessweek式）** `大胆·还原90%`
|
|
|
+- 参考:Bloomberg Businessweek(Richard Turley时期)、WIRED图表页、The Economist的Graphic Detail专栏
|
|
|
+- 适配:商业/科技媒体图表、观点专栏配图、社媒方图、公众号内嵌数据图
|
|
|
+- 视觉DNA:配色=撞色双主色(荧光黄+黑、品红+藏青)+纸白留白，不用第三色调和。字体=超粗压缩体大标题+极小说明字，字号对比10倍以上。母版=一图一个论点、图表本身就是版式主角、标题直接说结论。标志=极端字号对比、撞色、图表出血到版心外、结论式标题
|
|
|
+- HTML实现:纯CSS可完全还原；图表用内联SVG或CSS Grid条；出血靠负margin。零素材
|
|
|
+- 字体:Archivo Black / Anton(压缩粗体) + IBM Plex Sans(说明)
|
|
|
+
|
|
|
+**ISOTYPE图形统计 / Neurath–Arntz** `大胆·还原88%`
|
|
|
+- 参考:Otto Neurath与Gerd Arntz于1920s维也纳创立的ISOTYPE国际图形教育系统
|
|
|
+- 适配:人口/社会/公共政策数据、面向低识字门槛的公共传播、教育海报
|
|
|
+- 视觉DNA:配色=有限套色(黑+红+蓝+土黄)平涂，无渐变无阴影。母版=同一图标重复N次表示数量——**放大图标表示更多是错的**，这是该体系最核心的规矩。标志=剪影图标阵列、横向排列、左侧文字标签、极强秩序感
|
|
|
+- HTML实现:图标用内联SVG剪影+CSS repeat布局，HTML天然适配。图标可自绘几何剪影，不需外部素材
|
|
|
+- 字体:Jost / Archivo(Futura替代)
|
|
|
+
|
|
|
+**数据人文主义手绘图谱 / Data Humanism（Lupi式）** `大胆·还原80%`
|
|
|
+- 参考:Giorgia Lupi(Pentagram合伙人)与Stefanie Posavec《Dear Data》；Lupi的Data Humanism宣言主张「数据是人不是数字」
|
|
|
+- 适配:个人化情感化数据、小样本深描、把私人经验做成可读图谱、非量化维度多的题材
|
|
|
+- 视觉DNA:配色=手账米白底+4-5个各自绑定语义的柔和色(珊瑚/松绿/芥黄/墨紫)，**没有一个颜色是装饰**。母版=①先定一套视觉语言(大小/形状/刺/尾巴各编码一维)②必配一张图例教读者解码③元素沿有机路径排布不用网格。标志=可解码的自定义符号、必带图例、有机排布
|
|
|
+- HTML实现:符号用内联SVG参数化生成(半径/刺数/尾长绑数据字段)；路径用贝塞尔曲线穿点。纯SVG零素材，唯一做不出的是真手绘笔触
|
|
|
+- 字体:Georgia / Source Serif(标题) + Inter(图例)
|
|
|
+
|
|
|
+**滚动叙事数据长卷 / Scrollytelling（The Pudding式）** `大胆·还原85%`
|
|
|
+- 参考:The Pudding(数据新闻杂志)、NYT The Upshot、Reuters Graphics滚动专题
|
|
|
+- 适配:需要一步步揭示的复杂论证、长篇数据故事、网页端专题
|
|
|
+- 视觉DNA:配色随章节切换但保持单一accent贯穿。母版=左侧文字步进、右侧图形随scroll变形；每一屏只推进一个变量。标志=图形不换只变形、文字与图形严格绑定、章节色变、结尾给完整全景
|
|
|
+- HTML实现:IntersectionObserver触发状态切换+CSS transition或SVG属性插值，纯前端可完整还原。⚠️ 交付形态必须是网页，**导PDF/PNG会丢掉全部叙事**——用户要静态图时不要选它
|
|
|
+- 字体:Inter / Source Serif(长文可读性优先)
|
|
|
+
|
|
|
+**地图即主角 / Cartographic Lead（Stamen式）** `大胆·还原65%`
|
|
|
+- 参考:Stamen Design(2001年Eric Rodenbeck于旧金山创立，客户含National Geographic)，其Watercolor/Toner地图砖是公开经典
|
|
|
+- 适配:地理分布数据、城市/交通/环境题材、位置即叙事的内容
|
|
|
+- 视觉DNA:配色=地图底图定调(水彩或单色Toner)+数据层用高对比点线。母版=地图占满版心、数据以点密度或流线叠加、图例极小压角。标志=底图本身有作者性、数据层克制、地理形状即构图
|
|
|
+- HTML实现:🔴 **需要真实地理数据(GeoJSON)与底图**，纯HTML无法凭空生成正确地形——拿不到数据就换风格，**绝不手绘假地图**。有数据时可用内联SVG投影绘制
|
|
|
+- 字体:Inter / IBM Plex Sans(地名标注需大量小字)
|
|
|
+
|
|
|
+#### 中性派
|
|
|
+
|
|
|
+**数据新闻图表规范 / Newsroom Chart System（FT式）** `中性·还原96%`
|
|
|
+- 参考:Financial Times的Chart Doctor团队与公开的Visual Vocabulary(按Deviation/Correlation/Ranking/Distribution/Change-over-Time/Part-to-Whole/Magnitude/Spatial分类选图表)
|
|
|
+- 适配:财经与行业数据、「选对图表类型」比「好看」更重要的场合、系列图表需统一规范时
|
|
|
+- 视觉DNA:配色=标志性粉橘报纸底+一组有序色阶(单色渐变表连续量、对比双色表偏离)。母版=①标题即结论②副标题说明口径③图表本体去边框去网格④左下角必标数据来源。标志=先按数据关系选图型再谈美感、来源标注不可省、坐标轴极简
|
|
|
+- HTML实现:纯CSS/SVG画折线柱状；关键是**先查Visual Vocabulary选对图型**再动手。零素材
|
|
|
+- 字体:Inter / Source Sans(正文) + 等宽体标数字
|
|
|
+
|
|
|
+**计算式数据肖像 / Computational Portrait（Fathom式）** `中性·还原78%`
|
|
|
+- 参考:Ben Fry与其波士顿工作室Fathom Information Design(Fry为Processing联合创造者、《Visualizing Data》作者，作品曾入Whitney双年展)
|
|
|
+- 适配:超大规模数据集、需要「让数据自己长出形状」的题材、基因/交通/时间序列
|
|
|
+- 视觉DNA:配色=白或近黑底+极细线条+单色透明度叠加出密度。母版=不做摘要做全量呈现，用海量细元素的叠加密度形成图形。标志=发丝线、透明度堆叠、无装饰、形状由算法而非版式决定
|
|
|
+- HTML实现:Canvas或大量SVG path程序化绘制，数据量大时必须Canvas。**要求真实全量数据**，小样本做不出这个风格的密度感
|
|
|
+- 字体:Inter / Roboto Mono(数据标注)
|
|
|
+
|
|
|
+**美丽信息 / Beautiful Information（McCandless式）** `中性·还原90%`
|
|
|
+- 参考:David McCandless《Information is Beautiful》与其同名网站，以「把大数据集做成一眼可比的彩色图形」著称
|
|
|
+- 适配:科普对比、榜单、大众向数据聚合、社媒传播型图表
|
|
|
+- 视觉DNA:配色=多色但同明度同饱和的和谐色环(不是随机撞色)。母版=气泡图/树状图/桑基图等「面积即数量」的图型为主，标签直接压在色块上。标志=面积编码、同调多色、图例内嵌、一张图容纳几十个条目
|
|
|
+- HTML实现:树状图与气泡用CSS Grid或SVG计算布局(需自己写简单装箱算法)；桑基图用SVG贝塞尔。零素材
|
|
|
+- 字体:Nunito Sans / Inter
|
|
|
+
|
|
|
+**学术开放数据 / Open Research Data（Our World in Data式）** `中性·还原94%`
|
|
|
+- 参考:Our World in Data(牛津Global Change Data Lab)，准则是图表可交互、口径写清楚、数据可下载
|
|
|
+- 适配:严谨议题、需要经得起质疑的数据展示、长期趋势对比
|
|
|
+- 视觉DNA:配色=白底+一组区分度高但不刺眼的分类色+灰色做非重点系列。母版=①一句话结论标题②口径与时间范围写在副标题③图内直接在线末标标签(不用图例)④底部注来源与许可。标志=线末标签替代图例、灰化非重点、口径透明、克制
|
|
|
+- HTML实现:纯SVG折线+末端text定位，HTML最稳的一类。零素材
|
|
|
+- 字体:Inter / Lato
|
|
|
+
|
|
|
+**东方思辨科技图 / Speculative Tech Diagram（Takram式）** `中性·还原84%`
|
|
|
+- 参考:Takram(东京与伦敦的设计工程工作室，横跨设计与工程的speculative design实践)
|
|
|
+- 适配:技术概念图、未来场景推演、研究型白皮书配图、产品架构叙事
|
|
|
+- 视觉DNA:配色=米灰砂色基底+低饱和自然色(苔绿/陶土)+一处金属灰。字体=细字重、大字距、中英混排考究。母版=图表被当作艺术品排布、大量留白、几何图形有精密感。标志=柔和科技感、精密几何、克制的自然色、图表如装置
|
|
|
+- HTML实现:纯CSS/SVG可还原；关键在留白比例与线宽克制(0.5-1px)。零素材
|
|
|
+- 字体:Inter(细字重) / Noto Sans JP + Cormorant(标题可选)
|
|
|
+
|
|
|
+**系统图标化图解 / Pictogram System（Otl Aicher式）** `中性·还原92%`
|
|
|
+- 参考:Otl Aicher为1972慕尼黑奥运设计的图标系统与Ulm学派栅格方法
|
|
|
+- 适配:流程图、导视与指南类信息图、多语言场景、需要一整套图标保持一致时
|
|
|
+- 视觉DNA:配色=一套受限色板(奥运版为浅蓝/绿/银)+黑。母版=所有图标共用同一网格与同一笔画角度(仅0/45/90°)、图标与短标签成对出现。标志=严格角度约束、系统一致性、无衬线短标签、栅格可见
|
|
|
+- HTML实现:图标用内联SVG按45°约束自绘；栅格用CSS Grid。零素材，但要自己守住角度纪律
|
|
|
+- 字体:Jost / Archivo(Univers替代)
|
|
|
+
|
|
|
+#### 安静派
|
|
|
+
|
|
|
+**Tufte小倍数矩阵 / Small Multiples** `安静·还原95%`
|
|
|
+- 参考:Edward Tufte《Envisioning Information》的small multiples与sparkline概念
|
|
|
+- 适配:多维度横向对比、时间序列分组、一个变量在几十个切片上的表现
|
|
|
+- 视觉DNA:配色=白底+黑线+一个强调色标异常项。母版=同一张小图重复N次只换数据，**共用坐标轴范围——范围不统一就失去可比性，这是本流派唯一的致命错误**；标签极小压在图旁。标志=网格化重复小图、共享刻度、零图例、零网格线、高数据墨水比
|
|
|
+- HTML实现:CSS Grid排小图+每格内联SVG折线。务必统一domain。零素材
|
|
|
+- 字体:Source Serif(标题) + Inter(小标签)
|
|
|
+
|
|
|
+**拓扑简化路网图 / Topological Transit Map（Beck/Vignelli式）** `安静·还原86%`
|
|
|
+- 参考:Harry Beck 1933年伦敦地铁图、Massimo Vignelli 1972年纽约地铁图
|
|
|
+- 适配:流程与关系网络、组织架构、系统拓扑、任何「连接关系比真实距离重要」的图
|
|
|
+- 视觉DNA:配色=白或浅底+每条线一个高饱和纯色。母版=所有线段只走0/45/90°、站点等距——**牺牲地理准确性换可读性**是本流派的立身之本；换乘点用空心圆。标志=八方向约束、等距节点、纯色线、空心节点
|
|
|
+- HTML实现:内联SVG polyline严格约束角度；节点用circle。纯几何，HTML完美适配
|
|
|
+- 字体:Jost / Inter(站名可全大写)
|
|
|
+
|
|
|
+**白之留白信息图 / Ma & Emptiness（原研哉式）** `安静·还原82%`
|
|
|
+- 参考:原研哉《白》与无印良品视觉体系，「留白不是空，是容纳想象的容器」
|
|
|
+- 适配:品牌年报、慢节奏叙事、少量但重要的数据、需要庄重感的场合
|
|
|
+- 视觉DNA:配色=纯白或宣纸白+极浅灰+一处极小的墨色或朱色点。母版=一屏一个数据、巨幅留白、元素靠边缘或黄金位置放置、绝不填满。标志=极端留白、单点强调、细若无物的线、东方式的「间」
|
|
|
+- HTML实现:纯CSS排版。🔴 **本库风险最高的一种**——留白必须是构图(有明确视觉锚点)，做过头就是「页面渲染坏了」；正文仍须≥14px，不许为了气质缩字号
|
|
|
+- 字体:Noto Serif SC / Source Han Serif + Inter
|
|
|
+
|
|
|
+**书籍级信息排印 / Bookcraft Data（Irma Boom式）** `安静·还原80%`
|
|
|
+- 参考:Irma Boom(荷兰书籍设计师，作品入MoMA永久馆藏，以极端排印与材质实验著称)
|
|
|
+- 适配:长篇数据报告、需要被当作出版物收藏的年报、图文混排的深度内容
|
|
|
+- 视觉DNA:配色=纸色+一到两种油墨色，色块大面积压版。字体=排印本身即主角，字号跨度极大、页边距非对称、文字可竖排或旋转。母版=把数据嵌进文本流、章节页用满版色块分隔。标志=非对称版心、极端字号跨度、排印实验、出版物质感
|
|
|
+- HTML实现:CSS多栏+writing-mode可做竖排；非对称版心用Grid。**做不到的是纸张材质与裁切**，屏幕上须靠排印张力补偿
|
|
|
+- 字体:Fraunces / EB Garamond + Archivo(对比)
|
|
|
+
|
|
|
+**科学期刊图版 / Scientific Figure Plate** `安静·还原96%`
|
|
|
+- 参考:Nature与Science的figure规范、USGS与NASA的公开科学图版
|
|
|
+- 适配:研究结论、方法对比、需要同行审阅质感的严谨数据、多子图组合
|
|
|
+- 视觉DNA:配色=白底+色盲友好色板(用蓝橙对比而非红绿)+灰阶。母版=子图用(a)(b)(c)标号、图注在图下方成段、误差棒与样本量必标、坐标轴带刻度线。标志=子图编号、图下长图注、误差棒、色盲安全、零装饰
|
|
|
+- HTML实现:CSS Grid排子图+SVG画图与误差棒；图注用小字段落。零素材，HTML完全胜任
|
|
|
+- 字体:Inter / Source Sans + Roboto Mono(数字)
|
|
|
+
|
|
|
+**瑞士网格年报 / Swiss Grid Report（Müller-Brockmann式）** `安静·还原97%`
|
|
|
+- 参考:Josef Müller-Brockmann《Grid Systems in Graphic Design》、Ulm学派、瑞士国际主义年报传统
|
|
|
+- 适配:企业年报、机构报告、需要长期沿用一套版式的系列文档
|
|
|
+- 视觉DNA:配色=白底+黑+单一强调色。母版=严格模块网格(常12栏)、所有元素吸附栏线、左对齐齐头不齐尾、大量呼吸性留白但不空。标志=可见的网格逻辑、Helvetica系、非居中排版、层级靠字号与间距而非装饰
|
|
|
+- HTML实现:CSS Grid直接映射栏网格，是本库与HTML最同构的一种。零素材
|
|
|
+- 字体:Inter / Archivo(Helvetica替代)
|
|
|
+
|
|
|
---
|
|
|
|
|
|
## ⚠️ AI 生图专用风格（仅在确认用户有生图能力时才推，default 不可选）
|
|
|
@@ -405,5 +560,5 @@
|
|
|
|
|
|
---
|
|
|
|
|
|
-**版本**：v3.0（2026-06 全面重构为 HTML 原生 40 种库）
|
|
|
+**版本**：v3.1（2026-06 重构为 HTML 原生库；2026-08 补齐信息图分区，40 → 60 种）
|
|
|
**适用**：网页/PPT/PDF/信息图/封面/App 等所有视觉设计的 default HTML 路径
|
alchain