B端产品有什么免费的好产品可以参考交互和Ui设计吗？

了解B端产品的交互和视觉通常有三种途径：

体验账号&预约演示，一是通过试用账号进行体验，一般会有试用期限；二是预约线上演示来了解产品的功能和界面。通过官网、帮助手册、更新文档、官方项目复盘、第三方的项目分析等途径获取相关信息。此外，还可通过比较完善的设计框架进行参考和借鉴。

以下是一些国内外在视觉交互方面表现出色的B端产品：国内有飞书、Teambition、Tower、销氪等，国外有Jira、Notion、Airtable等，这些产品可以通过手机号/邮箱进行注册体验。

设计框架：国内有 Arco Design、Ant Design、Element等，国外有Salesforce Lightning Design System、IBM Carbon Design System、Atlassian Design System等，这些免费的设计系统具有丰富的UI组件资源和设计示例。

那么如何通过这些方式去了解产品的交互和视觉呢？以Atlassian Design System（ADS）为例，它是Atlassian公司开发的一套设计系统，用于帮助构建一致、美观且易用的用户界面和体验。它提供了一系列设计准则、组件、样式和工具，旨在帮助开发者和设计师在Atlassian产品中创建一致的设计。接下来我们通过分析设计原则、交互、视觉三个方面去了解产品。

ADS网站：https://atlassian.design/get-started/content-design/

首先从设计原则上：

在交互上Atlassian希望和用户在每次互动中建立信任，并且让用户掌握以获得更大的价值。

这意味着产品从构建页面再到交互都要确保用户对整个流程的体验感到满意和产生信任感。最重要的是，他们认为不仅要满足用户对功能和行为的期望，还要满足用户在每次交互中对可靠性、错误预防、恢复、速度和安全性的期望。

其次去考虑更好的交互方式的目的，不是让我们的产品发挥作用而是希望这样的方式能让人们更加专注于自己的工作，人们掌握产品的速度越快，那么他们使用产品的效率就会越高。

而在页面上Atlassian认为产品要匹配目的并能让用户感到熟悉，我们的产品既适合各自的用途，又与彼此之间以及与人们使用的其他产品和谐相处。尽管视觉和行为上存在持续的相似性，但它们会适应人们的设备和环境，而不是为了一致性而保持一致。

其次从交互上

交互要做到反馈及时，例如，一般来说当列表中的项目处于高亮状态时，表示该项目可以被点击。尤其在处理焦点态和悬停态时，大多数产品是没有做很大区分。但是，ADS在这方面就采取了强调焦点的设计，即在悬停态下加强了焦点的表现。这样做的好处是能够让用户更清楚地知道他们点击的位置。

再比如ADS在对标签进行删除时，当鼠标悬停在图标上时，背景会变成红色。这个设计的目的是提醒用户需谨慎执行该操作。尽管这只是一个小小的变化，但对于用户来说，它能有效防止误操作。有时候，并不需要太显眼的设计，也能产生很好的效果。

最后从UI方面上

在UI方面，ADS提供了广泛的基础颜色选项，并对颜色的使用规范和运用法则进行了详细的列举，包括颜色的色值、透明度、以及骨架屏等方面的使用。这种全面的设计规范和指导，可以帮助设计师更好地选择和运用颜色，确保页面的视觉效果一致性，并增强用户体验。

比如对于字体颜色定义时，是需要通过WCAG AA进行对比，对于黄颜色警告背景，是需要特殊的warning.inverse标记，用于满足WCAG AA对比度要求。

而颜色的强调程度决定了它与默认背景的对比度，这个程度可以从最微妙到最鲜明进行调整。较为鲜明的颜色具有更高的对比度，相较于微妙的颜色更能吸引注意力。但是，这需要由设计师根据具体场景和目标来定义。设计师可以根据用户需求、品牌风格以及页面元素的重要性，灵活选择合适的强调程度来达到最佳的视觉效果和用户体验。

以上简单介绍了何如通过Atlassian Design System去了解产品的交互和UI，值得注意的是，虽然设计系统可以提供设计参考，但在实际应用中，仍然需要根据具体的项目需求和品牌特色进行定制和调整噢～