Google Workspace 外掛程式的 UI 樣式指南

Google Workspace 外掛程式必須和 託管應用程式 可以擴充使用者介面 透過熟悉的控制項與行為自然地解決簡報指南 本例說明如何處理文字、圖片、控制項和品牌宣傳內容 優質使用者體驗

如果您的外掛程式會開啟多個網頁,而這些網頁成為外掛程式的 作業 (例如外掛程式的設定頁面),請確認這些網頁 還要遵循樣式規範

文字和圖片

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

外掛程式名稱

你必須在目標專案中設定外掛程式名稱 設定發布外掛程式。 這個名稱會出現在許多地方,例如 Google Workspace Marketplace 事先調整商店資訊和選單選擇名稱時,請注意下列事項:

  • 請使用每字字首大寫格式。
  • 除非品牌有一部分,否則請避免使用標點符號 (尤其是括號)。
  • 保持簡短,最好不要超過 15 個字元。全名可以是 Google Workspace Marketplace 清單和其他位置會自動截斷。
  • 請勿加入「Google」、「Gmail」或其他 Google 產品名稱 圖示。
  • 請勿加入「加購」一字圖示。
  • 並保留版本資訊。

寫作風格

您不需要寫太多內容,大多數動作都應該提供清楚易懂的 圖像、版面配置和簡短標籤如果看到部分外掛程式 需要更詳盡的解釋 您會練習建立一個說明外掛程式的網頁,並建立連結。

編寫 UI 文字時:

  • 採用句首字母大寫格式 (尤其是按鈕、標籤和資訊卡動作)。
  • 偏好簡短、簡單的文字,不要使用專業術語或縮寫。

通用和資訊卡動作

如果您使用通用動作資訊卡動作, 外掛程式,就會在資訊卡中顯示為選單項目。 每個 Pod 都有專屬的 IP 位址您可以為這些選單指定要使用的文字 動作。選擇要使用的文字時:

  • 避免選單文字重複顯示外掛程式的名稱。
  • 以動作字詞啟動各個選單項目,例如「執行」、「設定」或 「建立」。
  • 請描述工作,而非動作顯示的 UI 元件。
  • 如果您的動作會展開工作流程,且沒有任何單一動詞 把工作命名為「開始」
  • 盡量減少選單項目的數量,以免強迫使用者捲動 因此難以預測如果您需要執行更多動作,建議使用 就能生成多張資訊卡,且各有不同的動作。

錯誤訊息

發生問題時,請務必使用淺顯易懂的用語。說明 從使用者的立場判斷,並提供修正建議。

  • 禁止使用者查看程式碼擲回的任何例外狀況。 使用 try...catch 陳述式攔截例外狀況,然後顯示 使用者容易理解的錯誤訊息。
  • 發布前,請確認外掛程式未顯示偵錯資訊 調整過渡期

教學型內容

您可以設計用來顯示說明資訊或說明 這項部署作業。如果您製作教學型內容 外掛程式,請記得:

  • 盡可能以項目符號或編號清單呈現操作說明。步行使用者 ,並清楚參照已命名的 UI 元素。
  • 請務必清楚說明所有規定,例如設定 以特定方式編輯試算表
  • 您可以自由提供外部說明內容的連結,例如佐證網頁的連結。

圖片

外掛程式中使用的圖片不是 內建圖示類型 或是網址指定的公開代管圖片使用代管的圖片時 並確保所有可能使用你外掛程式的人都能存取這些內容。

控制項

本節將提供 互動式小工具

按鈕

除了使用按鈕控制使用者介面的主要動作外 其他小工具。

  • 大多數文字按鈕標籤都應以動詞開頭。
  • 在大多數情況下,按鈕列最多只能使用三個按鈕。

DecoratedText

DecoratedText 小工具 可讓你使用圖示、按鈕或切換鈕來顯示文字內容。

  • 請使用句首字母大寫設定文字內容。
  • DecoratedText 小工具的文字無法融入 可用的儲存空間。因此,請一律保留 盡量縮短題

所選項目

您可以使用各式各樣的 選取輸入小工具

  • 請在使用者可以選取多個選項或完全不使用選項時勾選核取方塊。 必須選取一個選項時,請使用圓形按鈕 (或選取選單)。 提供簡短的替代清單時,請使用下拉式選單 節省使用者介面的空間
  • 指派給每個選項的文字應採用句首字母大寫格式。
  • 避免使用選取變更來觸發主要、難以還原的動作 因為使用者在選擇選項時經常會出錯相反地 新增一個按鈕,可讀取目前的選取值,然後觸發 動作。
  • 如果是下拉式選單,請按照字母順序或邏輯配置排序選項 (例如:顯示星期幾) (從週日或週一算起)。
  • 限制特定選取輸入內容中的選項數量 達到合理的數值如果選項太多,使用者可能會發現 讓小工具難以使用在這些情況下,請考慮停用 以便細分為不同的類別和小工具

文字輸入

文字輸入可以提供使用者輸入字串資料的空間。

  • 請勿使用文字輸入來讓使用者輸入某一組特定變數 可能的項目請改用下拉式選單選取。
  • 運用提示和建議,協助使用者以正確的輸入文字 格式和內容
  • 如果要輸入的文字不只幾個 還能分析語法及擷取語言資訊 例如字詞之間的關係

品牌宣傳

本節說明新增品牌宣傳元素的使用者體驗指南。 新增至外掛程式介面

加購內容

如果想在外掛程式 UI 中加入品牌宣傳元素,請確保範本簡潔明瞭。 如此一來,使用者就能將心力放在外掛程式功能上。

  • 外掛程式的所有方面都必須遵循 品牌宣傳指南
  • 請勿加入「Google」、「Gmail」或其他 Google 產品名稱。
  • 請勿加入 Google 產品圖示,即使這些圖示經過變造也一樣。
  • 請勿加入「加購」一字品牌文字。
  • 品牌宣傳文字的長度不應超過幾個字詞。

在 Google Workspace Marketplace 中

設定出版品的外掛程式時 提供多種圖像和文字資源來建立 Google Workspace Marketplace 產品資訊。

商店資訊的所有層面和這些資源都必須符合 品牌宣傳指南