15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 表单设计-掌握表单设计方法(表单体验篇)

表单设计-掌握表单设计方法(表单体验篇)

时间:2023-10-05 00:06:01 | 来源:网站运营

时间:2023-10-05 00:06:01 来源:网站运营

表单设计-掌握表单设计方法(表单体验篇):全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~

说到表单其实在生活中可以接触到各种各样的表单,主要目的就是让用户填写来【收集用户信息】。




初看这些表单,你可能觉得很简单,就是一些标签、非常基础的小组件,但是在实际业务中,想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节,常常会让设计师陷入无限的纠结中,比如:

文字标签是左对齐还是右对齐?
确定按钮是放左边还是右边?
控件颗粒长度是整齐划一还是与输入预期一样错落有致?反馈内容怎么显示......等等
★ 所以针对这些问题,我从【框架】>【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。

表单拆分

在UX Collective,作者Taras Bakusevych 进行了详细的阐述,对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓

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

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

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

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

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

6、 按钮:用户完成输入后,点击按钮进行提交、进入下一步等,按钮一般是跟随的最后一个输入项后面,若输入项超出一屏显示,则按钮悬浮固定在底部;按钮“确定”放左、右统一即可,没必要过分纠结。

表单类型

看了很多文章,对表单类型的划分主要是:基础表单、分步表单、高级表单(分组表单)[1]

如:登录
为了提高用户填写效率,减少用户心理负担,将一个冗长或用户不熟悉的表单任务拆分成多个步骤,一步步指导用户完成。

分步表单可以缓解用户需要填写较多内容时候的抵触情绪,并且通过拆分步骤,聚焦于每次填写的内容,提升用户在不同模块间的浏览效率。

来源:Ant Design Pro
如:站酷上传作品
但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择,但是实际在设计时,往往还需要考虑的是:这些表单应该是以什么承载结构展示?

是整页展示、弹窗展示、侧边栏展示?
表单内部布局方式,一定是平铺的一栏么,是否可以增加侧边目录?
这些都是设计师需要进行全盘考虑的问题,所以在设计表单的时候需要先确定这些框架,由外>内,层层深入,再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。

表单页设计步骤

在详细阐述如何设计表单页前,先明确下我对于表单页的划分 ↓ ↓ ↓

我将表单页大体划分成【页面框架】和【表单内容区】
这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书,提出了从5个要素自下而上的建设用户体验,即:战略层、范围层、结构层、框架层、表现层,这种逐层的思考逻辑对于设计表单是十分必要的,因为在设计表单的时候,常常需要考虑这个表单页所需承载的业务诉求(战略上)基础上去做后面的优化体验,所以在设计表单的时候应:

整体而言可以分为以下四步:

STEP1:确定【页面框架】

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

以上这些就是常见的表单页面框架,我们在考虑采用何种样式时需要综合以下几个因素考虑:

STEP2:确定【表单内容区布局】

如上图所示,一个正常的表单内容区主要有:标题区、二级导航区、主内容区

1、通栏式,即:在页面中居中显示,从上到下直接平铺控件颗粒。

2、左右式,即:在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏(如:流程节点展示)。

3、左中右式,即:分别在表单域内容区左侧放置导航栏,右侧放置辅助信息栏。

以上三种样式就是常见的表单内容区的布局,采用哪种布局,可以综合以下几个因素考虑:

★ STEP3:确定【表单内容排列方式】

在该步骤中,主要确定表单内容区控件颗粒的排列方式,

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

so 根据单列布局、多列布局的优劣势,结合实际业务需要来选择:

【单列布局】

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

劣:占用纵向空间。

【多列布局】

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

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

在这个环节中,除了需要考虑单列式布局还是多列式布局,还有一个也是需要全盘考虑的——

【标签的对齐方式】

在设计时,到底是采用左对齐、右对齐还是顶部对齐呢?

Matteo Penzo《Label Placement in Forms》文章中,有对标签不同的方式方式优劣势进行了说明。[3][4]

后续在这块纠结的时候,则可以对照上面表格进行评估了,其中详细原理你也可以点击下方链接进行查看:

STEP4:确定【表单内容颗粒】

最后一步只需要按照收集信息类型的需要,选择正确的控件颗粒,如:如果是要收集用户购买数量,则可以直接使用“数字步进器”、“输入框”。

在选用控件颗粒时,需要注意的是:

错落有致的排版比整齐划一更舒适,因为在视觉上我们更容易将下方有图的空间和内容视为一个和谐的整体,但左图过度的对齐导致暗示隐性的截断,我们会感觉表单列右侧空间缺了一大块。

写在最后

本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区 逐层对表单进行剥离拆解,帮助大家更加全面的认知表单,并总结了日常工作中设计师常常会遇到的表单类型和布局,设计师可结合文章中给出的建议参考并灵活应用。

希望能够通过这边文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给与指正。最后,作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师,希望大家可以多多点赞评论鼓励下(狗头保命)

参考

  1. ^表单类型: https://preview.pro.ant.design/form/advanced-form
  2. ^页面框架: https://www.uisdc.com/structured-approach-2
  3. ^标签对齐选择依据: https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  4. ^标签对齐优劣势: https://www.uisdc.com/middle-form#
  5. ^整齐划一?不如错落有致。| Ant Design 4.0 系列分享: https://zhuanlan.zhihu.com/p/110096160

关键词:设计,掌握,方法,单体

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