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