一件事让客户成为你的忠实用户！

腾讯专有云

发布于 2022-06-24 17:58:59

1.5K0

发布于 2022-06-24 17:58:59

进入To B系统，满屏都是列表，基本上列表页和查询条件占据了系统的一半以上，并且大部分的功能都是从列表查询页开始的一系列增删改查，这其中涉及到前端相关的交互就有”表格/表单(数据录入和编辑)/弹框...“。那我们今天就先从表格入手，一起探讨一下表格的交互怎么样更合适。

表格的介绍

表格的定义

用来收集、整理、组织、分析数据的二维矩阵；既是一种可视化交流模式，又是一种组织整理数据的手段。

表格的组成

筛选区、功能性按钮、表头、表体、底栏。

表格组件

表格的功能

01 筛选区设计

高级筛选(录入收折叠式)-录入展开式

高频筛选字段外露，低频筛选隐藏。

收起模式

收起模式

展开模式

展开模式

适用场景：当筛选条件有高低频之分，且对页面空间要求较高。
优点：高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷，同时占用空间较小。
缺点：平台通用性较差，当高频筛选项过多时，页面同样会出现信息冗杂、空间占比大等问题。

多属性组合搜索

适用场景：对页面空间要求比较高，无多余空间放置其他筛选项，但需要进行多属性组合搜索，得到精确的搜索结果。
优点：占用空间小，页面非常简洁，搜索条件集中好聚焦。

搜索和条件组合

搜索条件组合

搜索和条件组合

虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端：

数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。筛选前需先对表格进行横向滚动，无端增加操作。
表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索；增加认知学习成本。

02 功能区按钮设计

功能区按钮

应主次分明，主按钮应尽量一边只留一个；左右分配的建议如下：

区域	建议
左侧	批量操作按钮左对齐，一级按钮-二级-三级的排列顺序。
右侧	新增、导入、导出等按钮右对齐，...三级-二级-一级的排列顺序。

03 表头设计

表头在能够概括的情况下，尽量简练、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。

表头设计原则

文字不宜过多，列宽应至少大于表头，解释性文字应用释义表示，鼠标悬停展示；
单位尽量统一，在列表头加即可：价格(元)。
可配置列（自定义表头）：与配置筛选条件的功能类似，同样是考虑到不同角色的用户，查看数据的视角不一样，对应的关心的字段也会不一样。

表头

04 表体设计

表体即为数据的呈现方式，以及承载着各种数据操作的入口，因此尤为重要。

数据对齐规则

数字信息右对齐，包含金额、长宽高等需要关联比较的字段，这是因为我们在对比数字时，首先看个位，然后十位、百位等。
文字信息左对齐，符合正常的心智模型，一般人们的阅读方式是从左往右，从上往下。
固定字段居中对齐，比如日期（2020-11-11），状态文字（未审核、已收款等）或者存在布尔关系的文本（是/否、男/女等），这能更好的信息呈现及表格空间的节省。
表头与数据信息对齐，这能保持表格竖直方向整洁，营造一致性和上下文环境。

数据显示原则

数据截断：当数据为”描述“”说明“等当描述性文字过长时，可以用"..."省略，鼠标移入后出现气泡展示全部内容。
数据不可换行：一些特殊的数据不应该换行，例如一些有实际意义的有效数字换行后会造成歧义。
空数据：当数据为空时，用”-“填充展示；避免直接留白，容易给用户造成一定的误解和困惑，没加载出来or bug？
横向滚动条：当表格宽度过长时，应出现横向滚动条，不能造成其中一列或者几列被严重挤压；特殊列适当固定。

空数据

无横向滚动条

操作列原则

个数：操作列的原子项数不超过3个，超过三个时应放在”更多“的下拉选项中。
格式：操作列的操作项名称应为”文字链接“。
固定：当出现横向滚动条时，操作列应该被固定住。

未锁定操作列

表格编辑

就地编辑：表格单元格嵌套输入框或者选择框，可批量直接操作；优点是类似excel，对修改数据量多时比较方便；缺点是表格很丑，当表格数据量大时表格的性能不好容易出现卡顿现象。
通过操作列：点操作列的”编辑“，对当前行数据进行就地编辑；优点是纯展示时风格统一，每次修改只聚焦当前数据；缺点是每次都只能修改一行数据。
点”操作“按钮：进入原”新增“模式下的编辑模式；跟前面有点像。