Docker 扩展的设计指南

在 Docker,我们的目标是构建融入用户现有工作流程的工具,而不是要求他们采用新的工具。我们强烈建议您在创建扩展时遵循这些指南。我们将根据这些要求审查并批准您的市场发布。

以下是一份简单的清单,供您在创建扩展时参考

  • 是否易于上手?
  • 是否易于使用?
  • 在需要时是否易于获得帮助?

创建与 Docker Desktop 一致的体验

使用 Docker Material UI 主题Docker 扩展样式指南 来确保您的扩展感觉像是 Docker Desktop 的一部分,从而为用户创造无缝的体验。

  • 确保扩展具有浅色和深色主题。根据 Docker 样式指南使用组件和样式,可以确保您的扩展满足 AA 级可访问性标准

    Light and dark mode
  • 确保您的扩展图标在浅色和深色模式下都可见。

    Icon colors in light and dark mode
  • 确保导航行为与 Docker Desktop 的其余部分保持一致。添加一个标题来为扩展设置上下文。

    Header that sets the context
  • 避免嵌入终端窗口。与 CLI 相比,我们利用 Docker Desktop 的优势是,我们有机会向用户提供丰富的信息。尽可能利用此界面。

    Terminal window used incorrectly
    Terminal window used correctly

原生构建功能

  • 为了不中断用户的流程,避免用户必须导航到 Docker Desktop 外部(例如,到 CLI 或网页)才能执行某些功能的情况。相反,构建 Docker Desktop 原生的功能。

    Incorrect way to switch context
    Correct way to switch context

分解复杂的流程

  • 如果流程过于复杂或概念过于抽象,请将流程分解成多个步骤,每个步骤只有一个简单的号召性用语。这在引导新手用户使用您的扩展时很有帮助。

    A complicated flow
  • 在有多个号召性用语的情况下,确保您使用主要(填充按钮样式)和次要按钮(轮廓按钮样式)来传达每个操作的重要性。

    Call to action

引导新用户

在创建扩展时,请确保扩展和产品的首次用户可以理解其增值功能并轻松地采用它。确保您在扩展中包含上下文帮助。

  • 确保将所有必要信息添加到扩展市场以及扩展详细信息页面。这应该包括

    • 扩展的屏幕截图。请注意,推荐的屏幕截图大小为 2400x1600 像素。
    • 详细说明扩展的用途、谁会发现它有用以及它的工作原理。
    • 链接到必要的资源,例如文档。
  • 如果您的扩展具有特别复杂的功能,请在起始页面添加演示或视频。这有助于引导首次用户快速上手。

    start page

下一步是什么?