表单设计-掌握表单设计方法(表单体验篇)优质
简要回答
高级表单(分组表单):主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似,都是为了减轻用户填写压力,将填写内容进行分块。不同的点在于,分步表单的流程化明显,后一步填写的内容都是基于前一步来填写、是前一步反馈。
如:站酷上传作品
但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择,但是实际在设计时,往往还需要考虑的是:这些表单应该是以什么承载结构展示?
是整页展示、弹窗展示、侧边栏展示?
表单内部布局方式,一定是平铺的一栏么,是否可以增加侧边目录?
这些都是设计师需要进行全盘考虑的问题,所以在设计表单的时候需要先确定这些框架,由外>内,层层深入,再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。
表单页设计步骤
在详细阐述如何设计表单页前,先明确下我对于表单页的划分 ↓ ↓ ↓
我将表单页大体划分成【页面框架】和【表单内容区】
这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书,提出了从5个要素自下而上的建设用户体验,即:战略层、范围层、结构层、框架层、表现层,这种逐层的思考逻辑对于设计表单是十分必要的,因为在设计表单的时候,常常需要考虑这个表单页所需承载的业务诉求(战略上)基础上去做后面的优化体验,所以在设计表单的时候应:
明确该表单的业务类型,因为不同的业务诉求的表单在设计中的展现形式会有不同,即“页面框架”会有不同(这也是我上面为何将表单页分成页面框架和表单内容区的原因)
在确定页面框架后,就需要对表单需展示的内容进行明确的划分,如:表单的内容是否要展示流程进度?表单内容是否有不同层级的导航?确定了这些后,我们表单内容的大致布局框架就可以确定下来,我们才能进入下一步(内容区具体的陈列方式)的设计;
表单内容区主要是对输入项的陈列方式,对齐方式,进行体验优化;
最后对所有输入项进行统一整理,检查是否与用户预期一致?与其他输入项的关系是否清晰等。
整体而言可以分为以下四步:
STEP1:确定【页面框架】
这里得页面框架指的是承载着整个表单页的页面框架,即:整页式(新页面)、弹窗式、侧边栏式。因为其页面面积大小不一样,所以使用情境有所不同。[2]
整页式:最常用方式,适用于绝大部分的表单,可以支持构建复杂的表单。
弹窗式:通过小面积的弹窗进行轻量化的编辑,方便快速进行增、删、改、查;输入项较少,一般不会有滚动条。
侧边栏式:与弹窗式相似,通过小面积的侧边栏进行编辑;可承载比弹窗更复杂一些的表单内容,可以有滚动条。
以上这些就是常见的表单页面框架,我们在考虑采用何种样式时需要综合以下几个因素考虑:
内容多少 —— 内容较多不适合使用弹窗式
与原页面关系强度 —— 需与原页面保留强关联建议使用弹窗式、侧边栏式
表单内容区复杂程度 —— 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。
STEP2:确定【表单内容区布局】
如上图所示,一个正常的表单内容区主要有:标题区、二级导航区、主内容区
其中标题区是必须要有的,标题区可以让用户快速明白该表单是需要收集什么内容
二级导航可以根据业务需要进行配置
主内容区则是表单填写的主区域,通常我们直接将这个区域称之为“表单内容区”,该区域布局样式可以分为三种:
1、通栏式,即:在页面中居中显示,从上到下直接平铺控件颗粒。
2、左右式,即:在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏(如:流程节点展示)。
3、左中右式,即:分别在表单域内容区左侧放置导航栏,右侧放置辅助信息栏。
以上三种样式就是常见的表单内容区的布局,采用哪种布局,可以综合以下几个因素考虑:
内容多少——如果内容很多导致页面很长,则可以考虑将内容分类,作为左侧导航栏,采用左右式布局。
内容类型——导航作用内容必须放置左侧(有些分步骤的表单也会将步骤条放置左侧),而辅助信息的内容建议放在右侧(因为人眼浏览习惯都是从 左 > 右,所以信息重要度建议按照该视线路径放置)
★ STEP3:确定【表单内容排列方式】
在该步骤中,主要确定表单内容区控件颗粒的排列方式,
单列布局 or 多列布局。
在输入项不多的情况下,建议采用单列布局,因为单列布局,用户填写的路径就是从上>下的一条直线,十分符合用户的视觉动线,能够提高用户浏览与填写的效率。
多列布局的表单会导致用户的视觉路径变长,用户需以 Z 字形的视觉动线扫描表单,会提高浏览与填写的效率,并且多列表单容易造成用户填写时的混乱,易填错,体验差。
但是有时部分业务诉求和某些特性的场景要求,会需要在有限的空间上放入更多的控件颗粒来收集用户的信息,这时就不得不使用多列布局的样式,因为多列能够省纵向空间。
so 根据单列布局、多列布局的优劣势,结合实际业务需要来选择:
【单列布局】
优:视觉路径清晰,填写效率高,体验好;
劣:占用纵向空间。
【多列布局】
优:省空间,能够放置更多的控件颗粒;
劣:视觉路径模糊,填写成本高,填写易出错。
在这个环节中,除了需要考虑单列式布局还是多列式布局,还有一个也是需要全盘考虑的——
【标签的对齐方式】
在设计时,到底是采用左对齐、右对齐还是顶部对齐呢?
Matteo Penzo《Label Placement in Forms》文章中,有对标签不同的方式方式优劣势进行了说明。[3][4]
后续在这块纠结的时候,则可以对照上面表格进行评估了,其中详细原理你也可以点击下方链接进行查看:
UX Collective
STEP4:确定【表单内容颗粒】
最后一步只需要按照收集信息类型的需要,选择正确的控件颗粒,如:如果是要收集用户购买数量,则可以直接使用“数字步进器”、“输入框”。
在选用控件颗粒时,需要注意的是:
选用的控件颗粒应是用户可以最快输入的,能点击完成就别输入完成
表单中同个信息类型的控件颗粒应统一
指意不明确的表单应搭配占位提示,占位提示应是完整的陈述句
重要信息的输入项应该有错误提示校验,这种一般用于错误率较高的情况,避免用户反复填写。如:在登录注册时,我们填写手机号如果不满11位数,就会报错。
特定的输入型颗粒控件,需要根据输入信息的特殊性给与格式的提示与限制,如:邮箱 @,这样有助于帮助用户提前感知,减少表单填写错误。
表单颗粒的宽度应该暗示填写内容的长度,与输入预期成正比,在Ant Design 4.0 系列分享的文章[5]分析结论是:
错落有致的排版比整齐划一更舒适,因为在视觉上我们更容易将下方有图的空间和内容视为一个和谐的整体,但左图过度的对齐导致暗示隐性的截断,我们会感觉表单列右侧空间缺了一大块。
写在最后
本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区 逐层对表单进行剥离拆解,帮助大家更加全面的认知表单,并总结了日常工作中设计师常常会遇到的表单类型和布局,设计师可结合文章中给出的建议参考并灵活应用。
希望能够通过这边文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给与指正。最后,作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师,希望大家可以多多点赞评论鼓励下(狗头保命)
参考
^表单类型:
^页面框架:
^标签对齐选择依据:
^标签对齐优劣势:#
^整齐划一?不如错落有致。| Ant Design 4.0 系列分享:
推荐阅读
-
苹果Telegram设置中文教程视频
在全球化的今天,跨语言的交流已经成为了日常生活的一部分,为了方便我们与来自不同国家的朋友进行交流,许多应用程序都提供了多语言支持,...
-
Telegram苹果版使用方法教程
简介Telegram是一款跨平台的即时通讯软件,它以其高度保密性、强大的功能和简洁的界面受到了全球用户的喜爱,在苹果设备上使用Te...
-
Telegram安卓中文版使用教程
简介Telegram是一款由俄罗斯创业家杜洛夫兄弟(PavelDurov和NikolaiDurov)开发的一款即时通讯软件,自...
-
最新教程苹果设备上的Telegram群屏蔽破解方法详解
随着科技的发展,社交软件已经成为了我们日常生活中不可或缺的一部分,Telegram作为一款全球范围内受欢迎的即时通讯软件,拥有着庞...
-
Telegram安卓使用方法教程
Telegram是一款跨平台的即时通讯应用,它提供了端到端的加密通信,保证了用户的隐私安全,虽然Telegram的界面简洁,操作起...
-
Telegram新手入门教程,轻松掌握聊天工具的基本操作
随着科技的发展,越来越多的人开始使用各种即时通讯软件来与朋友、家人和同事保持联系,在这些软件中,Telegram是一款非常受欢迎的...
-
详细步骤教你如何在安卓设备上登录Telegram
Telegram是一款全球知名的即时通讯软件,以其高度的安全性和隐私保护而受到用户的喜爱,对于一些新用户来说,如何在安卓设备上登录...
-
一步一步教你如何在安卓设备上登录Telegram
随着科技的不断发展,通讯工具也在不断升级换代,Telegram作为一款备受欢迎的即时通讯软件,以其高效、安全、稳定的特点受到了越来...
-
苹果手机Telegram使用教程
Telegram是一款非常受欢迎的即时通讯软件,它以其高度的安全性和隐私保护而闻名,在苹果手机上使用Telegram非常简单,只需...
-
Telegram在中国的使用方法详解
Telegram简介Telegram是一款跨平台的即时通讯软件,由俄罗斯创业家杜洛夫兄弟(PavelDurov和Nikolai...
0 条评论
最新文章
-
苹果Telegram设置中文教程视频2024-07-27 17:04:12
-
Telegram苹果版使用方法教程2024-07-27 16:59:16
-
Telegram安卓中文版使用教程2024-07-27 16:59:15
-
最新教程苹果设备上的Telegram群屏蔽破解方法详解2024-07-27 16:59:08
-
Telegram安卓使用方法教程2024-07-27 16:59:05