Web表单的十九个最佳设计实践

在Web设计和开发领域，创意是基础，而遵循最佳实践确保更好的可用性、功能性和易于使用更为重要。表单是用户在Web上处理事务时最讨厌的功能，因为经常看到难以理解的或者布局不清晰的表单。因此，在设计Web表单时遵循最佳实践非常重要。本文为你介绍一些Web表单设计的最佳实践，希望在你的下一次设计中充分采用这些最佳实践。

一、内联验证

图 1 内联验证

这是一个伟大的技术，因为它在数据提交前就先行进行了一番验证，它立即将验证未通过的表单区域反馈给用户，使用户一下子就知道哪里需要进行修改。

二、不要使用有歧义的标签

不要使用双关语或模棱两可的语言，那样用户会不知所措，因此确保最终用户看到的都是清晰的语言表达，并容易找到哪些地方需要输入。

三、每个控件都使用一个标签

图 2 每个控件都使用一个标签

这个技巧看上去很平淡，但互联网上很多表单确实没有使用标签，假设一个表单有多个输入控件都缺少清晰的标签，用户就不知道该向表单中输入什么信息，保证每个输入控件都包含一个标签描述要输入的数据会让用户的体验变得轻松许多。

四、输入控件的长度保持适中

图 3 输入控件的长度保持适中（文字大意：如果字数限定是74个字符，为什么文本输入框要这么大）

这个方法指明输入控件的长度应该与放入它的文本长度保持一致，例如，输入控件的长度要满足输入的文本的长度，同样也不能让输入控件的长度太长。最好增加一个计数器，实时显示用户还可输入的字符数是一个很好的主意。

五、数据输入更加灵活

制作Web表单时灵活性也非常重要，要允许输入不同类型的信息，什么提示信息都没有比不知道输入该输入什么信息更让人窝火，例如，对于一个电话号码，允许输入如5555555555这样的一组数字，或者放上破折号，以便让用户清楚地知道要输入多少位。

六、如果输入有限制，最好提供一个实例

如果对用户的输入有特殊要求，最好在适当的位置给出一个实例进行说明，就那上面的电话号码来说，如果你在旁边标注了输入格式为5555555555，那么用户就知道该如何输入电话号码了。

七、把次要按钮设计得小一点

图 4 按钮主次分明

次要按钮要比主要按钮设计得小一点，这样可以突出显示主要按钮，例如，不要让“确定”按钮和“取消”按钮的大小一样，“确定”按钮是主要按钮，因此它应当设计大一点。

八、一致性

既要确保单个表单的一致性，又要确保整个站点的所有表单的一致性，首先确保表单中的所有输入控件都是一致的，用户的体验才会保持一致，此外，如果在同一站点上表单风格不一样，最好纠正过来，例如，不要在一个表单中使用下拉列表，而在另一个表单中却使用输入控件，一致性是关键。

九、把相关的数据放在一起

图 5 相关数据放在一起

这个技巧非常有用，因为它可以把内容组织得更好，具有更好的用户体验。设计人员遵循这个最佳实践把相关数据组织在相邻位置，例如，将个人数据放在一个区域，与工作相关的数据放在一个区域，与账号相关的数据放在一个区域，这样用户看到表单就不会茫然不知所措，并且这样做对用户有一个指导性作用，用户只要跟随表单一步一步往下填写便可以了，如果有可能，尽量使用图例对每个区域进行标注。

十、按种类对数据进行排序，按字母表对种类进行排序

图 6 合理排序

在表单中组织数据的另一个方法是按字母顺序排列它，这样做有一个好处是，你的用户可以预知下一条信息是什么，他们知道信息的组织和排列方式，使用起来就会得心应手。

十一、使用tabindex属性组织Tab键的顺序

确保表单的Tab键顺序是组织良好的，用户按下Tab键，焦点是有规律地在各个输入控件之间移动，这样表单的易用性不仅更好，也更具有亲和力，因为有了Tab键的帮助，用户完全可以脱离鼠标了。

十二、尽可能重新填充内容

这个技巧是非常受用户欢迎的，尽一切可能填入需要用户重填的内容，不要让用户输入两次相同的回答，如果可以，可以提供一个按钮“使用上面相同的内容”，让用户自行决定。

十三、拆分表单

图 7 将很长的表单拆分成多个短小的表单

