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

2)勾选框案例2

与案例 1 相同，指示全选的范围有所不同，案例 1 是以页面为单位进行选择，案例 2 是以数据类型进行选择，同时包含了筛选与全选的功能。

(3)勾选框案例3

勾选放置在条目后面，便于用户在查看完一条数据后，决定是否勾选。

(4)勾选框设计建议

1. 当数据超过一页时，对全选操作提供全选范围;
2. 当数据具有类型时，可以考虑对数据的不同类型进行全选;
3. 对于逐条勾选的数据，若需要查阅数据后决定是否勾选，勾选框可以放在条目后面;当不需要查阅数据就能确认是否勾选，勾选框应该放在条目前面。

3、对齐

在表格设计，对齐有两方面的目的，一是便于数据对比;二是便于用户阅读，其分别对应了数据与文字两种类型。

(1)对齐案例1

数据右对齐，便于数据的对比;文字左对齐，便于用户阅读。数据的单位及小数点后位数，保持一致。

(2)对齐案例2

将横向的行内信息再次扩充就成了如同淘宝商品页一样的，行区分弱化的表格形式，既满足了丰富信息的呈现，也能很快速的进行与行之间的如同价格等关键信息的对比。

(3)对齐案例3

对于数据的小数点后面的位数不同的场景，采用以个位数字为基准，居中对齐，便于对比。

(4)对齐设计建议

数据右对齐，文字左对齐，尽量保证数据的小数点后单位一致;若不能，则以个位数为基准，居中对齐。

4、操作项

操作项是用户对数据的操作处理，不同的数据类型，其操作项的类型、数量有较大差异，同时，还牵涉到数据批量操作与单项操作的频率问题。操作项一般存在于条目最后，以及表头位置，分别对应单条操作与批量操作的场景。

(1)操作项案例1

共两个操作项，且放置在条目最后。因为编辑、删除以及设置ICON的含义明确，且广为人知，故仅用纯ICON来表示，简洁醒目。

(2)操作项案例2

操作项在条目后面，多个操作动作，放置在后面，折叠起来。在操作时，点击下拉出现具体操作项。

(3)操作项案例3

操作项为ICON+文字，共两个，放置在条目最后。对于图形意义不太明确或者图形的含义有较大变化，采用图形+文字的形式，传达意义更加明确清楚。

(4)操作项案例4

操作项为纯文字，存在表格顶部的表头，勾选所选条目以后点击操作按钮可用。文字按钮，传达的意义更加明确，辨识性强。

(5)操作项案例5

两个操作项为按钮形式，且放置在条目最后，提高了醒目性，引导用户点击操作。

(6)操作项设计建议

1. 对于单条数据操作频繁的场景，操作项不操作三个时，操作项跟在条目后面，常见操作仅用ICON，不常见操作用ICON+文字，当超过三个时，建议将操作折叠收起。
2. 对于数据批量操作频繁的场景，建议将操作放到表格顶部，与勾选操作配合使用。

5、空单元格

作为表格中的特殊状态，空单元格主要存在两种情况，一是数据不存在，二是数据为零。

(1)空单元格案例1

对于不存在的数据，单元格不能空置，需要用短横线代替，表示该项数据不存在，给用户明确指示。

(2)空单元格案例2

对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。

(3)空单元格设计建议

在任何情况下，单元格都不应该空置出现，避免用户的困惑。针对不存在的数据可以用其他占位符，告知用户该单元格不存在数据;对于数据为零的单元格，与上下数据单位、小数点相同的 0 来表示。

6、行高

在表格设计中，行高是非常重要的参数，行高间距直接影响着阅读的体验，同时还影响着一个页面中数据的显示量。

(1)行高案例1

该案例中，数据表格的内容为单行显示，行高较小。数据显示紧凑、有序，同时，便于跨行之间的数据对比。

(2)行高案例2

该案例中，数据表格中的内容存在多行显示，行区分弱化的表格形式，既满足了丰富信息的呈现，也能很快速的进行行与行之间的关键信息对比。

(3)行高设计建议

对于单行显示数据内容的表格，建议行高约为字体高度的2. 5 倍到 3 倍;对于多行显示数据的表格，建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。

四、底栏

底栏紧跟在表格正文之后，主要展示正文中的数据量以及单页数据条目，同时，兼具一些导航的功能，指示当前所在页面以及跳转到指定页面。

1、分页

(1)分页案例1

案例采用了整体页码平铺的方式，分别展示出前、中、后点的若干页码，便于用户顺序查看。案例中的数据不具有特殊性，用户很少会特定的查看某一页的数据，因此没有定点跳转的功能。

(2)分页案例2

分页不仅仅要指出当前数据所在整体数据的位置，同时还要指出数据量的多少，给用户已明确的指示。

(3)分页设计建议

分页的设计是根据不同的场景进行选择最优的设计方案。在不需要定点跳转的场景，建议采用案例 1 或者案例 2 中的第两种设计，删除多于的功能，使页面简洁、清爽。在需要定点跳转的场景，采用案例 2 中的第一种和第三种设计，能够节约用户的大量时间，且设计相对简单，用户很容易就明白设计意图。

2、单页条目显示

(1)单页条目显示案例1

一般情况下，单页条目显示与分页是一体的，分别位于底栏的左右两侧。案例一的单页条目显示仅仅作为单页条目数量的显示，而不具有设置功能，同时在表格顶部也做相应的展示。

(2)单页条目显示案例2

案例不仅展示了当前页面显示条目的数量，同时给出相应的显示数量自定义的设置功能。可增加单页条目的显示数量，便于更多数据放在一起对比分析。

(3)单页条目显示设计建议

对于单页条目显示的设计，建议采用页面条目显示数量自定义的设计方式，其设计可以丰富数据的对比范围，在特定情况下会方便用户的操作。

五、写在结尾

表格的设计远远没有想象的那么简单，除了纯粹的数据展示，现在的表格越来越兼顾到一些导航的功能在里面，不仅仅纵向展示数据，在横向方面也做了相应的扩展。

言尽于此，表格还有一些其他的设计点尚未谈及，如子母表、数据状态、列宽、数据列表编辑等，以后有机会，再完善表格设计的剩余方面。

作者：弘毅道，微信公众号：UIUX设计工作坊(UIUX-HUANG)， 希望与同行者多多交流。

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