一点一点地理清表格的设计点，可能会使得表格更加趋于明朗。今天，我会为大家详细地介绍了数据表格中都有哪些设计点，希望能给大家带来不一样的内容。
1. 前言
在企业级中后产品中，通常大量使用表格来展示结构化的数据。合理地设计表格能给用户带来高效的信息获取率，但如何言而有物地设计表格，相信是绝大数刚入行B端的设计师的困扰。
因此，我结合了自身在实际工作中遇到的表格设计的问题，针对web端复杂业务场景下的表格该如何设计进行了探讨，希望能帮大家理清表格设计中的一些难点和困惑点。
表格（Table），又称为表，是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成，其中，内部包含表头、表体、底栏等；外部包含标题、筛选区、操作按钮区等，如图：
- 标题：对表格信息内容的整体概括，可包含数据来源及属性（日期、地区等）；
- 筛选区域：表格的数据检索区，方便用户快速查询定位数据，一般位于表格上方；
- 操作按钮区：承载表格的增删改查的功能和业务处理操作；
- 表头：般指列标签，这里也指首列行标签，是对所属行或列信息的描述；
- 表体：表格的主体，承载着内容信息数据，由单元格组成；
- 底栏：主要用于统计数据总条数和记录当前位置，包含数据量、单页条目、总条目、分页等。
说完表格的组成，接下来我会对每一个部分进行讲解，探讨表格设计要点。
2. 筛选区域
2.1 搜索
根据其表现形式，可以分为以下四种类型：单属性搜索、切换属性搜索、多属性模糊搜索以及多属性组合搜索。类型之间没有优劣之分，根据业务场景使用对应的类型即可。
2.1.1 单属性搜索
适用场景：通过某个特定属性就可以快速定位到目标数据，此特定属性通常是具有唯一识别性的、高使用频率的、对用户决策有意义的。
2.1.2 切换属性搜索
适用场景：有多个常用的搜索属性，且对搜索精确度要求较高，但页面空间比较局限，可使用切换属性搜索。
2.1.3 多属性模糊搜索
适用场景：有多个常用的搜索属性，且对搜索的便捷性要求高于搜索结果的精确性时，可选用多属性模糊搜索。
2.1.4 多属性组合搜索
适用场景：对页面空间要求比较高，无多余空间放置其他筛选项，但需要进行多属性组合搜索，得到精确的搜索结果。
2.2 条件筛选
条件筛选也可以称为过滤器，英文名Filter，主要用于内容提取，帮助用户缩小信息范围。包含了下拉选择器、单/复选框、日期选择器、标签切换等控件。
2.2.1 下拉选择器
下拉选择器是后台系统中最为常见的一种控件，其形式为弹出一个下拉菜单给用户选择操作。
为了选择数据的方便，还可以加入搜索功能。当选项少于5个时，建议直接将选项平铺，使用单选框会是更好的选择。
2.2.2 单选框（Radio）
用于在多个备选项中选中单个状态的场景，其中每个选项应该是互斥的。单选框的数量至少为2个，一般少于6个。要注意的一点，一组单选按钮应该默认选择一个选项，一般初始状态默认选择第一项。
2.2.3 复选框（Checkbox）
用户可以在选项列表中选择一个或者多个选项，其中选项的数量不宜过多，一般来说不要超过7个，过多的复选框会给用户造成认知负担。但如若出现过多的情况，采用下拉选择器更合适。
2.2.4 日期选择器
日期选择器是允许用户选择一个或某个日期范围的组件，同样的根据业务诉求，有时还可以在上面加入快捷选项。
其中，数据格式需要注意以下2点：
第一：使用“-”作为分隔符；日期为个位数时，需要用“0”补齐；表达时间范围时，用“至”作为连接；如果日期是用中文，则采用“-”作为连接。
第二：日期、星期与时刻一起使用时，格式为【日期 星期 时刻】。
2.2.5 标签切换
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。可根据业务场景改变样式，会有更好的使用体验。
2.3 筛选区域的形式
在表格设计中，筛选区域的形式有哪些？当业务复杂时，筛选区域又该怎么设计？接下来我根据过往的经验为大家总结了一些筛选区域的形式，希望能给大家带来一些启示。
2.3.1 录入展示式
可以兼容多种数据格式（数字、文本、标签、布尔值、枚举值等），包含了日期选择、标签切换、单/复选框选择等多个UI控件。
- 适用场景：适用于从各个维度筛选的场景，应对各种复杂的筛选情况。
- 优点：筛选条件平铺展示，便于用户进行快速地筛选选择。
- 缺点：筛选项隐藏较深，难以知道备选项有什么；当筛选过多时，信息量过于冗杂繁多。
2.3.2 录入收折叠式
它是录入展开式的一种变形，高频筛选字段外露，低频筛选隐藏。
- 适用场景：当筛选条件有高低频之分，且对页面空间要求较高。
- 优点：高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷，同时占用空间较小。
- 缺点：平台通用性较差，当高频筛选项过多时，页面同样会出现信息冗杂、空间占比大等问题。
2.3.3 矩阵式
矩阵式也称为平铺式，顾名思义就是将所有筛选项罗列出来平铺在页面上。
- 适用场景：多维度筛选且每个用户对信息筛选的颗粒度需求不一致，同时希望备选项被选中。
- 优点：用户能直接看到选项内容，方便用户识别选项，且提高了用户筛选的效率（节省了筛选操作）。
- 缺点：占据页面空间较大，此类型一般配合“勾选即执行”使用，因此在执行筛选的过程（动画或加载时长）可能分散用户精力。
这里就可以很好的理解电商类产品在筛选区往往采用矩阵式布局，比如：挑选一台电脑，有人希望按品牌筛选、有人希望按内存容量、有人希望按系统，我们很难判断哪个频率更高。
面对这种情况，只能将所有的筛选条件平铺出来供用户选择。同时电商产品将品牌的备选项平铺出来，可以增加品牌的曝光度，这无疑是一个可带来利益的隐形广告位。
2.4 实例运用 – 筛选区优化
产品现状：由于业务复杂、数据集大、维度多等原因，合同管理页面所需的筛选条件过多，当前的筛选区采用录入展开式堆叠在屏幕上，会严重挤占列表的展示空间，使得首屏留给列表的空间所剩无几；用户在寻找具体筛选条件时，仿佛大海捞针，耗时费力。
改版目标：合同管理页面的内容又多又全面（表体），但在操作时又能支持快速定位（搜索，包含筛选）、准确处理（操作）。
设计策略：
- 用户可以快速找到筛选条件 —— 控制条件的数量；
- 能满足搜索细致程度上的要求 —— 筛选条件要充足；
- 将展示区域更多留给表体 —— 避免筛选区域占用太多屏幕空间。
2.4.1 方案一 ：隐藏筛选条件的标题
由于筛选区存在自定义字段，因此无法掌控筛选条件标题的长度，所以原有的标题在输入框上方，因此通过隐藏标题可以使筛选条件排布的更紧密，从原来的220px降低到了130px（高度降低60%），给表体腾出空间。
讨论结果：这种设计方案其实挺常见，但前提是输入框数量极少，且为用户所熟知；但在筛选项中存在多个时间筛选选项，选择后用户只凭选中项，可能回想不出这个选项对应的是什么筛选条件。
2.4.2 方案二 ：缩短筛选条件宽度
通过缩短输入框宽度，减少筛选条件的行数，将屏幕空间更多的留给表体。
讨论结果：此方案虽能在一定程度上缩减筛选区的展示区域，为表体腾出空间。但输入框的文本只能展示前面几个字，会在一定程度上影响用户的预览和理解。
例如：在选择房间的输入框中只能显示“创维棒导体大厦…”无法看到“层数”、“房间号”等更详细的重要信息。
2.4.3 方案三：通过权限控制
由于合同管理页面由多个角色共用，通过权限控制筛选条件的显隐，则能满足设计需求。例如角色A展示筛选条件1、2、3、4，角色B展示筛选条件5、6、7、8。
讨论结果：此方案虽然能同时满足设计目标，但需要非常细致的配置工作；若组织架构发生变动，维护的工作量很难预估。
思考： 只能在录入展开式的基础上做优化吗？
遵从设计的一致性原则，前三种优化方案都是在原有的展示形式上做了相应的调整。遵循一致性是为了让用户有更高效的操作和降低学习成本，但显然与事实不符合。
对于一个系统来说把一致性排在比高效性前面，系统也会因为创新被遏制，而止步不前。因此，我们认为系统的高效性应该在一致性前面，这点在salesforce的设计原则中也有所体现，故可以采用其他的展现形式。
注：salesforce是CRM行业的领导者，将CRM的理念搬到了Web上，引领了SaaS行业。
2.4.4 方案四：强调主次关系
根据筛选条件的使用频率的不同，对不常用的筛选条件进行隐藏，采用录入折叠式，以达到想要的效果，如下图：
讨论结果：此方案也是大多数B端产品中所使用的方案，但并不适用多角色共用的场景。
我们只能从业务侧去分析得到共用的筛选条件，对于角色所特定使用的筛选条件，我们无法得到直观的数据 —无法判断每个角色的使用时长，因此从后台查看到的数据并不能直接反应筛选条件的使用频率。
2.4.5 方案五：可配置筛选条件
通过设置筛选项，每个角色都可以根据自己的需求和习惯决定展示哪些选项，可以对选项进行排序，甚至可以根据自己的使用频率，对筛选条件进行显隐。
讨论结果：这个方案较全面的解决了问题，同时也满足了我们的设计目标，对于多角色的用户来说，是一个比较理想的方案。
3. 操作按钮区
功能按钮区在这里指的是对于表格数据进行增删改查等，包含导出、创建和业务处理操作等，首先我们来看看在功能按钮区中能存在多少种按钮类型。
3.1 按钮类型
虽然按钮的种类有很多种，但在研究过大量系统之后，发现功能按钮区的按钮类型无外乎有以下四种类型，分别是普通按钮、主要按钮、图标按钮、文字按钮，如图：
- 普通按钮：也叫做常规按钮，是页面中存在最多的按钮，其权重性相对比较低。在不确定选择哪种按钮的情况下，该按钮永远是最安全的选择。
- 主要按钮：用于突出，页面主功能操作。当需要突出或者强调时使用它。同时需要注意的是，一个模块区域只允许一个主要按钮。
- 文字按钮：轻量的按钮样式，可用于需大面积展示按钮场景。
- 图表按钮：可与常规按钮、主按钮以及文字按钮结合，起到强调的作用。通过对操作功能的意符化，提供视觉线索引导，避免逐字阅读按钮文案，更高效地使用界面。可以在较小的空间展示更多的按钮；当使用纯图标按钮必须有 Tooltip 提示按钮含义。
知识扩展：什么是意符？
意符是唐纳德·A·诺曼在《设计心理学》中提出的概念，他指出：“‘意符’这个词指的是能告诉人们正确操作方式的任何可感知的标记或声音。”通过设计易理解、表意准确的意符，可将产品操作方法清晰的表达出来，能更好的指引用户操作，提高操作效率。
3.2 按钮样式
3.2.1 采用圆角矩形
在复杂系统设计中这里建议使用圆角矩形的按钮样式，理由如下：在相似的内容中，圆角的识别度比直角更高。
举个例子：如下图，即便间距相同，我们能更容易计算出圆角矩形的总数。
这是因为圆角矩形中的圆角具有收拢的关系，视觉聚焦向中心推，使得有更明显的边缘，可以引导我们的视觉差异。而直角则看起来彼此一样，中间找不到断点，因此不太可能引起我们的注意。
再加上B端产品涉及到功能性按钮可能会很多，在网格布局中，圆角矩行能让用户更高效地辨别和获取信息，所以圆角的效果会更好。
3.2.2 慎用全圆角
圆角并不是越大越好，由于全圆角按钮无法显示嵌套选项。
例如：当当全圆角按钮带有可用的嵌套选项时，通常会在右侧显示一个箭头icon，触发嵌套选项的有效触控区域就锁定到箭头icon的大小(16或24像素)。但若是换成半圆角按钮，就可以把整个按钮当作触控区域。通过菲茨定律我们知道，这样是更有效率的。
知识扩展：什么是菲茨定律？
菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这项定律尤其适合按钮等可点击、可选择、可交互的元素，目的：易于查找和选择。
作为一个数学模型，菲兹定律是有表达式的，表达式如下：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。
结论： 离目标距离越近，所需的时间越短；目标尺寸越大，完成速度越快，时间就越短。也就是说，预测点击一个目标的时间，取决于目标和当前位置的距离+目标的大小。
3.3 按钮顺序
关于顺序，我们认为需要考虑整个系统层面，主要从弹窗、表单、表格这3个典型页面来推导出适合的按钮顺序。
3.3.1 弹窗
在弹窗中，当消息提示我们进行下一步操作的时候，我们会下意识的寻找动作（action）按钮。但我们往往会先阅读完所有的操作项，在进行动作指令。
因此「确定」放在左侧，将导致用户的视线流发生改变，用户视线流无意识的回跳，而放于右侧将保持视线流在一个方向，减少视线曲折搜索的过程。
3.3.2 表单
表单页承载着大量的同质信息并且平衡分布，所以其用户的浏览路径遵循古腾堡法制，它描述了用户的阅读模式，从页面的左上方开始浏览内容，而结束浏览时视线往往落在右下角，所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。
3.3.3 表格
在我们系统中，表格页的按钮放置在右上角，考虑到页面的适配问题，若主按钮放在左侧，虽然眼动路径最短，但其出现的位置，会随着屏幕的变化而变化，没有一种确定感。
最后考虑到，用户使用web的习惯，大部分人都是右手用鼠标，指针会更习惯放在右侧，因此执行按钮放在右侧更容易让用户点击（菲兹定律）。
通过上述几个方面探讨论述，我们制定出了系统层面的按钮顺序：主按钮在右，次按钮在左。
4. 表头
表头的作用是解释当前列数据，表头并不是表格的必要元素，当数据本身能自我表意的时候（例如邮箱），表头是可以删减掉的，毕竟表头也占据一定的空间。
4.1 表头的类型
根据表头的构成，可以分为以下三类：
- 纯文本表头：仅起到解释数据属性的作用
- 多功能表头：可以筛选、排序、搜索相关数据
- 多级表头：信息分类层级较多的情况下使用
4.2 表头筛选
表头筛选是一种列表内置筛选形式，类似Excel表格的操作。表头筛选和筛选区的筛选相比，只能筛选一列数据，能节约一定的空间。
虽然表头筛选能在一定程度上节约空间，但对于复杂业务的产品来说，不推荐使用，原因如下：
原因1：数据集庞大，导致数据列多，采用列固定的交互方式。这种情况下，高频的筛选功能可能会被遮挡，筛选前需进行滚动，无端增加操作。
原因2：每个表头都会有一个筛选的icon，影响用户对于表头的识别；
原因3：表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。
4.3 表头排序
排序功能让用户可以改变数据的排序，为纯粹以展示为目的的表格增添了活力，丰富了数据展示形式。
有两种形式：一种是使用上下按钮进行排序（只有两种排序），另一种是使用下拉菜单进行排序（适用于多种排序）。
4.4 字段名称
表头的字段名称应当符合用户思维习惯，保证用户理解。
如果精简后的生僻字段难以自我解释，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足新手用户、普通用户以及专家用户的需求。
4.5 可配置列（自定义表头）
可配置列与配置筛选条件的功能类似，同样是考虑到不同角色的用户，查看数据的视角不一样，对应的关心的字段也会不一样。
5.后记
今天就先分享到这里，关于表格剩下的内容我会后续更新。
我是Nick，B端一号种子设计师，我们下篇文章再见 ～～～
谢谢阅读！
若有收获，就点个赞吧
0 人点赞
