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

编辑器插件使用 Apps 脚本的 HTML 服务构建界面(菜单、边栏和对话框)。由于这些接口是在 HTML 和 CSS 中开发的,因此可以高度自定义。不过,在构建插件界面时,您应该将其设计为提供良好的用户体验。

最佳插件通过使用熟悉的控件和行为来自然地扩展每个编辑器。构建新插件时:

文字

插件名称

您必须在发布插件时为其设置名称。该名称会显示在许多位置,例如插件商店和菜单中。

  • 采用词首字母大写形式。
  • 除非是品牌的一部分,否则避免使用标点符号,尤其是括号。
  • 尽量简短 - 最好不要超过 30 个字符。长名称可能会被自动截断。
  • 请勿添加插件所适用的 Google 产品的名称(或使用“Google”一词)。
  • 省去版本信息。
  • 确保插件的已发布名称与脚本项目的文件名相同。项目名称会显示在授权对话框中。
错误做法 正确做法
插件名称有误 合适的插件名称

写作风格

您无需编写太多内容。大多数操作都应通过图标、布局和短标签来清晰区分。如果您发现某个插件需要比短标签更全面的说明,那么最好创建一个单独的插件来描述该插件并链接到该插件。

编写界面文本时:

  • 采用句首字母大写形式(尤其是按钮、标签和菜单项)。
  • 首选简短的简短文本,而不是专业术语或首字母缩略词。
错误做法 正确做法

安装后提示

用户安装您的插件后,系统会立即显示安装后提示,该提示也会在“帮助”中显示。请说出几句话,帮助用户快速上手。

  • 从操作词开始。
  • 描述使用此插件的第一步。
  • 如果您有主界面(例如边栏),请说明如何打开边栏。
  • 不要在此宣传您的插件,因为您的插件已经安装。
错误做法 正确做法
安装后提示不佳 实用的安装后提示

与常规 Apps 脚本项目不同,插件不会显示在脚本编辑器或脚本管理器中;用户无法直接运行插件脚本。每个插件都会在插件菜单中显示一个位置。用户可通过菜单(可能还有对话框或边栏)与插件进行交互。

  • 菜单是用户控制插件的方式的关键部分,因此设计其结构和措辞时请谨慎。
  • 避免使用仅重复显示插件名称的菜单项。而应从操作词开始。
  • 如果您的主菜单开始了一个工作流,并且没有单个动词描述其作用,请将其命名为“Start”。此模式在文档插件快速入门中使用。
  • 除非菜单包含超过 6 个菜单项,否则请尽量不要使用子菜单。它们可能很挑逗且难以选择。
  • 描述任务,而不是菜单项显示的界面组件。
错误做法 正确做法
错误的菜单项标签 良好的菜单项标签

错误消息

出现问题时,请务必使用简单明了的语言。从用户的角度说明问题,并提出如何解决问题的建议。

  • 不允许用户看到您的代码抛出的任何异常。您可以改用 try...catch 语句来拦截异常,然后显示一个插件式错误消息,其中包含插件插件 CSS 软件包或 alert 对话框中 error 类样式的内嵌文本。
  • 在发布之前,请确认您的插件不会将调试信息记录到 JavaScript 控制台;请改为使用 Stackdriver Logging
错误做法 正确做法
错误错误消息 良好的错误消息

帮助内容

每个插件的菜单都包含一个“自动帮助”对话框。如果您在发布时提供了帮助网址,“了解详情”按钮会链接到该页面。除非您的插件不言自明,请提供介绍如何使用该插件的页面。

  • 请尽可能在项目符号或编号列表中显示说明。引导用户了解最终结果,提供对命名界面元素的明确引用。
  • 请务必按照说明明确说明所有要求,例如以特定方式设置电子表格。
  • 您也可以随时在主界面中链接到帮助内容。 如果您的插件创建了新的文档,您还可以在文档正文中显示说明。

自定义界面

某些简单的编辑器插件完全由其菜单控制,但大多数插件都会显示包含自定义内容的边栏或对话框

  • 边栏最适合持久性工具,用户在引用其文档或电子表格的内容时可能会重复使用。
  • 对话框最适合用于一次性工具、设置页面和重要的消息。

界面文字

在任何对话框或边栏中,假设用户只阅读标题和按钮标签。 他们是否仍然可以弄清楚您的界面的用途并做出明智的选择?

  • 使用独立的标题和标签。
  • 避免使用很长的描述性文字。

对话框

