学好这 3 招，你也可以设计出好的表格.docxVIP

今天我们就来讨论表格设计中一个重要的问题一一【应该如何考虑表 格信息展示】。首先抛出结论，我们认为良好呈现信息的表格应当做 到疏密适度、高效扫视、精简克制。 一、疏密适度常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信 息Icon等。表格单元格是信息填充的基本单元，行高和列宽的定义决 定了表格信息的疏密程度，进而决定了表格给用户的直观感受，因而 下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。 1、定义合理的表格行高a、行高模数设定 斑马线即隔行（列）变色。它能让行（列）间界限更为明显，但由于 与分割线的作用类似，起到的作用有限，可针对不同场景酌情考虑是 否使用。比方针对不同类型的数据（如总和、平均值）使用不同底色 来区分，可以更突出强调该数据。要注意的是，隔行（列）换色的两 种颜色不能反差过大，否那么看来太“跳跃”。 对同一类数据而言，分割线就已经能够明显区隔，所以可不使用斑马 线，但需要给出单行的悬浮状态，强化横向导视，防止出现列数过多 引起数据错行的问题。 单行的悬浮状态，强化横向导视 3、突显重要内容的视觉重? 前面我们提到表格呈现的数据信息除文本外，还有其它一些可视化数 据。可视化一方面提升了列表视觉表现力，增加差异化，另一方面让 内容更加突出，提升阅读效率。例如：数据列中数据异常时，最好可 以醒目的形式突显，让用户一进入页面就能快速注意到异常状况。 Teambition平台中通过图标等视觉元素突出任务数据的紧急性 三、精简克制 体验好的表格一定是克制的，克制应表现在信息的适度隐藏以及内容 折行与截断展示原那么。 1 X适度隐藏信息 a.隐藏低频操作 当表头需要承载排序、表头筛选、提示等功能时，不建议一股脑的将 所有功能展示出来。用户对表头的诉求是定位数据指标 执行操作 的，因此可根据具体业务定义展示哪些操作，将其它操作隐藏，有需 求时用户主动触发再展示。比方，百度搜索推广平台的推广管理页面 提供了全局筛选，所以表头筛选对于用户而言是相对低频的操作，我 们选择隐藏表头筛选的图标，当用户鼠标HOVER表头单元格时再展 /卜O Hover时展示表头筛选操作 列名称1 操作列 状态V 内容列2 数据衷现 数据表现 总计 2090 300,679 列名称01 编辑删除 ?有效 列名称01 654 12,098 列名称02 编辑删除 ?有效 列名称02 654 12,098 列名称03 编辑删除 ?失败 列名称03 654 12,098 对于表格行内的操作我们也应当进行优先级排序，为用户专门设置操 作列展示高频核心的操作，其它相对低频的次要操作可隐藏在相关数 据单元格中，用户有诉求时hover对应单元格即可快速发起操作。 F Hover单元格展示对应操作 1 US推广对■?? ：点击：^9 ：平均总击饵幡：千次■现消费：：自动优化： 壮划名尊 01?MtfiHMI568465430000183.00183.005684米开店 tt划名稼02?网珞陋播568465430000183.00183.005684 0耒升启 it划名楼03? 山阳口 网络出槽568465430000183.00183.005633上开店 h b、隐藏辅助信息 表格中的有些数据指标是综合纬度的，当用户关注点定位于该指标 时，需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到 辅助用户更好理解数据指标的作用，但如果全部拿出来在表格列展 示，会让表格变得臃肿不易读，此时可以考虑采取一定设计手段去隐藏这些信息，把触开展示的自由度交给用户，也更符合用户逐级查看 的场景。例如，百度搜索推广平台中关键词列表中，质量度指标是由 多条数据共同决定的，我们采用了将细分指标聚合在气泡卡片中，当 用户HOVER质量度得分数据时展示出来。 再比方，有父子层级关系的数据，可以通过父子折叠表格将子信息默 认隐藏，用户根据需要，去展开查看详细的子信息。 父子折叠表格 关键词 推荐理由 推荐出价 整体 移动 计算机 竟争激烈程度 V关程同01 H马词，夜间词 5684.00 7899 476 132 89678 黑马词.夜间词 扁马词，夜间词 5684.00 7899 476 132 89678 黑马词.夜间词 黑马词，夜间词 5684.00 7899 476 132 89678 ＞关这词02 11马词，夜间词 5684.00 7899 476 132 89678 ＞关荏词02 E那么词 5684.00 7899 476 132 89678 2、设定折行与截断规那么 B端业务的数据信息复杂多样，信息内容的长度高度是多样不可控的, 很多内容会超出我们限定的最大列宽，最大列高，我们应当给出折行 与截断原那么去约束内容的展示，而非总是为具体情况而做特殊设计，