历史版本7 :移动端模板制作指南 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

在当今的移动办公环境中,移动端模板以其丰富的交互特性、即时的数据访问能力以及多样化的报表展示形式,为企业带来了便捷、高效和灵活的管理解决方案,正逐渐成为主流。因此,掌握移动端的模板制作与转换很有必要。

移动端的模板制作分为两种场景:1)仅有移动端展示需求。2)PC 端和移动端都有展示需求。为此本文从两种场景出发为用户介绍普通报表和可视化看板的模板制作指南。

1.1 仅有移动端展示需求

例如,只需在移动端展示公司销售日报。如下图所示:

手机视频动图3.gif

  • 设计 FVS 模板时,新建可视化看板,设置画布大小自定义尺寸为常用移动端尺寸,如:390×844px,点击「创建看板」便可以开始移动端设计,如下图所示:


  • 设计普通报表时,新建普通报表,点击菜单栏「模板>移动端属性」,勾选「设置为手机模板画布大小」,报表会以 4.7 寸屏幕手机为准进行适配,4.7 寸以上的手机进行放大,4.7 寸以下的手机进行压缩,点击「确定」便可以开始移动端设计,如下图所示:

1.2 PC 端和移动端都有展示需求

1.2.1 PC 端和移动端模板展示需求一致

PC 端和移动端模板所需展示效果一致时,可以共用模板,只需将 PC 端模板转换为移动端模板即可在移动端展示。
  • 设计 FVS 模板时,开启移动段布局以共用模板。例如:电商销售实时大屏,PC 端和移动端所需展示效果一致。PC 端效果和移动端效果分别如下图所示:

手机视频动图2.gif

  • 设计普通报表时,点击菜单栏「模板>移动端属性」,勾选「设置为手机模板画布大小」,点击「确定」,如下图所示:

弹出另存为其他模板,模板名称为当前文档名称加上「_mobile」,文件存储位置可选,如下图所示:

注:如果选择「取消」,手机端模板功能不生效。

1.2.1 PC 端和移动端模板展示需求一致

PC 端和移动端所需展示效果、交互效果不一致时,需要分别制作 PC 端和移动端模板。

注:移动端模板制作可参考本文档1.1节

    例如,xx集团经营管理驾驶舱,PC 端需要展示效果为深色,移动端需要展示效果为浅色。PC 端效果和移动端效果分别如下图所示:

动图1.gif

手机视频动图1.gif

2. 制作与转换指南编辑

应用场景帮助文档文档简介

独立制作移动端模板

  • 只有移动端展示需

  • PC 端和移动端都有展示需求,但是 PC 端和移动端展示效果、交互效果不一致

如何用App的思路设计移动端报表

帮助用户运用 App 的设计思路,制作一张可随时随地查看和分析数据的移动端报表,使其更加符合移动设备的使用习惯和用户需求

使用 PC 端模板

PC 端和移动端都有展示需求,且PC 端和移动端模板的组件内容、样式基本一致

普通报表:设置手机端模板

FVS 可视化看板:FVS如何快速将PC模板转换为移动端模板

帮助用户快速将 PC 端模板转换为移动端模板,需要注意的是,为保证一张模板在 PC 端和移动端均可正常浏览,在制作 PC 端模板时就需要考虑到移动端的显示效果