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

基础
设计系统建立的、保持共享视觉设计语言一致的核心理论和概念。

组件
在 Grafana 中构建 UI 的小型 UI 部分。

模式
产品范围内的可重复、一致且符合预期的交互。

资源
学习如何在不偏离规范的情况下设计、构建和扩展 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)反馈会议——这是一个提供和接收同行反馈以改进工作的平台。#ux Slack 频道会发布这些会议的提醒和议程。如果你想加入这些定期会议,请在该频道中提出。