顶部栏应用(支持)

简介

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

顶级酒吧应用在哪里

顶级酒吧应用程序位于Zendesk的支持最宝贵的位置之一。亚博

顶部栏应用程序使代理能够以最小的分心来改善他们的工作流程，使他们能够专注于他们的工作。应用程序位置像全局设置一样在支持中持续存在。

代理可以在任何需要的时候点击顶部导航栏中的任何一个应用程序，而不会占用他们的工作空间。

顶部栏应用程序有助于放大当前代理的工作方式。

对于不需要整个页面视图或大量屏幕空间的应用程序，顶部栏是代理的一个很好的位置选择。如果一个应用程序需要更多的关注时间和输入，这就是我们建议使用侧边栏位置．

如何访问它们

顶部栏应用程序直接安装到管理中心，一旦代理安装它从亚博Zendesk市场．应用程序也可以通过管理中心私下上传。

应用程序可以在支持代理中立即开始使用。

使用Top Bar应用程序的好处之一是它们可以重新排序，以一种对工作空间有意义的方式。

来吧，来吧，都到集市来

的应用程序目录中可以找到顶部栏应用程序亚博Zendesk市场供管理员研究、浏览和安装。

虽然我们目前不支持按位置过滤，但管理员可以按产品对市场上的应用程序进行排序:例如支持，票务系统。亚博

应用程序保存在哪里?

应用程序安装完成后，管理员可以在管理中心的“Zendesk Support apps”下访问已安装的应用程序。亚博

应用程序重新排序

虽然代理不能自定义他们的应用程序在支持中的定位顺序，但管理员可以通过管理中心做到这一点。

注意边缘

虽然它可能不会直接影响你设计应用程序的方式。建议注意，应用程序的位置可以随时改变。如果一个Agent选择将你的应用放在右手边，那么考虑一下Support界面右手边边距的影响。

App位置:右手数第二个

App位置:右侧

总体布局

顶部栏布局使用统一的元素和间距来鼓励跨平台、环境和屏幕大小的一致性。

图标

你的标志在你的品牌识别中扮演着重要的角色。我们在《技术支持》中为最成功的图标收集了一些经过尝试和测试的技巧。遵循下面的这些指导方针，你就会顺利地走上你的道路。

外部图标大小

标志大小，画板

Logo大小，填充

标志大小，高度/宽度

该做什么和不该做什么

我们为您的标志设置的图标将是白色的

我们选择了白色，以确保顶部栏导航中所有应用程序的颜色一致。考虑一下你要选择哪种类型的标志作为你的主图标，记住它将是灰色背景上的白色。

帮助您的标志显示为它是

将你的logo设置为方形，会让你的图标最大限度地呈现出缩放的效果(而且不会变形)。

追求简单

在下面的例子中，你会发现简单的形状比详细的设计更适合你的图标。一个简单的图标设计在较小的规模下更清晰，更容易识别。

以一致性为目标

除了你为顶部栏应用程序设置的图标外，你还可以在应用程序的顶部标题中提供一个logo的图像。考虑使用相似的颜色，并帮助将品牌联系在一起。另一个需要考虑的问题是，确保logo中重叠的任何形状，在logo发布后可能会丢失，因为logo的尺寸非常小。

容器

容器窗口的解剖结构将帮助您更好地理解结构是如何创建的。我们创建了3种容器大小来帮助你决定哪种容器最适合你的应用，并为你的成功做好准备。

小

宽度大小:270像素

头

每个应用程序都有一个正式的标题，由应用程序标题和图标组成。

标志

你的logo会在标题的右边。目标是一个logo的变化，是容易消化时，小。

容器

媒介

宽度大小:360像素

头

每个应用程序都有一个正式的标题，由应用程序标题和图标组成。

标志

你的logo会在标题的右边。目标是一个logo的变化，是容易消化时，小。

容器

大

宽度大小:640像素

头

每个应用程序都有一个正式的标题，由应用程序标题和图标组成。

标志

你的logo会在标题的右边。目标是一个logo的变化，是容易消化时，小。

容器

注意事项

考虑大格式布局中的组件

利用大容器的两列网格，将最大限度地扩大屏幕空间。当人们使用你的应用时，他们滚动屏幕的次数会减少。

进一步的阅读

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

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

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