IBM的Carbon设计系统果然不同凡响
全球知名的 B 端设计系统不多，IBM 的 Carbon Design System （后面简称 Carbon）算是其中之一。
上图来源：Carbon Design System 官网
别看 IBM 这么大一家公司，他们这个设计系统的公共开发从 2015 年才开始。
可能很多人对 IBM 的主要印象停留在个人电脑，而且很久之前就被联想收购了。
但 IBM 在一直是老牌 B 端大厂，看看他们的软件产品列表就知道了：
一般人看不懂，也用不上的那种。按道理说，他们设计的都是比较传统、资深的 B 端产品的了。
我还蛮好奇他们的设计系统是个什么样，所以最近研究了一下。
发现不看不知道，一看吓一跳。
他们的设计品质是真的高，但很多组件样式……不能说是违背常识，只能说是跟我们常见的差别有点大。
接下来我就拿常见组件举例说明一下。
按钮
绝大多数设计系统的按钮，都是一个框框中间加个文字，属于几乎没啥可创新的基本组件。
但 Carbon 的按钮，还真是和我们以为的不一样。
首先，它是规定文本左对齐的。这个就很神奇了，因为无论国内外的设计系统，大部分都是居中的。
它的图标是放在右侧。这个也很奇特，因为其它大部分设计系统，都会把图标放在文字左侧，确保两者能靠在一起。
而且规定同一组按钮必须相互等宽。
处于角落的按钮，可以直接去掉与按钮边缘的间距。
表格
从上面那张图，你就能看出 Carbon 表单的特别之处了。操作图表和按钮放在表格右上角，和表头之间没有任何间隙。
看着还挺简洁大气的，但也没有啥特别奇怪的。
但真正让我惊讶的，是表格下面的分页器。
不知道你是不是和我一样，第一眼看到这个分页器时，有点没看太懂。
左边其实是选择每页展示多少行的，旁边的灰字表示总共有多少行。
右边是选择当前处在第几页的，旁边还写了总共多少页，最右侧两个箭头是翻页的按钮。
把我们熟悉一些的 Ant Design 拿出来对比一下，是不是差别还挺大？
上图来自于 Ant Design 官网提供的模板
它的表格搜索和多选操作挺有意思的。
同样拿 Ant Design 对比一下，感觉 Carbon 这个还挺简洁干练。
上图来自于 Ant Design 官网提供的模板
表单
文本框的样式挺清量的，都是标题用小灰字放在左上方，输入框只有下划线描边。
要说有什么特别的，就是错误提示可能引起布局偏移。
很多设计规范都会尽量避免这种布局偏移，尤其考虑到两个输入框并排的情况，这么一偏移就比较复杂了。
像是 Ant Design 就通过拉大文本框之间的间距避免了这种偏移。
上图来自于 Ant Design 官网提供的模板
进度条
Carbon 的进度条设计，我觉得充分体现了 IBM 作为老牌 B 端大厂的谨慎。
五种状态，两种布局，简单清晰，除此之外没有多余的东西。
亮点在细节
把 Carbon 官网逛一遍后，最令我印象深刻的，倒不是样式和布局有什么特别的。
反倒是一些设计细节，让我感觉 IBM 的设计师还真是不简单的。
选中态
现在很少见到网页端用选中态了，能把悬停态做出来就算很用心了，连悬停态都没有的一大把。
但是不得不说，有选中态的交互，用起来就是要舒服一些。刚刚点了哪里一目了然，不存在刚点了哪里想不起来的情况。
Carbon 对这种细节的追求，体现了很好的设计素质。
以现在国内绝大多数公司（包括很多大厂）的情况，如果提出要做选中态，开发可能以为你故意找茬。
点击区
这个东西我记得早几年的时候，浏览器会用虚线给你标出来。
后来可能是因为不好看，就去掉了。
再后来触屏兴起，点击区又回来了。否则在没有鼠标指针暗示的情况下，你可能自始至终不知道哪里可以点。
点击区这个东西虽然有点破坏颜值，但有的话，对体验确实有帮助。
不然苹果给 iPad Pro 适配鼠标时，怎么会花那么大力气设计点击区的展示效果呢：iPad这个设计，确认苹果依旧在引领行业
其它细节
这是我第一次看到有默认选项的菜单，仔细想想，有时候可能还真是挺有用的。
对字段展示不全的处理方法，也考虑周到。
大部分的组件，悬停时顶多换个颜色，做出放大效果的很少。
而且拖完之后依旧没忘记给个选中态。
页签直接给出放不下的处理方法，而不是简单地要求设计时少放几个页签。
总结
我刚开始看 Carbon 时，觉得就是一个比较简洁的 B 端规范，没啥大不了，甚至有的地方还违背我自己的经验常识。
但是仔细去研究，才发现这套设计系统在细节的精妙之处。