表格规则 #

表格在整个B端产品中占比达45%以上，可见它的地位是相当重要的，我们在设计表格时需要注意一下几点：

1.对齐，高效的信息获取方式 #

表格内的信息通过对齐，会更加规范易理解，给用户视觉上的统一感，且视线流动顺畅，能够让人快速的捕捉到所要的内容。

● 文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；
● 数据信息右对齐，更加方便数字大小的直观对比；
● 固定内容居中对齐，更好的信息呈现及表格空间的节省；
● 表头与信息内容对齐方式一致，一致性以达到简化，降低视觉噪音。

2.表格的列数 #

默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。

3.表格列表的宽度 #

宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。（如果由于屏幕小屏幕会出现省略，就要考虑多一个tootips提示或用浏览器自带的title提示）

注：当第一列是序号或多选项时，列宽不需要太宽，最好跟第二列相近，这样视觉不会显得空洞

4.表头每列标题文字字数 #

字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。

同样，对于专业术语或用户不常见的名词应给予一定的帮助说明。

5.空白数据，由「-」填充，不适用,由「N/A」填充 #

表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，是用「-」来填充显示。如果不适用的，用「N/A」来填充显示。

表格的操作交互 #

1.固定表头，一目了然 #

当阅读丰富且繁多的表格时，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息，固定表头，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思，固定表头，也是一种界面友好性的体现。

2.排序，让信息有序起来 #

可以让无序信息内容进行有序排列，排序分为升序和降序，一般用在数据、时间、数量上。

3.调整列宽度，查看完整数据 #

允许调整列的宽度来查看更加完整的缩略数据。被截断的数据，默认支持鼠标悬停时 tips 显示完整数据。

4.水平滚动，固定首尾列 #

呈现大型数据集时，水平滚动是不可避免的，通过横向滚动查看其它数据。将首列进行固定（若包含勾选操作，则一起固定），以便用户将数据与对象进行对应。

若尾列包含列表操作，也将其进行固定，方便用户直接操作。

5.分页固定 #

若表格是分页处理的，分页会放在上部、下部或上下部均有，分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。

表格的最佳视觉 #

使用表格时需要记住一点是，让设计融入背景，让数据占据核心地位。不要让厚重的边框和阴影与数据争夺受众的注意力。相反，要使用窄边框或者空白来区分表格的元素