传统的业务流程​

1. 产品 A 会有一个想法
2. 产品 B 也会有一个想法

这导致我们的设计师有各个版本的 UI 视觉，大家都有所经历过。

我曾经与 UI 进行沟通，发现我们定制化场景实在太多，因此无法满足业务需求，不能固定写死重型的一套样式的组件。

我们决定用开发思路来解决这个问题，设计上应将样式部分独立到业务场景中进行个性化定制，包括解耦掉 HTML 上的强耦合标签样式。

限制​

使用过的同学肯定也知道现成 UI 组件库的一些痛点，比如：

• 样式难以定制：一个萝卜一个坑，一个公司一套样式，一个项目一套样式，劣势被放大。
• 耦合性高：传统 UI 组件库通常将界面样式、数据逻辑和用户交互等功能耦合在一起，导致代码难以维护和扩展。
• 创意受限：设计师根据现有传统 UI 组件库提供的固定组件和样式，拓展创意受到限制。
• 依赖过多：传统 UI 组件库可能依赖大量第三方库和插件，增加项目复杂性和维护成本。

Headless 是组件思维​

Headless UI 是由 Shopify 公司开发的开源工具包，旨在帮助开发人员构建可访问、灵活和易于定制的用户界面组件。Headless UI 的设计思路主要包括：

1. 无样式：提供的组件是“无样式”的，意味着它们不包含任何设计样式，开发人员可以完全自定义外观。
2. 无障碍：专注于构建具有良好可访问性的组件，确保所有用户都能轻松使用，并符合 Web 内容无障碍指南（WCAG）。
3. 灵活性：组件设计非常灵活，开发人员可以根据需求自由组合和定制组件。
4. 基于原子设计：遵循原子设计原则，将界面拆分为更小的功能单元，使每个组件独立使用，同时可以组合构建复杂界面。

Headless UI 注重可访问性、灵活性和定制性，帮助开发人员构建高质量的用户界面组件，同时保持代码简洁和易于维护。

使用示例​

通过 Headless UI 思维设计一个 Button 组件的步骤：

1. 定义组件的 API：确定 Button 组件的可配置项，例如文本内容、样式、大小、点击事件等。
2. 构建无样式的按钮组件：使用 Headless UI 提供的无样式组件作为基础，提供功能完备但无样式的按钮。
3. 添加样式覆盖：通过添加自定义的 CSS 类名或内联样式，为按钮组件添加所需样式。
4. 处理交互和事件：为按钮组件添加交互和事件处理逻辑，例如添加点击事件处理函数。

Headless UI 的应用场景​

根据个人经验总结的实际应用场景：

1. 跨平台应用：同个项目在多个平台上共存，样式不一致时，Headless UI 可以发挥作用。
2. 定制化界面：项目需要高度定制样式和功能，使用 Headless UI 是一个不错的选择。
3. 公司项目较多：在一个公司中，业务场景大，项目较多，Headless UI 是很好的选择。

注意事项​

Headless UI 并不适用于所有项目：

• 如果项目简单，对设计没有较大要求，使用现成的 UI 库更合适。
• 如果团队的技术水平参差不齐，还是用现成的组件库比较好。
• 切勿为了跟风而随意尝试技术，需从实际出发。

设计思维参与​

Headless UI

单元测试介入​

组件都需要经过单元测试进行断言，需要针对 Props 定义进行每个进行 Jest 断言。

MasterGo 链接​

https://mastergo.com/file/136201724176736?page_id=M