进入To B系统，满屏都是列表，基本上列表页和查询条件占据了系统的一半以上，并且大部分的功能都是从列表查询页开始的一系列增删改查，这其中涉及到前端相关的交互就有”表格/表单(数据录入和编辑)/弹框...“。那我们今天就先从表格入手，一起探讨一下表格的交互怎么样更合适。
表格的介绍
表格的定义
用来收集、整理、组织、分析数据的二维矩阵；既是一种可视化交流模式，又是一种组织整理数据的手段。
表格的组成
筛选区、功能性按钮、表头、表体、底栏。
表格组件
表格的功能
01 筛选区设计
高级筛选(录入收折叠式)-录入展开式
高频筛选字段外露，低频筛选隐藏。
收起模式
收起模式
展开模式
展开模式
- 适用场景：当筛选条件有高低频之分，且对页面空间要求较高。
- 优点：高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷，同时占用空间较小。
- 缺点：平台通用性较差，当高频筛选项过多时，页面同样会出现信息冗杂、空间占比大等问题。
多属性组合搜索
- 适用场景：对页面空间要求比较高，无多余空间放置其他筛选项，但需要进行多属性组合搜索，得到精确的搜索结果。
- 优点：占用空间小，页面非常简洁，搜索条件集中好聚焦。
搜索和条件组合
搜索条件组合
搜索和条件组合
虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端：
- 数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。筛选前需先对表格进行横向滚动，无端增加操作。
- 表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索；增加认知学习成本。
02 功能区按钮设计
功能区按钮
应主次分明，主按钮应尽量一边只留一个；左右分配的建议如下：
区域 | 建议 |
|---|---|
左侧 | 批量操作按钮左对齐，一级按钮-二级-三级的排列顺序。 |
右侧 | 新增、导入、导出等按钮右对齐，...三级-二级-一级的排列顺序。 |
03 表头设计
表头在能够概括的情况下，尽量简练、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。
表头设计原则
- 文字不宜过多，列宽应至少大于表头，解释性文字应用释义表示，鼠标悬停展示；
- 单位尽量统一，在列表头加即可：价格(元)。
- 可配置列（自定义表头）：与配置筛选条件的功能类似，同样是考虑到不同角色的用户，查看数据的视角不一样，对应的关心的字段也会不一样。
表头
04 表体设计
表体即为数据的呈现方式，以及承载着各种数据操作的入口，因此尤为重要。
数据对齐规则
- 数字信息右对齐，包含金额、长宽高等需要关联比较的字段，这是因为我们在对比数字时，首先看个位，然后十位、百位等。
- 文字信息左对齐，符合正常的心智模型，一般人们的阅读方式是从左往右，从上往下。
- 固定字段居中对齐，比如日期（2020-11-11），状态文字（未审核、已收款等）或者存在布尔关系的文本（是/否、男/女等），这能更好的信息呈现及表格空间的节省。
- 表头与数据信息对齐，这能保持表格竖直方向整洁，营造一致性和上下文环境。
数据显示原则
- 数据截断：当数据为”描述“”说明“等当描述性文字过长时，可以用"..."省略，鼠标移入后出现气泡展示全部内容。
- 数据不可换行：一些特殊的数据不应该换行，例如一些有实际意义的有效数字换行后会造成歧义。
- 空数据：当数据为空时，用”-“填充展示；避免直接留白，容易给用户造成一定的误解和困惑，没加载出来or bug？
- 横向滚动条：当表格宽度过长时，应出现横向滚动条，不能造成其中一列或者几列被严重挤压；特殊列适当固定。
空数据
无横向滚动条
操作列原则
- 个数：操作列的原子项数不超过3个，超过三个时应放在”更多“的下拉选项中。
- 格式：操作列的操作项名称应为”文字链接“。
- 固定：当出现横向滚动条时，操作列应该被固定住。
未锁定操作列
表格编辑
- 就地编辑：表格单元格嵌套输入框或者选择框，可批量直接操作；优点是类似excel，对修改数据量多时比较方便；缺点是表格很丑，当表格数据量大时表格的性能不好容易出现卡顿现象。
- 通过操作列：点操作列的”编辑“，对当前行数据进行就地编辑；优点是纯展示时风格统一，每次修改只聚焦当前数据；缺点是每次都只能修改一行数据。
- 点”操作“按钮：进入原”新增“模式下的编辑模式；跟前面有点像。
就地编辑
通过操作列
编辑模式
编辑模式
其他（容易忽略的细节）
- 重置为首页：搜索时，导入，添加条目等操作时，应刷新页面。
- 详情页面：进入详情页面时，返回主列表页，需回到上一次的位置【记住上一次的查询条件，或者页码】。
- 编辑页面：进入编辑页面时，若有搜索条件，返回主列表也应回到上次的位置【记住上一次的查询条件】；若无搜索条件，则回到首页(第一页)。
- 保留查询条件：删除操作时。
以上内容大概就这么多啦，表格是To B业务中非常重要的组件，做好表格，你离成功又近一点点啦，做出来的产品赏心悦目。除了表格，当然还有表单等...表单系列正在努力生产中，下期敬请期待！
