一、表单的构成
1、表单的组成
按照原子理论,表单应该属于一种“组织”。包括了以下组成部分:
- 标签
主要是用来说明表单数据域的含义和填写内容;当标签无法明确引导用户或者具有一定的内容限制时,需要增加帮助或者说明信息,方便用户更好地填写内容。
- 表单数据域
通常是数据录入型组件,需要用户以填写、选择的方式完成内容输入。
- 操作按钮
用来提交、保存数据信息,完成表单操作。
2、表单的类型
在B端产品审批流程中,不同的用户会面对不同的表单形式。
对于流程发起者,需要填写内容后提交审批,这类表单偏向于任务操作,也是我们最常见、最典型的表单形式。
而对于审批者而言,表单主要是传递信息,审批人依据内容做出审批决策,这类表单偏向于信息展示。由于审批类的表单相对简单,所以我们将主要的精力放在操作型表单上。
二、表单的设计关注点
1、表单布局
表单存在两种布局方式:单列布局和多列布局。
- 单列布局
单列布局信息自上而下,用户视觉动线更加稳定,横向的视觉跨度更短。所以信息阅读和填写的效率更高,是首选的布局方式。但是在长表单场景下,用户需要滚动屏幕才能查看完整的表单信息。
- 多列布局
多列布局下,一屏可以容纳更多信息、屏效更高,有效地避免出现滚动条。对于高频的长表单操作,采用多列布局的方式,可以减少滚动条带来的用户困扰。
当然多列布局表单信息密度也更大。一般为左右两列布局,列数最好不要超过2列,否则会影响用户的填写效率。
常见的搜索表单大都与表格宽度一致,可以容纳3列或4列。主要是搜索关键词与表格一致,业务属性不强,并且表单项没有强制性,用户可以自由填写,不会存在漏填的情况。采用多列布局对用户操作影响不大。
2、标签排列
标签排列方式历来都是设计师比较纠结的问题,常见的标签有3种:左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。
先看阅读效率数据。
2006年,有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明,顶部标签移动到输入框效率最高,只要 50 毫秒;右对齐标签次之,需要 240 毫秒左右;而左对齐需要消耗“500 毫秒”,效率最低。单从效率上来说,肯定首选顶部标签。但是面对不同的场景,需要选择合理的排列方式。
- 顶部标签
(图片来源于网络)
顶部标签的排列方式符合用户自上而下的浏览习惯,标签与输入域联系更加紧密,视觉横向移动距离小。所以信息读取的效率更高。
另外标签单独占据一行空间,信息扩展性更强。问题也显而易见,标签挤占了纵向空间,会增加表单的总体长度。
所以我个人认为,顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。
- 右对齐标签
(图片来源于网络)
右对齐布局拉近了标签与表单域的距离,并形成固定间距。但是由于标签的长度不同,视线起始点会发生跳跃,从而影响用户的阅读效率。
不过对于普通表单,右对齐标签可以兼顾效率和页面空间,因此在B端产品中应用比较广泛。
- 左对齐标签
(图片来源于网络)
从整体性上来看,左对齐视觉结构性更强,有利于标签信息阅读。用户视线不会受到输入框的干扰,可以非常顺畅地扫视标签,方便用户快速搜寻必填项。
但是由于标签长度不一,为了保证所有标签都可以正常显示,会增加标签与表单域的间距,导致信息读取效率偏低。
左对齐标签可以用在复杂场景中,减缓用户的填写速度,尤其是那些有大量可选输入框,结合必*标识符快速定位必填项。或者在高级设置的场景中,字段信息对用户相对比较陌生时,让用户可以仔细考虑表单中的每个信息项。
- 内联标签
内联标签是将标签放在输入域内显示,标签代替了占位提示文字,告诉用户应该填写什么内容。常见于注册登录页,如下图。
内联标签解决了标签文字过长的问题,并且可以降低表单的视觉信息量。
但是这也带来了另一个问题,就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面,因为用户对登录页的内容模式已经非常熟悉了,学习成本很低,不会带给用户困扰。
如果用在其他类型的表单页面,就容易让用户产生疑惑。特别是出错的场景下,信息提醒不到位,很容易增加用户的理解成本和使用难度。
- 浮动标签
浮动标签是指用户在录入时,内部标题(输入性提示信息)进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量,并且拓展性不强,不适合作为主要的标签形式应用在业务表单中。
一个系统中最好采用相对一致、稳定的标签排列方式,否则频繁变化的对齐方式也容易让用户无所适从。
三、表单的存在形式
表单信息量可大可小。有的可能只有一个字段,有的可能是包含多层卡片内容,甚至是相互嵌套。不同的表单信息有着不同的存在形式,梳理归纳后,主要有以下5种。
1、即时表单
常见于表格或者详情页面,通过编辑或新增功能触发。即时表单与原有内容保持一致,更强调操作的快捷性。
2、浮层表单
同样是一种轻量化的表单方式,一般用于定向修改特定内容。通常浮层空间较小,不用来承载大量的信息内容。另外浮层紧随修改内容,操作效率更高。
3、弹窗表单
在抽屉组件出现之前,弹窗应该是最为常见的表单交互形式。相比页面跳转,弹窗操作成本更低,但是空间比较受限,应对大表单信息会有一定的难度。另外表单填写时,可能会出现多层弹窗的情况。
4、抽屉
抽屉组件既可以承载较多的表单信息量,又可以和弹窗一样在当前页面完成操作,并且相对于居中弹窗,不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。
5、页面
页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么,同时也要配置返回按钮,方便用户退出表单页面。
以上就是表单基础知识的解析。
下期我们来分析下表单设计的技巧~
原文地址:子牧UXD(公众号)
作者:子牧先生
转载请注明:学UI网》设计基础(6): 表单基础知识解析
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司