对话框非常适合用户使用一次,然后继续使用。例如,如果您的插件允许用户插入图形,您可能会显示一个对话框,让您选择要插入的内容,然后在插入图形时关闭对话框。此外,对话框也有助于显示插件的设置,或传达重要信息。

  • 请勿打开另一个对话框(包括提醒或提示)— 一次只显示一个对话框。
  • 对于对话框标题,请使用字词或短语,并以最重要的字词开头。
  • 按钮标签应与对话框标题相关。
  • 最好有两个按钮,通常是主要操作和“取消”。对于需要第三个按钮的特殊情况,请考虑使用右下角。
  • 将按钮放在对话框的左下角。蓝色主按钮应位于左侧,所有灰色次要按钮在右侧。
错误做法 正确做法
对话框标题错误 良好的对话框标题

通过边栏,用户可以在做出选择时回想自己的文档、电子表格、演示文稿或表单。还能让用户反复使用您的插件。 每当您打开新的边栏时,系统会自动关闭前面的任一边栏。 这类广告最适合在用户退出后退出的临时模式。

  • 用户可能拥有其他带各自边栏的插件。如果两个插件尝试同时打开边栏,系统只会显示一个插件。
  • 首次打开文档时不显示边栏或对话框。
  • 只有 AuthMode.FULL 中运行的插件才能打开边栏或对话框。您可以使用菜单项打开边栏,因为这会提示用户提供完整授权。

控制

优秀的附加界面让他们的控制空间更空旷。足够的外边距和内边距会带来很大的帮助,而密集的控件可能会让您应接不暇。如有疑问,请从编辑器本身借用布局。例如,在创建您自己的文档时,查看 Google 文档中的现有对话框,例如文件 > 页面设置

插件 CSS 软件包的文档提供了以下各类控件的示例标记。

按钮

使用按钮(而不是普通链接或其他元素)来控制界面的主要操作。

  • 避免一次显示多个蓝色、红色或绿色按钮。灰色按钮可能会重复出现。
  • 大多数按钮标签应采用句首字母大写形式,并以动词开头。红色按钮(通常用于创建操作)应使用全部大写。
错误做法 正确做法

复选框和单选按钮

在用户可选择多个选项或者根本无选项时,使用复选框。如果必须只选择一个选项,请使用单选按钮(或选择菜单)。

  • 请勿将复选框的行为更改为模仿单选按钮。
  • 完成检查后,请勿立即执行任何操作。人难免出错。等到用户点击某个按钮后,再确认自己的选择。

选择菜单

选择列表是一种候选列表的绝佳方式。

  • 按字母顺序或所有用户逻辑可以理解的逻辑方案(例如,从星期日开始的星期几)对选项进行排序。
  • 如果列表过长,请考虑使用其他控件。例如,您可以显示一个可滚动的列表,为菜单提供更多空间,使其更易于导航。

文本区域

如果用户需要输入多个字词,请使用文本区域。

  • 将文本区域至少设为两行,使其更易于使用,并且看起来不像文本字段。
  • 将标签放在顶部。

文本字段

如果用户只需要输入一两个字词,请使用文本字段。

  • 文本字段的宽度应指明您希望用户在该字段中输入什么内容。
  • 避免使用占位符文本作为标签,因为它会在焦点上消失。 占位符文本有助于提供示例或提供额外信息。
  • 将标签放在顶部,但也可以随意布局短文本字段。

品牌标示

在插件中

如果您希望加入品牌信息,请保持简短。这有助于用户专注于您的界面,并使您的插件感觉像是编辑器的一部分。

  • 插件的所有方面都必须遵守品牌推广指南
  • 请勿添加“Google”一词或使用 Google 产品图标。
  • 文字不应超过几个字词,且应采用插件 CSS 软件包的 gray 类中的样式。
  • 图片背景应为白色,但不得超过 200 像素 × 60 像素。
  • 对于对话框,品牌信息应位于右下角。
  • 对于边栏,品牌信息可以位于顶部或底部。

实体店内

若要发布编辑器插件,您需要一定数量的图片素材资源。这些素材资源用于构建插件商品详情。

无障碍

每个人都应该能够体验您的插件,无论他们看到的颜色不同、使用屏幕阅读器还是有其他需求。无障碍功能是一个宽泛的主题,无法在此样式指南中完全涵盖。Google 无障碍网站就是一个实用资源。但您可以参考以下提示:

  • 确保您可以使用键盘导航到所有界面控件。将 tabindex=0 添加到自定义控件(例如使用 <div> 创建的控件)中,以便用户能够使用它们进行制表。请考虑是否也应支持其他键,例如列表的箭头。
  • 部分用户可能会通过屏幕阅读器使用插件。因此,图片应具有 alt 属性,而自定义控件应具有用于描述其用法的 ARIA 属性
  • 不要只依赖颜色来传达状态。您也可以使用图标和文字。

如果您使用标准网络控件(如本指南前文所述),会使插件更易于使用。