文学起点网
当前位置: 首页 文学百科

把一个表单设计到极致的感受(表单设计与校验反馈)

时间:2023-05-24 作者: 小编 阅读量: 1 栏目名: 文学百科

应当始终为用户提供适当且及时的反馈,避免用户执行错误操作。

把一个表单设计到极致的感受?编辑导语:表单是连接用户与数据库的桥梁,通过引导用户进行信息的填写,从而提交数据给后台在用户填写提交时,还需要对用户输入内容进行校验与反馈,保证用户信息填写的完整度那么,该如何实现这一过程?作者分享了表单设计与校验反馈的四个方面,希望对你有所帮助,我来为大家讲解一下关于把一个表单设计到极致的感受?跟着小编一起来看一看吧!

把一个表单设计到极致的感受

编辑导语:表单是连接用户与数据库的桥梁,通过引导用户进行信息的填写,从而提交数据给后台。在用户填写提交时,还需要对用户输入内容进行校验与反馈,保证用户信息填写的完整度。那么,该如何实现这一过程?作者分享了表单设计与校验反馈的四个方面,希望对你有所帮助。

表单是建立用户与数据库联系的桥梁,通过引导用户填写信息及设置后提交给后台。在收集用户数据信息的同时,还可以通过表单向用户展示数据信息。用户在进行表单填写/提交时,我们还需要进行输入内容校验并及时反馈,确保用户提交信息的完整性。

本篇简单概述了常见的“表单录入模式”、“表单构成”、“表单的校验形式”以及对校验结果进行“反馈”四个内容。

一、表单录入模式

1. 单步录入

单步录入指的是在一个页面即可完成内容输入。

适用场景:内容较少、结构简单;

常见的形式有:普通形式和引导式。

2. 分步录入

适用场景:内容较多、录入内容的方式差异较大;一般通过添加分步导航展示内容。

二、表单构成

表单通常由“表单类别”、“标签/标题”、“输入域”、“提示”、“操作按钮”等构成。

①标签:告知用户此项输入的内容。按需求分为“必填项”(不填写则无法进行后续操作)、“选填项”(不填写也不会影响后续操作)、“不填项”(系统自动生成,无需填写);

②输入域:用于采集用户信息。常见的输入域有4种形式:“输入框”、“文件上传”、“选择内容”(单选/多选、开关、级联选择器等)、“时间选择”(日期、时间)、“数值选择”(步进器/滑动输入条);

③提示:帮助用户快速、准确地理解输入域操作/输入内容,可分为“输入前”、“输入中”、“输入后” 三个阶段进行提示。

a.“输入前”的提示被称为“引导提示”,“引导提示”一般分为 ‘全局提示’&‘单项提示’:

‘全局提示’位于整个表单开始,告知用户填写表单的用途/注意事项/用户信息安全性告知等,是对整个表单的解释说明;

‘单项提示’定位精准,只对此项输入域进行解释说明;

b.“输入中”/“输入后”被称为“反馈提示”,提醒用户当前输入的内容是否符合填写规则。

④操作按钮:表单填写完成后要进入的动作,例如 “完成”/“提交”。

有的表单当信息必填项未填写完整时,提交/完成 按钮为灰色状态,仅当必填信息填写完成后按钮变为高亮方可进行下一步;有的表单不使用前者方式,而是始终显示高亮,但在用户提交时校验,并对表单进行单项提示。

三、表单的校验形式

填写表单过程中的“输入中”/“输入后”被称为“反馈提示”,针对反馈信息的精准性,通过有两种校验方式:前端校验和后端校验。

前端校验:校验输入的内容格式,例如 用户名格式、手机号格式等;

后端校验:与数据库相关,校验信息正确与否,例如 用户名是否存在、用户名密码是否匹配等;

校验触发条件:

输入时,进行校验;

输入完成、失去焦点时,进行校验;

输入完成、继续操作(保存/提交/下一步)时进行校验;

报错的方式:

由于校验触发条件的不同和报错方式的不同,可以组成下面几种方式:

1. 输入时验证、即时报错

在用户输入的时候进行实时验证,获取焦点的时候显示提示,随着输入的过程,符合要求后已与用户通过验证的反馈。

缺点:影响一些性能,但是这个影响比较小;如果在输入一个错误率很高的内容,频繁的给用户错误提示会影响用户体验。

优点:减轻后台数据传送压力。

常用于:检测数据类型,注册页面的密码检验(输入是否符合规则)。

2. 失去焦点、即时报错

用户输入完成后,鼠标点击非输入框的其他位置进行校验,并且如果有错误进行报错。

缺点:如果输入有误,用户需要多一步操作,点击会有错误的输入框进行修改,稍微影响用户体验。

优点:为用户修改错误节省时间、避免出现很多错误需要改正的情况。

常用于:输入验证码、注册等功能。

3. 操作 保存/提交/下一步 时全部报错

在用户全部输入完成以后,点击下一步操作的时候将所有错误提示都展示给用户。

缺点:用户不能及时看到反馈,及时进行修改,如果表单过长的话,一定程度上会影响用户体验;

优点:减少后端服务器压力,提高页面性能;

常用于:登录账号时检测输入内容是否合法。

四、反馈设计

在尼尔森十大可用性原则中,第一原则就是系统状态的可见性,即系统状态反馈给用户,不能让用户因对状态的未知而产生焦虑。

系统状态的可见性 包括“用户知道自己在做什么”、“系统在做什么”、“系统进行到了哪一步”、“用户当前所处环节”等。应当始终为用户提供适当且及时的反馈,避免用户执行错误操作。

