編輯器外掛程式 使用 Apps Script 的 HTML 服務。由於介面 都是以 HTML 和 CSS 開發而成，因此可靈活自訂。不過，如果 建構外掛程式介面，應提供優質的使用者體驗 無須專人管理
最好的附加元件會使用熟悉的控制介面和 行為建立新外掛程式時，請注意下列事項：
- 請在 HTML 服務網頁。
- 對設計有疑問時，請在編輯器中找出類似的對話方塊或側欄，並 或參照 外掛程式快速入門導覽課程。
- 請按照這份風格指南打造流暢體驗。
文字
外掛程式名稱
你必須在發布時設定外掛程式名稱 基礎架構這個名稱會出現在許多地方，例如外掛程式商店和菜單。
- 請使用每字字首大寫格式。
- 除非品牌有一部分，否則請避免使用標點符號 (尤其是括號)。
- 保持簡短 - 建議不要超過 30 個字元。全名可以是 就會自動截斷。
- 請勿加入外掛程式所屬的 Google 產品名稱 (或使用 一字到 Google)。
- 並保留版本資訊。
- 確定外掛程式的發布名稱與下載程式的 。專案名稱會顯示在授權對話方塊中。
| 錯誤做法 | 正確做法 |
|---|---|
 |
 |
寫作風格
您不需要寫太多內容，大多數動作都應該提供清楚易懂的 圖像、版面配置和簡短標籤如果看到部分外掛程式 需要更詳盡的解釋 您會練習建立一個說明外掛程式的網頁，並建立連結。
編寫 UI 文字時：
- 請使用英文首字母大寫格式 (尤其是按鈕、標籤和選單項目)。
- 偏好簡短、簡單的文字，不要使用專業術語或縮寫。
| 錯誤做法 | 正確做法 |
|---|---|
|
|
|
安裝後提示
安裝您的外掛程式後，系統會立即顯示安裝後提示 會顯示在「說明」中。撰寫幾句話，協助使用者快速上手。
- 以行動字詞開頭。
- 說明使用外掛程式的第一個步驟。
- 如果有主要 UI (例如側欄)，請說明開啟方式。
- 如已安裝外掛程式，請勿在這裡宣傳。
| 錯誤做法 | 正確做法 |
|---|---|
 |
 |
選單項目
與一般 Apps Script 專案不同的是，外掛程式不會顯示在指令碼編輯器中 或指令碼管理工具使用者無法直接執行外掛程式指令碼。相反地 外掛程式會在外掛程式選單中顯示。 選單 (以及對話方塊或側欄) 可讓您 使用者與外掛程式互動
- 選單是使用者控制外掛程式的重要部分，因此在設計應用程式 妥善結構和用語
- 避免使用只會重複播放外掛程式名稱的選單項目。而是從 動作字詞
- 如果主選單項目已開始工作流程，且沒有任何單一動詞 說明其用途，請將其命名為「Start」。這個模式 文件外掛程式快速入門導覽課程。
- 除非選單的項目超過六個，否則請不要使用子選單。他們可以 內容變得複雜又難以選取
- 請描述工作，而非選單項目顯示的 UI 元件。
| 錯誤做法 | 正確做法 |
|---|---|
 |
 |
錯誤訊息
發生問題時，請務必使用淺顯易懂的用語。說明 從使用者的立場判斷，並提供修正建議。
- 禁止使用者查看程式碼擲回的任何例外狀況。而是改用
try...catch敬上 陳述式來攔截例外狀況，然後顯示使用者容易理解的錯誤訊息 樣式設為 外掛程式 CSS 中的error類別 套件或 快訊對話方塊。 - 在發布前，請先確認外掛程式不會將偵錯資訊記錄到 JavaScript 控制台；使用 Stackdriver Logging 。
| 錯誤做法 | 正確做法 |
|---|---|
 |
 |
