用途
瑞士设计(Swiss Design,即国际主义排版风格)技能的用途是:当用户要求强网格系统、强排版表现、干净克制的界面视觉时,为 Web 和 App 实现提供一套设计风格参考与代码示范。资料明确说明它是 design-it 技能的子参考,不应被直接触发,而应在其父技能匹配到该美学诉求时被调用。
核心原则
- 数学网格:所有元素对齐到严格的底层网格,优先使用非对称布局,而非居中排版。
- 无衬线排版:以 Helvetica 为典型,任何干净、中性的无衬线字体均可;正文采用左对齐、右不对齐(flush left, ragged right)。
- 客观摄影:如使用图片,应为客观纪实风格照片,而非风格化插画。
视觉特征
- 颜色:极为克制,通常只有黑、白,外加一个高饱和强调色(常见为红、蓝或黄)。资料提到 Industrial Chic 调色板完全适用,但未展开其具体色值。
- 字体:Helvetica Neue、Inter 或 Roboto;字号对比强烈,例如 6rem 大标题配 1rem 正文。
- 布局:资料强调文字永远不要居中。
使用方式
资料给出的 Web 实现建议是大量使用 CSS Grid,让列来主导布局。示例代码包括:body 使用 #f4f4f4 背景、#111 文字色、Helvetica Neue 字体栈、line-height 1.4;.swiss-grid 为 12 列网格、20px 间距、40px 内边距;.swiss-header 跨 1 至 11 列(右端留空)、用 clamp(2rem, 6vw, 6rem) 控制字号、加粗、可选用小写、line-height 0.9、负字距 -0.04em;.swiss-content 从第 4 列到第 9 列形成缩进对齐、1.25rem 字号、左对齐;.swiss-accent 使用经典瑞士红 #E2001A。
App 端给出 SwiftUI 与 Flutter 示例。SwiftUI 部分:ScrollView 内使用 VStack(alignment: .leading) 逐层堆叠,标题使用 Helvetica Neue 60 号特粗、字距 -2,第二行用瑞士红;用 Divider 分隔;在 HStack 中先用 Spacer().frame(width: 40) 留出空白左列,以负空间作为结构,再放正文文本;整体背景 Color(white: 0.96)、前景黑色。资料强调处处使用 .leading 严格对齐,绝不使用 .center。Flutter 部分:Scaffold 背景 0xFFF4F4F4,SingleChildScrollView 内 Column 使用 CrossAxisAlignment.start,示例中展示了中文前的顶部留白与标题 Padding 结构,但资料在此处被截断。
适用场景
适用于需要严格网格、强排版层级、克制配色的 Web 页面或 App 界面实现,例如以文字为主导的信息型页面、需要非对称缩进网格与强字号对比的版式设计。
限制与缺失
资料未提供安装命令、收费方式、价格、平台支持范围、性能或兼容性说明,也未说明其与父技能的具体调用方式细节。SwiftUI 与 Flutter 示例代码在资料中不完整(SwiftUI 在 Flutter 段落开始前中断,Flutter 在文字样式参数处截断),使用时需自行补全。