Google Workspace 外掛程式的使用者介面樣式指南

Google Workspace 外掛程式應與其擴充的主機應用程式樣式和版面配置一致。他們應使用熟悉的控制項和行為，自然地擴充 UI。本指南說明如何處理文字、圖片、控制項和品牌，以提供優質的使用者體驗。

如果外掛程式會開啟與外掛程式運作相關的獨立網頁 (例如外掛程式的設定頁面)，請務必確保這些網頁也遵循這些樣式規範。

文字和圖片

本節說明如何在外掛程式中正確使用文字和圖片。

外掛程式名稱

您必須在專案的資訊清單中設定外掛程式的名稱，並在設定要發布的外掛程式時設定名稱。名稱會顯示在許多地方，例如 Google Workspace Marketplace 產品資訊和選單中。選擇名稱時請注意：

  • 使用標題大小寫格式。
  • 除非是品牌名稱的一部分，否則請避免使用標點符號，尤其是括號。
  • 請簡短扼要，最好是 15 個半形字元以內。在 Google Workspace Marketplace 產品資訊和其他地方，系統可能會自動截斷長名稱。
  • 請勿在外掛程式名稱中加入「Google」、「Gmail」或其他 Google 產品名稱。
  • 請勿在加購內容名稱中加入「add-on」一詞。
  • 請勿提供版本資訊。

書寫風格

您不必寫太多內容，大多數動作應透過圖示、版面配置和簡短標籤清楚呈現。如果您發現某些外掛程式需要更詳細的說明，而短標籤無法提供足夠的資訊，建議您建立另一個網頁來說明外掛程式，並提供連結。

編寫 UI 文字時：

  • 使用句子大小寫 (尤其是按鈕、標籤和資訊卡動作)。
  • 請使用簡短、簡單的文字，避免使用專業術語或縮寫字詞。

通用和資訊卡動作

如果在外掛程式中使用通用動作或資訊卡動作，這些動作會顯示為您定義的資訊卡中的選單項目。您可以為這些動作選擇這些選單中使用的文字。選擇要使用的文字時，請注意以下事項：

  • 避免使用重複擴充功能名稱的選單文字。
  • 每個選單項目的開頭都應使用動作字詞，例如「執行」、「設定」或「建立」。
  • 請說明工作，而非動作顯示的 UI 元件。
  • 如果動作會啟動工作流程，但沒有單一動詞可描述其功能，請將其命名為「Start」。
  • 請將選單項目數量控制在少量，避免使用者必須捲動大量清單。如果您要實作更多動作，不妨考慮使用多張資訊卡，並在每張資訊卡上加入不同的動作。

錯誤訊息

發生問題時，請務必使用平實的語言。從使用者的角度說明問題，並建議如何修正。

  • 請勿允許使用者查看程式碼擲回的任何例外狀況。請改用 try...catch 陳述式來攔截例外狀況，然後顯示方便使用者的錯誤訊息。
  • 發布前，請確認外掛程式不會在 UI 中顯示偵錯資訊。

教學型內容

您可以設計資訊卡，顯示說明資訊或向使用者說明外掛程式的運作方式。如果您為外掛程式建構說明內容，請務必：

  • 盡可能以項目符號或編號清單顯示操作說明。引導使用者完成整個流程，並明確參照已命名的 UI 元素。
  • 請務必在操作說明中清楚說明任何必要條件，例如以特定方式設定試算表。
  • 歡迎連結至外部說明內容，例如支援網頁。

圖片

外掛程式使用的圖片可以是內建圖示類型之一，或是透過網址指定的公開代管圖片。使用代管圖片時，請務必確保所有可能使用外掛程式的使用者都能存取這些圖片。

控制項

本節提供互動式小工具的使用者體驗指南。

按鈕

請使用按鈕控制使用者介面的主要動作，而非其他小工具。

  • 大多數文字按鈕標籤開頭應為動詞。
  • 在大多數情況下，按鈕列應限制為三個或更少的按鈕。

DecoratedText

DecoratedText 小工具可讓您使用圖示、按鈕或切換鈕呈現文字內容。

  • 文字內容應採用句首字母大寫格式。
  • 如果 DecoratedText 小工具的文字無法容納在可用空間中，系統會截斷文字。因此，請盡可能將文字內容縮短。

選取輸入

您可以在外掛程式中使用各種選取輸入小工具：下拉式選項方塊、核取方塊和選項按鈕。

  • 當使用者可以選取多個選項或不選取任何選項時，請使用核取方塊。當使用者必須選取單一選項時，請使用圓形按鈕 (或選取式選單)。如要提供簡短的替代選項清單，同時盡量節省使用者介面空間，請使用下拉式選單。
  • 為每個選項指定的文字應採用句首字母大寫格式。
  • 請避免使用選取變更來觸發難以復原的重大動作，因為使用者在選取時經常會出錯。建議您改為加入按鈕，讀取目前的選取值，然後觸發動作。
  • 針對下拉式選單，請依照字母順序或所有使用者都能理解的邏輯排版方式排序選項 (例如以順序呈現星期幾，從星期日或星期一開始)。
  • 將特定選項輸入小工具中的選項數量限制在合理範圍內。如果選項太多，使用者可能會覺得小工具難以使用。在這種情況下，請考慮將選項分成不同類別和多個小工具。

文字輸入

文字輸入框可讓使用者輸入字串資料。

  • 請勿使用文字輸入功能，要求使用者輸入特定一組可能的項目。請改用下拉式選單。
  • 使用提示和建議，協助使用者輸入正確格式和內容的文字。
  • 如果要輸入的文字超過幾個字，請使用多行文字輸入功能。

品牌宣傳

本節提供使用者體驗指南，說明如何在外掛程式介面中加入品牌元素。

在外掛程式中

如果想在外掛程式 UI 中加入品牌資訊，請簡短扼要。這樣一來，使用者就能專注於您的外掛程式功能。

  • 外掛程式的所有部分都必須遵守品牌規範。
  • 請勿加入「Google」、「Gmail」或其他 Google 產品名稱。
  • 請勿加入 Google 產品圖示，即使是經過修改的圖示也一樣。
  • 品牌宣傳文字中不得包含「add-on」一詞。
  • 品牌文字應不超過幾個字。

在 Google Workspace Marketplace 中

設定外掛程式供發布時，您需要提供多個圖像和文字素材資源，以建立 Google Workspace Marketplace 產品資訊。

商店資訊和這些素材資源的所有部分都必須遵循品牌規範。