从表格入手，快速提升B端后台数据的易读性和易操作性体验（二）

　　本篇文章通过9个方面，告诉大家如何在设计时提升表格的易操作性。
　　接上篇已讲完了表格的易读性设计。
　　附上全文整体的框架图，大家可以参考这个框架直接定位自己感兴趣的内容，有选择性的阅读：
　　一、表格的易操作性
　　表格的易操作性，设计时可从如下这9个方面来考虑：
　　1。搜索
　　当表格的数据量较大时，可增加搜索功能来提升用户查找数据的效率。
　　建议采用模糊搜索，精确搜索对用户记忆要求太高，适用的用户较少。
　　如Adwords所示，不仅提供了模糊搜索，还为用户提供了跳转的快捷方式：
　　2。筛选
　　也称数据过滤，常在数据量较大的场景中使用，须事先定义好筛选的过滤值。
　　搜索是筛选的一种，其过滤的值是关键字，考虑到部份场景搜索与筛选不需要共存，故本文将筛选和搜索进行分开阐述。
　　根据筛选功能的位置不同，可分为表上方筛选和表头筛选。
　　2。1表上方筛选
　　筛选功能位于表格上方，与表头筛选的不同之处：过滤值可以不限“表格列”的内容、可单次进行多列的交叉筛选。
　　如Adwords在2018年的新版中，将之前表头筛选合并成统一的入口置于搜索的右边，便于用户结合搜索一起使用，非常复杂的数据筛选可借鉴此种方式：
　　如淘宝卖家中心的表上方筛选，可以单次进行多列的交叉筛选：
　　如FC财务后台的表上方筛选，筛选项并非“表格列”，这些筛选项无须以数据列的方式放在表格，那样会对显得表格的数据冗余：
　　2。2表头筛选
　　放置在列标签上的筛选，受“表格列”内容的限制，仅能做单次单列的筛选。
　　如Antdesign所示：
　　3。数据细分展示
　　与筛选、搜索相反，细分是用户根据自身需求增加数据量、查看明细的方式，通过细分设置可快速获得目标数据的详情进行解读。
　　如Adwords所示，提供了数据细分查看功能：
　　4。排序
　　4。1拖曳排序
　　常用于数据量较小，有拖曳排序需求的场景。
　　如Antdesign所示：
　　4。2表头排序
　　可以辅助用户快速挖掘出关注的信息，发现数据信息之间的关系，一般可按数字大小、字母首字母顺序、数据的特征等进行排序。
　　如果表格中不是所有数据都能排序，则需要标识出可排序的列，一般采用箭头做为标识；
　　每次单击顺序相反；
　　实时反馈当前排序中的状态；
　　排序的箭头一般置于列标签的前方，若涉及换行，排序的箭头须另起一行进行展示，确保可见。
　　如Adwords所示，以有效程度对状态进行排序，因为Adwords平台中所有表格列都可以进行排序，无须标识可排序的列；同时采用向上、向下的箭头实时反馈当前列的排序状态是升序还是降序：
　　5。行数据的选择
　　5。1hover态
　　整行的hover态应与默认态有所区分，当前行可操作的按钮状态同步Hover态。
　　如Adwords所示：鼠标hover，整行的颜色发生变化，将当前行与其它行进行区分。可操作的按钮同时为hover态，明示用户可操作的内容及功能：
　　5。2行的单个选择
　　标识选中行及选中行的数量，选中行可操作的命令状态须同步，如禁用态切换成可用态等。以Adwords为例：当前选中行前面的复选框会变成选中态，表头反馈当前已选行的数量，明示当前行可操作的命令：
　　5。3行的批量选择
　　提供选择当前页所有行、选择全部所有行、全不选三种功能；状态反馈分未选态、半选态、全选态共三种。
　　以Adwords为例：用户未进行选择时，表头的选择框的状态是未选态；当用户选择1行数据时，此时表头的选择框的状态切换为半选态，同时反馈已行的数量；当用户在表头勾选“当前页所有行”时，表头的选择框切换成了全选态，且给出了选择“全部所有行”的操作：
　　6。行数据操作
　　6。1新增
　　一般需要突出展示，便于用户快速定位，比较复杂的后台须将多种创建方式收纳，如Adwords所示，点击“”，可以创建此表格中的多种类型数据：
　　6。2修改、删除
　　数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷，同时便于批处理和单个操作。
　　数据量较小，或仅支持单行数据操作时可放在行的尾部或头部进行操作。
　　如Adwords所示，将行的操作均放置在了表外部上方：
　　以FC为例，把行操作放在了行的尾部：
　　当遇到禁用态命令时，需给出解释：
　　7。单元格数据操作
　　单个、高频、轻量单元格操作，可以直接在表格的单元格内直接操作，一般处理的数据较为轻量。
　　7。1数字数据编辑
　　如Adwords所示，采用含命令按钮的浮层进行处理：
　　7。2文字数据编辑
　　修改内容的体量小可直接用浮层。
　　如Adwords所示，采用含命令按钮的浮层进行处理：
　　7。3数据选择
　　如FC所示，采用了浮层进行处理：
　　7。4状态更改
　　如Adwords所示，采用了浮层进行处理：
　　7。5查看详情
　　数据体量较小可直接用浮层处理，如果数据的体量较大则采用替换式面板方式进行处理。
　　（1）体量较小的详情查看，如Adwords所示：
　　（2）体量较大的详情查看，采用了替换式面板进行信息的展示。
　　如Adwords所示：
　　7。6跳转链接
　　可用于多张表之间跳转、或更深层内容的下钻等。
　　如Adwords所示，文字链接非常便于用户在三张表之间跳转：
　　7。7其他操作
　　单元格批处理、低频、重数据操作，可统一放置在表头外部上方以菜单的形式集中处理。
　　如Adwords所示：
　　8。数据下载
　　为方便用户对数据进行再次整合分析、统计分析等，可提供数据下载功能、及多种下载格式。
　　如Adwords所示：
　　9。空表
　　在表格的空白内容处加入创建的快捷入口，引导用户新建。如Adwords所示：
　　比较轻量的方式，是直接示意用户创建数据，无须给出表格样式，如FC的财务后台所示：
　　没有创建诉求的，直接告之暂无数据。
　　如FC的财务后台所示，数据是系统产生的，不是由用户创建的，直接告之暂无数据，话术的表述则需与后台文案的整体风格保持一致。
　　参考文献：
　　刘平（2017）《WEB表格设计攻略》计算机与网络