教學型內容
每個外掛程式的選單都包含自動說明對話方塊。如果您提供說明網址 您發布的內容後，按鈕連結即可前往該頁面。除非您 外掛程式應該明確易懂，請提供使用方式說明網頁。
- 盡可能以項目符號或編號清單呈現操作說明。步行使用者 ，並清楚參照已命名的 UI 元素。
- 請務必清楚說明所有規定，例如設定 以特定方式編輯試算表
- 您也可以從主要使用者介面連結瀏覽說明內容。 如果外掛程式會建立新文件，你也可以在 文件內文
自訂使用者介面
有些簡單的編輯器外掛程式可以透過選單控制，但大多數 使用自訂的側欄或對話方塊 內容。
- 側欄最適合放置於使用者可能會使用的持續性工具 反覆參照文件或試算表的內容。
- 對話方塊最適合用於一次性的工具、設定頁面和重要郵件。
使用者介面文字
假設使用者在任何對話方塊或側欄中，都只會閱讀標題和按鈕標籤。 他們還能瞭解您介面的功能並做出最佳選擇嗎？
- 使用獨立標題和按鈕標籤。
- 避免冗長的說明文字。
對話方塊
對話方塊非常適合使用者只用一次就離開的工具設計。舉例來說 外掛程式可讓使用者插入圖片、您可以在對話框中 插入圖形方塊後，即可關閉對話方塊。對話方塊是 顯示外掛程式設定、 重要的訊息
- 請勿開啟對話方塊 (包括 快訊或提示)， (僅限 但逐一顯示
- 以對話方塊標題來說，請使用單字或短句，且詞排行最多 重要的字詞
- 按鈕標籤應與對話方塊標題相關。
- 偏好兩個按鈕，通常是主要動作和「取消」。特殊情況 需要第三個按鈕，請考慮使用右下角
- 在對話方塊左下角放置按鈕。藍色的主要按鈕 皆應位於左側，右側是灰色的次要按鈕。
| 錯誤做法 | 正確做法 |
|---|---|
 |
 |
Sidebars
側欄可讓使用者查看文件、試算表、簡報 或填寫表單時也能讓使用者重複使用你的外掛程式。 每次開啟新的側欄時，先前所有的側欄都會自動關閉。 這個模式最適合用在使用者完成後結束的暫時模式。
- 使用者可能有其他含有自己的側欄的外掛程式。如果有兩個外掛程式 且同時開啟側欄，系統只會顯示一個側欄。
- 首次開啟文件時不要顯示側欄或對話方塊。
- 只有在以下地區運作的外掛程式：
AuthMode.FULL敬上 可以開啟側欄或對話方塊。您可以使用選單項目開啟 側欄，因為這樣會提示使用者提供完整授權。
控制項
優質的外掛程式 UI 應留給控制空間和呼吸室。充足的邊界和 邊框間距可大有斬獲，但稠密型控制看似讓人頭昏眼花。位於 仍可以從編輯器本身借用版面配置例如 對話方塊，例如「檔案」>建立自己的頁面設定。
外掛程式 CSS 套件的說明文件 提供以下每種控制項類型的標記範例。
按鈕
使用按鈕控制使用者介面的主要動作，而非純粹 連結或其他元素
- 避免同時顯示多個藍色、紅色或綠色按鈕。灰色 按鈕可能會重複出現。
- 大部分的按鈕標籤應為句首字母大寫，並以動詞開頭。紅色 按鈕，通常用於建立動作，請全部使用大寫。
| 錯誤做法 | 正確做法 |
|---|---|
|
|
|
核取方塊和圓形按鈕
請在使用者可以選取多個選項或完全不使用選項時勾選核取方塊。使用 圓形按鈕 (或選取選單) 只能選取一個選項。
- 不要變更核取方塊模仿圓形按鈕的行為
- 請勿在檢查後立即執行任何動作。人會犯錯，等待 直到使用者點選按鈕確認選項為止。
選取選單
選取合適的選項是提供簡短的替代選項清單的絕佳方式。
- 依照字母順序或所有使用者都能使用的邏輯配置排序選項 (例如一週中的某幾天，從週日開始計算)。
- 如果清單過長，建議您改用其他控制項。例如： 您可能會顯示可捲動的清單，為選單騰出更多空間 瀏覽起來也更方便
文字區域
如果使用者需要輸入超過幾個字，請使用文字區域。
- 將文字區域的高度至少設為兩行，方便使用者輕鬆使用 例如文字欄位
- 將標籤置於上方。
文字欄位
若使用者只需輸入一兩字，可使用文字欄位。
- 文字欄位的寬度應會顯示您希望使用者輸入的文字。
- 避免使用預留位置文字做為標籤，因為該文字會消失。 如要提供範例或額外詳細資訊，建議使用預留位置文字。
- 將標籤置於上方，但可以並排的簡短文字欄位版面配置。
品牌宣傳
加購內容
如要宣傳品牌，請確保標題簡潔明瞭。這有助於 讓使用者專注在使用者介面，您的外掛程式看起來就更像是編輯器的一部分。
- 外掛程式的所有方面都必須遵循 品牌宣傳指南。
- 請勿加入「Google」字樣或使用 Google 產品圖示。
- 文字不得超過幾個字詞，且樣式為
外掛程式 CSS 中的
gray類別 套件。 - 圖形需使用白色背景，且大小不得超過 200 × 60 像素。
- 建立對話方塊時，品牌宣傳元素應位於右下角。
- 側欄則可以顯示在側欄中。
店內
如要發布編輯器外掛程式，您必須備妥 圖片素材資源的數量。 這些素材資源可用來建立外掛程式商店資訊。
無障礙設定
每個人都應該能享受你的外掛程式，不論對方看到的是色彩還是顏色 使用螢幕閱讀器，或滿足其他需求無障礙功能的涵蓋範圍相當廣泛 此風格指南並未完整說明的主題。這項實用的資源 Google 無障礙中心網站。但在這裡 以下提供幾個入門訣竅：
- 確認您可以使用鍵盤前往所有 UI 控制項。新增
將
tabindex=0變更為自訂控制項 (例如使用<div>建立控制項)，使用者就能 使用 Tab 鍵請考慮是否也應支援其他鍵，例如箭頭 。 - 部分使用者可能會搭配外掛程式使用螢幕閱讀器。因此
擁有
alt屬性、 自訂控制選項應有 描述其用途的 ARIA 屬性。 - 不要只依賴顏色傳達狀態。同時使用圖示和文字。
如果您使用標準網路控制項 (例如本指南先前提到的控制項)， 讓外掛程式更容易存取