1. 概述
1.1 应用场景
在报表使用过程中，许多用户希望能够制作一张模板，同时用于 PC 端和移动端预览。
然而，PC 端与移动端的模板设计通常存在差异，用户需要花费额外的时间和精力来为移动端重新制作模板。
本文详细讲解，如何在制作 FVS 模板时，通过一些制作习惯和细节调整，确保一张模板，在 PC 端和移动端均可正常浏览。
1.2 注意事项
本文主要适用于 PC 端与移动端模板内容基本一致的场景，帮助用户在移动端复用现有的 PC 端设计，只需进行简单调整。
对于以下情况，不建议参考本文转换，建议直接复制粘贴组件，独立制作一份移动端看板：
模板中有较多「多层嵌套的组合」，且组合的宽度远超移动端模板的宽度。转换后组合内的组件将会被明显压缩。
模板中有较多「多层嵌套的 Tab」，且 Tab 样式为自定义组合。转换后调整起来较为费时。
1.3 实现思路
1）制作 PC 端模板时，需注意规范设置，详情请参见本文第二章
2）开启「移动端布局」，确保按照流式布局规则生效，支持一张模板多端编辑、预览，减少制作和维护成本，详情请参见本文第三章
3）调整移动端模板时，可根据不同场景作出相应调整，详情请参见本文第四章
1.4 效果预览
PC端效果：
移动端效果：
2. PC端制作建议
| 规范 | ||
|---|---|---|
| 1 | 对组件分区进行组合 | 制作建议： 制作模板时，页面可划分为多个区域，每个区域内包含背景、标题、图表等组件 PC 端模板转换为移动端后，非组合的组件，会默认按一行一个的方式展示 建议将一个区域内的所有组件组合，确保在移动端切换时不分离错位 设置方式：
|
| 2 | 相似内容大小保持一致 | 制作建议： 对于含义相似的区域（如多个关键指标卡或图表对比），建议保持宽高一致，以确保移动端切换时大小统一 设置方式： 先设计一个区域并调整样式，然后复制粘贴，替换数据和内容
|
| 3 | 不同区域整体对齐和间距一致 | 制作建议： 在摆放不同区域组件时，要保持整体对齐和间距一致 如果 PC 端不能对齐，那么切换移动端时，也会不对齐
设置方式： 1）多选需要对齐的组件，设置布局和间距
2）借助辅助线精准对齐，确保各个组合中的元素也能高度对齐
|
| 4 | 不使用表格制作指标卡 | 制作建议： 建议通过标题、富文本、图片组件组合完成「指标卡」，不建议使用表格进行制作
原因分析：
|
| 5 | 同一Tab页下的内容，放在同一分组内 | 制作建议： 通过标题 + 自定义图片背景 + 显隐控制的方式制作的「Tab 按钮」，显示和隐藏的组件必须要放在同一个大分组下，否则转换到移动端显隐组件不在同一个位置 如果之前制作时不在同一个分组下，需要先将隐藏组件显示后，将所有组件成组，然后再单独隐藏部分组件
|
| 6 | 避免使用三维组件、扩展图表 | 制作建议： 移动端不支持展示三维组件、扩展图表。若 PC 端有相关图表，转到移动端会被隐藏。 因此在制作组件时，请考虑移动端是否需要展示相关组件，如有必要，请避开使用三维组件/扩展图表 |
| 7 | 图表和表格组件样式设置时考虑移动端效果 | 制作建议： 图表和表格组件在 PC 端与移动端共用相同的内容样式，无法单独调整移动端样式。 设计模板时需同时考虑移动端效果。如需单独调整移动端，建议复制并单独制作一份移动端模板。 |
| 8 | 使用绝对画布块确保表格高度自适应 | 制作建议： 当对表格组件、组件标题和背景进行组合时，组合内采用绝对布局，不支持高度自适应，切换至移动端后无法实现表格高度自适应。 推荐使用绝对画布块代替组合背景，将其他组件放入绝对画布块中。 绝对画布块支持开启重布局模式，重布局下组件可以实现高度自适应。
设置方式： 1）使用绝对画布块作为组合背景 2）将标题、表格组件放入绝对画布块中 3）开启绝对画布块重布局、开启表格预览高度自适应。
|
| 9 | 明细表设置分页 | 制作建议： 对于多行报表，建议设置表格分页，以保证移动端预览时的性能体验 对于多列报表，建议开启高度自适应，以保证移动端预览时可以横向滚动表格，或横屏查看
|
3. 开启移动端布局
开启移动端布局，使用流式布局方式展示移动端效果。点击设计器右上角，切换至移动端。如下图所示：
移动端支持吸附式流式布局，同时支持通过绝对画布块、组合实现绝对布局效果。
流式布局下移动端画布支持所见即所得，设计器中配置项带有图标的均支持 PC 端和移动端区分配置。
4. 移动端调整建议
| 场景及解决方法 | ||
|---|---|---|
| 1 | 页头背景 | 问题场景： 如果模板包含复杂的页头背景（具有特定形状），且主要为大屏模板设计，由于屏幕尺寸的变化，页头背景图片可能会发生变形，导致在移动端的显示效果不佳。 解决方法： 针对移动端宽度重新制作一张页头背景上传，并设置合理的填充方式 PC 端：
移动端：
|
| 2 | 页面背景 | 问题场景： 如果模板包含复杂的页面背景（具有特定形状/图案），且主要为大屏模板设计，由于屏幕尺寸的变化，背景图片可能会发生变形，导致在移动端的显示效果不佳。 解决方法： 针对移动端宽度重新制作一张页面背景上传，并设置合理的填充方式 |
| 3 | 标题组件 | 问题场景： 在 PC 端制作的标题组件，若组件宽度正好与内容长度一致，转换至移动端后，标题内容可能被截断 解决方法：
PC 端：
移动端：
|
| 4 | 自定义上传的图片组件/组件背景 | 问题场景： PC 端使用了自定义图片的图片组件/组件背景，切换至移动端后，由于画布宽度变化，组件背景可能被拉伸，导致背景效果不佳 PC 端：
移动端：
解决方法：
|
问题场景： 若图片带有图标，在转换至移动端后，由于宽度缩小，可能导致图标被拉伸变形 PC 端：
移动端：
解决方法： 设置图片的点九图，将图片中的图标放在固定在左侧，此时拉伸组件宽度，图标不会再变形
| ||
| 5 | 指标卡 | 问题场景： PC 端如果制作了多个指标卡，在转换至移动端后，会默认按一行一个的方式展示，导致移动端效果不佳 PC 端：
移动端：
解决方法： 手动拖拽组件位置，可手段调整宽度或选中组件后，右键设置组件宽度
|
上一篇：FVS移动端布局
