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

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

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

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

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

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

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

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

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

一、表单录入模式

1. 单步录入

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

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

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

2. 分步录入

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

二、表单构成

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

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

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

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

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

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

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

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

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

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

三、表单的校验形式

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

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

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

校验触发条件:

输入时,进行校验;

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

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

报错的方式:

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

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

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

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

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

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

2. 失去焦点、即时报错

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

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

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

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

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

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

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

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

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

四、反馈设计

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

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

反馈机制的设计原则:

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

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

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

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

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

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

    推荐阅读
  • 卖火柴的小女孩主要讲了什么(卖火柴的小女孩讲述的是什么)

    卖火柴的小女孩主要讲了什么它讲述的是一个在圣诞夜卖火柴的小女孩的悲惨命运。因为没有卖掉一根火柴,小女孩一天没有吃东西。创作背景:1845年10月,安徒生再次访问意大利。在圣诞节即将到来的时候,格洛斯顿城的朋友们再三邀请安徒生去那里过圣诞节。安徒生兴冲冲地坐上了去格洛斯顿的马车。安徒生的马车在格洛斯顿的街道上缓缓前进,他要体会一下城市里的圣诞节气氛。安徒生回去以后就写了《卖火柴的小女孩》。

  • 芹菜炒木耳大白菜(钙含量是牛奶的3倍)

    韭菜炒豆芽的做法,就是这么简单,掌握好技巧,口感能提升不少,如果你认为韭菜炒豆芽的做法还不错,欢迎收藏起来学着做,或者是分享给更多的人学习!

  • 雅典为什么会繁华(同属希腊地区的雅典和斯巴达)

    古希腊城邦奴隶制得到如此广泛推行为日后城邦时代社会经济的发展以及各行各业的繁荣提供了重要条件。这也使得希腊城邦的奴隶制经济得到了空前规模的发展,尤其是在以雅典和斯巴达两大城邦的代表下,古希腊城邦时代迎来了其奴隶制社会经济发展的黄金时代。雅典型的奴隶制经济代表着古希腊城邦时代奴隶制社会发展的整体面貌,而斯巴达型的奴隶制经济只是局限于那些经济较为落后的城邦当中。

  • 电饭锅腊肠饭做法(电饭锅腊肠饭最简单的做法介绍)

    下面希望有你要的答案,我们一起来看看吧!电饭锅腊肠饭做法主料是腊肠、米,辅料是胡萝卜、玉米、葱、盐、鸡粉。先把材料准备好,大米洗净,腊肠切丁,玉米粒胡萝卜切丁,备用。电饭锅内放少许油,依照顺序放入胡萝卜,玉米腊肠,加入盐,鸡粉,酱油翻炒片刻,接着放入米,水量和平常一样,按下开关煮饭就可以了。开关跳了后,撒上些香葱,加入些酱油调味拌匀即可出锅。

  • 地笼放什么饵料(地笼的介绍)

    下面内容希望能帮助到你,我们来一起看看吧!地笼放什么饵料地笼里面放的饵料比较好的:大骨头稍微有一点点肉屑。还有红虫但数量要多一些。还可以鸡鸭骨头等等腥味越大越好。地笼是中原地区的业余或专业捕鳝或泥鳅,河虾小鱼等的工具。地笼的长度可依据养殖水面的长度、宽度而定,一般为15节左右,总长约7~8米。材质为塑料纤维。地笼有很多入口,但内部构造比较复杂,鱼类进去后就很难出来。

  • 卡路里最低的食物排行(卡路里最低的食物有哪些)

    卡路里最低的食物排行芝麻菜。芝麻菜在日常生活中是比较常见,不仅含有低热量低脂肪和低胆固醇,而且高纤维和大量的维生素A,K,C以及其它丰富的营养。西兰花低热量、丰富维生素、大量矿物质及抗氧化剂,可降低各种癌变的发生率。绿豆芽热量较低,水分和膳食纤维较高。西红柿果实营养丰富,具特殊风味。

  • 新买的内衣有很大的味道怎么回事 新买的内衣有很大的味道怎么回事呀

    不少女性朋友可能有这样的困扰,新买的内衣挂在内衣店里没有异味,可是拿回家洗一遍之后却散发出很大的味道。内衣长期挤压产生味道新买的内衣从生产到购买经过了较长的时间,而在此期间内衣被长时间闷在包装袋里面或者是长时间受到挤压,这也容易使内衣在包装袋中产生很大的味道。

  • 修车最容易被更换的零件(更换下来的旧件哪些可以卖掉)

    可以最大程度上降低我们的损失呢?第4个零部件就是发动机以及空调压缩机了,相信我们都应该知道,车辆当中最为贵重的零部件就是发电机,所以如果我们的车辆出现问题时,发电机也能够卖到一个非常好的价钱。但前提是一定要经过维修之后还可以再次使用的,才能够进行售卖,如果没有维修价值了的话,也只能够是当废铁卖掉。

  • 孕妇晚期腰痛可以按摩吗(孕妇腰酸可以按摩缓解吗)

    孕妇腰酸可以按摩缓解吗孕期随着腹中胎儿越长越大,身体会变得笨重,由于重心前移,增大的子宫压迫脊柱导致背部肌肉紧张,可能就会引起腰酸背痛,这主要是一个生理性的表现怀孕期间运动量太少,体重明显的增加,怀孕的时候身体里面的激素水。

  • qq隐藏图标的方法(操作步骤)

    qq隐藏图标的方法我们打开QQ软件,输入账号密码登录,进入主界面后,点击个人头像,鼠标移到头像上,会出现浮动框,能看到当前使用的应用图标。确定上述操作后,重新查看自己的个人资料,图标已经隐藏成功,操作完以上步骤后,你的QQ好友就看不到你的手机QQ图标了。我们还可以打开QQ,点击最左侧的选项之后选择设置选项,在系统设置中点击登录选项,在主面板中选择在任务栏通知区域显示QQ图标的对勾去掉即可。