跳转到主要内容
About header

Saga 设计系统

Saga 是 Grafana Labs 的开源设计系统,它为 Grafana Labs 产品系列中的所有产品建立了共享的视觉语言,并推动了用户界面中的用户体验和交互一致性。

Foundations icon
基础
设计系统所建立共享视觉设计语言的核心理论和概念,保持其一致性。
Components icon
组件
在 Grafana 内部生成 UI 的小型 UI 部分。
Patterns icon
模式
产品范围内的可重复、一致且预期的交互。
Resources icon
资源
了解如何设计、构建和扩展 Grafana 的 UI,而不会产生分歧。

概述

设计系统是一个连接的、包管理的、版本控制的软件产品,它包含了一个组织需要制作数字化产品所需的最小组件和指南。将这些视为“系统中的系统”。

Saga 的工作原理

Saga 团队致力于帮助 Grafanistas 和社区在采用和使用 Saga 资产方面取得成功。为此,Saga 团队管理和支持 Figma 资产和 React 组件。

Saga 指导原则

随着 Saga 的发展,解决更多复杂问题,这些指导原则有助于确保提供的工具和资源尽可能为用户提供最大价值。

  • Saga 是通用的: Saga 中的每个部分或解决方案都不是 Grafana 单个产品功能的特定。它们能够被 Grafana Labs 的其他产品使用;例如,具有共享价值
  • Saga 是可访问的: 可供所有类型的用户使用,无论能力如何。可访问性已嵌入到解决方案中,以确保
  • Saga 是灵活的: 考虑周到地构建和设计,以解决各种配置和情况
  • Saga 是协调的: 遵循 Grafana UI 已经建立的现有视觉样式和模式
  • Saga 是定义明确的: 有良好的文档,限制清晰,因此很容易理解何时以及为什么应该使用它,以及它为什么比其他类似组件或模式更好
  • Saga 是独特的: 贡献填补了当前组件/模式提供中当前无法通过现有组件/模式合理解决的独特空白

我们如何支持使用和采用

在 Saga、设计师和开发者之间保持开放的沟通渠道对于成功至关重要,也是提高大家意识、使用和采用率的最佳方式。我们以多种方式保持参与

  • 我们的 GitHub 项目 对所有人可见,我们可以看到我们现在正在做什么以及未来将要做什么。这是一个跟踪任何贡献工作的好地方。
  • 我们在内部的 Slack 频道中非常活跃: #grafana-design-system。在这里,您可以发布问题、获得答案、分享您的想法,甚至获取设计系统发布的更新。
  • 我们是用户体验反馈会议的积极参与者——这是一个给予和接收同行反馈以改进工作的阶段。在#ux Slack频道中发布提醒并分享这些会议的议程。如果您想加入这些定期会议,请请求被包含在该频道中。

资源

Figma icon
Figma 资产
使用 Figma 组件库设计和构建 Grafana UI。
Storybook icon
React 组件
参考 @grafana/ui Storybook 以构建插件并使用这些组件。