推荐

自动截取部分内容免费阅读

创始人2023-02-17 20:11 887 浏览
点赞31 收藏

表单是我们生活中常见的信息添加、录入的方式之一,如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说:表单不就是几个输入框,几个组件组成的东西么,挺简单的,有什么好设计的。但通常情况下,越是简单的东西,要思考的点却越多,想要把一个表单做好也是一件不容易的事情。

生活中,大多数人都不喜欢表单,比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷,作为一个热心市民的我,自然是选择点开链接帮忙填写;一鼓作气填了一段时间后,看着剩下的问题,我不耐烦的放弃了填写这个调查问卷。所以作为设计师,我们应该“由内而外”而不是“由外而内”的去设计表单,如何让表单变得更容易让人接受也是设计师应该考虑的问题。

一、什么是表单

表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁,通过引导用户进行信息的填写,从而提交数据给后台。在用户填写提交时,还需要对用户输入内容进行校验与反馈,保证用户信息填写的完整度。

填写表单是一件麻烦事,当我们想做的是投票、网上购物或者添加好友之前,总是会有表单防碍着我们。正因为多数人不喜欢填写表单,所以在做表单设计时,我们的首要目标是让人们迅速轻松的完成填写,同时获得系统和用户想要的东西。

二、如何进行表单设计

1. 表单拆分

基础表单中会有以下六个元素:

1. 标签:标签文本主要是解释输入项的含义,一般不宜太长,需要简明扼要,快速让用户理解;还有一部分是告知用户哪些是必填项。

2. 占位提示:直接展示在输入项中,采用弱提示文本对所需信息描述,当用户输入信息时即消失。

3. 校验:对输入项进行验证,并给出反馈提示,如:用户未填写,格式错误、内容错误等

4. 基础组件:可交互输入的区域,是构成表单的核心内容,主要有:输入框、单(复)选框、上传、时间选择器、开关……

5. 提示:描述该输入项需要的输入类型,如:上传的文件类型

6. 按钮:用户完成输入后,点击按钮进行提交、进入下一步等,按钮一般是跟随的最后一个输入项后面,若输入项超出一屏显示,建议将按钮悬浮固定在底部。

当我们开始制作某一表单的时候,我们需要强迫自己思考一下每个元素的 UI 问题:

这个元素是什么类型的?

如何处理其他这类东西?

元素之间有什么关系?

通过合并相同类别元素或者扩展该元素和其他元素之间的关系,能否简化设计?

2. 表单录入模式

表单根据录入模式可以分为:单步表单、分步表单和高级表单

① 单步表单:

单步录入指的是在一个页面即可完成内容输入。使用于内容较少,结构简单的场景,我们常见的登录页就是典型的单步表单。

② 分步表单:

内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性,一般通过添加分步导航展示内容。常见的例如银行转账,修改密码等等。

③ 高级表单(分组表单):

高级表单(分组表单):主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似,都是为了减轻用户填写压力,将填写内容进行分块。不同的点在于,分步表单的流程化明显,后一步填写的内容都是基于前一步来填写、是前一步反馈。

3. 表单的页面框架

表单的页面框架指的是承载着整个表单页的页面框架,即:整页式(新页面)、弹窗式、侧边栏式。因为其页面面积大小不一样,所以使用情境有所不同。

整页式(新页面):最常用方式,适用于绝大部分的表单,可以支持构建复杂的表单。

弹窗式:通过小面积的弹窗进行轻量化的编辑,方便快速进行增、删、改、查;输入项较少,一般不会有滚动条。

侧边栏式:与弹窗式相似,通过小面积的侧边栏进行编辑;可承载比弹窗更复杂一些的表单内容,可以有滚动条。

我们在选择页面框架时通常需要综合以下三个因素去考虑:

内容数量 :内容如果较多不适合使用弹窗式

与原页面关联程度 :需与原页面关联强建议使用弹窗式、侧边栏式

表单的复杂程度: 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。

4. 表单的排列方式

① 布局方式

在制作表单的时候分成两种排列方式:单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局:

1. 在输入项不多的情况下,建议采用单列布局,因为单列布局,用户填写的路径就是从上至下的一条直线,十分符合用户的视觉动线,能够提高用户浏览与填写的效率。

2. 多列布局的表单会导致用户的视觉路径变长,用户需以 “Z” 字形的视觉动线扫描表单,会提高浏览与填写的效率,并且多列表单容易造成用户填写时的混乱,易填错,体验差。

但是有时部分业务诉求和某些特性的场景要求,会需要在有限的空间上放入更多的控件来收集用户的信息,这时就不得不使用多列布局的样式,因为多列能够省纵向空间。

单列布局

优势:视觉路径清晰,填写效率高,体验好;

劣势:垂直空间占用率高。

建议使用场景:表单内容较少的情况下使用单列布局

多列布局

优势:省空间,能够放置更多的控件;

劣势:视觉路径模糊,填写成本高,填写易出错。

建议使用场景:关联性强的填写项横向排放,且将该列中最重要填写项的放于最左侧。

② 标签对齐方式

标签的对齐方式有:左对齐、右对齐和顶对齐,除了需要考虑单列式布局还是多列式布局,还有我们也需要考虑标签的对齐方式。

马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究,根据研究结论做出以下分析:

友情提示
付款0.1元,继续查看。
加入会员享受折扣优惠
【月付会员】9折
【季度会员】8折
【年度会员】7折
【终身会员】6折
购买
下一篇
没有了
评论0评论
游客