#设计案例 59 个 #B端 26 个 国外有不少做B端产品的公司，Atlassian 是最有名的之一，国内外最受欢迎的研发管理系统 Jira 就是他们的产品。而且这家公司特别注重设计，并整理了一套设计系统 Atlassian Design System，简称 ADS。之前我已经分享过他们的文案设计部分，91% 的人看完后觉得有启发：文案设计还能这样？不愧B端国际大厂今天我就来分享一下，看完他们组件设计后的启发。1.悬停颜色变鲜艳虽然是个很小的点，但也挺有意思的。不论 Ant 还是 Arco，国内设计大部分按钮都是悬停颜色变浅的：Ant DesignArco Design但 ADS 的设计是悬停颜色变亮（鲜艳）：ADS仔细想想，颜色变浅看起来更像是灰掉了，变亮更合理一些，但这对配色的要求就更高了。2.表头弱化国内的表格设计大多表头最重：Ant DesignArco DesignADS 的表头字号更小颜色更浅，虽然字体是更粗一些：ADS我可以理解 ADS 这种设计，因为我自己也经常这样干。如果用户能轻易地理解表格内容，那么确实没必要强调表头。3.焦点态国内的产品设计，基本上只有文本框才存在焦点态一说。Ant Design但是在国外设计系统里，很多其它的组件也会存在焦点态。例如之前分享过 IMB 的 Carbon Design System，很多东西都有焦点态包括按钮：Carbon Design SystemADS 在这方面没有 IBM 那么严谨，但表单里的各种操作大多是有焦点态的：ADS这么做的好处是，刚点了哪里更清楚了，减少误操作的几率，但是开发成本会提高。当然，如果组件设计得好的话，也就前期麻烦一点。4.焦点态与悬停态差异国内的产品设计，焦点态和悬停态差异比较小，例如 Ant Design，焦点态也就比选中态多一点阴影：Ant Design这还算好的，我知道很多产品焦点态和悬停态根本没有差异。ADS 的悬停态的变化较小，只是加深了一点背景色而已。焦点态的变化就大了，加了一个又亮又粗的边框：ADSADS 用这么弱的悬停态，估计是为了跟其它表单操作统一，有些不适合用高亮色体现悬停态：ADS其实 Arco Design 也是这种弱悬停、重焦点的设计：ADS我感觉弱悬停态确实更合理一些，因为悬停态远远没有焦点态重要，这两者不应该过于相似。5.删除tag的视觉反馈Ant Design 和 Arco Design 的删除标签的反馈是这样的：Ant DesignArco DesignADS 的反馈是这样的：ADS样式几乎差不多，然而 ADS 的关闭图标悬停时，背景会变红，暗示风险操作。标签删除一般不会有二次确认弹窗，我感觉加这么个视觉暗示挺好的。6. 空状态国内的设计规范，空状态都是以图片为主，提供的文字和操作都很少：Ant DesignArco Design但 ADS 的空状态却很少出现图片，主要以文字描述和操作按钮为主，几乎都有操作按钮：ADS我觉得这个体现出了两边设计师的侧重点，前者更注重美观，ADS 更注重信息的沟通和解决方案。总结一下总体上 ADS 这套设计系统和国内的几家设计系统相差不是特别大，但细节上整体做得更好。毕竟人家更资深嘛，2002年公司就创立了，那时候国内 B 端企业还没萌芽呢。国内的 B 端设计在短时间内突飞猛进，已经很不错了。我把包括 ADS 在内，国内外的B端设计规范的源文件都整理到一起了，感兴趣的后台回复「B端组件」。另外，我还从 ADS 淘到一个好东西，分享一下：想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：