反馈机制的设计原则:

①轻量。遵循【告知但不打扰】的基本原则;

②清晰的文案。反馈内容需要明确表达目的及操作后果,错误提示需要说清错误原因及改正方式;

③保持系统中所有相同事件反馈方式一致,利于培养用户使用习惯和心理预期。

④就近原则。反馈出现在操作点最近的地方时,最容易被注意到且容易被操作的。

本文由 @产品秘阁 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议。

    推荐阅读
  • 炒西葫芦有毒吗(炒西葫芦会导致中毒和癌症吗)

    西葫芦在爆炒的过程中可能会产生一定的丙烯酰胺,主要就是蔬菜中的两种物质在高温下发生反应最终自然而然的产生了。丙烯酰胺是一种带有毒素的潜在的致癌物质,很多癌症比如女性乳腺、子宫内膜、卵巢等等都和这种物质有关系,所以大家之所以会担心西葫芦是因为这种物质确实相当恐怖。虽然说西葫芦中可能会产生致癌物质,但是这并不代表西葫芦就致癌了。西葫芦在高温下会产生极其微量的毒素,基本没有太大的危害。

  • 奔驰巴博斯什么底盘(奔驰巴博斯百度百科)

    普通的汽车美容改装是在用户购车后帮车主进行改装,而巴博斯从生产开始改装,这家公司生产的车都是改装车。随着知名度越来越高,为了更好地满足来自世界各地的顶级客户的需求,巴博斯仍然只为奔驰车型进行个性化生产。所以全世界的贵族、名流、富商都想拥有一辆巴博斯制造的奔驰。在这一点上,虽然全世界的改装车商家很多,但是技术是首屈一指的。

  • 五道适合孩子喝的汤健脾开胃(要多给孩子喝这5道汤)

    到了秋冬季节,一定要多给孩子喝这5道汤,养胃好喝,做法简单,值得一试!菌菇去掉根部,清洗干净备用;3、热锅凉油,倒入鸡蛋液炒至凝固,加入开水煮开;4、再把肉片一片片加进去。您的支持是对我们最大的鼓励!

  • 余姚限行黄牌车吗? 余姚限行黄牌车吗今天

    余姚限行黄牌车吗?(二)以上划定区域边界的道路,除月梅路路段外均可通行。(二)以上划定区域边界的道路除崇文路、宏达路、三槐路、锦霞路外均可通行。

  • 国庆假期攻略武汉(国庆武汉出行攻略)

    今年国庆节假期为10月1日至7日共7天,全国高速公路实行免费通行政策。预计节日期间人员车辆跨省跨市流动、市内出行将剧增,重要节点时段拥堵多发。长假期间预计外地游客增多,国庆期间市内景区将迎来近期客流高峰。武昌区的麦德龙会员店已于9月25日开业,国庆期间预计周边道路会出现不同程度的拥堵。发生交通事故或车辆故障,要将车辆靠边停放并摆放警告标志,车上人员迅速撤离并拨打报警电话求助。

  • 福特电子手刹怎么解锁(怎么解锁福特电子手刹)

    我们一起去了解并探讨一下这个问题吧!福特电子手刹怎么解锁将排挡放D档,踩油门,电子手刹会自动解除。踩住刹车,往下按电子手刹按键,和启动电子手刹的向上拨不同。注意,看见仪表盘上电子手刹的红色小标志消失,说明电子手刹已经解除。同时还能听到电子手刹解除的气阀声,要特别注意,若不踩刹车,就算车辆已经静止,光是往下按电子手刹也是不能解除的。

  • gif制作工具下载(免费的gif制作app)

    以下内容希望对你有帮助!gif制作工具下载这里推荐以

  • 炒豆饼怎么做(如何制作炒豆饼)

    接下来我们就一起去研究一下吧!炒豆饼怎么做食材:豆饼1小盆,小红辣椒2-5个,小葱1-2根,生姜1-2片。将豆饼淘洗干净后,先控水,控好水后备用。将小辣椒和小葱切碎。锅烧热后,倒入适量食用油,油烧热。油烧热好后,倒入豆饼和辅料,进行翻炒。放入适量食用盐、味精和酱油,出锅盛到盘子里,就可以享受美味啦。

  • 南斯拉夫解体后分了几个国家(南斯拉夫解体分成几个国家)

    2017年4月2日当选塞尔维亚总统,5月31日正式宣誓就任塞尔维亚新一届总统,任期5年。2022年5月9日在总统大选中获胜,5月31日宣誓就职,开始他的第二个总统任期。2006年6月3日,黑山共和国宣布独立。同年6月5日,塞尔维亚共和国宣布继承塞黑的国际法主体地位。今年2月,武契奇来华出席北京2022年冬奥会开幕式,5月31日起武契奇开始他的第二个五年期总统任期。

  • 3000mm长焦推荐(买个长焦玩玩可以)

    经常有朋友咨询长焦镜头,但预算不多,大多数2万左右,还有几千的。其次器材得武装到牙齿。或许这才是老狼的理想生活,并不是真要拍鸟。如果高速飞行,起码要达到1/1000s,最好1/2000s。像佳能RF600mmF11和RF800F11这类镜头在光线好的情况下拍才行。其余的,三脚架、云台也是不能省的。长焦无弱旅,出片效果杠杠的。腾龙的思路也明确,就是不走寻常路,比你原厂便宜。对标的应该是索尼FE200-600mmF5.6-6.3GOSS。