07月7日, 2020 169次
其它优秀文章推荐：
我将自己这两年使用，设计数据表的经验以及和开发工程师交流的感受结合起来，从数据表的功能和样式出发，给出20条设计指南。
数据表是展示，查询，处理数据的良好解决方案，经过精心设计的数据表展示信息更加清晰，很好地帮助用户洞察并采取行动。
文章从数据表的功能和样式出发，给出20条设计指南。功能的介绍中有基础也有进阶，能满足很多场景下的业务，且所介绍的功能从代码的角度均有成熟的解决方案，可直接落地。
一、功能
1.搜索，筛选，排序
这三个功能是任何数据表都应最基本功能，它们的存在不仅仅是为了可用性——有着了解趋势，比较数据，查找特定值的作用。搜索相较于筛选更为精确，筛选可看作是粗略的搜索。
排序与筛选：直接跟在某个字段的标题之后，点击更改排序方式或筛选标准
栏搜索：搜索功能与列表内容融合，可根据每个栏的字段单独搜索
搜索模块：将搜索模块放在列表上方，可选择几个重要的字段作为独立的搜索
2.页码选项与数据数量
页码选项：在页码组件中会显示一系列的数字，点击能够获取另一组数据。这里可以自定义页码组件中显示的页码数量。（无限滚动通常会和页码选择一起被讨论，相比之下，页码对数据的会起到模糊的定位作用）
行数量：用户可以自定义每页展示的多少条数据，若没有这个选项系统会默认设置一个数值
数据总量：没有总量的数据往往让人抓狂，了解不到总体情况，翻页何时是个头
三者通常一起使用，共同控制单页数据展示量，可放置于数据表底部或顶部
3.批量操作
数据表的用户往往需要对多条数据进行统一操作，批量操作允许用户使用复选框单选或多选对各条数据进行相同的一个操作，节约操作时间
批量操作的按钮可以采用非实时显示的方式，在选中复选框后展示相关操作按钮，减少展示给用户的信息量，优化页面内容，减轻用户的使用负担
4.悬停动作
当鼠标悬停在一行上时，显示常见操作。这样可以减少视觉混乱，但用户首次使用系统时会有找不到操作按钮的概率。
5.自定义高度内垂直滚动
可自定义设置高度保持数据表仅在该区域内通过滚动鼠标显示更多信息，在浏览数据表时可同时兼顾上下文的其他信息。
6.滚动时文本固定
1）头部字段固定
将数据表头部的字段名称在滚动时保持固定，提高查询数据的效率，特别是字段多且相近字段类别相同时，若没有固定的字段在顶部，容易给用户带来困扰，需要返回表单的顶部再次确认。
2）首栏固定
水平滑动数据表时保持首栏固定，起到引导效果，清晰地展示后几栏与第一栏之间信息的归属关系，第一栏在滑动时可以添加投影效果。
7.可扩展行（行细节）
业务场景：页面的横向空间有限，每条记录需要更多的字段或内容在当前页展示信息，若用点击详情进入下一页的操作，鼠标的定位，位移动作量过大，且页面的不断跳转请求会影响到系统速度，影响体验
解决方法：在列表左侧放置展开按钮，当需要查看信息时可点击按钮，详情会在当前页展示。
8.嵌套子表格
每行数据之下有隶属于该目录的另一个数据表单。
9.复合标题
表单头部字段过多会给用户造成一定的视觉压力，不利于信息的筛选，这种情况下可以采用复合标题的形式将各种字段再进行组合分类。
10.行分组
将每行的数据根据业务需要将其分组，下图中不同国家的订单被分在了各自的组中，但在数据量较大的情况下不大实用，浏览数据比较困难。
11.栏内编辑
在数据表当前页直接对部分数据进行编辑保存，根据修改内容可采用弹窗或直接编辑的形式。
12.自定义表格
1）自定义列内容
用户拥有高度自由，可选择数据表中显示哪些字段，以及将字段位置排序，采用弹出Modal框进一步操作的交互形式。
2）列宽度可调
允许扩展和收缩任何列的宽度，以防止较长的数据被遮盖。
3）显示密度
允许用户根据 数据内容及自身的阅读环境与能力（如设备屏幕大小，个人视力等）调整数据展示的密度。
13.行回调
根据业务需要对单行的相同类型内容给出不同的样式，如下图最后一列，根据付款总数制定规则，高于某个数值时显示字体显示红色，加粗。
14.页脚回调
该功能可对列表中的数据执行一系列的功能操作，如下图最后一列的底部，将支付总额在当前页进行了汇总。
二、样式
1.数据列表的常见样式
1）斑马纹
每行的背景交替使用不同颜色，可以有效帮助用户在扫描较长的数据，数据前后校对时保持其位置，在数据量较大时可以使用，这里的背景色一定要浅，并且避免与鼠标悬停时的样式相似。
使用大屏幕时，这是我最喜欢的样式，因为相比于下面几种样式浏览数据更加省力。
2）分割线
数据列表中仅显示水平线以示区分，大量留白有效减少视觉噪音，并且依然可以帮助用户定位，数据量较多较少时都可使用，较为常见。
3）单元格
水平线与垂直线将数据包围，视觉干扰元素较多，建议在数据特别密集时使用（分割线的颜色要浅于文字）。
4）纯背景
移除所有的分割线或斑马纹，用留白，距离来区分数据，在垂直方向会占用更多的空间，解析较多数据时用户可能会失去自己的位置，在数据量较少时可以使用。
2.多颜色的使用
不建议在数据表中用多种颜色展示文本，那会让画面杂乱，但涉及到状态时多颜色的使用可以有效区分，增加页面的活跃度。
3.减少纯黑颜色的使用
自然界中不存在编号#000000的黑色，长期观看纯黑颜色会给用户带来视觉压力。
4.不要使用居中对齐
“F”型的视觉阅读习惯让左对齐成为主要对齐方式，也有人认为数字右对齐可以方便用户进行计算，对比，但居中对齐是不可取的。
5.避免不必要的视觉效果
数据表是功能为主导，3D效果，阴影等酷炫效果不利于阅读大量数字文本
6.为小屏幕考虑
小屏幕上缩小的列，隐藏的文本，错乱的布局，无休止的滚动都会破坏用户体验，即使我们不能同时给出各种尺寸下的最佳解决方案，也要让小屏幕上的样式过的去，在用测试数据时，把理论上的最多最长数据的情况考虑进去
原文链接： https://mp.weixin.qq.com/s/6K-JiUHssB9pKf0OnCLGog
