去年，我们在SAP Analytics Cloud中引入了响应式Lane页面，哪个云服务器，使我们能够创建适应各种屏幕大小和设备的仪表板和数字会议室。下面是我们最喜欢的创建有效响应设计的技巧列表。

在进入技巧之前，一定要检查我们关于画布和响应页面之间的区别的帖子，以及响应布局断点是如何工作的。

1。复制和粘贴画布内容–如果您试图从画布移动到响应式布局，则可以通过选择所有对象并使用ctrl+c进行复制，使用ctrl+v进行粘贴，轻松地从画布页面复制和粘贴多个对象。或者，淘客源码，您也可以使用菜单栏进行复制和粘贴。

复制…

粘贴…

注意（超级酷功能）：您也可以在故事之间复制和粘贴多个对象，只要您保持在同一浏览器选项卡内。

2。使用通道对内容进行分组–通道可用于对响应页面的内容进行分区，并创建结构化布局。调整响应页面的大小时，响应通道中的平铺保持在一起，确保图表在报道中的显示顺序不会改变。通道可能会根据设备屏幕大小移动和回流。您可以使用水平和垂直车道的行来创建引人注目的设计。

注意：您可以通过将它们拖放到页面上另一个车道的顶部或侧面来重新排列车道。

3。利用您的车道和页面背景颜色–车道颜色使最终消费者能够轻松地判断内容在不同设备上的回流情况。避免每个图表都有一个背景色，而是尝试在一个阴影车道上统一一组瓷砖。

4。避免明显的装饰（线条、形状、图像）–在小屏幕上，元素会拉伸以适应屏幕的宽度。有时看起来很好，有时却不是。最值得注意的问题是线条、图像和其他装饰元素，它们可能会以意想不到的方式调整大小。为了避免任何问题，尽可能减少装饰元素，并依靠更干净、更灵敏的友好设计。如果你想有分界线，试着使用现有图表或文本标题的侧边框，而不是在页面上有一个额外的元素。

5。使用标题图像而不是放置图像–防止图像跨越整个宽度的一种方法是将其作为文本标题的一部分。使用文本标题样式面板调整图像大小和对齐方式。

6。使用矢量（SVG）图像–当PNG和JPG图像调整大小时，它们可能会显示为像素化。无论屏幕大小如何，为了让您的图像看起来清晰明了，请尝试使用SVG（可缩放矢量图形）图像。在移动设备上隐藏图像、文本和图表–如果您希望在桌面上显示图像、文本或图表，而不是在移动模式下显示，请考虑通过取消选择"移动>已启用"将其隐藏在移动设备上。

8.提供充足的"喘息空间"-而不是让图表彼此相接，并在页面的各个角落，尝试在元素之间留下一个网格块。要调整网格块（移动对象时出现）的大小，发发淘客助手，请选择响应页面背景，并调整样式面板下的网格间距。

9。使用设备预览测试屏幕大小-在整个设计过程中，大数据是干嘛的，您最好的朋友将是设备预览，可在故事工具栏上找到。设备预览允许您查看响应页面在不同屏幕大小和设备类型上的外观。

10.使用自定义字体大小–因为文本字体在不同屏幕大小上可能显得太小或太大，那云，您可以使用设备预览中的设计器模式调整每个屏幕大小的字体大小。

如您所见，我们的成品并不是对我们的画布设计的精确再创造，而是一个同样吸引人、更灵活的布局。

作为奖励，这里有一些我们可以使用响应式布局设计我们的故事的更多方法：

资源：

FlatIcon–最大的自由矢量图标数据库。Adobe Color–探索与公司颜色相匹配的华丽配色方案。SAP Data Visualization手册–了解何时以及如何使用不同图表的一般最佳实践。响应通道：SAP Analytics Cloud Help–官方帮助文档。

有其他提示或资源吗？请在评论中告诉我们！