此内容从我的书中摘录 实用的Tableau:来自Tableau Zen Master的100个提示,教程和策略 由O'Reilly Media Inc.出版,2018年ISBN:978-1491977316。 在亚马逊那里找到这本书.
设计设备特定的仪表板 -  1我在进行Tableau培训时收到的最常见问题之一是: 我应该使用什么仪表板尺寸?

与分析的许多方面一样,答案在很大程度上取决于观众。或者更具体地说,在这种情况下答案归结为观众如何消耗仪表板。

例如,仪表板是否会在大型桌面显示器上工作消耗?甚至更大的会议室显示器?

您是否希望最终用户在工作时间以外的笔记本电脑上使用仪表板?他们的移动设备呢?

这是一个预览 使您的第一个Tableau仪表板(第2部分)视频PlayFair数据电视.


如您所知,有许多不同的设备可以消耗仪表板,所有设备都具有自己独特的尺寸。那么你应该设计哪一个?当然,你可以使用自动调整,但结果是不可预测的,而不是总是理想的。

如果我过去没有积极肯定,我的默认仪表板大小为850像素,高1100像素高。这些尺寸与11½乘11英寸的纸张相同,所以至少我知道仪表板看起来很棒,如果它被打印出来或被保存为PDF并附加到电子邮件。

幸运的是,由于Tableau 10中的一个新功能,我不再需要挑选一个仪表板大小: 特定于设备的仪表板,或DSD。 DSD功能允许Tableau Dashboard作者用不同的尺寸将相同的仪表板置出,然后Tableau将自动检测屏幕尺寸,仪表板正在消耗仪表板并显示相应的版本。

在Tableau 10之前,可以基于最终用户的屏幕尺寸显示具有不同维度的仪表板,但它需要为每个仪表板构建一个单独的文件,以及对CSS代码的技术理解。虽然不是真正的“响应”,但DSD可以提供更好的用户体验,这些体验是为最终用户的环境量身定制的。

为了说明如何在Tableau 10中设计特定于设备的仪表板,我们会查看我的仪表板, 碰撞源的NFL脑震荡。此仪表板在线版中有特色 美国新闻& World Report。自美国新闻以来&世界报告在几个不同的设备上获得大量流量,他们让我创建了两个不同版本的仪表板。然后,他们的Web开发团队将在文章中添加一些代码,以基于观众的屏幕尺寸显示最合适的仪表板版本。因此,您可以在Cableau公开个人资料中看到两个单独的工作簿以获得相同的分析:

采用碰撞源Tableau Public的NFL脑震荡

使用Tableau 10中的新DSD功能,我能够将不同版本与一个文件组合起来,并获得最佳的版本自动显示。我也不需要任何技术网络设计知识来实现​​它。

我将通过碰撞源可视化下载NFL震荡的原始版本来启动本教程 我的Tableau公共个人资料页面 并在Tableau 10中打开它。

碰撞源Tableau默认的NFL脑震荡

正如您在“尺寸”下的左仪表板设计面板中,仪表板为750像素,高750像素高。什么是新的,即我现在有能力点击“设备预览”,看看750到750仪表板将如何看待不同的设备。如果我要点击设备预览按钮,Tableau围绕仪表板绘制边框,向您展示公共设备的尺寸。默认情况下,第一个预览为横向(或水平)布局中的平板电脑。

通过碰撞源Tableau Tablet预览的NFL脑震荡

“通用平板电脑”尺寸为1024宽,高768高。我将可视化设计为750到750,因此右侧有一些空白区域,沿底部有18像素。

我还可以通过选择不同的设备类型甚至在顶部的模型来翻转设备预览。对于这个真实的例子,我想创建一个750到750仪表板,它是原始的全尺寸版本,也是适合手机的附加版本。要为手机创建单独的布局,请从设备预览中导航到手机设备类型,选择型号,然后单击“添加电话布局”。我选择了通用电话尺寸。

NFL震荡由碰撞源Tableau默认手机

与之前的平板电脑预览一样,您现在可以看到在手机上消耗时的全尺寸仪表板如何适应。自从我点击“添加电话布局”以来,您还可以看到此版本显示在左上角。要在这些通用电话尺寸内调整仪表板的大小进行大小,请从左侧选项中选择“适合所有”。在制作此选择后,我的仪表板看起来像这样:

 适合所有

您可以在此视图中看到许多不同的问题。如果我选择自动尺寸,那么可怕的是,如果我选择自动尺寸,我的仪表板如何看待手机!对于此版本,我将调整每个仪表板组件的大小,以便在手机上查看时看起来更好。要显示DSD的完整功能,我甚至会删除整个仪表板组件,以便您可以看到您可以自定义特定于设备的仪表板。以下是我的电话特定布局的外观:

 调整大小

请注意,在电话大小版本上,我选择删除仪表板左上角的堆叠条形图。即使我从电话大小版本删除它,此图表仍然存在于原始版本上。我可以通过在仪表板创作界面的左上角的“默认”和“手机”之间来回来通过切换两个版本。

现在,当我发布此时,Tableau将识别我的屏幕尺寸,并自动显示最合适的版本!

谢谢阅读,
– Ryan