【转帖】web表格设计解析（2-2）！！！

回复

本帖最后由常胜将军常胖胖于 2021-3-16 17:33 编辑

前文传送门：

web表格设计解析（1）
web表格设计解析（2-1）

2.4 列的优化
减少列的数量
尽量减少列的数量，关注用户需要的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以通过次级入口来解决，如固定重要列(主体名称/操作列)，次级列在表格中间区域左右拖动。

合适的列宽
列宽严谨的处理方式有三种。第一，通过栅格，由列的数量决定列宽，主流框架组件一般是这种；第二，可以固定部分列的宽度，其余列则按百分比处理；第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。（当然我觉得不要太拘泥这个，合适就好）

列的强调
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少用户数据加工的过程，直达用户获取信息的目标(需要明确用户目标)，提高用户的阅读速度。
一般列的强调是配合列排序功能使用的，如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔，增加同类信息的对比性。
【转帖】web表格设计解析（2-2）！！！

2.5 单元格数据展示
度量单位的使用
其中的关键区别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。
【转帖】web表格设计解析（2-2）！！！

空白单元格处理
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零？正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；对于没有
【转帖】web表格设计解析（2-2）！！！

数据的单元格，通常是用“－”表示。

B端后台数据类型较多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。

数据过多
单元格的宽度根据列中字符的长短自动变化宽度，超过该列宽可以省略显示，末尾以"..."显示，鼠标悬停时出现气泡显示完整内容。

关键属性标识
比如用户重点关注数据状态、某些数据的上升和下降等，可用符号进行标识，帮助用户快速定位到目标信息。
【转帖】web表格设计解析（2-2）！！！

2.6 分隔线
水平分隔线，能显著减轻表格在垂直方向的视觉重量，内容更加条理清晰，便于用户对比查看数据。
垂直分隔线，在表格中使用适合的对齐方式后，那么就可以省略；数据量级比较大的表格，列之间过于紧密时建议保留，可以使用较淡的分隔线，将不同列数据区分开来，提升浏览速度。

下图采用了同时使用水平和垂直分隔线：
【转帖】web表格设计解析（2-2）！！！

如果在表格中使用适合的对齐方式，分隔线就是多余的。但由于表格数据量级不同，即使要用，分隔线也要淡，不能妨碍快速浏览。

2.7 分页及翻页
在web端，表格的的数据内容超过一定“数量”时需要提供翻页功能，这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定，原则是不要超过一屏，考虑到每个用户的使用习惯，可以让用户自定义每页的显示的数量。相比于跨屏翻页而言，向下滚屏会更便利，在下文控制表内容中展开比较了无线滚动与分页。

分页控件内容：用户自定义每页显示的数量，当前页码(行数)，全部数据的页数(行数)，向前翻页，向后翻页，到达第一页，到达最后一页等。
当用户的数据未超过一页时，可以隐藏翻页控件。翻页按钮不可用时，须给出置灰态或不可点击。

分页控件做为筛选数据的一种方式，通常可以结合排序、筛选等其它控件一起使用，来提升用户的操作效率，如网易的邮箱，翻页与日历结合使用，对于有大量邮件数据的用户来说，查阅邮件的效率更高。
【转帖】web表格设计解析（2-2）！！！

除了无限滚动，还有第三种翻页方式，鼠标点击“加载更多”按钮以查看更多数据。

2.8 简化表格
干净的表格使人愉悦。特别是在处理大量数据时，巨大的数据量会增加用户的压力，因此要减少视觉干扰。删除不必要的分隔符与背景，去除阴影等。信息内容的有效传达是表格设计的本质，让用户注意力聚焦在核心内容上。所以，做减法设计就显得可贵了。

实现简化的方法是适当删减。如果画面视觉很糟糕，请删除辅助信息、不常用的控件和分散注意力的样式，但要小心删除必要内容。“简单并不意味着没有杂乱，这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive

减少分隔线
这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量，加快数值的对比效率。但如果在表格中使用适合的对齐方式，竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离，明确了单元格范围。即使要用垂直分割线，也要淡，不能妨碍快速浏览。

不使用斑马线，使用不同底色区分指示不同类型的数据是有必要的，但是用来区分同一类数据，斑马线在很多时候又是没有必要的，因为水平分割线已经明显区隔了。
省去分隔线，对于较小的，动态性较小的表，可以省去所有分隔线，并获得醒目的外观。当然，这更多是数据量不大且易分辨的情况。
【转帖】web表格设计解析（2-2）！！！