🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
查看原文
其他

国外B端大厂设计系统，比国内更强吗？

设计师ZoeYZ 体验进阶 2023-02-28
收录于合集
#设计案例 59 个
#B端 26 个
国外有不少做B端产品的公司，Atlassian 是最有名的之一，国内外最受欢迎的研发管理系统 Jira 就是他们的产品。

而且这家公司特别注重设计，并整理了一套设计系统 Atlassian Design System，简称 ADS。
之前我已经分享过他们的文案设计部分，91% 的人看完后觉得有启发：文案设计还能这样？不愧B端国际大厂
今天我就来分享一下，看完他们组件设计后的启发。

1.悬停颜色变鲜艳
虽然是个很小的点，但也挺有意思的。
不论 Ant 还是 Arco，国内设计大部分按钮都是悬停颜色变浅的：
Ant Design
Arco Design
但 ADS 的设计是悬停颜色变亮（鲜艳）：
ADS
仔细想想，颜色变浅看起来更像是灰掉了，变亮更合理一些，但这对配色的要求就更高了。

2.表头弱化
国内的表格设计大多表头最重：
Ant Design
Arco Design
ADS 的表头字号更小颜色更浅，虽然字体是更粗一些：
ADS
我可以理解 ADS 这种设计，因为我自己也经常这样干。如果用户能轻易地理解表格内容，那么确实没必要强调表头。

3.焦点态
国内的产品设计，基本上只有文本框才存在焦点态一说。
Ant Design
但是在国外设计系统里，很多其它的组件也会存在焦点态。
例如之前分享过 IMB 的 Carbon Design System，很多东西都有焦点态包括按钮：
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 端设计在短时间内突飞猛进，已经很不错了。
我把包括 ADS 在内，国内外的B端设计规范的源文件都整理到一起了，感兴趣的后台回复「B端组件」。
另外，我还从 ADS 淘到一个好东西，分享一下：

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。
作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

您可能也对以下帖子感兴趣

文章有问题？点此查看未经处理的缓存