让用户不再讨厌Web表单的十九个最佳设计实践.docVIP

在Web设计和开发领域，创意是基础，而遵循最佳实践确保更好的可用性、功能性和易于使用更为重要。表单是用户在Web上处理事务时最讨厌的功能（计算机爱好者，学习计算机基础，电脑入门，请到本站，我站同时提供计算机基础知识教程，计算机基础知识试题供大家学习和使用），，因为经常看到难以理解的或者布局不清晰的表单。因此，在设计Web表单时遵循最佳实践非常重要。本文为你介绍一些Web表单设计的最佳实践，希望在你的下一次设计中充分采用这些最佳实践。 一、内联验证 498)this.style.width=498; border=0?图 1 内联验证 这是一个伟大的技术，因为它在数据提交前就先行进行了一番验证，它立即将验证未通过的表单区域反馈给用户，使用户一下子就知道哪里需要进行修改。 二、不要使用有歧义的标签 不要使用双关语或模棱两可的语言，那样用户会不知所措，因此确保最终用户看到的都是清晰的语言表达，并容易找到哪些地方需要输入。 三、每个控件都使用一个标签 498)this.style.width=498; border=0?图 2 每个控件都使用一个标签 这个技巧看上去很平淡，但互联网上很多表单确实没有使用标签，假设一个表单有多个输入控件都缺少清晰的标签，用户就不知道该向表单中输入什么信息，保证每个输入控件都包含一个标签描述要输入的数据会让用户的体验变得轻松许多。 四、输入控件的长度保持适中 498)this.style.width=498; border=0?图 3 输入控件的长度保持适中（文字大意：如果字数限定是74个字符，为什么文本输入框要这么大） 这个方法指明输入控件的长度应该与放入它的文本长度保持一致，例如，输入控件的长度要满足输入的文本的长度，同样也不能让输入控件的长度太长。最好增加一个计数器，实时显示用户还可输入的字符数是一个很好的主意。 五、数据输入更加灵活 制作Web表单时灵活性也非常重要，要允许输入不同类型的信息，什么提示信息都没有比不知道输入该输入什么信息更让人窝火，例如，对于一个电话号码，允许输入如5555555555这样的一组数字，或者放上破折号，以便让用户清楚地知道要输入多少位。 六、如果输入有限制，最好提供一个实例 如果对用户的输入有特殊要求，最好在适当的位置给出一个实例进行说明，就那上面的电话号码来说，如果你在旁边标注了输入格式为5555555555，那么用户就知道该如何输入电话号码了。 七、把次要按钮设计得小一点 498)this.style.width=498; border=0?图 4 按钮主次分明 次要按钮要比主要按钮设计得小一点，这样可以突出显示主要按钮，例如，不要让“确定”按钮和“取消”按钮的大小一样，“确定”按钮是主要按钮，因此它应当设计大一点。 八、一致性 既要确保单个表单的一致性，又要确保整个站点的所有表单的一致性，首先确保表单中的所有输入控件都是一致的，用户的体验才会保持一致，此外，如果在同一站点上表单风格不一样，最好纠正过来，例如，不要在一个表单中使用下拉列表，而在另一个表单中却使用输入控件，一致性是关键。 九、把相关的数据放在一起 498)this.style.width=498; border=0?图 5 相关数据放在一起 这个技巧非常有用，因为它可以把内容组织得更好，具有更好的用户体验。设计人员遵循这个最佳实践把相关数据组织在相邻位置，例如，将个人数据放在一个区域，与工作相关的数据放在一个区域，与账号相关的数据放在一个区域，这样用户看到表单就不会茫然不知所措，并且这样做对用户有一个指导性作用，用户只要跟随表单一步一步往下填写便可以了，如果有可能，尽量使用图例对每个区域进行标注。 十、按种类对数据进行排序，按字母表对种类进行排序 498)this.style.width=498; border=0?图 6 合理排序 在表单中组织数据的另一个方法是按字母顺序排列它，这样做有一个好处是，你的用户可以预知下一条信息是什么，他们知道信息的组织和排列方式，使用起来就会得心应手。 十一、使用tabindex属性组织Tab键的顺序 确保表单的Tab键顺序是组织良好的，用户按下Tab键，焦点是有规律地在各个输入控件之间移动，这样表单的易用性不仅更好，也更具有亲和力，因为有了Tab键的帮助，用户完全可以脱离鼠标了。 十二、尽可能重新填充内容 这个技巧是非常受用户欢迎的，尽一切可能填入需要用户重填的内容，不要让用户输入两次相同的回答，如果可以，可以提供一个按钮“使用上面相同的内容”，让用户自行决定。 十三、拆分表单 498)this.style.width=498; border=0?图 7 将很长的表单拆分成多个短小的表单 如果表单非常长，应该按数据的相关性将其拆分成多个步骤，就象是