1. 概述
在看板使用过程中，许多用户希望能够在移动端复现 PC 端模板的现有内容。本产品提供了快速将 PC 端模板转换为移动端模板的功能，适用于 PC 端与移动端模板内容基本一致，无需为移动端进行额外设计的复用场景。
2. PC 端基础制作规范决定移动端大体框架
移动端模板通常采用流式排列，从上至下进行浏览。PC 端模板转换为移动端后，组件（单个组件，非组合）会默认按一行一个的方式展示。
转换关键：PC模板多成组，PC模板制作越规范，转换到移动端调整成本越低
2.1 按块制作，整体区块进行分组
在制作模板前，请先考虑模板框架，将看板内容划分成多个区域。在每个区域中添加内容后，固定成组。如下图所示：
组合设置方式有以下几种：
Shift 多选组件+Ctrl+G
Shift 多选组件+模板右侧工具栏中「组合」功能
Shift 多选组件+右键组合
2.2 相似内容分组大小保持一致
以下图为例，各区域的指标卡应尽量保持一致的大小，以确保整体画面舒适协调。
2.3 不同区块的保持水平/垂直方向的对齐关系
1）可以多选指标卡，在右侧面板中调整大小及间距，以确保整体美观
3. 移动端调整
按上述制作规范制作完成后，直接转为移动端布局效果如下，框架基本成型，仅有部分内容需要二次调整。
3.1 页头背景
| PC模板 | 移动端处理 |
|---|---|
简单背景页头
| 推荐方式：在移动端布局上拖拽调整组件位置、组件大小、组件字号样式
|
复杂背景页头
| 由于屏幕尺寸变化，复杂的背景图片会变化，移动端展示效果不好。 可以针对移动端宽度，重新制作一张页头背景上传，并设置合理的填充方式。
|
3.2 组件标题
| PC 端模板 | 移动端模板初次转换问题/场景 | 调整方法及效果 |
|---|---|---|
「图片」 + 「标题」组件组合 | 标题被截断
| 调整方式 在移动端布局下调整标题组件的大小或者标题内容字号 如何避免标题被截断 在 PC 端制作模板时，将标题组件宽度适当拉长（预留部分拉伸空间） 调整后效果
|
3.3 指标卡
| PC 端模板 | 移动端模板初次转换问题/场景 | 调整方法及效果 |
|---|---|---|
| 调整指标卡布局排列为以下形式：
| 手动拖拽调整，利用辅助线达到垂直/水平方向的对齐 组件宽度设置：
|
上一篇：仪表板 2.0 移动端布局
