侧边栏应用程序(支持)
简介
本文档概述了Zendesk对侧边栏应用程序的设亚博计建议,以帮助开发者创建与Zendesk其他产品一致的体验。无论你是否使用Zendesk的设计系统Garden,本文档都是这样写的,因为即使你使用自己的设计系统或UI组件,这些原则也同亚博样适用。
边栏应用程序显示在哪里
在“支持”中,应用程序托盘中显示侧边栏应用程序。下面的视图包含一个应用程序托盘:
票的观点
新票务视图
用户视图
组织视图
剖析侧边栏应用程序
请注意: 亚博Zendesk正在对代理工作区中的应用程序容器进行可视化更新。这些变化不会影响应用程序本身,并将逐步推广到所有Zendesk帐户。亚博
您开发的侧边栏应用程序将被包装在一个预先构建的容器中,该容器为代理提供额外的信息和功能。虽然你不能改变这个设计,但了解它的外观和工作方式是很重要的:
应用程序图标-使用应用程序的/assets文件夹中提供的图标应用程序资产.
应用程序名称-在manifest文件中指定。了解更多有关清单.
展开和折叠切换-允许代理在不需要的时候最小化应用程序。
内容区域-你开发的应用程序将出现在哪里。
Agent Workspace如何影响应用程序
座席工作区是座席管理和响应客户支持请求的统一空间。这是一个可选的体验,由每个Zendesk实例的管理员来切换。亚博那些没有启用代理工作区的人将继续使用标准代理接口。
虽然你的应用在这两种情况下都会自动工作,但重要的是要了解它们的区别,以及它们如何影响你的应用和它的体验。
代理可以改变应用程序托盘的宽度
在代理工作区中,代理可以调整应用程序托盘的大小。下表概述了代理工作区和标准代理接口的可能宽度。
代理的工作空间 | 标准代理接口 |
---|---|
宽度: | 宽度: |
*响应 | *固定 |
*最小200px(不包括容器填充) | * 320px(不包括容器填充) |
*无上限 |
代理通常会根据自己的关注点调整应用程序托盘的大小。在设计你的应用程序时,请记住这一点。这将帮助你的应用程序以不同的宽度显示有用的信息。
专注于应用
代理已经使应用程序托盘更宽,将优先级放在他们的应用程序上。这表明代理想要完成一项任务,而不是专注于对话。如果可能的话,使用额外的空间来帮助代理在你的应用程序中完成他们的任务。例如,你的应用程序可以在搜索结果中提供额外的细节。
专注于对话
代理以最小宽度打开应用程序托盘。这表明代理专注于对话。在此宽度下,仅显示代理在对话期间可能使用的信息。
应用程序将以不同的宽度使用
现在,应用程序可以在代理工作区中以不同的宽度查看,了解这将如何影响应用程序的可用性是很重要的。考虑以下因素:
确保设计元素不重叠,重要的文本不会以较小的宽度截断。
确保你的应用在更大的尺寸下感觉结构良好,保持组件之间的相对对齐,拉伸元素和展开文本以使用合理的空间。
注意事项
1.当你的应用程序第一次加载时,不要使用主按钮样式
你的应用可能会存在于一个工作区中,与代理交互的还有很多其他东西。考虑到更广泛的背景,减少对代理的干扰是很重要的,以帮助他们专注于他们的任务。
Zend亚博esk界面根据不同的环境使用不同风格的按钮。下面是如何在应用程序中使用按钮样式的快速概述:
主要的按钮用于给定视图中最重要的操作。对于应用程序,只有在代理与您的应用程序交互后才使用这些。
二次按钮用于辅助操作,是应用程序初始加载时显示的按钮的替代选项。
三级按钮用于在给定视图中重复或不强调的操作。
2.在合适的地方调整应用的高度
当用户与你的应用程序交互时,他们将接触到的数据和信息的数量会发生变化。
如果你的应用本质上是动态的,考虑不同状态下的高度,避免不必要的空白。
避免高度的剧烈变化,因为这可能会让特工迷失方向。
只有在代理执行操作时,如登录帐户或进行搜索时,才更改应用程序的高度。
3.注意一次显示的数据量
许多开发人员使用应用程序来显示信息,为代理提供额外的上下文,解决问题或回答问题。表格是一种以结构化的方式显示数据的好方法,下面的指导方针将帮助您为代理创建集中的体验:
使用不超过两列的表向用户显示最相关的信息。
避免显示超过5行的信息,以保持应用程序的高度不会太长。
使用分页让用户解析更大的结果集。花园有[分页非常适合此场景的组件。
如果您正在处理大量数据,则包括搜索功能,以帮助代理尽快找到他们正在寻找的内容。
在有意义的地方,使用选项卡或手风琴来分隔内容,以帮助管理一次显示多少内容。