当前位置:八五教程网教学知识电脑学习电脑基础知识让用户不再讨厌Web表单的十九个最佳设计实践» 正文
  1. 让用户不再讨厌Web表单的十九个最佳设计实践

  2. [10-10 23:22:45]   来源:http://www.85jc.com  电脑基础知识   阅读:8105

概要:在Web设计和开发领域,创意是基础,而遵循最佳实践确保更好的可用性、功能性和易于使用更为重要。表单是用户在Web上处理事务时最讨厌的功能(计算机爱好者,学习计算机基础,电脑入门,请到本站http://www.85jc.com,我站同时提供计算机基础知识教程,计算机基础知识试题供大家学习和使用),,因为经常看到难以理解的或者布局不清晰的表单。因此,在设计Web表单时遵循最佳实践非常重要。本文为你介绍一些Web表单设计的最佳实践,希望在你的下一次设计中充分采用这些最佳实践。一、内联验证498)this.style.width=498;" border=0> 图 1 内联验证这是一个伟大的技术,因为它在数据提交前就先行进行了一番验证,它立即将验证未通过的表单区域反馈给用户,使用户一下子就知道哪里需要进行修改。二、不要使用有歧义的标签不要使用双关语或模棱两可的语言,那样用户会不知所措,因此确保最终用户看到的都是清晰的语言表达,并容易找到哪些地方需要输入。三、每个控件都使用一个标签498)this.style.width=49

让用户不再讨厌Web表单的十九个最佳设计实践,标签:电脑基础知识,电脑基础知识入门,http://www.85jc.com
在Web设计和开发领域,创意是基础,而遵循最佳实践确保更好的可用性、功能性和易于使用更为重要。表单是用户在Web上处理事务时最讨厌的功能(计算机爱好者,学习计算机基础,电脑入门,请到本站http://www.85jc.com,我站同时提供计算机基础知识教程,计算机基础知识试题供大家学习和使用),,因为经常看到难以理解的或者布局不清晰的表单。因此,在设计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 按钮主次分明

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

八、一致性

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

[1] [2] [3]  下一页


Tag:电脑基础知识电脑基础知识,电脑基础知识入门电脑学习 - 电脑基础知识

上一篇:总结2009年Google五大WEB应用
留言板
取消 发布留言