Google Workspace 插件的界面样式指南
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Google Workspace 插件应与其扩展的托管应用的样式和布局保持一致。他们应使用熟悉的控件和行为自然地扩展界面。本文档介绍了一些指南,说明了如何处理文字、图片、控件和品牌元素,以提升用户体验的质量。
如果您的插件会打开是其操作不可或缺的部分的单独网页(例如插件的设置页面),请确保这些网页也遵循这些样式准则。
文字和图片
本部分介绍了如何在您的插件中正确使用文本和图片。
插件名称
您必须在其项目清单中设置插件名称,并在配置插件以供发布时设置插件名称。此名称会显示在许多位置,例如 Google Workspace Marketplace 商品详情和菜单中。选择名称时,请注意以下几点:
- 采用词首字母大写形式。
- 除非是在品牌名称中,否则请避免使用标点符号,尤其是圆括号。
- 请保持简短,最好不超过 15 个字符。在 Google Workspace Marketplace 商品详情和其他位置,系统可能会自动截断长名称。
- 请勿在插件名称中包含“Google”“Gmail”或其他 Google 产品名称。
- 请勿在插件名称中添加“插件”一词。
- 省略版本信息。
写作风格
您无需写太多内容。大多数操作都应通过图标、布局和简短的标签清晰呈现。如果您发现您的某个插件需要更详细的说明,而简短的标签无法提供,最佳做法是创建一个单独的网页来介绍该插件,并提供指向该网页的链接。
编写界面文本时:
- 使用句首字母大写格式(尤其是对于按钮、标签和卡片操作)。
- 最好使用简短、简单的文本,避免使用专业术语或首字母缩写词。
通用操作和卡片操作
如果您在插件中使用通用操作或卡片操作,它们会显示为您定义的卡片中的菜单项。您可以选择这些菜单中用于执行这些操作的文本。选择要使用的文本时,请注意以下事项:
- 避免菜单文本仅重复您的插件名称。
- 每个菜单项都应以动词开头,例如“运行”“配置”或“创建”。
- 描述任务,而不是操作显示的界面组件。
- 如果您的操作会启动工作流,但没有单个动词可以描述其用途,请将其命名为“开始”。
- 请尽量减少菜单项的数量,以免迫使用户滚动浏览庞大的列表。如果您要实现更多操作,不妨考虑使用多个卡片,并在每个卡片上提供不同的操作。
错误消息
当出现问题时,请务必使用简单明了的语言。从用户的角度说明问题,并建议解决方法。
- 请勿允许用户查看您的代码抛出的任何异常。而是应使用
try...catch
语句拦截异常,然后显示便于用户理解的错误消息。
- 在发布之前,请检查您的插件是否在界面中显示调试信息。
帮助内容
您可以设计卡片来显示帮助信息或向用户说明插件操作。如果您要为插件构建帮助内容,请务必:
- 请尽可能以项目符号列表或编号列表的形式显示说明。引导用户完成最终结果,并明确引用命名的界面元素。
- 请确保说明中明确说明所有要求,例如以特定方式设置电子表格。
- 您可以随意链接到外部帮助内容,例如支持网页。
图片
您在插件中使用的图片可以是内置图标类型之一,也可以是通过网址指定的公开托管的图片。使用托管的图片时,请确保所有可能使用您的插件的人都可以访问这些图片。
控件
本部分提供了有关交互式 widget 的用户体验准则。
使用按钮控制界面的主要操作,而不是其他 widget。
- 大多数文本按钮标签都应以动词开头。
- 在大多数情况下,按钮行应限制为三个按钮或更少。
DecoratedText
借助 DecoratedText 微件,您可以使用图标、按钮或开关来呈现文本内容。
- 对文本内容采用句首字母大写形式。
- 如果 DecoratedText widget 的文本无法放入可用空间,系统会截断该文本。因此,请始终尽量缩短文字内容。
您可以在插件中使用各种选择输入微件:下拉选择框、复选框和单选按钮。
- 当用户可以选择多个选项或根本不选择任何选项时,请使用复选框。
当必须选择一个选项时,请使用单选按钮(或选择菜单)。在提供替代方案的简短列表时,请使用下拉列表,同时尽量节省界面空间。
- 为每个选项分配的文本使用句首字母大写格式。
- 避免使用选择更改触发难以撤消的重大操作,因为用户在进行选择时经常会出错。请改为考虑添加一个按钮,用于读取当前选择值,然后触发相应操作。
- 对于下拉菜单,请按字母顺序或按所有用户都能理解的逻辑方案对选项进行排序(例如,按顺序显示星期几,从星期日或星期一开始)。
- 将给定选择输入 widget 中的选项数量限制在合理范围内。如果选项过多,用户可能会难以使用该微件。在这种情况下,不妨考虑将选项拆分为不同的类别和多个微件。
文本输入
文本输入框可供用户输入字符串数据。
- 请勿使用文本输入框让用户输入一组特定可能条目中的某个条目。请改用下拉菜单选择器。
- 使用提示和建议来帮助用户输入正确格式和内容的文本。
- 如果要输入的文字不止几个字,请使用多行文本输入。
品牌
本部分提供了有关向插件界面添加品牌元素的用户体验准则。
在您的插件中
如果您想在插件界面中添加品牌信息,请确保品牌信息简洁明了。这有助于用户专注于您的插件功能。
- 您的插件在所有方面都必须遵循品牌推广指南。
- 请勿使用“Google”“Gmail”或其他 Google 产品名称。
- 请勿添加 Google 产品图标,即使经过了修改也是如此。
- 请勿在品牌推广文案中添加“插件”一词。
- 品牌文案不应超过几个字。
在 Google Workspace Marketplace 中
在配置插件以供发布时,您需要提供一些图形和文字资源,以便构建 Google Workspace Marketplace 商品详情。
商品详情和这些资源的所有方面都必须遵循品牌推广指南。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-12-22。
[null,null,["最后更新时间 (UTC):2024-12-22。"],[[["\u003cp\u003eGoogle Workspace add-ons should seamlessly integrate with the host application's style and layout using familiar controls and behaviors.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on names should be concise, using title case, avoiding punctuation and Google product names, and kept to 15 characters or less.\u003c/p\u003e\n"],["\u003cp\u003eUI text should be minimal, using sentence case, simple language, and clear action verbs in menus and buttons.\u003c/p\u003e\n"],["\u003cp\u003eBranding should be subtle within the add-on, adhering to Google's branding guidelines, and avoiding Google product names or icons.\u003c/p\u003e\n"],["\u003cp\u003eError messages should be user-friendly, providing clear explanations and solutions instead of technical jargon or exceptions.\u003c/p\u003e\n"]]],["Add-ons must match the host application's style and extend the UI naturally. Key actions include: using title case for the add-on's name (15 characters or less), and avoiding punctuation, Google product names, \"add-on\", and version info. UI text should be in sentence case, short, and jargon-free, with menu items starting with action words. Error messages should use plain language. Images should be accessible, buttons should primarily use verbs, and text inputs should employ hints. Branding must be brief, adhering to specific guidelines.\n"],null,["# UI style guide for Google Workspace add-ons\n\nGoogle Workspace add-ons should be consistent with the\nstyle and layout of the\n[host application](/workspace/add-ons/guides/glossary#host_or_host_application)\nthey extend. They should extend the UI\nnaturally by using familiar controls and behaviors. The guidelines presented\nhere describe ways of handling text, images, controls, and branding that promote\na high-quality user experience.\n\nIf your add-on opens separate web pages that are an integral part of the add-on's\noperation (such as a settings page for the add-on), make sure those web pages\nalso follow these style guidelines.\n\nText and images\n---------------\n\nThis section tells you how to properly use text and images in your add-on.\n\n### Add-on name\n\nYou must set your add-on's name in its project\n[manifest](/workspace/add-ons/concepts/workspace-manifests) and when you\n[configure your add-on for publication](/workspace/marketplace/sdk#text_assets).\nThe name appears in many places, such as the [Google Workspace Marketplace](https://workspace.google.com/marketplace/)\nlisting and within menus. When choosing a name:\n\n- Use title case.\n- Avoid punctuation, especially parentheses, unless part of your brand.\n- Keep it short---15 or fewer characters is best. Long names may be automatically truncated in the Google Workspace Marketplace listing and elsewhere.\n- Don't include the words \"Google\", \"Gmail\", or other Google product names in your add-on name.\n- Don't include the word \"add-on\" in your add-on name.\n- Leave out version information.\n\n### Writing style\n\nYou shouldn't need to write much. Most actions should be made clear through\niconography, layout, and short labels. If you find a portion of your add-on\nneeds more extensive explanation than short labels can provide, it's a best\npractice to create a separate web page describing your add-on and link to it.\n\nWhen writing UI text:\n\n- Use sentence case (especially for buttons, labels, and card actions).\n- Prefer short, simple text without jargon or acronyms.\n\n### Universal and card actions\n\nIf you use [universal actions](/workspace/add-ons/how-tos/universal-actions)\nor [card actions](/apps-script/reference/card-service/card-action) in your\nadd-on, they appear as menu items in the [cards](/workspace/add-ons/concepts/cards)\nyou define. You can choose the text that is used in these menus for these\nactions. When choosing the text to use:\n\n- Avoid menu text that simply repeats your add-on's name.\n- Start each menu item with an action word such as \"Run\", \"Configure\", or \"Create\".\n- Describe the task, not the UI component that the action displays.\n- If your action begins a workflow and there's no single verb that describes what it does, call it \"Start\".\n- Keep the number of menu items small to avoid forcing the user to scroll through a large list. If you have more actions to implement, consider using multiple cards with different actions on each.\n\n### Error messages\n\nWhen something goes wrong, it's important to use plain language. Explain the\nproblem from the user's standpoint, and suggest how to fix it.\n\n- Don't allow the user to see any exceptions your code throws. Instead, use `try...catch` statements to intercept exceptions, then display a user-friendly error message.\n- Before you publish, check that your add-on doesn't display debug information in the UI.\n\n### Help content\n\nYou may wish to design cards that display help information or explain the\noperation of the add-on to the user. If you do build help content for your\nadd-on, remember to:\n\n- When possible, show instructions in a bulleted or numbered list. Walk users through to the end result, with clear references to named UI elements.\n- Make sure your instructions clearly explain any requirements, like setting up a spreadsheet in a certain way.\n- Feel free to link to external help content, such as supporting web pages.\n\n### Images\n\nImages used in your add-on are either one of the\n[built-in icon types](/apps-script/reference/card-service/icon)\nor a publicly hosted image specified by a URL. When using hosted images,\nbe sure that they are accessible by everyone who may use your add-on.\n\nControls\n--------\n\nThis section provide user experience guidelines for\n[interactive widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets).\n\n### Buttons\n\nUse buttons to control your user interface's main actions rather than\nother widgets.\n\n- Most text button labels should start with a verb.\n- Button rows should be limited to three or fewer buttons in most cases.\n\n### DecoratedText\n\n[DecoratedText widgets](/workspace/add-ons/concepts/widgets#informational_widgets)\nlet you present text content with icons, buttons or switches.\n\n- Use sentence case for the text content.\n- The text of a DecoratedText widget is truncated if it cannot fit into the available space. For this reason, always try to keep the text content as short as you can.\n\n### Selection inputs\n\nYou can use a variety of\n[selection input widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets)\nin your add-on: drop-down selection boxes, checkboxes, and radio buttons.\n\n- Use checkboxes when people can select multiple options, or no option at all. Use radio buttons (or a select menu) when exactly one option must be selected. Use dropdowns when providing a short list of alternatives while trying to save space in the UI.\n- Use sentence case for the text that is assigned to each option.\n- Avoid using selection changes to trigger major, hard-to-reverse actions, because people often make mistakes when making selections. Instead, consider adding a button that reads the current selection values and then triggers the action.\n- For dropdowns, sort the options alphabetically or by a logical scheme that all users can understand (such as presenting the days of the week in order, starting from Sunday or Monday).\n- Restrict the number of options in a given selection input widget to a reasonable number. If there are too many options, users may find it hard to use the widget. In those cases, consider breaking the option into different categories and multiple widgets.\n\n### Text inputs\n\nText inputs provide a place for users to enter string data.\n\n- Don't use a text input to make the user type one of a specific set of possible entries. Use a dropdown select instead.\n- Use hints and suggestions to help the user enter text with the correct format and content.\n- Use multiline text inputs if the text to be entered is more than a few words.\n\nBranding\n--------\n\nThis section provide user experience guidelines for adding branding elements\nto your add-on interface.\n\n### In your add-on\n\nIf you'd like to include branding in your add-on UI, keep it brief and light.\nThis helps people focus on your add-on functionality.\n\n- All aspects of your add-on must follow the [branding guidelines](https://developer.chrome.com/webstore/branding).\n- Don't include the word \"Google\", \"Gmail\", or other Google product names.\n- Don't include Google product icons, even if they are altered.\n- Don't include the word \"add-on\" in your branding text.\n- Branding text should be no more than a few words.\n\n### In the Google Workspace Marketplace\n\nWhen you configure your add-on for publication,\nyou provide a number of graphical and text assets to build the\nGoogle Workspace Marketplace listing.\n\nAll aspects of your store listing and these assets must follow the\n[branding guidelines](https://developer.chrome.com/webstore/branding)."]]