网页界面设计要点-4-表单与表格

《网页界面设计要点-4-表单与表格》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页界面设计要点BIZBI魏凌2013年9月目录•视觉篇–1-界面布局–2-色彩搭配–3-分隔类型•功能篇–导航–条件选择–信息提示–表单–表格–图形–按钮功能篇4-表单总述•表单是网页系统中运用较多的元素之一，它可以用来采集和提交用户的输入的信息。•一个表单有三个基本组成部分：表单标签表单域--文本框–表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。–表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。–表单按钮：包括提交按钮、复

2、位按钮和一般按钮；用于将数据传送到服务器上的脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单按钮功能篇4-表单1-布局设计1-简述1•表单有三种主要的布局方式：–垂直对齐（顶部对齐）：–垂直对齐的优势在于标签和输入框非常接近，一致的对齐方式使得用户只需要垂直移动视线即可，可大量减少眼睛移动和填写表单的时间。在期望用户尽快完成表单编写，并且收集的数据都是用户熟悉的（如姓名、地址、身份证号等）情况下，垂直对齐的标签和输入框可以说是效果最佳的。–但是这种方式缺点也很明显，增加了垂

3、直的空间，在填写项较多的情况下，会增加页面的滚动。–注意事项：在垂直对齐中，由于标签没有单独的成片的区域，因此会显得不大显眼，因此在这类型布局中，建议标签加粗，增加其显著性，使得标签和输入框之间的区分更加明显一些。功能篇4-表单1-布局设计1-简述2–左对齐：–左对齐的方式方便于用户浏览扫描标签，同时会减少占用的垂直空间。如果表单上的标签用户不熟悉或在逻辑分组上有困难（比方一个地址的多个组成部分），那么左对齐的标签方式可以让用户轻易的通览表单的信息，只需要上下看看厅侧一栏标签就可以了，而不会被输入

4、框打断思路。–但是标签和输入框的距离过远，如果其中一个标签过长，就会大大增加标签和输入框之间的距离，用户必须左右来回地跳转目光来打到两个对应的标签和输入框，影响填写表单的时间，如果标签长度较为接近，则会降低这方面的影响。–注意事项：标签左对齐的方式容易让用户将标签和对应输入框进行联系，但视线移动距离可能变长。功能篇4-表单1-布局设计1-简述3–右对齐：–右对齐的方式优势在于减少了标签和输入框的距离，减少了垂直的空间，弥补了左对齐布局的部分缺点，使得标签和输入框之间的联系更紧密。–但是左边参差不刘的

5、空白和标签让用户很难快速检索表单要填写的内容，给用户的阅读造成部门障碍。–注意事项：标签右对齐的方式相对左对齐来说，可以减少近一半的视线移动点，相应的也减少了近一半的填写时间。功能篇4-表单2-设计要点1•1.表单的逻辑分组–表单的标签都存在一些关联关系，如果只对信息进行简单的罗列，会影响用户填写的逻辑性和连贯性，所以建议将标签进行归类，同时通过视觉元素进行区分，这样用户可以快速阅读表单所有标签，不需要过于的思考和理解。•2.填写引导–当表单信息较多的时候，除了分类之外，也可以进行分段式的填写，如第一

6、步、第二步等，参见之前导航中的介绍。功能篇4-表单2-设计要点2•3.尽量简化表单–越少的表单项，往往会带来越高的用户完成率。因此在设计的时候请确认表单项是否有必要填写。•4.必选VS可选–除非所有选项都是必选荐，没有必要对表单项进行是否必填进行标识，否则应该区分必选项和可选项，如红色的*，或者是输入框的提示。•5.默认选项–对于某些数据，提供默认选项，同时又提供可选择的按钮，比方省份，可根据用户IP地址或组织结构判断，如果需要，用户也可以进行手动更改，这其实也是简化表单填写的一种方式。•6.文字–表

7、单其实是网站和用户沟通的一个途径，使用用户容易理解的语言和尊重用户的语言，既可避免理解上的问题，也能够接近与用户的距离，增加用户对网站的信任感。功能篇4-表单2-设计要点3•7.提示与帮助–对于存在歧义或较难理解的选项，在输入框旁边用小字体显示说明文字或者通过底部灰色的提示文字帮助用户理解表单标签，提示该输入内容的格式等，避免错误。–需要注意的是，输入提示过多，或是设置色调、表达方式过于抢眼的，可能会暄宾夺主，必须适量和适宜。•8.反馈–用户提交表单等操作之后，网站需要给出明确的反馈信息，告知用户操作

8、之后的结果，提示是否成功，当出错时，网站需要提示出错具体原因，并提供可操作的解决建议。同时在出错返回后，建议页面仍保存已民输入的正确的数据，避免用户重复输入，并将鼠标定位到错误位置，减少用户操作。功能篇4-表单2-设计要点4•9.灵活的输入框–填写表单的方式包括输入框，下拉列表框，单选按钮等。对于不同类型的表单项，需要选择合适的方式。–如姓名、EMAIL、地址等文字信息用文本框–性别、唯一信息等用单选框–生日、地区等选择项