用户界面 (GUI) 指南
使用编号列表记录 UI 步骤
要记录一个完整的任务(例如创建新项目),请使用编号列表将各个步骤组织成一个步骤序列。
- 使用缩进的编号列表记录子步骤。
- 避免使用包含超过 10 个步骤或包含超过 10 个子步骤的编号列表。
- 如果您的步骤超过 10 个,或者子步骤超过 5-10 个,请考虑将其分成多个任务。
将每个步骤写成一个带有明确动词的单一动作
每个步骤(编号项)必须包含一个引导步骤完成的动词。
<!-- Bad -->
The status changes to **Completed**.
<!-- Good -->
From **Status**, select **Completed**.
确保步骤是独立的,并且它们相关的动词听起来具有指导性。不要在一个步骤中放入多个动作,除非该步骤以确认或取消的动作结束,这涉及到点击特定的按钮或 UI 控件。
<!-- Bad -->
When you click **Invite Member** and the **Add member** pop-up opens, select the role for the new team member.
<!-- Good -->
1. Click **Invite Member**.
2. In the **Add member** pop-up, select the role for the new team member and click **Invite**.
仅记录重要结果的步骤结果
如果您需要描述一个步骤的结果,请用换行符将它们分开,以便它们在步骤下方的换行符上缩进显示。
<!-- Good -->
1. Click **Invite Member**.<br />
Your team member receives an email with a link to join the project.
避免描述用户执行步骤时发生的显而易见的结果。
<!-- Bad -->
1. From the **Edit** menu, select **Copy**.<br />
The text is copied to the clipboard.
使用粗体格式化 UI 元素的名称
对所有 UI 控件的名称使用粗体。
UI 元素 | 示例 |
---|---|
按钮 | 点击下一步。 点击取消。 |
单选按钮 | 在付款方式下,选择电汇。 |
复选框 | • 选择包含示例数据。 • 清除包含示例数据。 |
下拉菜单 | • 从GitHub 帐户和组织中,选择一个帐户或组织。 • 从静态 IP 中,选择已启用。 • 从分支中,选择此环境的存储库分支。 |
链接 | 点击了解更多。 |
菜单名称 | 点击文件。 |
菜单项 | 选择打开。 |
菜单级联 | 选择文件 > 保存。 |
汉堡菜单/三点菜单 | • 点击三点菜单并选择设为默认。 • 点击汉堡菜单并选择设为默认。 |
标签页 | • 选择 macOS 标签页。 • 点击网络标签页。 |
页面 | 在配置项目页面上,... |
窗口 | 在付款信息弹出窗口中,输入您的付款方式的详细信息。 |
屏幕/标签页 | 在数据浏览器屏幕上,选择一条记录。 |
窗格/面板 | 在配置面板中,点击网络。 |
部分 | 在加速下,从静态 IP 中选择已启用。 |
在步骤开头标识 UI 元素
当您记录与 UI 元素的交互时,请以引用 UI 元素名称的步骤开始,以帮助读者更轻松地导航和扫描列出的步骤。
<!-- Bad -->
1. Enter a name for your project in **Display Name**.
2. Select a GitHub account or an organization from **GitHub Accounts & Organizations**.
3. Select **Create a repository**.
4. (Optional) Enter a name for the repository in **Repository Name**.
<!-- Good -->
1. In **Display Name**, enter a name for your project.
2. From the **GitHub Accounts & Organizations** drop-down menu, select a GitHub account or an organization.
3. Select **Create a repository**.
4. (Optional) In **Repository Name**, enter a name for the repository.
标识可选步骤
在可选步骤的开头添加文本(可选)。即使它们是用 “如果...” 语句写的,也这样做。
<!-- Good -->
1. (Optional) From **Static IPs**, select **Enabled** if your database is behind a firewall and you can only configure external access from specific IP addresses. Copy the IP addresses and add them to the allowlist of your database.
2. (Optional) If your database is behind a firewall and you can only configure external access from specific IP addresses, then from **Static IPs**, select **Enabled**.
<!-- Bad -->
1. If your database is behind a firewall and you can only configure external access from specific IP addresses, then from **Static IPs**, select **Enabled**.
避免过度使用 UI 术语
当您编写与 UI 交互的步骤时,为每个 UI 元素包含 UI 术语可能会感觉过度。
为了使 UI 步骤更易于阅读,在大多数情况下,您可以省略每个 UI 元素的 UI 术语。
示例 1:下拉菜单
<!-- Bad -->
From the **GitHub Accounts & Organizations** drop-down menu, select a GitHub account or an organization.
<!-- Good -->
From **GitHub Accounts & Organizations**, select a GitHub account or an organization.
示例 2:文本框
<!-- Bad -->
In the **Display Name** text box, enter a name for your project.
<!-- Good -->
In **Display Name**, enter a name for your project.
示例 3:选择选项
<!-- Bad -->
Select the **Create a repository** option.
<!-- Good -->
Select **Create a repository**.
示例 4:清除复选框
<!-- Bad -->
Deselect the **Include sample data** check box to skip seeding the database with sample data.
<!-- Good -->
Clear **Include sample data** to skip seeding the database with sample data.
在特定情况下,调用 UI 控件名称可以带来清晰度,并使记录更复杂的步骤变得容易。请自行判断,并在这种情况下避免此规则。
<!-- Bad -->
- Under _Accelerate_, from **Location**, select the geographic location for Prisma Accelerate.
- Under _Accelerate_ and from **Location**, select the geographic location for Prisma Accelerate.
<!-- Good -->
Under _Accelerate_, from the **Location** drop-down menu, select the geographic location for Prisma Accelerate.
简短且显而易见的步骤
在过程的中间或末尾,最后的步骤有时对读者来说非常简短和显而易见。
- 点击下一步。
- 点击确定。
- 点击保存。
- 点击完成。
即使开发人员受众不需要提醒保存他们的文件,也存在省略短步骤可能会导致混淆的特定情况。
- 点击要删除的项目的删除。
- 在确认弹出窗口中,输入项目名称,然后点击删除。
在其他情况下,短步骤并非真正必要,但仍然可以完成有效的过程。
一个这样的例子可以是向导末尾的完成按钮。
根据上下文决定短步骤是增加了噪音,还是必须要有它。
不要记录输入字段(文本框)的要求
现代 UI 中的文本框或输入字段通常会在用户键入禁止字符时提供即时验证和反馈。因此,没有必要列出
- 允许的字符
- 允许的文本长度
<!-- Bad -->
In **Display Name**, enter a name for your project.
<Admonition>
**💡 Note**<br /><br />
Follow the rules below when you enter a display name for your project.<br /><br />
• Include at least one letter<br />
• Keep the length up to 40 characters~~
</Admonition>
<!-- Good -->
In **Display Name**, enter a name for your project.
当执行者难以识别时,请退回到被动语态
在某些情况下,很难在句子中识别执行者,或者命名执行者听起来很尴尬。
<!-- Bad -->
The form automatically pre-fills the GitHub repository based on the project name you provide. In the repository name, the form replaces each space with a hyphen.
<!-- Good -->
The GitHub repository name is pre-filled based on the display name and each space is replaced with a hyphen.
匹配 UI 控件的大小写
按照用户界面显示的方式记录用户界面,不要更改文档中的 UI 文本以满足样式指南或其他要求。
例如,如果按钮的文本为 CANCEL,请在文档中匹配全部大写。
<!-- Good -->
Click **CANCEL**.
<!-- Bad -->
Click **Cancel**.