# 瑞士网格网页（Swiss Grid Web Design）

镜语 · 版式与界面 / 布局方式

- 别名：瑞士风网页、国际主义网页、网格系统、Swiss Style Web、Grid System
- 口语：「很理性很整齐的网格网页」「巨大的黑色字加一点红」「像设计学院的作品集」
- 一句话：严格的多栏网格、左对齐巨大无衬线标题、红黑白配色和编号
- 是什么：瑞士网格网页把 1950 年代瑞士国际主义平面设计带到屏幕：严格的多栏网格、左对齐的无衬线字、巨大的标题和小字之间的强烈对比、编号和细线，配色常是黑白加一种红。网格不只是隐形的辅助线，元素的位置都由它决定
- 缺了就不像：严格多栏网格；左对齐无衬线大标题；大小字强烈对比
- 加了更像：红黑白配色；编号与细线；不对称版面
- 适合用在：设计师、建筑师和摄影师作品集；展览、讲座和文化机构网页；视频里的数据、标题排版，需要理性和秩序感
- 看哪里：点右上角「显示网格」，红色的栏会显示出来：标题、照片、编号和作品列表的边缘都对齐在栏线上。标题巨大而紧凑，小字信息排成一行一行的表格感；悬停作品名时右侧照片和编号同步切换
- 注意：只用了 Helvetica 却没有网格，并不是瑞士风格；手机上 12 栏要收成 4 栏重新排，而不是缩小
- 描述示例：做一个瑞士国际主义网格风格（Swiss Grid）的个人作品集首页：浅灰白 #f4f4f0 背景，12 栏网格、统一栏间距；顶部一条 2px 黑线上方是四组小字信息，各占 3 栏；左侧 7 栏放超大号紧凑的 Helvetica／黑体粗体标题「城市之光.」，句点是红色 #e30613；右侧 5 栏放一张 4:3 照片和带红色编号的小字图注；底部一条黑线下按 4 列排作品编号、时间和名字，悬停时编号变红、出现箭头；全部左对齐，没有圆角和阴影
- 易混：
  - [瑞士国际主义平面](https://idea.ameng.dev/terms/swiss-style.md)：瑞士国际主义平面是海报和印刷风格；瑞士网格网页是它在网页版式上的应用
  - [极简界面](https://idea.ameng.dev/terms/minimal-ui.md)：极简界面靠留白和少量元素；瑞士网格靠严格的栏位和大标题
- 相关：[杂志式排版](https://idea.ameng.dev/terms/editorial-layout.md)

## 来源与延伸阅读

- [Wikipedia · International Typographic Style](https://en.wikipedia.org/wiki/International_Typographic_Style)
- [Wikipedia · Grid (graphic design)](https://en.wikipedia.org/wiki/Grid_(graphic_design))

网页版（含演示）：https://idea.ameng.dev/terms/swiss-grid-web