B端表格设计实战指南.docxVIP

B端表格设计实战指南 一、表格的介绍 1. 表格的定义 表格（Table）：又称为表，是用来收集、整理、组织、分析数据的二维矩阵；它既是一种可视化交流模式，又是一种组织整理数据的手段。 2. 表格的构成元素 通常表格的组成元素以及相关元素会有多个部分，笔者根据自己设计表格的工作经验将表格概括为容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分。 其各个部分包含的相关元素如图所示： 容器：包含表格的所有内容。 筛选区：包括搜索和条件筛选。方便用户快速查询定位数据，一般位于表格上方。 功能性按钮：比如常见的[新增]按钮和各种批量操作按钮。 表头：说明数据的内容，可以包含筛选、排序等功能。 表体：包含行和列数据，按列可以分为多选列、数据列、操作列。（多选列=多选框；数据列=呈现业务展现需要的信息；操作列=针对单行数据的操作按钮，比如管理、编辑信息等。） 底栏：包含数据量、单页条目、总条目、分页等，底栏数据也可以放置在表格顶部。 3. 表格的样式 1）几种常见的风格样式： a.网格型：表格有均匀而明显的分割线，边框单元格比较明显。 b.水平线型：仅显示水平线可减少整个网格的视觉噪声。 c.斑马条纹型：隔行交替使用不同底色来区分数据。 d.自由形式：移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。 2）关于样式的选取技巧 网格型：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。 水平线型：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度；因此对于所有数据集大小，此样式都是最常见的。 斑马条纹型：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法；对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。 自由形式：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。 信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。 所以，边框的颜色应非常淡，不能妨碍快速浏览。 二、表格的设计技巧 表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。 因此，设计易读、易扫视、易比较、易操作的表格结构是表格设计的首要目标。 下面我将以公司财务中台的表格改版为例，逐步说明表格中每个结构的设计。 这是改版前后样式对比图： 1. 筛选区设计 筛选区可以看作表格的导航，由搜索和筛选这两部分组成。 一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位——搜索更多的是对单一或者包含某个字段的的数据来进行定位；筛选则是用来查询一类数据。 根据MECE分析法，筛选区可以有以下的表现形式： 常用搜索少用筛选：若筛选项多，可以选择隐藏筛选项，筛选少可以展示出来； 搜索和筛选都常用：可以将搜索和筛选都展示出来； 常用筛选少用搜索：筛选和搜索同时展示； 筛选和搜索都不常用：展示搜索隐藏筛选。 1）搜索 在样式上，搜索可以分为简单搜索、标签搜索、高级搜索等三类。 简单搜索：由一个搜索框和一个按钮组成，可以输入一个或多个条件进行搜索。 标签搜索：在简单搜索的基础上加上标签，即先选标签，在输入搜索内容。 高级搜索：即点击更多展开其他搜索条件，减少了更多条件对用户的干扰，但降低了易发现性。 2）筛选 根据筛选的位置，可以分为标签筛选、表头筛选两类。 3）案例小讲堂 对于数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导致空间占比过大，影响了用户对表格信息的获取。 下面以我公司的财务中台为例，讲讲如何优化筛选区，希望对大家有所启示。 ① 版本中筛选区样式： 筛选条件全部展开，目的是让用户对信息进行快速的查询、过滤，以快速准确完成目标任务。但业务复杂，数据集过多少，筛选条件也相应增加（空间占比大），看起来非常冗余，不利于快速定位目标。 为了平衡扫描、查询、过滤、分析等这些操作，复杂业务的表格区筛选需要进行一定的优化处理，这样才能满足满足业务需求同时，又符合用户心智模型。 方案A：整齐划一 整合筛选项，采用表头筛选+标签筛选的样式，缩减筛选区的页面空间占比。 讨论结果：虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端： 数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。以财务中台为例，高频筛选功能已被遮挡（如上图），筛选前需先对表格进行横向滚动，无端增加操作； 应无法展示全部字段，用户无法清晰的感知到筛选了哪些内容，增加认知学习成本； 表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。 方案B：强调主次关系 采用展开式的标签筛选