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

网页界面设计要点BIZBI魏凌2013年9月•视觉篇–1-界面布局–2-色彩搭配–3-分隔类型•功能篇–导航–条件选择–信息提示–表单–表格–图形–按钮目录功能篇\4-表单\总述•表单是网页系统中运用较多的元素之一，它可以用来采集和提交用户的输入的信息。•一个表单有三个基本组成部分：–表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。–表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。–表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单标签表单域--文本框表单按钮功能篇\4-表单\1-布局设计\1-简述1•表单有三种主要的布局方式：–垂直对齐（顶部对齐）：–垂直对齐的优势在于标签和输入框非常接近，一致的对齐方式使得用户只需要垂直移动视线即可，可大量减少眼睛移动和填写表单的时间。在期望用户尽快完成表单编写，并且收集的数据都是用户熟悉的（如姓名、地址、身份证号等）情况下，垂直对齐的标签和输入框可以说是效果最佳的。–但是这种方式缺点也很明显，增加了垂直的空间，在填写项较多的情况下，会增加页面的滚动。–注意事项：在垂直对齐中，由于标签没有单独的成片的区域，因此会显得不大显眼，因此在这类型布局中，建议标签加粗，增加其显著性，使得标签和输入框之间的区分更加明显一些。–左对齐：–左对齐的方式方便于用户浏览\扫描标签，同时会减少占用的垂直空间。如果表单上的标签用户不熟悉或在逻辑分组上有困难（比方一个地址的多个组成部分），那么左对齐的标签方式可以让用户轻易的通览表单的信息，只需要上下看看厅侧一栏标签就可以了，而不会被输入框打断思路。–但是标签和输入框的距离过远，如果其中一个标签过长，就会大大增加标签和输入框之间的距离，用户必须左右来回地跳转目光来打到两个对应的标签和输入框，影响填写表单的时间，如果标签长度较为接近，则会降低这方面的影响。–注意事项：标签左对齐的方式容易让用户将标签和对应输入框进行联系，但视线移动距离可能变长。功能篇\4-表单\1-布局设计\1-简述2–右对齐：–右对齐的方式优势在于减少了标签和输入框的距离，减少了垂直的空间，弥补了左对齐布局的部分缺点，使得标签和输入框之间的联系更紧密。–但是左边参差不刘的空白和标签让用户很难快速检索表单要填写的内容，给用户的阅读造成部门障碍。–注意事项：标签右对齐的方式相对左对齐来说，可以减少近一半的视线移动点，相应的也减少了近一半的填写时间。功能篇\4-表单\1-布局设计\1-简述3功能篇\4-表单\2-设计要点1•1.表单的逻辑分组–表单的标签都存在一些关联关系，如果只对信息进行简单的罗列，会影响用户填写的逻辑性和连贯性，所以建议将标签进行归类，同时通过视觉元素进行区分，这样用户可以快速阅读表单所有标签，不需要过于的思考和理解。•2.填写引导–当表单信息较多的时候，除了分类之外，也可以进行分段式的填写，如第一步、第二步等，参见之前导航中的介绍。功能篇\4-表单\2-设计要点2•3.尽量简化表单–越少的表单项，往往会带来越高的用户完成率。因此在设计的时候请确认表单项是否有必要填写。•4.必选VS可选–除非所有选项都是必选荐，没有必要对表单项进行是否必填进行标识，否则应该区分必选项和可选项，如红色的*，或者是输入框的提示。•5.默认选项–对于某些数据，提供默认选项，同时又提供可选择的按钮，比方省份，可根据用户IP地址或组织结构判断，如果需要，用户也可以进行手动更改，这其实也是简化表单填写的一种方式。•6.文字–表单其实是网站和用户沟通的一个途径，使用用户容易理解的语言和尊重用户的语言，既可避免理解上的问题，也能够接近与用户的距离，增加用户对网站的信任感。功能篇\4-表单\2-设计要点3•7.提示与帮助–对于存在歧义或较难理解的选项，在输入框旁边用小字体显示说明文字或者通过底部灰色的提示文字帮助用户理解表单标签，提示该输入内容的格式等，避免错误。–需要注意的是，输入提示过多，或是设置色调、表达方式过于抢眼的，可能会暄宾夺主，必须适量和适宜。•8.反馈–用户提交表单等操作之后，网站需要给出明确的反馈信息，告知用户操作之后的结果，提示是否成功，当出错时，网站需要提示出错具体原因，并提供可操作的解决建议。同时在出错返回后，建议页面仍保存已民输入的正确的数据，避免用户重复输入，并将鼠标定位到错误位置，减少用户操作。功能篇\4-表单\2-设计要点4•9.灵活的输入框–填写表单的方式包括输入框，下拉列表框，单选按钮等。对于不同类型的表单项，需要选择合适的方式。–如姓名、EMAIL、地址等文字信息用文本框–性别、唯一信息等用单选框–生日、地区等选择项较多的，可以用下拉列表等方式•10.”有行动力”的按钮–表单设计最终的目的是提高注册率，除了表单本身的布局、分组等设计之外，按钮是否具有“行动力”，也是非常重要的原因。行动力，简单而言就是指是否带有“点击暗示”的效果。按钮设计要点将有专门章节说明，本章不进行详细阐述。•11.视觉美观–视觉美观的表单，能够使表单填写更加舒适，比如较大的字体和间距，不会让用户产生局促感。功能篇\4-表单\2-设计要点4•9.灵活的输入框–填写表单的方式包括输入框，下拉列表框，单选按钮等。对于不同类型的表单项，需要选择合适的方式。–如姓名、EMAIL、地址等文字信息用文本框–性别、唯一信息等用单选框–生日、地区等选择项较多的，可以用下拉列表等方式•10.”有行动力”的按钮–表单设计最终的目的是提高注册率，除了表单本身的布局、分组等设计之外，按钮是否具有“行动力”，也是非常重要的原因。行动力，简单而言就是指是否带有“点击暗示”的效果。按钮设计要点将有专门章节说明，本章不进行详细阐述。•11.视觉美观–视觉美观的表单，能够使表单填写更加舒适，比如较大的字体和间距，不会让用户产生局促感。功能篇\4-表单\3-番外-验证码•在表单章节，引申出一个表单常用的元素：验证码–验证码一般在注册、登陆、评论等的时候要求使用用户输入进行验证的内容–早期的网站并不存在验证码，但由于现在有一些恶意程序通过重复尝试获取他人密码批量注册、登陆、发布评论等，影响用户正常使用和网站运营，验证码因此而生。•验证码带来的困惑–带来用户操作的额外负担：大部分用户要登陆1-3次才能成功，其中70%原因是验证码出错。–验证难以辨认：随着有些恶意程序加入图片文字识别技术，因此有些网站会在验证码展示的时候加入背景干扰，但这同样也会增加用户的肉眼识别难度，还有一些相近的数字和文字也难以识别。–经常需要切换输入法：英文、数字的切换，会给一些用户造成困难。–验证码过难：一些提问性的验证码，问题过难，限制了用户群体。•参考经验：–有些网站在第一次用户登陆的时候取消了验证码，而是在用户密码输入错误的时候，才出现验证码信息。功能篇\4-表单\4-案例解析1功能篇\4-表单\4-案例解析2功能篇\4-表单\4-案例解析3123•视觉篇–1-界面布局–2-色彩搭配–3-分隔类型•功能篇–导航–条件选择–信息提示–表单–表格–图形–按钮目录功能篇\5-表格\总述\基本概念•对于一般的业务操作类系统来说，用的较多的是表单形式，而针对BI系统来说，表格与图形是使用量最大的两个元素。•BI系统的一种常见形式为报表，无论是分析报表，还是固定报表，不考虑生成数据和操作方式的不同，在界面上主要就是以表格+图形来进行展现。•表格由一行或多行单元格组成，用于显示数字和其他项以便快速引用和分析。表格中的项被组织为行和列。•表格中用来进行内容填充的就是以单元格形式，表格上较复杂的地方就是维度的展现。维度值维度名称维度值功能篇\5-表格\总述\国外报表与中国式报表•国外报表：–样式规整，没有格线、表头非常简单、没有斜线表头、没有分层分组，一张表提供的信息较为有限。–报表内很少有填表的需求。•中国式报表：–格式复杂、信息量大–格线多，大格套小格、斜线–分层分组：在报表中会进行分层或分组以体现更多的信息。–多数据源：一个报表的数据来自于多个不同的数据表或视图，甚至来自于异构数据库–分片：一个报表中格式分为多片，每片计算规则不一样。–跨行组运算：环比、同比，及一些特殊的运算。–填报：在表格中填写数据等。功能篇\5-表格\总述\IT系统中的常用报表元素1•IT系统中的报表和纸质的相比，需要增加一些元素，以方便用户阅读和比较–标题名：IT系统中有众多报表，除了目录之外，每个报表需要有明确的标题名，指示该报表的内容。–统计周期：统计日期要么可选，选完可视化，要么在标题或备注中说明，如“2013年一季度XXX报表”，这是因为系统中的报表并不像上市公司报表等，有相应的标准，看报表的人必须要能理解数据的统计周期。–条件选择：除了一些范围特定的报表，一般的报表会有时间和地区两个选择项。–记录提示与选择区：需要在报表下方增加：本页多少行、共几页、当面多少页等显示说明，在报表页面多的情况下，需要有翻页链或页选择框，可以让用户方便的去到报表的其它的页面。–指标单位：指标一定要明示单位。功能篇\5-表格\总述\IT系统中的常用报表元素2•另有一些可选的元素–选择：针对多维分析报表，可以在时间地域之外增加其它维度的选择项–图形：针对需要更为直观的看数据结果的报表，可以增加图形功能–说明：说明报表口径、数据来源、算法、关键字等–意见反馈：评论、咨询、意见反馈等–其它：导出功能、填报功能、通知触发（短信、邮件等）功能篇\5-表格\常见问题及建议解决方案\总述•表格在具体的开发过程中，容易出现以下问题：–数据范围不清晰•统计维度范围不清晰•统计维度值范围不清晰•数据来源不清晰•算法不清晰•计算时间点不清晰–报表格式不清•报表命名不清晰•表头格式不清晰•维度层级不清晰•报表内容分隔不清晰•报表区域划分不清晰•报表内容格式不规范–报表切换不灵活•报表展现行数切换不灵活•报表翻页切换不灵活•图表切换不灵活•钻取不灵活–部分功能缺失（在用户有要求的前提下）•数据导出功能缺失•数据加密功能缺失•排序功能缺失•阀值设置功能缺失•意见反馈或评论功能缺失•收藏功能缺失•更新时间点缺失功能篇\5-表格\常见问题及建议解决方案\数据范围不清晰1•数据范围不清晰主要有以下几种类型–统计维度范围不清晰：报表所展示的维度并不等于条件筛选的维度，做为系统自动生成的报表，需要将统计维度进行明确的说明。–统计维度值范围不清晰：比方说一个维度有4个值，可能在报表中，该表头命名为该维度名称，但是值是可以变更的，这个时候需要对维度值的范围加以明示，否则不同的人看了可能会产生不同的理解。–数据来源不清晰：同一个数据很可能来自多个途径，如房价涨幅，有国家统计局的，有社科院的，有中介的等等，在引用这些数据的时候，需要说明清楚数据来源。–算法不清晰：有些数据是采用源数据进行加工计算得出的，如果不是标准通用算法，需要加以说明。–计算时间点不清晰：在IT系统中，由于源数据很多是动态的，因此有可能相同的数据源，相同的统计口径和算法，在不同的时间点统计结果有可能不一样，所以在统计的时候需要注明统计时间点，以记录统计时间，方便日后进行数据回溯。1、没有说明统计时间点；2、统计维度范围不清晰：人口有分类型，这里没有说明，比方说常住、本市等，只有熟悉的人或是要经过问询才能知道统计口径；3、面积没有单位，也没有标明数据来源，因为面积会有很多不同的单位会发布不同的数据，如地质局和城乡建设部的统计口径就可能不一样。如果是自己算的，是什么算法，就需要明确。问题示例：功能篇\5-表格\常见问题及建议解决方案\数据范围不清晰2•统计维度范围不清晰建议解决方案：–统计维度范围不清晰：•在界面上将条件筛选所用到的维度列出，这样报表里没有，用户也清楚的知道涉及多少维度•在备注说明里说明清楚统计所涉及的维度•示例：报表没有，选择有。功能篇\5-表格\常见问题及建议解决方案\数据范围不清晰3•统计维度范围不清