web端表格设计规范整理
时间：2023-10-04 00:00:01 | 来源：网站运营
时间：2023-10-04 00:00:01 来源：网站运营
web端表格设计规范整理：
一、表格的定义
表格又称为表，是用来收集、整理、组织、分析数据的二维矩阵；它既是一种
可视化交流模式，又是一种
组织整理数据的手段。
二、表格的用途
表格结构简单，分隔明确，可保证信息可读性，易于用户快速扫描浏览并获取所需；数据经过归纳整理和合理布局后，更
易于用户感知分辨其中的差异与变化、关联与区别，并进行对比分析；交互层面，用户可以对数据信息进行排序、搜索、筛选、以及相关业务处理等复杂操作。
三、表格的构成与布局
1 表格的构成
通常表格的组成元素以及相关元素会有多个部分，为
容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分
01 内部构成元素：标题、表头、表体、表尾
02 外部相关元素：筛选区、按钮区、底栏
2 表格的基本布局
信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。
表格的基本类型：
01 网格型表格有均匀而明显的分割线，边框单元格比较明显。
对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。
02 水平线型仅显示水平线可减少整个网格的视觉噪声
它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度；因此对于所有数据集大小，此样式都是最常见的。
03 斑马条纹型隔行交替使用不同底色来区分数据
每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法；对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。
四、表格设计技巧
1 数据对齐方式
表头与信息内容对齐方式一致,以便更好的获取数据信息
01 居中对齐 ：左右留白对齐，视觉效果好
02 居左对齐：符合人们从左到右的阅读习惯，符合正常的心智模型
按字符长度定义可变长度字符串左对齐：“可变长度”指长度不固定的数据列；固定长度字符串居中：“固定长度”指长度不会变化的数据列，如日期2020-09-25；可比较字符串右对齐：“可比较字符串”指需要关联对比的数据列，基本都指数字、金额等；
按数据类型定义文本型左对齐，包括非比较型数字，符合人们从左到右的阅读习惯，符合正常的心智模型。数值型右对齐，这是因为在对比数字时，首先看个位，然后十位、百位等置，如小数点后面的位数不同，以个位数字为基准，居中对齐，便于对比。布尔型居中对齐，如 男/女，是/否等；
数据对齐方式- 文本型左对齐，符合正常的阅读习惯,从左到右
- 数值型右对齐，有利于数据间的对比
- 表头与信息内容对齐方式一致,以便更好的获取数据信息
2 表头 设计规范
- 精简表头信息：生僻字段可以跟一个释义标识，鼠标悬停时出现该字段的详细解释
- 功能复合型表头：文字+筛选/排序/搜索和标签
- 组合表头
- 多级表头：数据结构比较复杂，可使用多级表头来体现数据的层次关系
3 操作区设计规范
操作项一般存在于条目最后，以及表头位置，分别对应单条操作与批量操作的场景
当信息过载，操作项这个list非常长的话，页面将会非常拥挤；文字按钮因为视觉特征比较明显，造成了不必要的分散注意力；误操作率相对较高，同样因为表格空间有限，当操作区非常靠近，很容易一不小心就点错了。
04
行高 设计规范适宜的行高使得数据更易于被阅读，但这不代表行高越大越利于阅读，行高的大小应该是与字体成比例的，在单行文字的情况下表格间距一般在字符大小的三倍以内。
行高是非常重要的参数，直接影响着阅读体验。较小的行高能承载更多信息，让用户无需滚动鼠标即可看到更多数据，但会降低扫描效果，导致视觉解析错误。适宜的行高使得页面更透气，但并不是越大越好。设置行高的原则是：A.单行显示时，数据显示紧凑、有序。B.多行显示时，弱化表格形式，提供丰富的视觉展现。因此，对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；对于多行显示的表格，建议内容区到上下边框的距离略小于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。
五 表格的外部元素
如何优化筛选区数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导致空间占比过大，影响了用户对表格信息的获取 。
功能操作区对于数据批量操作频繁的场景，建议将操作放到表格顶部，与勾选操作配合使用。
表格的设计规范
表格是为
可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。设计
易读、易扫视、易比较、易操作的表格结构是表格设计的首要目标。
在线咨询
