表单样式设计
表单设计的一般操作步骤:
1、新建表单:打开设计器,点击文件>新建表单,即可新建一张表单。FineReport支持新建工作薄,即普通cpt模板,还支持新建表单,两种设计模式;
2、拖曳组件:根据实际情况拖曳组件到表单主体上。FineReport表单支持多种不同的组件类型,包括报表、参数、图表和控件,后续详细介绍;
3、定义数据源:在数据集面板中定义组件的数据来源,所有组件公用一个数据集面板。定义各个组件数据来源,与普通模板的数据来源一样,图表组件数据即可来源于数据集,也可来源于单元格;
4、设置表单样式:可在表单属性表中设置组件框架样式,也可设置相应组件内样式。即设置表单的显示样式。
如果你还是不懂的话,可以去帆软论坛逛逛,那里有很多人为你解答的。
App表单交互设计目录:
1、表单输入通用规则
2、输入框提示
3、表单样式
4、输入框限制
5、异常情况处理
1】输入通用规则:
1、显示标题、输入框、输入框提示语、是否为必填项
2、用户获取焦点,输入内容后隐藏默认文案,显示清除图标
3、用户已输入内容,重新获取焦点,修改,显示清除图标,不自动清除已输入内容
4、用户已输入内容,失去焦点,校验输入框内容,校验失败,显示对应的提示语,提示语显示在文本框下方,自动调整文本框上下间距。
5、清空文本框,显示默认文案,隐藏清除图标
6、已校验失败情况,文本框再次获取焦点输入任意内容,隐藏提示语,失去焦点再次校验(同4)
7、获取焦点,弹出输入键盘遮挡了输入框内容,页面自动上移
2】输入框提示方式:
1、提示语在输入框下方显示
2、toast提示
3】输入框样式选择:使用输入框或长下划线
①:输入框+输入提示语:默认显示输入框提示语,输入完成后直接显示输入的内容
(图左✓)适应于表单项内容差别明显,表单项内容意义相近
(图右✗)用户输入内容后查看时,会对输入的内容产生歧义
②:标题+输入框+输入提示语:
默认输入标题、输入框、输入提示语;输入框和输入标题一行显示:
(图左✓)适应输入框标题字数相近(1-2字以内)且输入框内容限制字数能一行显示完整
(图右✗)输入框标题文字差别会影响页面布局的整齐性
③:标题+输入框+输入提示语:
默认输入标题、输入框、输入提示语;
(图左✓)标题和输入框一行显示:手机一屏高度可容纳的表单项少,易读性不强
(图右✗)标题和输入框分行显示:手机一屏高度可容纳的表单项少,易读性较强
4】输入框输入限制:
1、 字符限制:中英文、特殊字符、数字、emoji等
2、字数限制:单行输入15-20字
4、输入异常提示语显示文案
5、是否是必填项
6、多行文本注明是否支持用户换行
5】异常状态:
1、表单页返回确认弹窗
2、提交按钮校验
3、考虑当前页面异常状态
①杀掉进程,不保存当前编辑的信息,此前保存过的信息不更改。
②退出重新登录,登录同一个账号,显示已保存信息可继续编辑。登录其他账号,不显示
③在本机保存后切换其他设备,不显示
④点击保留不需要校验合法性,提交时才校验