表格设计和注意事项
B端类产品为了提高效率，大多数场景都采用表格。所以深入了解表格的设计，帮助我们更好的做设计。
引言
哈喽，大家好，好久不见。在我们设计中，表格是一个经常迈不过去的一道坎，很多时候被表格的设计卡住，尤其是B端类的产品设计。为什么呢？B端类产品为了提高效率，大多数场景都采用表格，进入B端类产品，你会发现该产品大部分页面都是表格。所以深入了解表格的设计，帮助我们更好的做设计。本人也一直从事B端设计，也被表格深深的伤害过。那下面就说是表格的一些常见内容和注意事项。
何时采用表格呢？
表格，是一种常见的信息组织整理手段，常用于信息收集（展示）、数据分析、归纳整理、等活动中，在互联网产品应用中，非常适合于：
1. 需要组织和展示大量数据信息
表格结构简单，分隔归纳明确，特别适合组织和展示大量的信息内容，且易于用户浏览和获取信息。
2. 当数据信息需要进行多种复杂操作时
需要对信息进行排序、搜索、筛选、分页、自定义选项等操作。
3. 信息上下间的对比
表格的归纳与分类，使信息之间易于对比，便于用户快速查询其中的差异与变化、关联和区别。
1、表格的样式
表格的样式主要分为：通栏型、斑马型、边框型
通栏型表格，行与行之间只用横线区隔。隐藏了纵向的线，更加强调行的特性，使横向信息更加连续通畅，不强调纵向上下信息之间的对比；
斑马型表格，采用各行换色的方式。可以更容易区分出不同行的数据，避免用户可能看串行的对不齐数据的情况。
边框型表格，采用横、纵线区隔。显示纵向的线，使上下行之间的信息增加了对比性。
2、表格的选择
当需要进行一些复杂操作时，可能会使用到选择表格。选择表格又分为单选、复选、自定义选择。单选需要注意，去掉表头的选择框。复选，在表头也有多选框，方便用户全选
3、筛选与排序
表格的排序我们可能会经常用到，但是筛选通常就用的比较少。
排序，表格都有一个默认排序方式，排序分为升序和降序，主要用在有数据、时间、数量等列，方便用户按照一定的顺序查找。在设计排序的时候要注意排序选择和未选择的区分，选择后要做明显的展示，同时也要注意点击区域的设计
筛选，筛选常用在快速选择各种类型、状态的表格。表头中带有筛选，有利于节约页面空间，就不用在页面中设置额外的筛选项。除了普通的筛选，还有自定义筛选（搜索），可以根据输入内容选择相应内容
4、表格的展开
表格的展开主要是展开行和树形数据展示。
展开行，当行内容过多并且不想显示横向滚动条时，可以使用展开行功能
树形数据展示，当数据需要展示从属关系、递进关系等时，可以采用树形数据展示方式。通常业务数据量通常较大，默认展开多个主表格对服务器的性能损耗较大。建议每次展开一条主 表格，其他主表格 呈收起状态。
5、固定方式
表格的固定方式分为：表头固定、左侧固定、右侧固定。三种固定方式可以根据需求组合
表头固定，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息。固定表头，让用户知道当前单元格内信息的属性，不至于在众多数据中迷失。
左侧固定，呈现大型数据集时，水平滚动是不可避免的。将标识符数据放在第一列，可以对列进行锁定，以便用户将数据与多个锚定标识符进行比较。
右侧固定，常用在水平滚动且有操作的情况，将操作栏固定在右侧，方便用户针对性的对某行数据进行操作
6、表格的编辑
表格的编辑通常有两种，一种是在弹窗或者新页面进行内容编辑。常用在数据较多、内容较复杂的情况。
另外一种是当前表格编辑，表格编辑又分：带单元格编辑功能的表格、带行编辑功能的表格。常用在表格数据较少，没有更多详情，表格已经展示全部内容。当前表格编辑，比较方便用户操作，让用户能直观的查看
编辑单元格
编辑行
7、拖拽与伸缩
拖拽，就是拖动表格进行排序。很多时候设计采用上移、下移的操作手法，但当需要自由排序，内容较多的时候，拖拽排序更快更方便。
伸缩，当有部分数据被省略的情况，为了方便用户做对比，可以允许调整列的宽度来查看更加完整的缩略数据。
8、表格的操作
操作又分为：显现型操作和隐藏型操作
显现型，就是把操作按钮直接显示出来，。当表格纵列数据较少，操作频率大，可以直接显示操作。如果表格有其他链接，操作较少，并且为了表格的整洁，可以采用hover整行，出现相应的操作和链接色。
在显现操作的时候，需要注意操作项不能过多，这样会占据很大的操作空间，不利于表格的数据展示。通常采用的方法是，最多展示3个操作项，大于3个后就采用收起的方式
hover展开
隐藏型操作，一方面当列表中纵列数据较多时，页面缺少足够的空间展现所有的操作按钮，此时操作按钮可进行隐现展示，使用「更多」或特定 icon 来标识有更多操作，为方便用户操作可在鼠标 hover 时展现所有操作按钮；
另一方面就操作使用频率和危险性而言，低频率使用场景下的操作按钮或危险性操作按钮可进行隐藏展示。用户在点击危险按钮时可能会带来破坏性操作，此时对按钮进行隐藏可增加按钮的操作难度从而减少用户的误触率。
9、分页设计
当数据量过多时，使用分页分解数据，所以分页也是和表格经常联系在一起的，需要考虑分页的设计。分页分为基础型、迷你型、完整型。
基础型，当数据较少，通常在7页以内，就只有最基础的展示，上一页、分页数量、下一页。
迷你型，当页面空间不足或者降低分页的视觉影响时，可以采用迷你型，主要为当前/总页数，可以直接跳转到某页面。
完整型，当表格数据较多，为了满足更多的用户需求，可以根据需求选择分页类型。比较完整的分页还包括如下功能：显示总数、调整每页显示条数、直接跳转到某页。完整型的虽然满足各种功能需求，但是所占空间较大，所以我们要根据自己的需求合理拆分使用。
分页注意事项
在表格中使用分页，除了选择正确合理的分页外，我们还需要注意当数据过多的时候，是否要固定分页。这个需要根据需求来决定，如果用户翻页很频繁，表格数据又特别长，就可以考虑分页固定在底部，免得每次用户翻页都要跑到表格的最底部才能分页，还可以在表头也放迷你型分页。但通常在设计表格的时候就没有固定，也很少使用表头分页，所以根据需求来定。
另外就是当数量过少时，只有1页或者无数据的时候，我们是不需要分页的，这个时候最好去掉分页，展示在这里没有什么意义了。但很多时候我们设计没有做区分，开发也就不管了。
注意点
10、表格的高度（开发如何设置的）
表格的高度设定，也是困扰设计的一个点，高度太小，虽然展示数量更多，但是过于密集，不利于阅读。高度太大，又牺牲了页面的利用率，也不一定美观。所以，合理的表单高度，是需要设计师好好琢磨的。
在文字排版中，文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。表格的高度就根据文字行高、padding值不同而不同。所以，高度是不定死的，可以自己去尝试不同高度，找到最适合自己产品表格高度。
详情可参考：表格行高如何设定？来看腾讯设计师的总结！
11、加载和无数据
加载和无数据状态，也是我们设计经常忘记的一个点。在页面进行操作、数据刷新时，我们需要把加载状态展示出来，让用户有个感知，如果没有加载状态，用户以为网页卡住了，就会不断的去进行操作。
无数据状态，就是当表格为空的时候怎么展示，通常有2种方法：展示表头，表格内容中告知无数据；表头也不展示，直接展示无数据
我比较倾向于展示表头，然后告知无数据，这样用户才知道你这个表格有哪些内容。但要注意一个点，就是前面提到的，表格为空的时候不要展示分页
12、空白数据的处理
表格中有部分空白数据也是十分常见的，那在设计的时候，设计师或者产品经理有时候也会忽略这个点，最后就把这个重任留给程序猿了，就会成这种情况，为空就啥都不展示。通常的做法是采用占位符标识这里为空。
13、对齐方式
表格的对齐方式也是我们比较纠结的。表格内的信息通过对齐，会让页面更加一致、整洁，方便用户快速定位和查找。分为左对齐、右对齐、居中对齐
左对齐，比较符合现代人的阅读方式习惯（从左到右），文本类通常就采用左对齐。
右对齐，常见于财务等数据信息展示的表格，更加方便数字大小的直观对比。
居中对齐，表格中内容固定时，可采用居中对齐，更好的信息呈现及表格空间的节省。常用于标签、序号、按钮。
注意的是，表头与信息内容对齐方式要一致，从而达到简化、降低视觉噪音。
14、缩减表头与解释说明
精简文字是我们设计常常需要考虑的事，通常我们会拿到一些表格设计的需求，但是表头的文字比较长，内容却很短，这样页面展示非常尴尬，我们尽量精简表头，让表格更简洁。
再就是对于专业术语或用户不常见的名词应给予一定的帮助说明，常用的办法就是文字旁边出现一个信息提示符号，hover展示内容。
15、折行或者收起？
我们在设计的时候要考虑到表格的文字数量，表头的文字尽量精简，单元格中也同样如此。当表格的单元格中文字过多时，我们需要处理好，常见的方法就是：折行展示、部分收起。一般的说明或者功能描述，可以采用部分收起的方式，若比较重要、常用的内容，还是建议直接折行展示，这样会减少用户的操作。
16、及时反馈
及时反馈，我们也容易忽略。在表格数量过多时，我们移动到哪一列，就应该标记我当前的位置，适当的变换表格底色区分。若需要记录当前查看到哪一行，也可以标记查看过的行。
17、表格的屏幕适配
其实在做表格的时候，通常采用的是等份均分。但很多时候，每一列的内容文字差别比较大，若采用等分的方式，则文字过多的就展示不全，文字少的会空很多。所以在设计表格的时候要设置单元格的最小宽度，若不设置，在小屏幕就会出现错乱，文字换行，惨不忍睹。在大屏幕通常是不会出现的，所以我们在做设计走查的时候也要关注不同屏幕的展示效果。
参考文献：
