编辑器插件的界面样式指南

8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67

编辑器插件 使用 Apps 脚本的 HTML 服务。由于这些接口 是使用 HTML 和 CSS 开发的,并且可自定义性很强。然而,当 您应设计自己的插件界面,以便为用户提供优质的 体验。

优秀的插件可以使用熟悉的控件和 行为构建新插件时:

文本

插件名称

发布时,您必须设置插件的名称 。该名称会出现在许多地方,例如插件商店和菜单中。

  • 采用词首字母大写形式。
  • 避免使用标点符号,尤其是括号,除非是品牌的一部分。
  • 尽量简短 - 最好不超过 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 属性来描述其用途。
  • 不要仅依赖颜色来传达状态。同时使用图标和文字。

如果您使用标准网络控件(如本指南前面部分介绍的控件), 让你的插件更便于访问