蜂群 UI 设计思维
· 阅读需 4 分钟
在蜂群中，较多设计是围绕主题定制方式进行的，因此不适合公共的样式。我们需要灵活地应对业务需求的变化，通过设计一套适合蜂群的组件库来适配业务。我们将采用最原子的方式去设计组件，在对应的项目侧拓展相应的组件主题与样式。
传统的业务流程
- 产品 A 会有一个想法
- 产品 B 也会有一个想法
这导致我们的设计师有各个版本的 UI 视觉，大家都有所经历过。
我曾经与 UI 进行沟通，发现我们定制化场景实在太多，因此无法满足业务需求，不能固定写死重型的一套样式的组件。
我们决定用开发思路来解决这个问题，设计上应将样式部分独立到业务场景中进行个性化定制，包括解耦掉 HTML 上的强耦合标签样式。
限制
使用过的同学肯定也知道现成 UI 组件库的一些痛点，比如：
- 样式难以定制：一个萝卜一个坑，一个公司一套样式，一个项目一套样式，劣势被放大。
- 耦合性高：传统 UI 组件库通常将界面样式、数据逻辑和用户交互等功能耦合在一起，导致代码难以维护和扩展。
- 创意受限：设计师根据现有传统 UI 组件库提供的固定组件和样式，拓展创意受到限制。
- 依赖过多：传统 UI 组件库可能依赖大量第三方库和插件，增加项目复杂性和维护成本。
Headless 是组件思维
Headless UI 是由 Shopify 公司开发的开源工具包，旨在帮助开发人员构建可访问、灵活和易于定制的用户界面组件。Headless UI 的设计思路主要包括：
- 无样式：提供的组件是“无样式”的，意味着它们不包含任何设计样式，开发人员可以完全自定义外观。
- 无障碍：专注于构建具有良好可访问性的组件，确保所有用户都能轻松使用，并符合 Web 内容无障碍指南（WCAG）。
- 灵活性：组件设计非常灵活，开发人员可以根据需求自由组合和定制组件。
- 基于原子设计：遵循原子设计原则，将界面拆分为更小的功能单元，使每个组件独立使用，同时可以组合构建复杂界面。
Headless UI 注重可访问性、灵活性和定制性，帮助开发人员构建高质量的用户界面组件，同时保持代码简洁和易于维护。
使用示例
通过 Headless UI 思维设计一个 Button 组件的步骤：
- 定义组件的 API：确定 Button 组件的可配置项，例如文本内容、样式、大小、点击事件等。
- 构建无样式的按钮组件：使用 Headless UI 提供的无样式组件作为基础，提供功能完备但无样式的按钮。
- 添加样式覆盖：通过添加自定义的 CSS 类名或内联样式，为按钮组件添加所需样式。
- 处理交互和事件：为按钮组件添加交互和事件处理逻辑，例如添加点击事件处理函数。
Headless UI 的应用场景
根据个人经验总结的实际应用场景：
- 跨平台应用：同个项目在多个平台上共存，样式不一致时，Headless UI 可以发挥作用。
- 定制化界面：项目需要高度定制样式和功能，使用 Headless UI 是一个不错的选择。
- 公司项目较多：在一个公司中，业务场景大，项目较多，Headless UI 是很好的选择。
注意事项
Headless UI 并不适用于所有项目：
- 如果项目简单，对设计没有较大要求，使用现成的 UI 库更合适。
- 如果团队的技术水平参差不齐，还是用现成的组件库比较好。
- 切勿为了跟风而随意尝试技术，需从实际出发。
设计思维参与
单元测试介入
组件都需要经过单元测试进行断言，需要针对 Props 定义进行每个进行 Jest 断言。