Web端表单设计小总结
时间:2023-10-04 18:36:01 | 来源:网站运营
时间:2023-10-04 18:36:01 来源:网站运营
Web端表单设计小总结:
前言由于近期接触的一些项目,频繁的接触到web端表单设计。然而,自身知识体系的建设不足,对于表单设计的知识点太过零散,在设计的过程中,往往用最直觉的设计经验,去解决一些界面设计的问题。输出的设计稿,总感觉不太友好。
加强对自身知识体系的规划,对于Ui设计来说是非常必要的。接下来的这篇文章,将对近期表单设计中的知识点进行整合,归拢起来,加深自己对表单设计的理解,夯实自己的基础。
【作者】Molly
1.最基础的作用
表单在web或 app 中主要用于数据采集。常见于很多B端后台产品、业务系统等场景,C端注册、登录、个人信息填写、问卷调查等场景中。
所以,大部分起到数据采集功能的模块,我们都可以称其为表单。
2.表单的构成
表单主要由这四类元素组成:标签、输入域、操作按钮、提示信息。
2.1 标签标签:告诉用户该表单需要填写什么类型的信息。文案需要简洁明了,快速让用户理解。
标签的排列方式有以下几种:2.1.1 顶对齐:从上到下浏览顺序,有利于用户获取信息,从而减少表单填写时间;增加了横向屏幕的空间,但是也会占用较多的纵向垂直屏幕空间。如果表单内容太多,整张变得则会太长,会增加用户填写表单的压力和视觉偏左的效果。
2.1.2 左对齐:占用垂直空间较少。如果标签长短不一,那么表单标签和输入框距离就会比较远,从而会延长用户从左至右浏览时间。对于一些内容校对,相对敏感的信息,需要减少用户的出错率,放慢用户填写表单的速度时,使用做对齐的方式会比较合适。
2.1.3 右对齐:右对齐和做对齐一样,可以减少表单占用垂直屏幕空间,但是相比于左对齐,标签与输入框相邻,更方便于填写。
但是,布局上会造成左侧参差不齐,影响用户游览表单的效率;若标签文字宽度变宽,右对齐还存在灵活度问题。
如果屏幕上下空间有限,又需要用户快速填写表单,使用右对齐的方式会更合适。
2.1.4 内对齐:将标签放在输入框内部,用作提示用户输入什么内容,这种结构在移动端常见(例如,注册/登录页),移动端屏幕小,这种结构的空间占比很小,对移动端的小屏来说,是非常友好的。但交互如果没有设计好,会有很大的缺陷。表单内容要足够短少,而且通熟易懂的。因为用户在输入内容的时候,内部的标签/提示性文字就会消失,用户需要判断自己输入的信息是否正确。
2.2 输入域用来收集用户操作的信息。主要包括:文本输入框(单行/多行)、单选框、复选框、开关、滑块、选择器、上传(文件/图片)、数字输入框、金额输入框、等等
2.2.1 输入域限制限制通常有两种:对表单域输入的信息进行字数限制和属性限制
对输入域做限制,一来可以确定页面的展现形式,二来可以减轻数据库的压力。
字数限制:在输入域右边或者右下角,告知用户最大字数,用户输入过程中,需提醒用户还剩多少字,避免内容过长提交不了。提升用户体验。
属性限制:对数字、文字、字母等输入框做限制,这就极大地增加了用户的错误率。
2.2.1 输入域大小在真实场景中,大部分输入框是存在理想长度的,而不一样的长短的输入框,能够给客户提供一种心理暗示。在填写输入框时,用户自然地会去思考为什么这样。
虽然不同的长度,会提醒用户在填写的信息的时候进行思考,但是设定太多的宽度,这样会导致表单看起来凌乱;需要设置一个适合的宽度模度值和数量。
首先,根据具体的适用场景,设置一个默认宽度。在这个宽度的基础上,长度做规律的增加,从而定义出不同的模度。
2.2.3 多行文字规则多行文字一般出现在两个地方:标签和输入框
对于左右结构的表单,标签文字尽可能的要精简,控制在5个字之内,如果出现标签很长,那么需要给文字设定宽度和行高,比如最多五个字,超出部分换行,设定文字行高标。
输入域大小设定时,我们需要给出横向字数宽度,和上下左右的间距。对于一些文本框内容过多的情况,通常有以下几种处理方法:
第一,限定输入框大小。比如,设定显示5行文字,文字超过 5行,输入框大小不变,输入框内上下滚动展示全部内容。设计时需要注意,右边显示滚动条或者输入框底部显示部分遮挡文字,这样可以提醒用户还有未展示的文字。一般采用的方式是对最上方一行文字遮挡一半。
上述情况,可以确定页面的展现形式,文字的多少,不会改变页面的布局,输入框空间占比小。
第二种,不限定输入框大小,自适应高度。同时也要限制一定的字符数,当超过一定的字符时给用户提示。
第三种,自适应高度+滚动条,指定最小行数,和最大行数。超出部分显示滚动条,同时也要限制一定的字符数。
输入框的大小会影响用户对该输入框内容输入多少对判断,输入框尺寸大,在用户潜意识里则会认为可以输入文字很多。
2.3 操作按钮用户信息录入完成后,点击继续或取消任务的触发器。按钮位置一般位于最后一个输入项后面。一般来说,左边放“取消”按钮,右边放用户最可能点击的按钮。当然【执行/确定】按钮到底是放左,还是放右,其实都可以都可以,只要保证统一即可。
2.4 提示信息录入提示:帮助用户更具象的理解录入的信息内容;
帮助提示:通常,当标签信息无法让用户完成理解或需强调其重要性,可以在标签前/后加一个帮助提示icon,点击/鼠标悬浮按钮出现有帮助信息的弹窗。
错误提示:提示用户录入信息哪里出错或者怎么修改。
3.表单的使用场景
3.1 弹窗(字段少)在实际业务中,当表单字段较为简短,并且填写表单不需要关注底部页面的信息,可才有弹窗的形式。
3.2 页面当表单信息庞大时,可以采用新页面呈现。使用单独页面,能好地展示表单信息减少其它信息的干扰。页面布局主要有以下三种方式:
2.2.1
多列布局(较复杂)当页面空间有限,我们可以将具有相关联字段放在一个卡片区域中进行归类,形成多列排布的暗提示帮助用户更好理解。
2.2.2
分组布局(中度复杂)表单较为复杂,信息量较大,可将具有相关联字段进行分类并以标题区分的形式进行字段分组,并且表单字段都在一个卡片区域内。
2.2.3
卡片分组布局(高度复杂)上述分组布局,通过留白或者分割线的形式对相关联字段进行分组,当页面要承载更大的表单字段时,我们可以采用卡片分组布局的形式来处理这种更为复杂类型表单。将信息相关性弱的字段拆分为多个部分,并通过多个卡片分组承载不同类型字段。
3. 抽屉式(内容信息较多,且与底部信息强关联)
抽屉表单是从屏幕边缘滑出的浮层面板。抽屉会从屏幕的上下左右任意一侧滑出。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。
抽屉承载的内容比弹窗多,交互的形式比弹窗和页面型表单灵活。信息相对较多且与底部信息关系较强,可以采用此形式的表单。用户在录入表单的过程中,可以根据底部信息来辅助完成,这样能够提高填表的效率和用户体验。
欢迎关注技术团队的本站账号我们凭团队实例运作以下专栏, 必须干货!
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
产品君的案例库(产品小伙伴深刻总结)