---
order: 7
navTitle: 移动
---
# 移动端设计指南

SuccBI支持在移动端展示仪表板：

|指标看板|高校师生情况|中国经济变化|
| --- | --- | --- |
|![指标看板](./images/2021_07_27_14_14_20.png)|![高校师生情况](./images/2021_07_27_14_18_43.png)|![中国经济变化](./images/2021_07_27_14_20_23.png)|

移动仪表板既可以基于移动模板新建，也可以在已有仪表板上增加移动端视图，有如下区别：

- **基于模板新建**：若当前仪表板仅需要在移动端进行展示，则可以在创建仪表板时选择**移动模板**来新建一张移动仪表板，具体介绍可参考[新建移动仪表板](#new)
- **在已有仪表板上增加移动布局**：若需要在多终端如PC或移动设备上访问同一张仪表板时，可以在已有的仪表板中新增**移动布局**，具体介绍可参考[添加移动布局](#add)

## 新建移动仪表板{#new}

在新建仪表板时，选择移动模板即可创建一个移动仪表板。当该页面的内容制作完成后，还可以将页面加入到[移动APP](../../../../app/mobile/README.md)内进行查看。

## 添加移动布局{#add}

SuccBI支持根据设备的不同自适应调整仪表板的展示效果，只需为仪表板添加不同的[布局](../layout/README.md)。当仪表板创建为**PC端**时，若为其添加**移动**布局，即可使该仪表板在移动端打开时展示为移动效果。添加移动布局的具体步骤如下：

![添加移动布局](./images/2021_07_28_11_27_36_967.gif)

1. 在[仪表板设计器](../../designer.md)的**数据源**区，切换到**布局**栏
2. 在**布局**栏中点击**预览设备**按钮
3. 在[仪表板设计器](../../designer.md)的**画布**区域的左上方，在**类型**中选择**手机竖屏**
   1. 选择**类型**时，可根据需要选择其他样式的移动端布局，如：手机横屏、平板竖屏、平板横屏等
   2. 更多布局设置可以查看文档[布局](../layout/README.md)
4. **布局**类型选择完成后，点击右侧的**添加**布局按钮，将布局添加至**数据源**区域的**布局栏**中
5. 在**布局栏**中选择已有布局，可以编辑查看不同布局下的效果

:::tip

移动布局下组件的使用方法不会发生变化，可以拖拽组件调整其顺序、位置及大小，并且各布局之间图形的摆放位置、大小等样式互不影响。值得注意的是，不同布局之间的**样式**虽然并不共用，但取数相同，若在任意一个布局中改变了组件的取数，另一布局下该组件的数据也随之产生变化。

:::

### PC端与移动端布局{#pc-mobile}

仪表板的移动端页面不是一个“全新”的仪表板，他与PC端页面存放在一个仪表板内部，用不同的**布局**加以区分，如仪表板默认为PC端布局，添加一个[移动布局](#add)后，在PC端的[门户页面](../../../../app/portal-page/README.md)中打开该页面，则仪表板展示为PC端效果，若在[移动APP](../../../../app/mobile/README.md)中打开该页面，则仪表板展示为移动端效果。

![布局](./images/2021-07-28-11-32-59.png)