Web页面中的表格设计，远没那么简单
|
数据右对齐，便于数据的对比;文字左对齐，便于用户阅读。数据的单位及小数点后位数，保持一致。
(2)对齐案例2 将横向的行内信息再次扩充就成了如同淘宝商品页一样的，行区分弱化的表格形式，既满足了丰富信息的呈现，也能很快速的进行与行之间的如同价格等关键信息的对比。
(3)对齐案例3 对于数据的小数点后面的位数不同的场景，采用以个位数字为基准，居中对齐，便于对比。
(4)对齐设计建议 数据右对齐，文字左对齐，尽量保证数据的小数点后单位一致;若不能，则以个位数为基准，居中对齐。 4、操作项操作项是用户对数据的操作处理，不同的数据类型，其操作项的类型、数量有较大差异，同时，还牵涉到数据批量操作与单项操作的频率问题。操作项一般存在于条目最后，以及表头位置，分别对应单条操作与批量操作的场景。 (1)操作项案例1 共两个操作项，且放置在条目最后。因为编辑、删除以及设置ICON的含义明确，且广为人知，故仅用纯ICON来表示，简洁醒目。
(2)操作项案例2 操作项在条目后面，多个操作动作，放置在后面，折叠起来。在操作时，点击下拉出现具体操作项。
(3)操作项案例3 操作项为ICON+文字，共两个，放置在条目最后。对于图形意义不太明确或者图形的含义有较大变化，采用图形+文字的形式，传达意义更加明确清楚。
(4)操作项案例4 操作项为纯文字，存在表格顶部的表头，勾选所选条目以后点击操作按钮可用。文字按钮，传达的意义更加明确，辨识性强。
(5)操作项案例5 两个操作项为按钮形式，且放置在条目最后，提高了醒目性，引导用户点击操作。
(6)操作项设计建议
5、空单元格作为表格中的特殊状态，空单元格主要存在两种情况，一是数据不存在，二是数据为零。 (1)空单元格案例1 对于不存在的数据，单元格不能空置，需要用短横线代替，表示该项数据不存在，给用户明确指示。
(2)空单元格案例2 对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。
(3)空单元格设计建议 在任何情况下，单元格都不应该空置出现，避免用户的困惑。针对不存在的数据可以用其他占位符，告知用户该单元格不存在数据;对于数据为零的单元格，与上下数据单位、小数点相同的 0 来表示。 6、行高在表格设计中，行高是非常重要的参数，行高间距直接影响着阅读的体验，同时还影响着一个页面中数据的显示量。 (1)行高案例1 该案例中，数据表格的内容为单行显示，行高较小。数据显示紧凑、有序，同时，便于跨行之间的数据对比。
(2)行高案例2 该案例中，数据表格中的内容存在多行显示，行区分弱化的表格形式，既满足了丰富信息的呈现，也能很快速的进行行与行之间的关键信息对比。
(3)行高设计建议 对于单行显示数据内容的表格，建议行高约为字体高度的2. 5 倍到 3 倍;对于多行显示数据的表格，建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。 四、底栏底栏紧跟在表格正文之后，主要展示正文中的数据量以及单页数据条目，同时，兼具一些导航的功能，指示当前所在页面以及跳转到指定页面。 1、分页(1)分页案例1 （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
