编辑器插件使用 Apps 脚本的 HTML 服务构建界面（菜单、边栏和对话框）。由于界面是使用 HTML 和 CSS 开发的，因此可高度自定义。不过，在构建插件界面时，您应将其设计为提供出色的用户体验。
优秀的插件会使用熟悉的控件和行为，自然地扩展每个编辑器。构建新插件时：
- 在 HTML 服务页面中使用插件 CSS 软件包。
- 如果对设计有疑问，请在编辑器中找到类似的对话框或边栏，并与之匹配，或参阅插件快速入门。
- 请遵循此样式指南，打造顺畅的体验。
文本
插件名称
您必须在发布插件时设置其名称。该名称会显示在许多位置，例如插件商店和菜单中。
- 采用词首字母大写形式。
- 除非是在品牌名称中，否则请避免使用标点符号，尤其是圆括号。
- 请保持简短，最好不超过 30 个字符。系统可能会自动截断长名称。
- 请勿添加该插件适用的 Google 产品的名称（或使用“Google”一词）。
- 省略版本信息。
- 确保该插件已发布的名称与脚本项目的文件名相同。项目名称会显示在授权对话框中。
| 错误做法 | 正确做法 |
|---|---|
 |
 |
写作风格
您无需写太多内容。大多数操作都应通过图标、布局和简短的标签清晰呈现。如果您发现您的某个插件需要更详细的说明，而简短的标签无法提供，最佳做法是创建一个单独的网页来介绍该插件，并提供指向该网页的链接。
编写界面文本时：
- 使用句首字母大写格式（尤其是对于按钮、标签和菜单项）。
- 最好使用简短、简单的文本，避免使用专业术语或首字母缩写词。
| 错误做法 | 正确做法 |
|---|---|
|
|
|
安装后提示
用户安装您的插件后，系统会立即弹出安装后提示，该提示也会显示在“帮助”中。您提供了几句话来帮助用户快速上手。
- 以动词开头。
- 说明使用您的插件的第一步。
- 如果您有主要界面（例如边栏），请说明如何打开它。
- 请勿在此处宣传您的插件，因为用户已安装该插件。
| 错误做法 | 正确做法 |
|---|---|
 |
 |
菜单项
与常规 Apps Script 项目不同，插件不会显示在脚本编辑器或脚本管理器中；用户无法直接运行插件脚本。而是会在插件菜单中为每个插件分配一个位置。用户可以通过菜单（以及可能的对话框或边栏）与插件互动。
- 菜单是用户控制您的插件的重要部分，因此请仔细设计其结构和用词。
- 避免菜单项仅重复您的插件名称。请改为从动词开始。
- 如果您的主菜单项用于启动工作流，并且没有单个动词可以描述其用途，请将其命名为“开始”。文档插件快速入门中使用了此模式。
- 除非菜单中包含的菜单项超过 6 个，否则请尽量不要使用子菜单。它们可能很挑剔，很难选择。
- 描述任务，而不是菜单项显示的界面组件。
| 错误做法 | 正确做法 |
|---|---|
 |
 |
错误消息
当出现问题时，请务必使用简单明了的语言。从用户的角度说明问题，并建议解决方法。
- 请勿允许用户查看您的代码抛出的任何异常。相反，请使用
try...catch语句拦截异常，然后显示以插件 CSS 软件包中的error类设置样式的内嵌文本的易于理解的错误消息或提醒对话框。 - 在发布之前，请检查您的插件是否会将调试信息记录到 JavaScript 控制台；请改用 Stackdriver 日志记录。
| 错误做法 | 正确做法 |
|---|---|
 |
 |
帮助内容
每个插件菜单都包含一个自动帮助对话框。如果您在发布时提供了帮助网址，则“了解详情”按钮会链接到该网页。除非您的插件不言自明，否则请提供一个页面来说明如何使用该插件。
- 请尽可能以项目符号列表或编号列表的形式显示说明。引导用户完成最终结果，并明确引用命名的界面元素。
- 请确保说明中明确说明所有要求，例如以特定方式设置电子表格。
- 您也可以在主界面中链接到帮助内容。 如果您的插件创建了新文档，您还可以在文档正文中显示说明。
自定义界面
一些简单的编辑器插件可以完全通过其菜单进行控制，但大多数插件会显示包含自定义内容的边栏或对话框。
- 边栏最适合用于用户在查看文档或电子表格内容时可能会反复使用的永久性工具。
- 对话框最适合用于一次性使用的工具、设置页面和重要消息。
界面文字
在任何对话框或边栏中，请假定用户只会阅读标题和按钮标签。 他们是否仍能了解界面的用途并做出正确的选择？
- 使用独立的标题和按钮标签。
- 避免使用长篇幅的描述性文字。
对话框
对话框非常适合用户使用一次后就不再使用的工具。例如，如果您的插件允许用户插入图片，您可以显示一个包含要插入内容的选项的对话框，然后在插入图片后关闭该对话框。对话框还有助于显示插件设置或传达重要消息。
- 请勿从一个对话框中打开其他对话框（包括提醒或提示），一次只能显示一个对话框。
- 对于对话框标题，请使用一个字词或短语，并以最重要的字词开头。
- 按钮标签应与对话框标题相关。
- 最好使用两个按钮，通常是主要操作和“取消”。对于需要第三个按钮的特殊情况，请考虑使用右下角。
- 将按钮放置在对话框的左下角。蓝色的主按钮应位于左侧，灰色的辅助按钮应位于右侧。
| 错误做法 | 正确做法 |
|---|---|
 |
 |
