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