跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

瑞士风格

Swiss Style

别名:瑞士风格瑞士平面设计国际主义排版风格网格排版风格黑白红海报风Helvetica风格International Typographic StyleSwiss Design

这是什么

以客观网格与排版传达信息的视觉语言:严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色(经典为红),用留白与字号对比建立秩序。装饰被视为噪音, 设计的目标是让信息以最短的路径被读懂。

开发规格

字体

Helvetica 式无衬线,全大写粗黑标题

色彩

纸灰底 × 纯黑 × 正红 #E63312

边框

1px 黑色实线分割栏

阴影

无阴影,扁平到极致

间距

严格网格,栏距一致

动效

近似瞬时,颜色切换在 100ms 内,无缓动位移

状态反馈

hover 改用正红或反白;focus 用 2px 黑色可见实线框;active 反色块;disabled 降为灰;error 用正红并加粗

风格演示

同一张页面,直接操作

探索项目进入精选作品;打开 NORTH / OPEN / FORM 案例并返回;菜单到达 WORK / STUDIO / APPROACH / CONTACT。联系表单校验姓名、邮箱、简介并显示可继续修改的整理结果,不发送邮件;语言入口切换中英文同款页。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 VERTEX 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 VERTEX 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 设计系统 博物馆 文化机构,需要客观严谨的秩序感
  • 数据 技术文档 目录类内容,结构化信息为主
  • 海报 期刊封面等需要强烈排版张力的场景

✕ 不适用场景

  • 品牌需要亲和 温暖或娱乐化的情绪
  • 内容零散无结构,网格反而放大凌乱感
  • 中文与衬线混排为主的阅读场景,风格语言不匹配

常见形式

苏黎世学派

Zurich School

Josef Müller-Brockmann 的严格模数网格

巴塞尔学派

Basel School

Emil Ruder 与 Armin Hofmann,更重字体排印节奏

新瑞士

New Swiss

当代网页化的瑞士风,等宽字与细线引入

实现要点

gridfont-family: Helveticatext-align: leftletter-spacingborder-top: 2px solid

先立网格:12 列或简单 3×3,所有元素吸附网格线,禁止任意间距。字体只用 一套无衬线(Helvetica/Inter/Neue Haas),层级靠字号跳跃(如 12/48px) 而非加粗渐变;正文左对齐,禁用居中排版。色彩为黑 白 灰 + 单一强调红, 红只出现在标题标号与关键线上。分隔用粗细两种横线(2px/1px)。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 VERTEX 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致;首屏结构、实际导航与素材以 ReferenceStyleScene 为准。

直接复用 .vertex-body 的 grid-template-columns: 49% 27% 24%,保留左侧 IDEAS / BUILD / TOMORROW 大字、中间说明与右侧 #ff3511 整块海报。展示字用现有 Atlas Heavy(Anton)/ Atlas Display / Impact 压缩字体栈;左字 8.1cqw、line-height .95,海报字 3.65cqw,正文沿用 Arial 无衬线与 1px 栏线。保留现有字面横向拉伸,不缩放整页。项目延续区用三列案例与红/黑/纸灰案例图,600px 以下首屏与项目改为单列。不要另建 12 列 44px Helvetica 区块,也不要把红色限制为编号/细线;dark/variants 使用现有文档模式选择器。

完整页面操作:
探索项目进入精选作品;打开 NORTH / OPEN / FORM 案例并返回;菜单到达 WORK / STUDIO / APPROACH / CONTACT。联系表单校验姓名、邮箱、简介并显示可继续修改的整理结果,不发送邮件;语言入口切换中英文同款页。

静态封面、详情演示与 /style-scenes/swiss-style/(英文 /en/style-scenes/swiss-style/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

极简主义Minimalism

以"少即是多"为准则的视觉语言:用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身,删除一切装饰性元素,层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。

风格相似概念
杂志编辑风Editorial

把页面当作杂志版面经营的视觉语言:衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线,图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配, 用版式语言讲故事,而非用装饰堆砌氛围。

风格相似概念
包豪斯Bauhaus

用基础几何与三原色做构成游戏的视觉语言:圆 三角 方三种形状,红 黄 蓝 三原色加黑,不对称但平衡的构图,装饰服从功能。每一块色面与线条都参与 结构,海报像一场几何关系的研究。

风格相似概念
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件
表格Table

用行与列精确对齐数据的二维表格:一行一条记录、一列一个字段,适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中,列头通常带排序控制。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON