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