如何改版枯燥的表格页面，总结了几个要点
本周的改版分享，主要针对表格页面完成。作为B端最重要的页面（没有之一），但依旧有很多同学设计它的时候找不到要点，总认为表格页没东西能设计，导致最后输出的作品乏善可陈。
所以这次再选了两个同学输出的表格页面案例，来讲解下如何有效的完善它的界面和视觉样式。如果对表格的理解还不够全面，可以看我们之前输出的表格相关分享：
本文修改的基本思路如下：
字段整合优化，包括信息整合、数字字段的间隔；
行列尺寸平衡，对行的高度、列的宽度进行调整，以此达到数据字段的视觉平衡；
信息强弱对比，对需要强化的信息进行视觉强化，对可以弱化的信息进行弱化；
视觉细节修饰，在视觉上加入一些更直观、有益于浏览的元素；
缺失功能补全，这里指的不是业务功能，而是表格本来应有的功能，例如：批量操作
完成全部设计；
老规矩，先来看一下案例。
除了整个页面完成度上的问题之外，单看这个表格，最明显的一个问题就是所有字段全部一个字重、大部分字段使用同一个颜色，这就导致了字段之间缺乏对比，尽管我们常见到字段权重无法区分高低的情况，但具体问题具体分析，在这个案例中依然可以判断一些字段是需要提权的，例如在这个表格中的「客户名称」，因为此表格的本质就是不同公司 (客户) 的信息列表，所以客户名称是对行进行区分的最重要的字段。
此外操作按钮又大又黑，显得过于笨重了；最后还有一点，带多选器的表格，基本需要进行批量操作，而这个表格缺失了这一部分功能。
那么按照之前所说的流程，我们来对这个案例进行修改。
1.字段整合优化
在进行前几个步骤的字段调整时，我们并不需要把整个表格全部做出来，只需要一个表头，和一行内容即可。在这个流程中，我选择将客户的名称和ID进行了合并处理，缩减横向空间的同时，利用一致性的逆向使用来增加客户这个字段的权重。
此外，还对长达19位的银行卡号，进行了常见的4-4-4-4-3的数字间隔，稍微增加这串长数字的可读性。
2.行列尺寸平衡
光改完字段，我们会发现字段之间的间隔有大有小，比较影响观感。加之出现了两行的字段，此时我们需要重新调整单元格的长宽，以适应我们之前做的改动。
另外，在某些字段中，例如「客户」，我们不能确定该字段最长会有多长，那就需要在后面适当的多留一些空间。
3.信息强弱对比
适当再强化「客户」的公司名称，弱化客户ID，稍微弱化删除按钮。因为此案例中字段较少，所以可操作的空间也不是很大，暂且权重上就只改这么多。
4.视觉细节修饰
在「客户」中加入公司的logo，这样做有助于更好地对公司进行区分；在业务员的名字前加入头像/照片，也有助于区分业务员，同时润色一下视觉观感；将银行卡还原为愿案例中的链接样式。
在这一步之后，就需要做出完整的全部表格，并对「选中行」进行样式设计了。除了勾选之外，为选中行加入一定的背景色也是很好的视觉提示。此外，当出现选中行时表头的全选按钮会变成半选状态，这是一个交互细节。原案例中并没有体现，所以这里我将其修改至正确状态了。
5.缺失功能补全
这里缺失的功能便是批量操作功能，在非特殊性情况下，批量功能没有任何理由在存在多选的表格中缺席。
6.完成全部设计
最后就是填图填色填图标，表格在视觉上没有太多的花头可以做，这里就不赘述了。
最后我们可以再进行一下修改前后的对比。
照例先来看一下原图。与案例一类似，这一份的表格所呈现的问题也是字段之间过于雷同，甚至包括状态的区分都不是非常显眼，这对表格浏览是比较大的压力。此外，同样缺失了批量操作的按钮，我们还是按照如之前所述的流程，对它进行修改。
1.字段整合优化
这里我选择将患者姓名与身份证号进行合并，给后面的字段挤出一定的空间，当然字段的合并是否一定是更好的这得具体业务具体分析，这里为了空间我先这么做。
另一处合并在预约就诊时间，原案例将这两个字段拆开，并且表头的文案「就诊日期」、「候诊时间」与后面的「预约时间」相当容易引起歧义，这里我们区分一下「就诊日期」和「候诊时间」是指患者希望前往就诊的日期时间，预约时间则为进行预约操作的时间。所以将表头文案改为「预约就诊时间」可能更不容易引发歧义。
其次便是手机号的3-4-4分隔，身份证6-8-4的分隔，这与案例一种银行卡号的风格原理一致，不再赘述。
2.行列尺寸平衡
由于出现了两行字段，这里稍稍提高了行的高度；并平衡各列的宽度对字段间距进行平衡控制。
3.信息强弱对比
这一份的信息确实不太好做出过于强烈的信息对比，所以这里我只是略微进行调整，我略微强化了姓名和预约就诊时间，略微弱化了身份证和预约时间，但并非让它们弱到无关紧要的程度，这些信息依然是重要的，但相比之下可以稍稍弱化。值得注意的是挂号状态，这里我只进行了字重的增加，但实际上这个标签非常重要，在后续修改中我还会对这个标签进行视觉上的修改。
4.视觉细节修饰
在这一步，我把挂号状态改成了一个更显眼的标签，不同的状态采用不同的颜色；另外在预约就诊时间内更加稍强调时间。
接下来补完整个表格，在这一步为了演示不同的表格样式，我选择采用隔行间色的表格样式，也就是常说的斑马线。受斑马线的影响，选中状态只能选择使用更为醒目的强调色，内部元素则需要进行反色的单独设计。
5.缺失功能补全
然后再把缺失的批量功能补全，与案例一类似。
6.完成全部设计
最后依然是完成全部的视觉设计。
最后再进行一下修改前后的对比。
结尾
表格是一个相对来说比较复杂的组件，在设计上也没有多少视觉性的要素可供设计师发挥，所以在这个组件的设计上，需要花更多的时间去理解业务场景并梳理字段的强弱关系，清晰地表达出信息的权重。
仅以以上两个案例，我也只能暂且说明进行表格设计的通用思路，大家在具体实践时，还需自行多加思考。
我们下篇改版文章再贱👋～～
往期改版文章阅读：
B端产品设计课程第八期开启正式招生了，
课程介绍点击链接查看：今年最后一期｜B端产品设计课开启招生
课前预习和咨询服务都准备好了，还不快来～
