前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >干好这件事,卷死所有同行

干好这件事,卷死所有同行

作者头像
腾讯专有云
发布2022-06-24 17:59:40
2.6K0
发布2022-06-24 17:59:40
举报
文章被收录于专栏:腾讯专有云

宝,咱前面说完表格相关的,今天咱就一起来聊聊表单相关的。答应我,看下去!

由于B端产品的复杂性,表单往往呈现出字段多类型杂等特点;但是一个糟糕的表单会极大影响用户信息的录入,从而影响整个产品的体验。

表单的介绍

表单的定义

表单在网页中主要负责数据采集功能,是提交数据的一切形式。

表单的构成

标签、输入域、提示信息、动作。

表单的构件解析

标签

标签即可以理解为标题的意思,用简洁的文字让用户知道应该输入的内容;根据标签的所属位置,大致可以分为:顶部标签、左对齐标签、右对齐标签、内联标签、图标标签以及浮动标签,下面我们主要介绍前三个。

顶部标签

与输入域左垂直对齐

  • 优点:节省水平空间,标签长度弹性大,可以加快浏览和处理速度。
  • 缺点:垂直空间占用比较大,表单项多时需增加页面滚动。

左对齐标签

文字左对齐放置在输入域的左边

  • 优点:文字开头按阅读视线对齐,方便用户快速浏览表单;节约垂直空间。
  • 缺点:标签与表单域联系不紧密,视觉跳动大,填表不流畅;标签和输入域的弹性长度小。

右对齐标签

文字右对齐放置在输入域的左边

  • 优点:明确的视觉关联,有利于用户进行填写,节约垂直空间。
  • 缺点:左边标签参差不齐,给通览标签造成障碍,降低表单可读性;标签和输入域的弹性长度小。

输入域

用来采集用户数据信息的入口,包含了文本录入、选框录入以及文件上传3种录入类型,应尽可能的减少用户思考和理解的成本,选择合适的输入域。

由于大家对大部分类型都很熟悉了,我就选择几个大家可能容易忽略的说一说

选择框和复选框(单选框)的选择

当项数比较少的时候,复选框(单选框)是一个更优解;选项全部都列出来,可以按重要程度排列,方便用户查看对比。

善用开关按钮

允许用户在两个相反的状态之间进行选择,如:有效或无效、是或否、开或关等。

提示信息

根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段,提示信息在输入前发生的称为引导提示,提示信息在输入中/后发生的叫反馈提示。

由于提示信息这块比较简单,输入中和输入后的验证我就不再啰嗦啦。

输入前

其他

输入格式

根据用户的记忆结构(7±2法则),采用合理的格式约束,能够方便用户更快的完成填写,而减少错误出现。主要是手机号码,银行卡号,IP地址等情景。

智能联想-模糊搜索(重要!!!)

当选项过多时,模糊搜索能更加高效,同时也能减少出错率。

动作

“主动作”,如:提交、保存、下一步等;“次动作”,如:取消、撤销、返回等。

可优化的点

当表单的必填项未填写完整时,提交或保存等主按钮一般为灰色状态,不可进行下一步操作,当完成必填信息的填写后,按钮变为高亮,可进行下一步操作(但表单项超过5个时则不建议使用主按钮禁用原则)。

主按钮之后的下一步操作

弹框级别-关闭弹框刷新数据。

页面级别-这里我认为有待探讨,大家可以根据实际情况判别是否需要回到列表页。

表单的交互

就地编辑、弹窗、抽屉、页面跳转以及新开页面。

就地编辑

  • 优势:快捷易操作,随时启用与退出,主流程的操作流畅度高。
  • 劣势:编辑状态较为隐晦,不宜察觉。
  • 适用场景:适用于输入内容较少,适用于频率较低,同时属于主流程分支的场景。

弹框-对话框

  • 优势:简单易操作、承载的信息量有较大的弹性空间。
  • 劣势:浮层弹窗给主操作流程造成较强的割裂,降低输入的流畅度。

新开页面

  • 优势:页面之间相互独立,互补不干扰,可承载的东西较多,适合分步骤或者大表单。
  • 劣势:用户的焦点丢失,注意力分散(因为系统中大部分的操作在同一个页面中完成)。

弹框和页面如何选择

当承载的东西较多,适合分步骤或者大表单时建议新开一个页面,当表单数量不多时,可以用弹框。

表单内容组织形式

基本平铺

分组归纳

内容分类归组,便于快速定位,减轻焦虑感和填写压力。适用于一次需要填写很多内容的表单,且不同内容之间存在分类归纳性。

步骤引导

  • 优势:任务流程清晰,明确当前用户目标,减少用户负担;及时的反馈校验,也避免填写完成后才发现中间的表单填写有误,降低用户的犯错成本。
  • 劣势:无法通篇浏览表单内容,回溯成本高。(这里建议在最后一步的时候增加一块区域可以查看清单或者概要)。

其他

关于“只读”

不可编辑的表单项建议使用“readonly",不要用”disable"。

私货

删除二次确认

  • 弹框:需要说明删除信息和影响的情况。
  • 弹框:批量选择,且弹框中不再有其他操作。
  • 就地确认:不需要过多说明,可简单二次确认。

loading

  • 页面级loading:tip描述使用进来描述;例如“数据加载中”。
  • 按钮级loading:提交/确定类按钮,点击后需有loading,防止用户多次操作。
  • 弹框loading:确定按钮点击后需有loading。
  • 表格loading:用表格自带的loading属性。

滚动条

  • 表格宽度过长- 滚动条最好出现在表格中,不是在页面级别。
  • 弹框过长-滚动条最好出现在弹框中,不是页面级别滚动。
  • 避免出现滚动条套娃。

好啦以上就是全部啦!还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯专有云 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档