经过了将近一年的后台产品经历，踩了很多坑，试了很多错，也学习到了很多东西，目前也形成了自己的一套规范。本文将其中的部分收获汇总成文，希望能够对大家有所帮助。

　　后台产品有一个很重要、常见的元素，就是表格。表格承担着详情入口、数据展示的功能，看似简单，其实里面的细节特别多。在以效率为最重要的需求的后台产品中，如何设计一个能够高效率地进行查看和编辑的表格，考验着每一个后台产品经理的基本功。通过本文的讲解，按照本文的规范来设计表格，基本上可以做出一个不会出错的表格。

　　表格主要承担着查看和编辑两个基础功能。如何能够让用户方便、高效、舒适地查看数据和编辑数据，需要设计很多的辅助功能。下面，我们就围绕着这两大功能，就具体的功能点来进行探讨。

　　原型预览：

　　原型下载：https://pan.baidu.com/s/1eTxGbHg

　　第一部分：查看

　　1、行

　　(1)默认每页行数

　　该行数太多时，会导致页面加载速度变慢;行数太少时，会导致用户需要不断翻页，浏览效率降低。默认每页行数需要根据用户的实际使用场景来确定，稳妥的做法是使用20或50。

　　(2)默认每屏行数

　　每一屏能显示的行数。该行数太多时，会导致行高值较小，单行的查看效果差;该行数太少时，会导致用户需要不断滚动页面，浏览效率降低。该行数和页面分辨率有关，需在考虑到主要用户的使用场景(笔记本还是台式、屏幕大小、主要分辨率)后进行确定。

　　(3)每页行数多于每屏行数时的处理方式

　　大多数情况下，每页行数是多于每屏行数的。在这样的场景下，用户使用的时候会发现这样一个问题：向下纵向滚动页面查看表格内容，滚动到页面中部或底部时，表头是无法看到的。用户在看到一个数据时，是不能够直观地知道这是哪项数据，从而需要向上滚动查看表头。尤其是面对列数较多的表格时，这样的场景会经常发生，页面不断地上下滚动，查看效率及其低下。

　　解决这个问题，通常有两种处理方式：

　　固定表头：表头在滚动到页面顶部时，始终固定在该位置，用户能够方便地看到表头和数据的对应关系。

　　表格的竖向滚动条：为表格添加竖向滚动条，通过拖动竖向滚动条查看表格内容。表头是不会被拖动影响的。

　　2、列

　　(1)列隐藏、排序

　　表格的列数较多时，在一屏内是无法展示全部列的，用户需要通过横向的滚动条来拖动查看不同的列。不同的用户在不同的场景下，关注的列是不尽相同的。为了满足这一需求，我们需要允许用户对列的自定义：包括哪些列展示出来，哪些列排在前面。用户可以把自己不关心的列隐藏，把关心的列放到最左边，从而能够在一进入页面时就能看到自己最关心的内容。

　　(2)固定列

　　至少有一列是不允许用户对其进行隐藏和排序的。该列通常是表格数据的唯一区别项，如订单列表的订单号等。

　　(3)列宽

　　列宽需要确定一个合理的默认值，从而使表格内容有好的展示效果。不能太窄，大量数据会显示不完整;不能太宽，大量留白会让浏览效率降低。

　　列宽值的确定一般遵从以下原则：

　　表头不能换行，列宽应至少大于表头。

　　列内容的长度固定时，如手机号(11位数字)等，列宽应大于该固定宽度。

　　列内容的长度不固定时，应考虑大多数情况下的长度情况。如个性签名，我们会允许10~50个字符，但经过数据分析发现，大多数个性签名的长度是在20以内的，我们可以设定列宽为20，从而保证大多数情况的完整显示。

　　在较少情况下，我们设定的默认列宽没能满足数据的完整显示，而该数据的完整显示对于用户是比较重要的。针对这一情况，我们提供自定义列宽的功能，允许用户对列宽进行调整，从而达到自己想要的展示效果。

　　(4)数据截断

　　在数据长度大于列宽度时，我们需要对数据内容进行截断处理。截断以后，末尾加……鼠标移入时在附近显示浮层显示完整内容。

　　浮层的位置：数据在纵向上的结合紧密时，浮层显示在左右;数据在横向上结合紧密时，浮层显示在上下。这样能够避免浮层对需要结合来看的数据造成遮挡。

　　3、分页

　　分页的功能较为简单，一般满足这些功能就可以了：上一页、下一页、首页、末页、快速跳转到某一页、每页数量的调整(20,50，100,200)

　　4、排序

　　(1)初始排序