跳至主要內容

使用者介面 (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.

簡短且顯而易見的步驟​

在程序的中間或結尾，最後的步驟有時對讀者來說非常簡短且顯而易見。

  • 點擊下一步。
  • 點擊確定。
  • 點擊儲存。
  • 點擊完成。

即使開發人員受眾不需要提醒來儲存其檔案，也存在省略簡短步驟可能會導致混淆的特定情況。

  1. 點擊您要刪除的項目之刪除。
  2. 在確認快顯視窗中，輸入項目名稱並點擊刪除。

在其他情況下，簡短步驟並非真正必要，但仍然可完成有效程序。

其中一個範例可以是精靈結尾的完成按鈕。

請根據內容判斷簡短步驟是否會增加雜訊，或者是否有必要執行此步驟。

請勿記錄輸入欄位（文字方塊）的需求​

現代 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**.