GUI 指南

原则

以下原则描述了有助于推动 GUI 开发的概念。它们也被设计用来避免常见问题。

注意

以下原则仅为建议，是否使用和实施这些指南由您自行决定。

为了本文档的目的，并避免混淆，将定义以下术语

模态框

模态框是应用程序主窗口的从属图形控制元素。

工作流

描述完成某个操作步骤的工作流。

设计可扩展性

您的设计应该反映生产环境，而不是开发环境。例如，生产环境可能包含五十张图片，而不是 devstack 中包含的三张。使用适用于三张图片的控件可能会影响与生产环境相关的可用性。

例如

• 实例：2,000

• 镜像：50

• 项目：2,000

• 用户：1,000

• 操作员：8

• 区域：8

用例

开源开发者驱动的项目在创建产品时并不总是考虑到最终用户。教育和帮助新手完成资源至关重要。社区内存在两种假设

1. 新手用户需要 GUI

2. 高级用户使用 CLI 或 API

确保工作流提供足够的信息，以便用户做出决策。我们建议在设计和创建时参考 OpenStack 人物。这些人物是

• Adrian - 基础设施架构师

• Rey - 云运维工程师

• Taylor - 域运维人员

• Wei - 项目负责人

• Quinn - 应用开发者

特定用例界面因具体用例而异。例如，GUI 可能适合启动 1-x 个相同的实例，但不适合启动多个不同的实例。

有关更多信息，请参阅 OpenStack 人物。

必填参数

必填参数是创建资源所需的最低参数。这对于像负载均衡器或网络这样的复杂嵌套资源尤其重要。必填参数允许用户在不被大量步骤吓倒的情况下创建资源。我们建议创建顶级资源，然后将用户发送到网络详细信息页面。

80% 法则是软件框架，可确保 80% 的用例易于实现，而 20% 的用例难以实现。我们建议使用必填参数来鼓励设计师和开发人员在创建工作流时遵守 80% 法则。

注意

使用必填参数假定用户能够在资源中添加参数。

模式

以下模式提供 GUI 框架，以帮助设计师和工程师创建在 OpenStack 产品中一致的界面。

例如，horizon 项目选择使用 bootstrap。有关更多信息，请参阅 Horizon (SCSS) 中的样式。

取消按钮

在模态框中，取消按钮应位于左下角，关闭的 X 按钮应位于右上角。

模态框错误消息

取消包含部分完成表单的模态框时，我们建议在模态框的顶部中心显示警告。

注意

显示的任何错误消息都应位于相应的模态框内，以避免 GUI 冲突。

还建议使用红色背景和左上角的警告图标。

有关 UI 文本指南的更多信息，请参阅 UI 文本指南。

向导

软件向导呈现一个工作流并帮助用户完成它。返回 和 下一步 按钮应位于底部，位于模态框的右侧，但在创建按钮的左侧。 返回 按钮应被禁用，而不是不可见。最初，创建 按钮应保持禁用状态，直到提供必填参数为止。所有必需项目都应在右侧带有星号。

页面错误

任何错误消息都应显示在浏览器的右上角。对于持续显示一定秒数的错误消息，应显示计数器。所有错误消息都应通过按压消息右上角的 X 来关闭。

注意

错误消息的高度应根据内容而变化。

有关 UI 文本指南的更多信息，请参阅 UI 文本指南。

行动

全局操作应与表格顶部对齐并放置在表格顶部。例如，启动 实例 按钮是全局表格操作。

批处理操作，适用于单行或多行，应与左侧对齐，并位于复选框上方。

控制操作应与行右侧对齐。此外，复选框应与每行的左侧对齐，并用于删除单行或多行。

搜索

GUI 中通常有两种搜索框类型。一种是全局搜索，适用于所有页面，另一种是本地（面板）搜索框，用于在页面内搜索。我们建议将全局搜索框放在页眉中，将本地（面板）搜索框放在页面内。

注意

交替使用搜索框可能会造成混淆，因为并不总是清楚正在搜索什么。

图标

我们建议使用来自 Font Awesome 的以下图标，并赋予相应的含义。

创建

创建图标用于全局操作，例如启动实例或创建卷。不应将其他图标（例如“上传到云”）与全局操作一起使用。

删除

删除按钮应与任何破坏性操作一起使用，包括全局、批处理和控制操作。

警告

使用警告图标以确保用户意识到如果继续执行操作将丢失数据。例如，即使用户已完成某些表单，退出模态框。此外，它还应指示资源不可用。例如，使用警告图标指示无法使用 flavor，因为项目的可用配额已全部用完。

展开和折叠

应使用以下图标允许用户在查看资源的更多信息时展开或折叠。应使用此图标代替 + 和 - 图标。展开 折叠

帮助

当引用用户指向提供更多信息的其他内容时，请使用帮助图标。

下载和上传文件

当用户上传文件（例如镜像）或下载文件（例如密钥对）时，应使用这些图标。但是，不应将其用于全局操作，例如启动实例。下载 上传

取消

取消图标应用于任何用户想要退出工作流的操作。例如，退出向导时，模态框的右上角应有一个 X。不应将此图标用于破坏性操作，例如删除。

搜索

无论是在全局搜索还是在面板内搜索，搜索图标应始终位于内部，并与任何文本框左侧对齐。

可访问性

我们建议在开发内容时使用 ARIA，以确保适当地考虑可访问性。

ARIA 定义了使 Web 内容和 Web 应用程序（尤其是使用 Ajax 和 JavaScript 开发的应用程序）对残疾人更易于访问的方法。例如，ARIA 实现了可访问的导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。

有关更多信息，请访问：https://mdn.org.cn/en-US/docs/Web/Accessibility/ARIA。