Atlassian

一、网站概况

Atlassian Design System 是 Atlassian 官方推出的设计系统官网，于 2019 年前后上线（具体时间未公开），由 Atlassian 公司设计团队运营。网站定位为“统一设计语言”，旨在为 Atlassian 旗下所有产品（Jira、Confluence、Trello、Bitbucket 等）提供一致的设计规范与组件资源。核心服务包括颜色、排版、图标、网格等基础设计规范，以及可复用的 UI 组件库、模式库、设计工具包等。网站本身免费开放，面向全球设计师与开发者，无用户注册要求即可浏览全部内容。据估算，全球使用 Atlassian 产品的企业超过 20 万家，其设计系统直接影响数百万开发者和设计人员的工作效率。

二、核心功能详解

1. 设计基础规范（Foundations）
网站提供了完整的设计基础规范，包括颜色、排版、图标和网格系统。颜色部分包含色板、语义色（如警告色、成功色）、无障碍对比度参考；排版部分定义字体、行高、间距层级；图标部分提供 SVG 图标库及使用指南；网格系统则给出响应式布局的栅格规则。这些规范可直接下载或通过 Token 引用，确保产品视觉一致性。

2. 组件库与交互模式（Components & Patterns）
组件库收录了按钮、输入框、弹窗、表格等 50+ 常见 UI 组件，每个组件都有详细的设计说明、代码示例和交互状态（如 hover、focus、disabled）。模式库则针对复杂场景（如搜索、导航、数据筛选）提供可复用的交互流程模板。设计师可在 Figma 中直接调用，开发者可通过 Atlaskit 库（React 实现）快速集成。

3. 设计 Token 系统（Tokens）
Token 是设计规范与代码之间的桥梁。网站提供了一套完整的 Token 命名体系，例如 color.text.accent.red 表示红色强调文本，elevation.surface.hovered 表示鼠标悬停时的表面阴影。设计者和开发者只需引用 Token 名称，即可自动同步配色、间距、阴影等全局变量，大幅降低维护成本。网站还提供了 Token 可视化面板，实时展示所有 Token 的当前值。

4. AI 设计模式（Design for AI）
针对 AI 功能（如 Rovo，Atlassian 的 AI 助手），网站新增了 AI 交互设计指南，包括 AI 回复的视觉样式、加载状态、错误处理等。同时提供 Rovo UI 的专用组件和模式，帮助团队构建清晰、可信任的 AI 体验。

三、使用教程/操作指南

步骤 1：浏览设计规范
无需注册，直接访问 atlassian.design。在首页点击“Foundations”即可查看颜色、排版、图标、网格的详细文档。每个页面都有示例图、代码片段和 Figma 组件链接，建议使用 Chrome/Firefox 等浏览器查看，部分页面有交互预览。

步骤 2：快速上手组件库
点击“Components”进入组件目录。以“Button”为例：
– 查看设计图与交互状态（默认、hover、active、disabled）
– 复制下方代码片段（React/Web Components）
– 点击“Figma”图标直接打开 Figma 社区组件，可修改并下载到本地项目
小技巧：利用右上角搜索框输入“dropdown”等关键词，直接定位组件。

步骤 3：集成设计 Token
如已使用 Atlaskit 库，无需手动处理 Token。对于自定义项目，可在网站“Tokens”页面下载 JSON 或 CSS 变量文件。建议先阅读“Getting started”中的安装指南，避免版本冲突。注意：Token 名称会随着设计系统版本更新而变化，建议锁定版本号。

步骤 4：参与社区与获取更新
网站底部的“News”栏目发布最新博文和设计动态，例如“Motion Vocabulary”等。点击“Contact us”可反馈问题。如果你是 Atlassian 员工，可通过内部链接提交设计缺陷；外部用户建议在 GitHub（Atlassian Design System 开源仓库）提交 Issue。

注意事项：
– Atlassian Design System 专为 Atlassian 产品设计，非 All-in-one 通用设计系统，直接复用到其他品牌项目时需二次适配。
– 部分高级功能（如定制 Token）需要内部工具支持，公开网站只提供基础内容。

四、内容与资源质量

网站内容质量较高，优势体现在三方面：
– 数量与覆盖度：包含 6 大基础规范、50+ 组件、20+ 交互模式、100+ Token 变量，同时提供 Figma 组件库（Atlassian 官方维护）、React 组件库（Atlaskit）、Forge UI Kit（适配第三方插件开发）。
– 更新频率：每月至少有 2~3 次版本迭代，重要更新会发布在“What’s new”板块。例如 2025 年新增了 Design for AI 模块。
– 正版与版权：所有资源均为 Atlassian 官方原创，组件和 Token 遵循 Apache 2.0 开源协议，可免费用于个人和商业项目（需遵守 Atlassian 品牌使用指南）。
– 独家资源：Token 系统和 AI 设计模式是其他公共设计系统（如 Material Design、Ant Design）较少覆盖的特色内容，尤其适合 Atlassian 产品生态。

不足之处是：中文文档缺失，仅支持英文；部分高级组件（如高级表格、图表）需要内部权限才能查看。

五、适用人群与场景

适合人群：
– Atlassian 产品的设计师和开发者（Jira、Confluence、Bitbucket 等）
– 正在学习企业级设计系统的中高级 UI 设计师
– 需要快速搭建与 Atlassian 风格一致的外部应用或插件的开发者

不适合人群：
– 单纯寻找通用 UI 库的个人站长（更适合 Ant Design、Element UI）
– 非英语用户的初级设计师（缺少中文文档，门槛较高）

典型使用场景：
1. 企业内部产品统一：某公司使用 Jira + Confluence 作为协作工具，其内部设计团队可参考该设计系统，确保自建功能与官方产品视觉一致。
2. 第三方插件开发：开发者通过 Forge UI Kit 快速实现 Jira 插件界面，无需从零搭建组件。
3. 设计系统学习：希望建立自建设计团队的人，可以研究 Atlassian Design System 的 Token 命名、组件化思路和更新机制作为参考。

六、优缺点分析

与同类竞品对比：
– 对比 Material Design：Material Design 更通用，但 Atlassian Design System 在协作类、SaaS 类场景下更贴近实际业务。
– 对比 Ant Design：Ant Design 中文友好、组件丰富且易用，但缺少 Token 系统和 AI 交互模式，且不与任何具体产品绑定。
– 对比 Salesforce Lightning Design System：两者同为 SaaS 巨头设计系统，但 Atlassian 免费开源，而 Lightning 部分组件需付费使用。