简介

本文档概述了Zendesk对侧边栏应用程序的设亚博计建议,以帮助开发者创建与Zendesk其他产品一致的体验。无论你是否使用Zendesk的设计系统Garden,本文档都是这样写的,因为即使你使用自己的设计系统或UI组件,这些原则也同亚博样适用。

边栏应用程序显示在哪里

在“支持”中,应用程序托盘中显示侧边栏应用程序。下面的视图包含一个应用程序托盘:

  • 票的观点

  • 新票务视图

  • 用户视图

  • 组织视图

剖析侧边栏应用程序

请注意: 亚博Zendesk正在对代理工作区中的应用程序容器进行可视化更新。这些变化不会影响应用程序本身,并将逐步推广到所有Zendesk帐户。亚博

您开发的侧边栏应用程序将被包装在一个预先构建的容器中,该容器为代理提供额外的信息和功能。虽然你不能改变这个设计,但了解它的外观和工作方式是很重要的:

  1. 应用程序图标-使用应用程序的/assets文件夹中提供的图标应用程序资产

  2. 应用程序名称-在manifest文件中指定。了解更多有关清单

  3. 展开和折叠切换-允许代理在不需要的时候最小化应用程序。

  4. 内容区域-你开发的应用程序将出现在哪里。

Agent Workspace如何影响应用程序

座席工作区是座席管理和响应客户支持请求的统一空间。这是一个可选的体验,由每个Zendesk实例的管理员来切换。亚博那些没有启用代理工作区的人将继续使用标准代理接口。

虽然你的应用在这两种情况下都会自动工作,但重要的是要了解它们的区别,以及它们如何影响你的应用和它的体验。

代理可以改变应用程序托盘的宽度

在代理工作区中,代理可以调整应用程序托盘的大小。下表概述了代理工作区和标准代理接口的可能宽度。

代理的工作空间 标准代理接口
宽度 宽度
*响应 *固定
*最小200px(不包括容器填充) * 320px(不包括容器填充)
*无上限

代理通常会根据自己的关注点调整应用程序托盘的大小。在设计你的应用程序时,请记住这一点。这将帮助你的应用程序以不同的宽度显示有用的信息。

专注于应用

代理已经使应用程序托盘更宽,将优先级放在他们的应用程序上。这表明代理想要完成一项任务,而不是专注于对话。如果可能的话,使用额外的空间来帮助代理在你的应用程序中完成他们的任务。例如,你的应用程序可以在搜索结果中提供额外的细节。

专注于对话

代理以最小宽度打开应用程序托盘。这表明代理专注于对话。在此宽度下,仅显示代理在对话期间可能使用的信息。

应用程序将以不同的宽度使用

现在,应用程序可以在代理工作区中以不同的宽度查看,了解这将如何影响应用程序的可用性是很重要的。考虑以下因素:

  • 确保设计元素不重叠,重要的文本不会以较小的宽度截断。

  • 确保你的应用在更大的尺寸下感觉结构良好,保持组件之间的相对对齐,拉伸元素和展开文本以使用合理的空间。

注意事项

1.当你的应用程序第一次加载时,不要使用主按钮样式

你的应用可能会存在于一个工作区中,与代理交互的还有很多其他东西。考虑到更广泛的背景,减少对代理的干扰是很重要的,以帮助他们专注于他们的任务。

Zend亚博esk界面根据不同的环境使用不同风格的按钮。下面是如何在应用程序中使用按钮样式的快速概述:

  • 主要的按钮用于给定视图中最重要的操作。对于应用程序,只有在代理与您的应用程序交互后才使用这些。

  • 二次按钮用于辅助操作,是应用程序初始加载时显示的按钮的替代选项。

  • 三级按钮用于在给定视图中重复或不强调的操作。

2.在合适的地方调整应用的高度

当用户与你的应用程序交互时,他们将接触到的数据和信息的数量会发生变化。

  • 如果你的应用本质上是动态的,考虑不同状态下的高度,避免不必要的空白。

  • 避免高度的剧烈变化,因为这可能会让特工迷失方向。

  • 只有在代理执行操作时,如登录帐户或进行搜索时,才更改应用程序的高度。

3.注意一次显示的数据量

许多开发人员使用应用程序来显示信息,为代理提供额外的上下文,解决问题或回答问题。表格是一种以结构化的方式显示数据的好方法,下面的指导方针将帮助您为代理创建集中的体验:

  • 使用不超过两列的表向用户显示最相关的信息。

  • 避免显示超过5行的信息,以保持应用程序的高度不会太长。

  • 使用分页让用户解析更大的结果集。花园有[分页非常适合此场景的组件。

  • 如果您正在处理大量数据,则包括搜索功能,以帮助代理尽快找到他们正在寻找的内容。

  • 在有意义的地方,使用选项卡或手风琴来分隔内容,以帮助管理一次显示多少内容。

进一步的阅读

  • 阅读一些UI基本面亚博Zendesk在其所有产品中都使用了这种技术。

  • 了解Zendesk亚博语气和声音帮助你像Zendesk一样写作。亚博

  • 探索花园的网站查看所有可用的组件。