Web页面中的表格设计，远没那么简单

对数据进行分类显示，做成下拉选择切换形式。将重点数据放置在默认显示页面，次要数据放置在下拉选择的类别中。页面简洁，功能完备且有序。

(4)字段数量案例4

相较于案例3，同样对数据进行分类显示，并制成table切换形式。数据的类型较少，且不存在主次关系，仅进行数据罗列展示。

(5)字段设计建议

1. 对于字段数据没有明确分类，或者有些数据不太重要，可以采用横向滚动条，进而固定左侧属性列，便于数据对比;
2. 对于数据有类别区分，可以采用分类展示，切换button放在顶部或列表中。

3、字段

字段，为表头中的行标签中的字段标识。字数多少以及传达的意义是否明确，对于表格功能的表现至关重要。

(1)字段案例1

采用简单英文单词、单词缩写、词组子母首拼等来传达字段含义。同时，每个字段后面紧跟释义标识。鼠标悬停，即可出现该字段的详细解释，顺畅的满足了新手用户、普通用户以及专家用户的需求。

(2)字段案例2

字段用意义明确的单词、词组来表示。字段数量较少时，用简洁的标识字段数据，界面简洁、意义明确。

(3)字段设计建议

1. 字段在五个以下，且字段的类型较为常见，或能够用简短的文字描述清楚，可采用单词或词组来作为字段;
2. 若字段超过五个，或不常见字段类型，或者简短文字不能阐述清楚，可以考虑使用缩写或者特殊单词做字段，另附解释文字。

4、排序

对表格中的数据进行排序，是让纯粹以展示为目的的表格增添了活力，用户可以改变数据的排序，丰富了数据展示形式。

(1)排序案例1

仅用单向箭头指示出当前的数据表格排序依据，并没有指明排序的形式。在字段较多、且存在帮助标识的情况下，仅仅指示出排序的依据，是比较合适的设计，毕竟排序的依据要比形式重要的多。

(2)排序案例2

上下箭头指示排序，一般上下空心箭头默认，上箭头为升序，下箭头为降序，也有通过明确说明来提示排序的方式。

(3)排序设计建议

1. 字段在五个以下，排序可以采用明确的排序类型指向性明确的ICON;
2. 字段数量大于等于五个时，只显示排序图标，而不显示类型。

三、正文

1、分割线

(1)分割线案例1

表格采用了同样灰度与透明度的横纵分割线，斑马线以及悬停高亮底色能够很好的引导用户的视线，避免在阅读时出现错行、迷失的情况。同时没有强调单个数据，或者数据之间的关系，仅做纯粹的数据展示，页面客观，避免各种错误的引导。

(2)分割线案例2

采用独立数据，弱化纵向分割线，采用悬浮高亮显示，展示一条数据的完整性。

(3)分割线案例3

采用横线构架出行的视觉，数据信息均匀分布。同时，用纵向分隔线对数据进行分类，表达出数据之间的类别关系，具有明确的数据类别指向。

(4)分割线设计建议

1. 对于数据之间的关系紧密且有对比关系的，可以采用横向与纵向分割线;
2. 对于较有独立性的数据可强调横向分割线，弱化纵向分割线;
3. 对于每条数据中的字段有分类的表格，可以在强调横向分割线的同时，弱化同类数据的纵向分割线，而强调数据类型之间的纵向分割线。

2、勾选框

在表格中，勾选框主要用于选择条目并进行批量操作。

(1)勾选框案例1

方案采用全选框与下拉选择来实现全选的范围。直接点击全选框，默认全选本页的全部条目。点击下拉箭头，显示不同的全选范围类型，可点击选择。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!