好的数据表格允许用户去扫描、剖析、比拟、挑选、分类以及调整信息从而剖析出成绩和得出处理方案。此篇文章次要是展现了一些设计框架、交互架构和技术手腕去协助你设计出更好的数据表格。

1. 固定表头

当用户滚动表格时，固定表头可以方便用户疾速获取以后数据信息。

 

2. 程度滚动

关于一些比拟大的表格来说，提供程度滚动十分有意义。在首列放置一些标识数据，并锁定首列可以方便用户去比拟数据。

 

3. 可调整列宽度

用户可以经过拖拽调整列宽，方便其看到格子内的完好数据。

 

4. 行款式

可以经过参加斑马线、联系线来进步数据的易读性。用户在面对少量数据的时分，能够会呈现视觉丧失。而联系线可以方便用户定位信息。在阅读长的横条数据表时，斑马线款式可以协助用户更好地集中留意力。但是在只要大批数据的报表上采取斑马线设计，会呈现可用性成绩，由于用户能够会想为啥有些行是高亮显示的。

 

5. 可调整数据密度

行距更低的表格可以协助用户无需滚动即可检查更少数据。但是这能够会招致用户在扫描数据的时分，看错一些数据。这就是为何很多好的表格采用了相似的选项按钮设计，可以让用户本人去选择数据的密度。

 

6. 提供可视化的图表

可视化的图表可以让用户对下方的数据报表有一个初步的印象。同时，用户在看数据报表前，就能从图表那发现数据的成绩和得出一些初步的结论。

 

7. 分页

经过分页功用，用户可以调整单页显示的数据量。下方的例子，就是阐明用户可以自定义报表每页显示的行数。这种设计经常会被另一种设计所取代，那就是有限翻页设计。（译者Jimmy：就是相似 Pinterest 的自动刷新机制）当用户滚动鼠标的时分，就会自动翻页。有限翻页设计关于一些「探究型」的网页来说，特别有用，但是在一些需求表达优先级的场景就不太合适。（Jimmy：相似 Pinterest 就是一个探究型的场景，内容不分优先级。但是相似清单类的使用，就不合适了，由于清单是有先后顺序且有优先级的。）



8. 鼠标悬停操作

假如需求参加更多操作，可以采用悬停操作设计。但是，这会招致可见性成绩，由于用户需求将鼠标挪动到对应的地位，才晓得有更多功用。


9. 行内编辑

用户可以很方便地经过行内编辑功用编辑数据，而不需求跳转到独自的概况页面中停止编辑。


10. 可展开的行设计

提供可展开选项可以方便用户在不丧失内容下，检查一些附加信息。


 

11. 疾速检查

除了运用可展开的行的设计以外，还可以运用侧边栏弹出更多信息的设计。



 

12. 模态弹窗

模态弹窗允许用户停留在表单视图，同时又能让用户的留意力集中在更多的信息与操作上

 

13. 多模态弹窗

多模态弹窗给初级用户提供了更多的功用操作，同时还可以更方便地去比拟数据的不同之处。


14. 行细节

单击行链接可以将表单转换成另一种形式——左侧显示列表数据，右侧显示概况数据。这样用户可以很方便地去剖析一些复杂数据，还可以同时比拟多组数据，且无需停止退回或许一些复杂的操作。


 

15. 列支持排序

列支持按字母顺序和数字大小停止排序。



 

16. 支持根本的过滤

根本过滤功用允许用户疾速过滤表单中的数据。


 

17. 挑选列功用

允许用户为特定的列去做挑选操作。



18. 可搜索列

经过快捷的搜索操作，允许用户在每个列表中搜索特定的值。



19. 添加列

允许用户添加列。这种方式可以保证在无限的空间下承载必要数据的同时，还能让用户依照所需添加额定的列。


20. 可自定义列的地位

允许用户依照本人的需求，陈列列的地位。此功用还要记载用户的操作，保证用户下次运用时还是TA上次设置的那样。


 

原文地址：uxdesign

作者：Stefano Malachi

译者：Jimmy Wang 非科班设计（大众号）