侧边栏
借助边栏，用户可以在做出选择时回顾文档、电子表格、演示文稿或表单。它们还可以让用户反复使用您的插件。每当打开新的边栏时，之前的所有边栏都会自动关闭。它们最适合用于用户完成操作后退出的临时模式。
- 用户可能还有其他具有自己边栏的插件。如果两个插件同时尝试打开边栏，则系统只会显示其中一个。
- 在文档首次打开时，不显示边栏或对话框。
- 只有在
AuthMode.FULL中运行的插件才能打开边栏或对话框。您可以使用菜单项打开边栏，因为这会提示用户提供完整授权。
控件
优秀的插件界面会为控件留出一些空间。适当的外边距和内边距大有帮助，而密集的控件可能会让人感到不知所措。如有疑问，请从编辑器本身借用布局。例如，在创建自己的对话框时，查看 Google 文档中的现有对话框，例如 File > Page setup。
插件 CSS 软件包的文档提供了以下每种类型控件的示例标记。
按钮
使用按钮控制界面的主要操作，而不是使用普通链接或其他元素。
- 避免同时显示多个蓝色、红色或绿色按钮。灰色按钮可能会反复显示。
- 大多数按钮标签应采用句子大写形式，并以动词开头。红色按钮（通常用于创建操作）应使用全大写。
| 错误做法 | 正确做法 |
|---|---|
|
|
|
复选框和单选按钮
当用户可以选择多个选项或根本不选择任何选项时，请使用复选框。当必须选择一个且仅一个选项时，请使用单选按钮（或选择菜单）。
- 请勿更改复选框的行为以模仿单选按钮。
- 在这些选项被选中后，请不要立即执行任何操作。人难免会犯错。等待用户点击按钮确认其选择。
选择菜单
选择器非常适合提供简短的替代方案列表。
- 按字母顺序或按所有用户都能理解的逻辑方案（例如从星期日开始的星期几）对选项进行排序。
- 如果列表过长，不妨考虑使用其他控件。例如，您可以显示一个可滚动列表，为菜单提供更多空间，并让菜单更易于浏览。
文本区域
如果用户需要输入的文字超过几句话，请使用文本区域。
- 请确保文本区域至少有两行高，这样用户便能更轻松地使用，并且文本区域看起来也不像文本字段。
- 将标签放在顶部。
文本字段
如果用户只需输入一两个字词，请使用文本字段。
- 文本字段的宽度应能让用户了解您希望他们在其中输入的内容。
- 避免将占位符文本用作标签，因为它会在获得焦点时消失。占位符文本非常适合提供示例或额外详细信息。
- 将标签放在顶部，但可以随意并排排列简短文本字段。
品牌
在您的插件中
如果您想添加品牌信息，请确保简洁明了。这有助于用户专注于您的界面，并让您的插件看起来像是编辑器的一部分。
- 您的插件在所有方面都必须遵循品牌推广指南。
- 请勿使用“Google”字样或 Google 产品图标。
- 文本不应超过几个字，并且应采用插件 CSS 软件包中的
gray类设置样式。 - 图形应采用白色背景，且尺寸不得超过 200 像素 x 60 像素。
- 对于对话框，品牌信息应位于右下角。
- 对于边栏，品牌信息可以位于顶部或底部。
在实体店内
若要发布编辑器插件，您需要提供多张图片素材资源。这些资源用于构建插件商品详情。
无障碍
无论用户的颜色感知能力是否有缺陷、是否使用屏幕阅读器或是否有其他需求，都应该能够使用您的插件。无障碍设计是一个广泛的主题，本样式指南无法全面介绍。Google 无障碍中心网站就是一个有用的资源。不过，下面提供了一些入门提示：
- 确保您可以使用键盘导航到所有界面控件。向自定义控件（例如使用
<div>创建的控件）添加tabindex=0，以便用户能够通过按 Tab 键切换到这些控件。考虑是否应支持其他按键，例如用于列表的箭头。 - 有些用户可能会搭配使用屏幕阅读器和您的插件。因此，图片应具有
alt属性，自定义控件应具有 ARIA 属性来描述其用途。 - 请勿仅依靠颜色来传达状态。还可以使用图标和文字。
如果您使用标准 Web 控件（如本指南前面所述的控件），则更容易让您的插件可供访问。