表单(frm)制作
1. 前提
在进行移动端表单设计之前,需要先基本了解表单的功能和设计方法,可参考:表单设计。
2. 表单画布大小选择
目前手机的主流尺寸在4寸以上,分辨率在640*1136以上,因此在制作手机端报表的时候需要优先考虑表单画布的大小,对应到设计器界面时建议横向像素设置为360,纵向像素可以按照模板大小增加或减少。
3. 手机端组件布局方式
表单在手机上有两种布局方式,分别为保留布局与手机重布局。
保留布局:保留设计器界面中的布局样式。
手机重布局:在无论设计器中如何布局,手机上均采用流式布局展现,即一行一个组件(组件顺序可以自定义)。
纵向滑动展现可以选用保留布局或手机重布局。
如果报表中需要展现的内容较多,并且希望表单中的内容可以纵向滑动,可以在保持横向像素为360的基础上,根据自己的需要调整画布的纵向尺寸。
由于模板是在手机端展示的,建议直接采用流式布局的方式来放置每个组件的位置,即从上至下依次排版。
一屏展现可以选用保留布局来完成。
这里推荐使用360*600的像素大小,在这样的尺寸下,所有的表单组件会保留原有的组合方式,均在一个屏幕中展现。
可以采用上述的流式布局,也可以按照自己的需求进行组合。

4. 表单组件
在PC上制作报表时往往会采用报表块方式给组件设置标题。
在手机端上,为了避免报表块组件自适应的时候带来的样式改变和字体不统一,建议直接通过组件样式设置组件标题。
报表块组件是指在表单中采用表格的形式来展现数据,由于手机的屏幕较小,因此表单报表块中的数据列不宜过多,尽可能控制在原始宽度下7列以内,并且在横向充满的空间内使用报表块。
在手机重布局的逻辑下,报表块主体内容的高度根据数据自适应,没有最小高度,有最大高度限制,可以通过开关控制是否启用报表最大高度限制,且最大高度可以自定义。
在手机保留布局逻辑下,报表块的自适应逻辑与图表的自适应逻辑相同,不会随报表主体的内容在高度上扩展。
设计完之后需要选中报表块,在移动端中,设置自适应方式为:竖屏横向自适应。
注:自适应方式设置好后,尽量不要改动,以免在以后的数据展示时设计的图表会发生变形。
注:如果列数超过7列很多,请不要设置竖屏自适应,保留默认,报表内容会采用左右滑动展现。
首先,应该尽可能使用新图表。
画布宽度设置为640时,设计器中图表组件的宽高比尺寸与手机实际效果一致,设计更方便;
使用图表组件需要考虑适合图表类型的宽高尺寸,例如:饼图、仪表盘适合正方形的区域。
在大多数情况下,应该尽可能避免采用报表块中添加图表的方式使用图表,直接使用图表组件可以获得更好的效果。
注:在报表块内嵌入新特性图表需要采用H5解析的方式才能预览。
但是有些时候图表数据过多时,也可以使用在报表块中插入图表。
比如使用的图表过宽(宽高比大于3:1),比如要展现一个月的数据,由于手机屏幕宽度小,图表横向压缩严重。在报表块中插入图表后移动端可以左右滑动查看。
控件可以直接拖入到表单主体中使用,文本、数字、下拉框、下拉复选框、日期这些控件在移动端展现时高度固定显示。
注:在保留布局情况下,如果控件高度<组件高度,则多余部分为空白;如果控件高度>组件高度,则控件显示部分。由于控件在高度缩放逻辑与PC不同,控件高度在设计器中与组件中高度的比例不等同于移动端预览的直接效果。
与PC端不同,参数面板在移动端上展现时,会在报表页面显示前单独展示,在报表界面可以点击下方的漏斗图标返回参数界面重新选择参数。

5. 表单设计入门示例
点击文件>新建表单,新建一张表单,修改画布大小为360*600。











