国外有不少做B端产品的公司，Atlassian 是最有名的之一，国内外最受欢迎的研发管理系统 Jira 就是他们的产品。

而且这家公司特别注重设计，并整理了一套设计系统 Atlassian Design System，简称 ADS。

今天我就来分享一下，看完他们组件设计后的启发。

1.悬停颜色变鲜艳

虽然是个很小的点，但也挺有意思的。

不论 Ant 还是 Arco，国内设计大部分按钮都是悬停颜色变浅的：

Ant Design

Arco Design

但 ADS 的设计是悬停颜色变亮（鲜艳）：

ADS

仔细想想，颜色变浅看起来更像是灰掉了，变亮更合理一些，但这对配色的要求就更高了。

2.表头弱化

国内的表格设计大多表头最重：

Ant Design

Arco Design

ADS 的表头字号更小颜色更浅，虽然字体是更粗一些：

ADS

我可以理解 ADS 这种设计，因为我自己也经常这样干。如果用户能轻易地理解表格内容，那么确实没必要强调表头。

3.焦点态

国内的产品设计，基本上只有文本框才存在焦点态一说。

Ant Design

但是在国外设计系统里，很多其它的组件也会存在焦点态。

Carbon Design System

ADS 在这方面没有 IBM 那么严谨，但表单里的各种操作大多是有焦点态的：

ADS

这么做的好处是，刚点了哪里更清楚了，减少误操作的几率，但是开发成本会提高。当然，如果组件设计得好的话，也就前期麻烦一点。

4.焦点态与悬停态差异

国内的产品设计，焦点态和悬停态差异比较小，例如 Ant Design，焦点态也就比选中态多一点阴影：

Ant Design

这还算好的，我知道很多产品焦点态和悬停态根本没有差异。

ADS 的悬停态的变化较小，只是加深了一点背景色而已。焦点态的变化就大了，加了一个又亮又粗的边框：

ADS

ADS 用这么弱的悬停态，估计是为了跟其它表单操作统一，有些不适合用高亮色体现悬停态：

ADS

其实 Arco Design 也是这种弱悬停、重焦点的设计：

ADS

我感觉弱悬停态确实更合理一些，因为悬停态远远没有焦点态重要，这两者不应该过于相似。

5.删除tag的视觉反馈

Ant Design 和 Arco Design 的删除标签的反馈是这样的：

Ant Design

Arco Design

ADS 的反馈是这样的：

ADS

样式几乎差不多，然而 ADS 的关闭图标悬停时，背景会变红，暗示风险操作。

标签删除一般不会有二次确认弹窗，我感觉加这么个视觉暗示挺好的。

6. 空状态

国内的设计规范，空状态都是以图片为主，提供的文字和操作都很少：

Ant Design

Arco Design

但 ADS 的空状态却很少出现图片，主要以文字描述和操作按钮为主，几乎都有操作按钮：

ADS

我觉得这个体现出了两边设计师的侧重点，前者更注重美观，ADS 更注重信息的沟通和解决方案。

总结一下

总体上 ADS 这套设计系统和国内的几家设计系统相差不是特别大，但细节上整体做得更好。

毕竟人家更资深嘛，2002年公司就创立了，那时候国内 B 端企业还没萌芽呢。

国内的 B 端设计在短时间内突飞猛进，已经很不错了。

本文来自微信公众号“体验进阶”作者：设计师ZoeYZ（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。