Swiss
Style.
看不见的网格,让信息自己说话
这不是一种「款式」,而是一套可搬运的排版系统:一条先推导、再藏起来的模块网格,
一款中性无衬线体,一律左对齐右缘参差,让信息自己承担层级。
本包只给版式与构件;配色 token 来自主题包。
01
十二栏模块网格
右侧开关把网格线画回来 —— 干净只是内容服从同一套格子的结果。
B12
登机口 · 占位示例
Gleis 7
站台 · 占位示例
1957
字号、字距、基线三件套
02
细线分隔,不用盒子
能用间距分组就不画线;线只给密集列表。下方数字进入视口时从 0 滚到目标值。
累计示例单位
0
计数入位:单帧 rAF 驱动,tabular 数字不抖位。
01网格先推导,再隐藏12 栏 · 24px 沟槽 · 24px 主基线
02一款中性怪诞体拉满层级靠字号,不靠字体堆砌
03一律左对齐,右缘参差禁居中、禁两端对齐
04客观:不对称 + 大留白一款强调色,几何形而非插画
03
控件:直角平涂、发丝线
红只做焦点态 / 选中态 / 主按钮 hover,不做大面积填充。所有尺寸落 8pt 网格。
按钮
标签
进行中
已归档
重点
草稿
分页
表格:只用发丝横线
| 编号 | 条目 | 计数 |
|---|
| 01 | 网格 | 12 |
| 02 | 沟槽 | 24 |
| 03 | 主基线 | 24 |
| 04 | 子网格 | 8 |
提示条:左侧 2px 结构红,不铺底。焦点环用 accent,对比 ≥3:1。
导航
04
数据图元:等大计数 + 小倍数图
Isotype 用重复等大图元表数量,永不放大单个图元;Small multiples 同一坐标系重复小图便于比较。
Isotype · 等大图元
1 图元 = 250 件 · 8 图元 = 2000 件
Small multiples · 细灰柱,红只标一个高亮点
A 区
42
B 区
37
C 区
28
D 区
51
05
五套版式骨架
海报 / deck / 跨页 / 报告封面 / 落地 hero,全部对齐 12 栏与单一左轴。本区首次进入视口时会触发一次网格显影。
PosterNo 01
海报
骨架
日期 · 地点 · 编号
占位信息块
1 海报 · A 系列 1:√2
No 02Deck幻灯片16:9
幻灯片
骨架
页眉四点轴 · 大标题靠上三分之一 · 正文单栏 measure · 页脚四栏。
2 Deck · 16:9
右页正文单栏,measure 控制在 30–36 个汉字;行高取主基线整数倍,跨字号注册到同一模块。
3 跨页 · 4 字段
落地 hero 骨架
左标题右几何的不对称构图;下方规则线 + 四栏价值点。
5 落地 hero · 12 栏响应式