添加时间:2019-04-19 21:49:44 编辑:成都网站建设 文章内容: 2204个字 阅读时间:约7分钟
2019年网站建设中提交表单的设计技巧有如下几点
表单提交目的即尽可能来让用户留下他们的信息。 表单必须足够直观,以便用户确切地知道该做什么,并且在完成该操作的过程中不会偏离。
好的联系表单很容易被查看和理解,并包含高度可用的元素,用户可以在不考虑它们的情况下参与其中。我们提供了一些技巧,可以帮助你设计更好的联系表格。
1.把它做成一列一列输入方式
什么更容易? 垂直切换表单或在屏幕上通过同一方向的填充来满足需求? 创建具有单个垂直列的表单对于许多用户来说是最简单的解决方案,因为他们只需要考虑一个操作 - 通过表单向下移动屏幕。
它可以用于相似的字段,例如姓名,电子邮件地址和电话号码等简短的答案。
这种形状在响应式格式中也能更好地工作,因此表单在不同设备上具有相同的形状,从而提供更一致的用户体验。 这对于电子商务或结账表单尤其重要,因为你不希望体验发生变化,从而产生有关表单有效性和可信度的问题。
2.按功能和逻辑分组内容
小的,可视化分组或表单字段可以使表单更容易理解。 将类似的项目或内容组织在一起(例如地址信息或付款字段),并将元素与其标签和任何其他说明文本分组。 用户不应该对标签或指令是与哪个字段相关的产生质疑。
内容的逻辑分组为表单创建流,用户可以预测接下来会显示哪些信息,这使得体验轻松愉快。
3.将标签放在内容之上
大多数表单构建工具为你提供了大量标签或工具提示放置位置的选项。 抵制过度创造性的诱惑,并将标签置于信息所在的位置之上,这是标签最常见且可用的展示位置。
此外,此展示位置可轻松的在其他的设备上转换。 例如,最先开始考虑手机而不是桌面端的表单。 如果表单位于标签之前,你可以计划在滚动到该字段之前将哪些信息放入字段中。 但是如果标签位于字段下方,你可能会陷入向下滚动的模式,然后再次向上看以查看说明并填写表单。
虽然这可能看起来像是一件大事,但对用户来说却是令人沮丧的。 对于较长的表单,它可能会导致整个表单发生错误。 这是你的联系表单设计中的一个主要可用性问题。
4.用户输入的信息尽量的少
与要求不必要信息的长形式相比,更短的形式更有可能被用户填写(你真的需要在支付页面上输入你的信用卡吗?答案是否定的,数字可以表示卡的类型,所以不要让用户输入这些不必要的信息)。
较短字段以及简单的形式可以提高用户的参与率,比起那些冗长而过于详尽的形式,设计需要得当。
5.按钮明显直接,设计简约简单
一旦用户填写表单中的每个字段,最终操作是否明显? 很多时候,创建一个易于查看的按钮是表单设计中被遗忘的一步。 按钮应清晰可见,使用特定于最终按钮的颜色,并确保按钮内的微文本能够准确地告诉你发生了什么(提交,完成付款等)。
额外提示:如果你使用验证码或其他类型的人工验证,请将其放在表单中的最后一个字段和提交按钮之间(没有什么比点击提交前反复输入验证码更加让人恼火的了......如果有的话,那可能就是让你重新开始)。
哦,还有一个不言而喻的提示......让用户知道表单确实已经完成或提交成功了! 一个简单的“谢谢”对话框就足够了。
6.使用适当的字段类型
一个好的表单设计者知道一种字段类型并不适合所有信息。 将字段类型与正在收集的数据相匹配,以便用户更轻松地正确填写表单,你不会在电话号码的栏目中使用下拉菜单,对吗?
虽然这是一个看起来非常明显的提示之一,但它在很多时候都会出错。
在联系表单上考虑这个字段:联系我的最佳方式是通过电子邮件或电话。 使用按钮选项可以清楚地表明用户应该选择一个按钮。 对于任一选择而言,使用下拉列表的操作都过于复杂。 你肯定不需要这个作为一个简短的答案字段。
使用正确类型的字段不仅可以使用户更容易使用表单,而且还可以简化数的据收集和分析。
7.验证表单数据有效性
当一个表格告诉你你所提交的信息中存在错误,而不是直接删除掉对应的信息,你不喜欢这种形式吗? 这样,你不仅可以查看并更正错误,还可以节省重新输入的时间。
在联系表格上使用验证是必须的。 从确认电子邮件地址遵循正确的格式,到验证邮政编码或电话号码的位数,这些小事情可以产生很大的不同。
如果你不并不是这样做的,你就属于少数。 因此,它不仅仅是一个可用性工具,它正在迅速成为一种普遍接受的用户期望。啄木鸟建站表单验证js已广泛被我们的网站建设同行使用,几行简单的引用就可以实现表单验证功能和友好的界面提示效果,如果您是网站开发者,您可以与我们的客户联系获得相关代码。
总结
网站设计项目中最常用的两种表单可能是电子邮件注册和联系表单。 首先你需要确保正确设置这些表单并调整设计以使其更有用(如果你注意到更多的参与,它可能正在发挥作用)。
相同的概念可以应用于整个设计中的表单以及调查,或其他数据收集表单。 这些概念可以扩展以满足用户需要输入信息以完成流程的任何类型的网站元素。