如果表单非常长，应该按数据的相关性将其拆分成多个步骤，就象是把一个很大的任务分解成多个小任务一样，这样用户才不会有畏惧感，也不容易产生疲劳，同时拆分后可管理性会更好，用户前面填写的表单是可以先保存起来的，如果用户在填写后面表单的时候遇到计算机故障，不至于所有填入的表单内容全部丢失。注意，如果你将一个长表单进行了拆分，最好给用户一个提示，让其知道当前所处的位置，如2/4页，这样用户就知道完成了多少内容，还剩多少内容未完成。

十四、突出显示错误位置

当Web表单上出现错误信息时，确保使用了突出的表达形式，以便让用户准确地知道错误在哪里，以及如何修复它，如果什么提示都没有，那是非常糟糕的，用户会滚动到表单的末尾，直到提交可能才会发现问题。比如将有错误的输入控件标识为红色，用户可能会很容易就发现问题所在之处了。

十五、保存正确的信息

如果用户不小心犯了一个低级错误，那么用户应该只需要返回纠正这个错误即可，其它输入正确的信息就应该得到保存，其实也就是不要让用户再输入一次内容。

十六、使用恰当的颜色

改善Web表单的另一个重要建议是按照颜色本意使用颜色，有些颜色不管是否有残疾、不管年龄大小、语言或计算机知识，人们都能理解，适当使用这些颜色是至关重要的，因为它们超越了所有理解限制。例如，红色代表错误，绿色代表正确，黄色代表报警，但也要考虑到色盲，例如，不要仅仅使用红色表示必填字段，最好是使用红色字体的“必填”单词进行标注。

十七、记住目标读者

图 8 记住目标读者

Javascript表单验证大全（第三部分）
ASP.NET表单介绍
有关多表单系统的介绍和设计思路
以表单为中心的Ruby on Rails面向表单编
几种常用Ruby表单语句总结概览

无论什么设计，记住你的目标读者，按照他们的想法进行设计是非常重要的，因此，如果你的目标读者是年轻一族，非技术出身，那最好不要使用技术或科学词汇，如果你要使用技术或模棱两可的话，最好对那些专业词汇进行解释。

十八、简明扼要

尽可能做到简洁明了，因为人们不喜欢阅读不必要的信息，如果你放了太多不必要的信息，要能确定哪些信息是用户不会阅读的，最好将其精简掉。

十九、必需的信息 vs. 可选的信息

请务必明确哪些信息是必需的，哪些信息是可选的，这样可以保证可用性更好。因为首先输入的是必需的信息，然后再决定要输入哪些可选的信息。如果大部分字段都必需输入，那么就将可选字段进行标注，如果大部分字段都是可选的，那么就标注必需字段。

Web表单的十九个最佳设计实践相关推荐

web表单设计:点石成金_设计复杂的用户表单：12个UX最佳实践
web表单设计:点石成金 It's been a few years that I've been taking interest in designing complex user forms, w ...
使用 PEAR的Text_CAPTCHA保护Web表单[翻译]
使用 PEAR的Text_CAPTCHA保护Web表单作者 Marcus Whitney 翻译 mikespook 来源 http://phpsec.org 当你在网络上有公开的表单的时候,你总是需 ...
【Web安全】PHP与Web表单交互-POST方法与GET方法（看不懂你来打我）
PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...
用php实现一个简易的web表单生成器,PHP—Web表单生成器
1.实例: 2. 需求分析在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. 因此,可以利用PHP实现一个Web表单生成器,使其可以根据具体的需求定制 ...
Flask开发系列之Web表单
Flask开发系列之Web表单简单示例 from flask import Flask, request, render_templateapp = Flask(__name__) @app.rou ...
Flask Web表单
title: flask学习笔记 subtitle: 3. flask Web表单 date: 2018-12-14 10:17:28 --- Web表单 HTML表单是用户和web站点或应用程序之间 ...
用php实现一个简易的web表单生成器,网络编程PHP Web表单生成器案例分析
本文实例讲述了PHP Web表单生成器.分享给大家供大家参考,具体如下: 1.实例: 2. 需求分析在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. ...
专注于 web报表, web打印, 自定义web表单, web工作流管理系统方面的技术
专注于 web报表, web打印, 自定义web表单, web工作流管理系统方面的技术, 官方网站为: http://www.fcsoft.com.cn/
15 个第三方Web 表单资源
几乎每个 Web 站点都需要表单,不管是留言表单,还是会员注册表单,还是调查表或订单,尽管表单很有用,但对 Web 开发与设计者来说,表单的设计非常繁琐,本文搜集了15个免费或收费的第三方 Web 表 ...

Web表单的十九个最佳设计实践

Web表单的十九个最佳设计实践相关推荐

最新文章

热门文章