表单是用户向系统传递和修改数据信息的主要方式,同时也是系统获取用户数据、响应反馈结果的主要方式,可以说表单是人机交互中重要的数据媒介。

而表单布局是用户在使用表单提交数据时的第一感观,表单布局分为 [移动端布局] 和 [PC端布局] 。设计者可通过表单布局,将表单字段合理进行分布,提高表单界面使用效率及成员数据填报效率。

打开网易新闻 查看精彩图片

一、表单布局设置:

列数设置:

更新之后,百数表单布局从仅支持单双列升级为支持单列、双列、三列以及四列这四种排列方式。当遇到字段内容较多的表单,可以设置为三列、四列,减少成员滑动页面填报的频率。

打开网易新闻 查看精彩图片

更多设置

列数设置只能将字段布局进行最基础的分割,实际场景中不同的字段需要填报的内容不一样,所需要的宽度也不一样。此时,可以在更多设置中进一步对表单布局进行设置。

在更多设置里可以对字段标题位置、输入框宽度等进行更个性化的设置,支持对 [PC端] 和 [移动端] 分别设置。

打开网易新闻 查看精彩图片

注意:

1.原表单属性 [PC端表单布局] 、[移动端表单布局] 功能合并到表单布局内。

2.表单多列布局只在PC端生效,移动端仅支持单列布局。

二、表单布局移动端及PC端:

移动端

移动端设置,字段标题可以设置为 [左右] 和 [上下] 两种位置布局方式。

打开网易新闻 查看精彩图片

PC端

1.字段标题位置

字段标题可以设置为 [左右] 和 [上下] 两种位置布局方式。不同的布局方式,其展示的效果也不一样。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

2.字段标题样式

字段标题样式中,可以对标题的 [宽度] 和 [对齐方式] 进行设置。

打开网易新闻 查看精彩图片

3.字段描述信息样式

字段描述信息可根据需求设置为 [显示] 或者 [隐藏] 。

打开网易新闻 查看精彩图片

设置了 [显示] 后,描述信息将直接在输入框下方进行显示;设置 [隐藏] 后,描述信息将以小提示的方式展示,点击提示符号,将弹出对应的描述信息。

打开网易新闻 查看精彩图片

注意:

1.只有当 [字段标题位置] 设置为 [左右] 时方可设置隐藏,否则默认显示在字段标题下方。

2.其中 [分割线] 的字段描述信息始终显示不隐藏。

三、经典使用场景展示:

标题左右排列:

打开网易新闻 查看精彩图片

表单布局——三列:

打开网易新闻 查看精彩图片

表单布局——四列:

打开网易新闻 查看精彩图片