秩序是方法，清晰是结果。
先组织信息，再决定视觉。所有形式都应回答：它帮助读者理解了什么？
瑞士风格，也称国际主义平面设计风格，强调理性组织、字体表达与信息的可读性。Josef Müller-Brockmann 是其中的重要代表，其构成与功能原则在 1950—1960 年代的实践中形成广泛影响。[1]
信息先于装饰
视觉用于表达优先级、关系和顺序。删掉一个元素后若信息没有损失，就重新评估它存在的必要。
网格先于摆放
文字、图像和动作共享对齐线。不对称建立在可重复的结构上；并不等于随意错位。
字体承担表达
通过字号、字重、行距和位置组织内容。标题可以大胆，正文保持安静、稳定和易读。
色彩有明确职责
黑白决定阅读层级，强调色指向关键行动或重点信息。避免同时出现多个竞争的视觉中心。
留白说明关系
同组内容距离更近，跨组内容距离更远。留白是信息结构的一部分，并非剩余空间。
规则可以解释
同类内容使用同类样式。破格需要清晰的内容理由，并记录影响范围与替代方案。
规范强度
满足阅读与操作要求：可读对比、可见焦点、语义结构、统一对齐、明确状态。
沿用字体、网格、间距与单色强调规则。偏离时说明内容或场景原因。
使用几何构成、超大标题、黑白摄影。仅在它们有助于表达时加入。
与相邻风格的判断区别
| 风格 | 主要判断依据 | 本系统的取舍 |
|---|---|---|
| 瑞士风格 | 网格组织、字体主导、客观表达与不对称秩序。 | 追求可解释的信息结构，而非空白越多越好。 |
| 极简主义 | 减少形式与元素，是更宽泛的表达取向。 | 信息密集的表格也可以符合瑞士风格。 |
| 包豪斯 | 强调艺术、工艺与功能的联系；几何与原色是常见视觉联想。 | 避免把红黄蓝、几何字或三角形当作必要配方。 |
| 新野兽派 | 常以粗边框、强烈色块、夸张形式与显性个性吸引注意。 | 不采用硬偏移阴影、粗描边卡片与刻意的粗粝感。 |
以上用于项目判断，不是对各流派所有作品的完整定义。它们有历史联系，也可能共享部分视觉语言。
以字体建立整个阅读系统。
优先选择新怪诞无衬线字体。一个拉丁字体家族，加一个匹配的中文家族，足够构建主要层级。
Helvetica / Neue Haas Grotesk
也可选择 Univers 或 Akzidenz-Grotesk。选定一个家族贯穿项目，使用真实字重；不要在同一页面混用多个近似无衬线家族。
思源黑体 / Noto Sans CJK
中文保持中性的黑体结构。系统回退可用苹方或微软雅黑。中文字体承担中文字符，拉丁字母优先使用前面的拉丁家族。
数字界面字号阶梯
以下为桌面基准，单位为 CSS px。字号以 rem 实现；Display 在移动端降为 48–64px，其余按内容调整而非整体缩放。
| 角色 / Token | 字号 / 行高 | 字重 | 字距 | 用途 |
|---|---|---|---|---|
Display / --text-display | 80 / 80 | 600 | 拉丁 −0.04em；中文 0 | 封面与短主视觉标题 |
H1 / --text-h1 | 48 / 56 | 600 | 拉丁 −0.03em；中文 0 | 页面主标题 |
H2 / --text-h2 | 32 / 40 | 600 | 拉丁 −0.02em；中文 0 | 章节标题 |
H3 / --text-h3 | 24 / 32 | 500 / 600 | 0 | 内容组标题 |
Lead / --text-lead | 20 / 32 | 400 | 0 | 导语、摘要 |
Body / --text-body | 16 / 28 | 400 | 0 | 中文阅读正文；英文可用 24px 行高 |
UI / --text-ui | 14 / 20 | 400 / 500 | 0 | 按钮、标签、表格 |
Caption / --text-caption | 12 / 20 | 400 | 0 | 辅助说明，不承担关键操作内容 |
中英文混排细则
左对齐，右边自然参差。正文不强行两端对齐；控制行宽，避免尾行只有一两个字。英文长文以约 45–75 个字符为起点；中文以约 25–40 字为起点，实际按字号与屏幕验证。
按语言处理字距。拉丁大标题可轻微收紧；中文正文不施加负字距。英文大写眉题可用 0.08–0.12em，中文标签一般保持 0。
数字使用等宽数字。表格和指标设置 font-variant-numeric: tabular-nums，避免数值更新时左右跳动。
标点一致。中文句子使用全角标点，代码、URL、版本号使用半角。中文与英文或数字之间保留合理空隙；避免标题在标点或单位中间断行。
字重控制在三个以内。常用 400 / 500 / 600。确认字体文件支持实际字重；不得依靠浏览器合成粗体或把字形横向压缩。
不强制同屏同尺寸。中文与拉丁字体的视觉体量可能不同。用真实文案校正字号、基线与行高，不以单个 “Aa” 样本决定全部排版。
font-display: swap，并验证字体替换后的换行。网格藏在背后，对齐显在前面。
以模块构建页面，用列、栏间距与外边距确定关系。读者看到的是清晰内容，而非网格本身。
creates clarity.
时间 / 分类 / 编号
3 columns
BODY: 6 COL
响应式基准
| 视口宽度 | 主内容栏数 | 栏间距 | 外边距 | 布局策略 |
|---|---|---|---|---|
| ≥ 1200px | 12 栏 | 24px | 48px 起 | 内容容器最大 1200px；可有独立目录侧栏。 |
| 600–1199px | 8 栏 | 20px | 32px | 压缩次级信息；双列内容可按需求改为单列。 |
| < 600px | 4 栏 | 16px | 20px | 目录折叠；保持源代码阅读顺序；动作换行。 |
例：1200px 内容容器，12 栏，24px 栏间距 → 每栏 78px。跨 4 栏模块宽度 = 4 × 78 + 3 × 24 = 384px。容器宽度已扣除外边距；断点以视口为基准。
模块与垂直节奏
使用 4px 尺寸基准；以 8px 或 12px 倍数组织主要间距。不同字号通过行高形成稳定节奏，网页不强迫所有文字贴合僵硬的逐行基线。
内容驱动的断点
在标题开始挤压、控件换行异常或正文过窄时提前调整布局。断点是项目参数；复杂数据表允许局部横向滚动，不让整页产生横向滚动。
黑白建立秩序，红色指明重点。
一个页面采用一种品牌强调色。让色彩承担职责，而非承担热闹。
Muted / #5F5F5F
辅助正文、说明
Control / #767676
控件边框、必要识别线
Line / #D8D8D8
非必要分隔线
Surface / #F4F4F4
表头、轻层次背景
色彩的使用边界
推荐比例：浅色页面可从白 / 浅灰约 80%、黑 / 深灰约 15%、强调色约 5% 开始。它是平衡检查，不是面积配额；海报主视觉允许大面积强调色。
同一任务区域优先一个主动作。红色用于主行动、当前项、关键数据或错误提示。动作和错误可以共享色系，但必须靠文字、图标与位置说明不同含义。
状态色例外：默认用黑白加图标、文字表达成功与等待。复杂业务确需独立语义色时，可增加受控语义色；必须记录用途、对比值，且避免用作装饰。
禁止：渐变、发光、彩色阴影、透明文字叠在复杂图像上；关键文字不得使用浅灰。不要为每个分类分配一种高饱和颜色。
请输入有效的 6 位十六进制色值，例如 #111111。
数值按 WCAG 相对亮度计算，显示至两位小数，判定使用未四舍五入的值。白底下：Ink 18.88:1；Muted 6.39:1；Signal 5.17:1。浅分隔线不能替代需被识别的控件边界。[4]
用距离，让内容成为一组。
以 4px 为最小间距基准。1px 与 2px 用于边框、分隔线和图标笔画，不进入布局间距阶梯。
| 关系 | 推荐间距 | 操作规则 |
|---|---|---|
| 字段标签 → 输入框 | 8px | 标签保持与输入框顶部关联。 |
| 输入框 → 辅助 / 错误文字 | 8px | 错误替换或补充辅助文字，不遮挡下一项。 |
| 标题 → 同组正文 | 12–16px | 小于正文组之间的间距。 |
| 同组动作之间 | 12px | 保持主次动作关系，允许换行。 |
| 模块内边距 | 24px；移动端 20px | 标题、正文与动作共享模块左边线。 |
| 章节之间 | 64–96px | 按内容密度调整，移动端收至 40–48px。 |
0px
容器与按钮默认直角。圆形保留给头像、必要图标或几何构成，不扩散到所有组件。
1px / 2px
边框常用 1px；选中与错误可用 2px，预留盒模型空间。焦点使用独立的 3px 外轮廓。
None
不用阴影区分层级。改用实体背景、边界、留白和位置；弹窗可用平涂半透明遮罩。
一眼找到重点，再逐层读懂。
通过位置、比例与留白形成层级。同一区域不要同时放大字号、加粗、着色、描边和加图标。
message clear.
is important.
第一层：主信息。回答“这是什么”“为什么与我有关”。主标题一处，尽量在两至三行内形成清晰形状。
第二层：理解信息。副标题、摘要、图像与数据提供证据。它们和主标题共享对齐关系，体量明显低于主标题。
第三层：辅助信息。分类、日期、编号、版权等收在固定位置。可以使用小字号，但不能依靠低对比隐藏重要内容。
不对称平衡。主内容跨 7–8 栏，辅助信息跨 3–4 栏；通过空栏、字号和图像面积平衡重量。视觉中心不必位于画面中心。
一个稳定阅读轴。同组标题、正文、表格与动作左边线一致。长正文不居中；短封面文字若确有构图需要，可另设独立规则。
先验证真实内容。以最长标题、空状态、错误文本及中英文混排检查布局。禁止靠固定高度裁掉正文，或靠缩小关键字号解决溢出。
图像提供内容，几何表达关系。
优先黑白摄影与必要的简单几何构成。避免为了填满空白而添加无意义插画。
清晰、客观、可解释
- 选用与主题直接相关的真实人物、产品、建筑或场景；减少摆拍式情绪照片。
- 黑白处理保留中间调和主体细节，避免黑部堵塞、亮部过曝。产品颜色若承担信息，允许保留彩色。
- 图像边界对齐网格，跨栏遵循模块比例；封面优先 3:2 或 4:3，人物可用 4:5。
- 裁切围绕主体和阅读方向；不得裁掉理解所需的部分。用图注提供地点、时间或出处。
圆、矩形、线与重复
使用基本形状表示节奏、比例、数量或方向。允许依据构图需要裁切；默认不加拟物细节、纹理、透视阴影与立体高光。
圆角为 0 的组件规范，不约束内容本身的圆形几何图案。
图标规范
统一使用一个 SVG 图标体系；常用 16 / 20 / 24px，描边 1.5–2px，保持端点和视觉重量一致。图标与文字间距 8px。仅图标按钮必须有可访问名称；优先在重要动作旁保留文字。品牌表达不使用 Emoji。
alt="" 或 aria-hidden="true"。复杂图表配文字说明或数据表。不要把真实文字烘焙进图片以替代页面正文。克制的表面，完整的状态。
以下演示可操作。组件的默认、悬停、焦点、选中、禁用、加载、错误与成功状态都应被定义。
主按钮使用强调色，次按钮使用实体边框。普通按钮至少高 44px；紧凑场景可用 36px，触屏优先 44px。文本动作保持明确的可点击线索；禁用说明其原因，避免让用户猜测。
表单结构
使用持续可见的标签；占位文字只提供示例。标签 14px，输入框至少高 44px。说明与错误通过 aria-describedby 关联；验证失败设置 aria-invalid="true"，聚焦第一个错误字段。
选择控件
复选框用于多选，单选框用于互斥选择，开关用于立即生效的二元设置。开关提供文字状态，不能只靠按钮左右位置或红色区分。
什么时候使用折叠面板？
用于相关但次要的信息。默认展开关键流程所需的说明，避免把重要错误或必填信息藏在折叠面板中。
反馈强度与任务匹配
轻量完成反馈可用短暂提示；重要结果保留在页面内。阻断或不可逆操作才需要确认弹窗。正文信息用 role="status" 温和播报；紧急错误按需要使用 role="alert"。
状态矩阵
| 状态 | 按钮 / 链接 | 输入 / 选择 | 可访问行为 |
|---|---|---|---|
| 默认 | 明确文字与主次层级。 | 可见标签、边界与已选值。 | 使用原生元素，支持键盘。 |
| 悬停 / 按下 | 实体色变化，无位移或缩放。 | 边界可加深，保留文字对比。 | 悬停不承载唯一提示。 |
| 焦点 | 3px 外轮廓，与控件间距 4px。 | 轮廓在浅色区域清晰可见。 | Tab 顺序合理，焦点不被顶栏遮挡。 |
| 选中 | 文字 + 实体线 / 形状标识。 | 勾选或实心点 + 标签。 | 正确设置 selected / checked / current。 |
| 禁用 | 低强调样式，说明不可用原因。 | 保持值可理解；只读与禁用区分。 | 原生 disabled；需可发现时使用受控 aria-disabled。 |
| 加载 | 保留宽度，显示动作进行中。 | 保留输入内容，避免重复提交。 | aria-busy + 状态播报；不要无提示地锁死。 |
| 错误 / 成功 | 结果反馈定位到对应任务。 | 错误文字靠近字段，成功不只靠颜色。 | 错误可定位、可修复；保留用户输入。 |
容器、导航与弹层
容器与导航
优先用分隔线与留白组织内容。仅当整个内容单元确实可独立理解时使用有边框容器。导航当前项用左侧线或底线，并设置 aria-current。Tabs 提供方向键、Home / End 与正确语义。
弹窗与菜单
平面白色容器、1px 边界与纯色遮罩，无阴影。弹窗进入时设置焦点，限制在弹层内，支持 Escape；关闭后返回触发按钮。仅移动展示位置，不改变任务阅读顺序。
只为解释变化而运动。
动效帮助确认反馈与空间关系。瑞士风格的稳定结构，应延伸到操作过程。
| 用途 | 时长 | 方式 |
|---|---|---|
| 颜色、边框反馈 | 120–160ms | ease-out；不改变按钮尺寸和位置。 |
| 菜单、轻量内容显隐 | 160–200ms | 短距离平移或直接显隐；保留焦点关系。 |
| 结构变化 | 200–240ms | 仅在运动能解释位置变化时使用。 |
| 减少动态效果 | 0ms | 尊重 prefers-reduced-motion；保留状态文字。 |
任务状态必须完整
- 空状态：解释当前为空的原因，给一个相关下一步。
- 加载：保留布局与内容位置；提供状态，不无限闪烁骨架屏。
- 失败：说明发生了什么、用户能做什么；必要时提供重试。
- 成功：确认结果；重要内容保留，避免唯一反馈瞬间消失。
交互禁区
- 不使用弹跳、果冻、悬停旋转和装饰性视差。
- 不把必须的信息只放进 tooltip 或 hover 状态。
- 不自动播放干扰阅读的内容，不劫持滚动方向。
- 不使用渐变闪烁、发光和阴影动画；焦点反馈不得被隐藏。
数据先说明关系，再表达风格。
单位、时间范围与比较基准必须可见。一个强调色突出重点，其他数据保持中性。
字号体现层级，单位说明含义。指标不使用夸张阴影或计数跳动；比较信息使用“较上一年增加 12%”等明确语言，不能只放红绿箭头。
需要展示构成时，可采用排序条形图或堆叠条。多系列用线型、直接标签和受控灰阶区分；必要时开放语义色例外。
表格规则
| 项目 | 状态 | 完成项 | 完成率 |
|---|---|---|---|
| 视觉系统 | 已完成 | 24 | 100% |
| 组件文档 | ◷ 进行中 | 18 | 75% |
| 上线验证 | — 待开始 | 0 | 0% |
- 文本左对齐，数值右对齐；小数位、千位分隔与单位保持一致。
- 行高从 48px 起，紧凑表格可用 40px；交互区域仍满足目标尺寸要求。
- 表头清晰，优先横向分隔；不依靠所有单元格的重边框建立秩序。
- 条形图通常从零开始；其他图表若截断坐标，明确标注。不同项目使用一致量尺。
- 移动端可局部滚动并保留表头语义；关键数据不藏到只有悬停才可见的提示中。
清晰必须同时可见、可读、可操作。
以 WCAG 2.2 AA 为交付目标。下列项目是关键设计检查，并不构成对所有准则的完整覆盖或认证。
| 项目 | 标准 / 本系统选择 | 验证方式 |
|---|---|---|
| 普通文字 | 对比度至少 4.5:1；本系统辅助文字仍保持可读。 | 测量真实前景色与背景色。[4] |
| 大字 | 至少 3:1；大字指 ≥ 18pt（约 24px），或 ≥ 14pt（约 18.67px）粗体。 | 只有符合尺寸与字重条件才使用大字阈值。 |
| 必要图形 / 控件识别 | 与相邻背景至少 3:1；非必要分隔线不适用同样阈值。 | 检查输入边界、选中标识与焦点。[5] |
| 指针目标 | WCAG 2.2 AA 最低 24 × 24 CSS px，存在间距等例外；本系统主要控件推荐 44 × 44px。 | 测量实际可点区域；44px 是本系统优选，并非 AA 统一最低值。[6] |
| 缩放与重排 | 文字缩放 200% 可用；通常在 320 CSS px 宽度重排无需双向滚动，必要表格等有例外。 | 实际缩放与窄视口测试，检查标题、导航和表单。 |
| 键盘与焦点 | 所有功能可通过键盘使用；焦点可见、顺序正确且不被固定区域完全遮住。 | 仅用键盘完成主要任务；检查弹窗进出焦点。 |
| 颜色与状态 | 颜色不是唯一信息；必须提供文字、符号或形状。 | 灰阶查看后仍能识别选中、错误与数据关系。 |
| 结构与播报 | 标题层级、地标、控件名称、标签关联与动态状态合理。 | 检查可访问树与读屏反馈，避免滥用 aria。 |
文案的瑞士风格
保存修改
“请输入项目名称。”
“已保存。你可以继续编辑。”
“暂时无法连接，请稍后重试。”
即刻解锁无限可能
避免抽象口号替代操作说明。按钮不用“好的”“继续”掩盖关键后果；错误提示不用代码或内部术语替代修复方法。
标题交代主题，正文提供事实，按钮说明动作。单位、时间范围与操作结果写完整。使用稳定术语表：同一功能不要在不同位置交替使用“提交”“发布”“保存”。
同一种视觉语法，两种信息密度。
海报通过比例形成记忆，产品通过结构支撑任务。二者共享字体、对齐、色彩与平面质感。
Order.
Form.
Meaning.
展览视觉概念 / 示例
TYPE + GEOMETRY
项目概览.
以统一尺度理解进展。以下为示例数据。
从规范落到项目的顺序
| 步骤 | 决策 | 产出 |
|---|---|---|
| 01 / 信息 | 确认读者、任务、内容优先级与真实文案。 | 内容结构与阅读 / 操作路径。 |
| 02 / 结构 | 确定版心、网格、对齐轴与响应式行为。 | 低保真布局与最长内容测试。 |
| 03 / 语法 | 确定字体家族、层级、强调色与间距变量。 | 基础变量与组件规范。 |
| 04 / 状态 | 设计空、加载、成功、失败及键盘行为。 | 可交互原型与状态矩阵。 |
| 05 / 验证 | 检查可读性、操作目标、缩放与真实设备。 | 检查记录、例外说明与交付版本。 |
把设计决策写成可复用的变量。
以下是建议的产品基准，而非本指南每个展示性标题的尺寸。导出包含基础值、语义值与响应式规则。
实现约定
基础值 → 语义值 → 组件
用 --color-ink 定义原始色，用 --text-primary 引用正文角色，再由组件引用语义角色。不要在组件里重复硬编码色值或为每次微调新建近似变量。
按语言与场景覆盖
拉丁标题的负字距只应用于明确语言节点。中文保持 0。展示标题可基于字号阶梯设置场景覆盖，但正文与操作字号保持稳定。
导出的 JSON 是便于项目接入的普通嵌套变量格式，未声明遵循某个工具专属格式。若接入 Figma、Style Dictionary 或其他工具，按其 schema 映射；同一源文件维护颜色、字号、间距与响应式参数。
交付之前，逐项确认。
勾选代表你已完成验证。清单仅保留在当前页面会话，刷新后重置；它不替代实际设备和无障碍测试。
理解来源，维护一致。
历史资料用于理解设计思想；W3C 文档用于校准无障碍要求。具体数值由本系统定义并经项目验证。
版本与例外管理
统一负责人：由设计系统维护者管理变量与组件，设计与开发共同评审。新增规则先在一个真实场景中验证，再进入公共规范。
变更记录：记录版本、日期、影响组件、调整原因与迁移方式。字号、品牌色与断点变化应同步设计稿、代码和文档，避免同名变量含义漂移。
例外记录：说明目标、受影响页面、偏离项、可读性 / 操作验证与回收条件。装饰偏好不构成默认例外理由；内容、功能和媒介差异可以。