背景故事

我是一个几乎不会 js/ts 语法的工程师，只能勉强看懂这些 node.js 工程写了些啥，而且相当吃力。

好在 AI 非常擅长编写 js/ts，让我依然可以构建一些简单的前端工程。

最近在琢磨从零构建一个庞大的桌面软件项目，所以由表及里在重头梳理整个交互链路，那么最表层就是 UI^{[^UI]} 展现。

两三年前有用到库

了解到 Home - Fluent 2 Design System ，知道了世界上有一堆大家规定好的设计系统，所以现在需要寻找到一个合理的设计系统并真正开始如何思考用户交互的 UI 展现中使用它。

众所周知，微软的 UI 设计一直备受诟病，我不打算使用有一定了解的 Fluent，转而深入学习 Carbon Design System。

情报来自某位不认识网友的博客 自新世界 #0x15：Carbon Design System | 新世界的大门。

Carbon 是 IBM 的设计系统，并基础地用在官网上 IBM，可以去预览观摩。以下是我基本了解的设计系统，以及一些特征。

• Fluent：微软的设计系统，具有大多数生态的组件，针对微软桌面 UWP 软件强制执行。但是哪怕他的官网也没有正确使用该设计系统。
• Material：谷歌的设计系统，具有大多数生态的组件，虽说是移动优先，在桌面上也有不错的体验。体感上比较优雅，缺点是代数过多且都叫 Material，部分实现套件是旧版设计，但初用难以发觉。
• Apple：Apple Human Interface Guidelines，苹果只有一套设计指南，而不具有全平台的设计套件，其中很多内容仅在苹果生态中可以无缝使用，其他平台则只能寻找大神模仿的实现。
• Carbon：IBM 的设计系统，官方仅有 web 系生态的套件，在 IBM 官网和大多数软件中强制执行，在桌面和移动端都有统一而不优雅的体验。

为什么使用 Carbon

因为他是一套基本完备的强制执行标准，我不是专业设计师，即使有一定审美(骄傲脸，也难以描述心中想要的设计，需要强制约束整个设计来统一视觉。

而且他原生体验效果还不错。此处拉踩 Fluent，原生不改色的话，完全没眼看，当然他也没有强制颜色标准。

Material 当然也是非常漂亮，但是比起 Carbon 总归缺少一些硬朗稳重。

强制约束减少了用户趣味性，也会增强可靠感，用在工业 UI 设计上 Carbon 应该是我最好的选择。

设计的目的

UI 设计的最终目的是让用户觉得好用，这需要用真实用户数据才能真正衡量。

在开发过程中，我们能做到的只有尽可能

• 统一视觉效果
• 做到最小惊讶
• 注意力引导
• 多设备支持

做到这些力所能及的事情，下面会以这些可达点分析我用到的 Carbon。

正在使用中学习

元素(Elements)

2x Grid

2x 网格的核心概念是乘以二或除以二，形成视觉韵律。流式网格通过除法构建，而固定网格通过乘法构建。在断点边界处，这些尺寸是匹配的。

这是一个有关排版的强制规定，从官网可以看出来，除了 hero 内容，其他所有容器全都是对齐的。

在于其对于排版都强制要求为 8px 的倍数，并给出了几套可靠的参考参数。

Color

应用配色方案为 IBM 的一系列数字产品和界面带来了统一且可识别的一致性。这种一致性基于一套明确定义的规则，规定了在暗色和亮色主题下如何使用 Carbon 组件库。

这套低丰富无自由的颜色体系用于所有界面和组件。带来统一的色彩体验，非常固定但确实最小惊讶。

在 IBM 官网可见，除了 hero 与视频，所有的文字/组件内容的颜色均来自优先的十来个颜色。

这套颜色系统是我研究比较深刻且被实装在官网项目中的，提取可见 carbon-vars.css。

Icons

这个不必说，一个图标库而已。Carbon 开源可以直接拿来用

Pictograms

一个 big-size 图标库。

Motion

几个运动曲线，虽然我没看到 IBM 在哪里用到动效。

Other

仍在学习

指南(guidelines)

Accessibility

无障碍指导了如何支持不同环境/不同限制的用户。

其明确必须有依赖键盘导航的支持，以及如何通过强制规定实现，操作上就是使用 TAB 键可以在每个可操作组件中切换，且组件必须有相应的指示反映。

这一点在 IBM 或 Apple 官网都可以尝试，他们居然真的是支持的。

Other

仍在学习

组件(components)

Overview

直接看概述了解相关组件就好，从实现中品味 Carbon 的设计哲学。

此处拉踩 Fluent，那玩意概述里演示的效果和组件页演示居然完全不一样。

此处演示 Button 在明暗主题中的差别，最伟大的地方是，组件色在暗色和明亮中居然是不变的，而且能形成不错的显示效果。

patterns

仍在学习

另记

Carbon 大概是现代唯一对使用圆角极其克制的设计系统了。

有 Carbon MCP 可以申请使用，我大概申请后两周获得了许可。

因为没有提前阅读并许可协议，所以处理了两封邮件才获得授权码，如果提前许可协议，将会提前数天拿到。Carbon MCP & Early Cloud Services

我申请到的 MCP 授权，可试用，放在这里一个月后删除 26.4.24