B端表格设计实战指南

一、表格的介绍

1. 表格的定义

表格（Table）：又称为表，是用来收集、整理、组织、分析数据的二维矩阵；它既是一种可视化交流模式，又是一种组织整理数据的手段。

2. 表格的构成元素

• 容器：包含表格的所有内容。
• 筛选区：包括搜索和条件筛选。方便用户快速查询定位数据，一般位于表格上方。
• 功能性按钮：比如常见的[新增]按钮和各种批量操作按钮。
• 表头：说明数据的内容，可以包含筛选、排序等功能。
• 表体：包含行和列数据，按列可以分为多选列、数据列、操作列。（多选列=多选框；数据列=呈现业务展现需要的信息；操作列=针对单行数据的操作按钮，比如管理、编辑信息等。）
• 底栏：包含数据量、单页条目、总条目、分页等，底栏数据也可以放置在表格顶部。
• 
  

3. 表格的样式

• a.网格型：表格有均匀而明显的分割线，边框单元格比较明显。
• b.水平线型：仅显示水平线可减少整个网格的视觉噪声。
• c.斑马条纹型：隔行交替使用不同底色来区分数据。
• d.自由形式：移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。

• 网格型：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。
• 水平线型：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度；因此对于所有数据集大小，此样式都是最常见的。
• 斑马条纹型：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法；对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。
• 自由形式：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。

二、表格的设计技巧

1. 筛选区设计

• 常用搜索少用筛选：若筛选项多，可以选择隐藏筛选项，筛选少可以展示出来；
• 搜索和筛选都常用：可以将搜索和筛选都展示出来；
• 常用筛选少用搜索：筛选和搜索同时展示；
• 筛选和搜索都不常用：展示搜索隐藏筛选。

• 简单搜索：由一个搜索框和一个按钮组成，可以输入一个或多个条件进行搜索。
• 标签搜索：在简单搜索的基础上加上标签，即先选标签，在输入搜索内容。
• 高级搜索：即点击更多展开其他搜索条件，减少了更多条件对用户的干扰，但降低了易发现性。

• 数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。以财务中台为例，高频筛选功能已被遮挡（如上图），筛选前需先对表格进行横向滚动，无端增加操作；
• 应无法展示全部字段，用户无法清晰的感知到筛选了哪些内容，增加认知学习成本；
• 表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。

状态的提炼过程

2. 功能区按钮设计

• Jürg Nänni（Visual Perception的作者）表示：视网膜中区处理正圆形的时候是最快速的，而处理边边角角的时候则比较费力，大脑处理的速度也较慢。于是，长得圆润的圆角矩形相较于一般矩形，对于使用者来说就容易接纳许多。
• Barrow Neurological Institute （巴罗神经病学研究）的研究也显示：一个物体的显著度与边角的角度呈线性变化，锐角相较于钝角要显得更明显突出；换句话说，角度越尖锐，物体就看起来越明亮；而越明亮的物体就越难以直视。

• A 排由于直角的关系，视觉聚焦向外推，整体的效果比较发散；这会使得第一眼看过去的时候，容易分不清楚哪一条边框属于哪一块矩形。
• 反之B 排因为圆角收拢的关系，视觉聚焦向中心推，区块就比较容易区别开来。

其次，批量操作的功能属于财务中台的核心功能点，隐藏不是第一选择，而是类置灰的特除处理（在按钮旁给提示信息）。

3. 表头设计

4. 表体设计

1. 文本左对齐；
2. 数字右对齐；
3. 表头与信息内容对齐方式一致。

• 当信息过载，操作项这个list非常长的话，页面将会非常拥挤；
• 文字按钮因为视觉特征比较明显，造成了不必要的分散注意力；
• 误操作率相对较高，同样因为表格空间有限，当操作区非常靠近，很容易一不小心就点错了。

• 在查看和编辑信息时，无效的信息太多。降低了获取信息的效率；
• 切换单条数据时，页面出现跳动，无法快速检索到相对应的信息。

5. 底栏设计

三、其他设计细节

1. 空白单元格的处理

2. 减少图形元素的使用

3. 省略 （气泡展示位置）

四、后记

想学习更多关于产品、职场、心理、认知等干货，可长按右边二维码，关注我们。

点击“阅读原文”

查看更多干货