将近一年浸泡在设计数据表格的相关需求中,踩过很多坑。深深地体会到建立完整的知识体系的重要性,不然就是这个坑踩着上一个坑,万劫不复。在这里总结分享自己的经验,助各位完美避开各种坑。

封面

表格的应用

我将从功能、交互、UI三个维度对表格设计进行全方位总结分析。

在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

由于工作原因,经常接触到表格。我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑关系,易于帮助理解横纵信息之间的关系。

前言

表格,又称为表,既是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。表的结构如下图:

那表格的使用场景:

  • 展现信息全面性。很多图表类型无法展示数据特点。表格无疑是组织大量信息通用性最高的一种表达方式,既可陈列信息,又可以表达信息之间的关系。
  • 编辑性大于易读性。需要对数据进行增删改查。
  • 需要对比数据。比如对比行与行之间的数据,了解两者差异。

一个简简单单的表格功能其实非常强大,也是非常复杂的。但是不管怎么样,我们不变的原则是:

  • 更直观地对比。通过交互和视觉对冗杂的信息进行优化,从而更直观形象地对比。比如隔行使用斑马线增强横向导视。
  • 更精准地计算。对于大数据量的表格,数据的精准度非常重要。比如根据提供的精准度要求,定义展示数据的小数位数。
  • 更快速地决策。比如在行列末尾增加汇总信息(总计或平均值),在每个分类里增加小计,可以让管理者一目了然地了解数据,快速决策。

表格的定义与用途

在实际的网页设计应用中,表格横纵相互独立又相互关联的模式尤其适用于:

功能

  • 添加数据。用户在原有的表结构中,增加一行数据。
  • 导出数据。根据业务对数据精准度的需求,定义一个导出规则。
    1.不保留数据格式化。比如该数值有五位小数,导入我们系统格式化为两位小数,这种方式导出后还是五位小数。
    2.保留数据格式化。比如该数值有五位小数,导入我们系统格式化为两位小数,这种方式导出后还是两位小数。

  • 显示字段。列数过多时,可以隐藏重要性低的列,更好的突出重要性高的列,主次分明,减少干扰。

  • 搜索和筛选。按预定目标过滤出某种具有特定性质的数据的操作过程,帮助我们实现对信息的快速分析。
1.简易搜索。适合筛选条件不明确和筛选频率不高的表格。尽量采用模糊搜索,降低操作成本。  
优点:灵活选择关键词,节省空间。  
缺点:可筛选信息不明显。  
2.高级筛选器。适合筛选条件明确和筛选频率高的表格。  
优点:曝光度高,操作成本低。  
缺点:占用空间大,不易扩展。  
3.组合筛选器。适合筛选条件不明确但筛选频率高的表格。  
优点:主次分明,搜索框可满足大部分用户需求,更高的要求有较深的入口,减少干扰。  
缺点:如果搜索不能满足大部分用户需求而需要高级筛选,必然增加了用户的操作步骤。  
4.列筛选器。适合筛选条件单一的表格。  
优点:筛选当前列,更直观。  
缺点:只能选择单列筛选。
  • 排序。设置查看数据优先级顺序,快速发掘最关注的信息。
1.文本排序。以首字母A-Z规则进行升序或降序。  
2.数值排序。以数值大小规则进行升序或降序。
  • 汇总信息。在原始数据上增加汇总信息(合计值或平均值),可以减少用户的计算,达到快速决策的目的。
1.行总计和行小计。在每个汇总类别的左侧或右侧增加一条总计列。  
2.列总计和列小计。在每个汇总类别的顶部或底部增加一条总计行。如上图。
  • 加载方式。避免全部铺开大量信息而影响页面的加载速度,影响用户体验。
1.复杂分页条。可以设置每页显示条数,适合大数据量。  
优点:用户不仅对于数据量有宏观上的把握,还可以灵活设置每页显示条数。  
缺点:分页条占用空间大。  
2.简单分页条。不可以设置每页显示条数,适合较大数据量。  
优点:用户对于数据量有宏观上的把握。  
缺点:分页条占用空间较大。  
3.加载更多。适合小数据量。  
优点:节省空间,沉浸式阅览。  
缺点:对数据量难以把握,操作不灵活。

表格的定义

表格是用来收集、整理、组织、分析数据的二维矩阵。一般来说,由行、列分割而成的单元格是构成表格的基本元素。表格的行、列之间相互独立又相互关联,充满变化。行与列形成了单元格的长与高,不同的长高有着疏密之别,进而使表格产生充实或透气之感。

1.组织和展示大量的信息

交互

  • 固定行列。根据7±2的原则,随着行列数增加,如果表头不固定,超负荷记忆信息会使用户遗忘信息。
1.固定行。行数过多,出现纵向滚动条时,用户需要了解行中每个数据对应的列字段名。  
2.固定列。列数过多,出现横向滚动条时,用户需要了解列中每个数据对应的行字段名。
  • 批量操作。批量选择记录进行操作。
1.记录条数。适用于所选数据较多,不重要的数据。  
优点:节省空间,直观了解所选条数。  
缺点:无法直观查看所选项。  
2.记录所选项。适用于所选数据较少,重要的数据。  
优点:可以直观查看所选项。  
缺点:占用空间,无法直观了解所选条数。
  • 查看详情。创建信息层级,只展现核心内容,非重点内容需要用户通过更深的入口查看。主次分明地展示信息,方便用户快速定位所需信息。
1.跳转。把
ID、名称等唯一性标志的指加上超链接,点击可以查看该条记录的详情。  
2.查看。在操作列中增加“查看”功能,点击可以查看该条记录的详情。
  • 编辑。对表格内容进行编辑。
1.直接编辑。点击内容直接编辑,适合易编辑性大于易读性的数据。  
优点:编辑时不影响查看其他内容。  
缺点:编辑空间有限,不适合编辑内容较多的数据。  
2.悬浮层编辑。点击单元格的“编辑”按钮,编辑该项内容。  
优点:编辑空间较大,编辑内容的自由度比直接编辑高一点。  
缺点:遮挡部分界面,无法看到上下文。  
3.弹窗编辑。点击操作列的“编辑”按钮,弹出编辑窗口。  
优点:聚焦操作,可编辑内容多的数据。  
缺点:遮挡全部页面,无法看到其他内容。
  • 反馈。鼠标悬停高亮底色,使得该行与行界限分明。强化了横向导视,解决列数过多引起数据错行的问题。
  • 精简表头。简明扼要的列名可以节省表头空间,避免“头重脚轻”的表格布局。
  • 显示长内容。当前页面信息无法展示完全。
1..浮层查看。适合查看较少内容。  
优点:灵活查看内容,操作成本低。  
缺点:影响查看其他内容。  
2.下拉查看。适合查看较多内容。  
优点:不影响查看其他内容。  
缺点:不能灵活查看内容,操作成本高。
  • 空单元格。要避免空单元格会给用户带来困惑,是零值还是空值呢?
    1.数据为零值,则单元格显示为0,而且数据格式(小数位数等)要与同列数据相同处理,方便与其他数据进行计算。
    2.数据为空值,则单元格显示为短横线“-”,表示空值。

  • 数据格式化。绝对精确的数据影响人们的阅读。我们可以根据客户需求和场景决定数据精确度范围。

1.显示为数值,设置小数位数,千分位和数值单位(比如万)等。  
2.显示为百分比,设置小数位数。
  • 对齐规范。信息更加规整,方便对比同列数据,提高阅读速度。
1.文本左对齐。符合从左到右的阅读文字习惯。  
2.数值右对齐。符合从右到左的对比数字习惯。有小数点按小数点对齐。可以方便用户进行心算,不需要转换阅读思维。  
3.固定操作按钮居中。  
4.表头与信息内容一致。(视情况而定,比如笔者设计的表格要考虑交叉表,选择了表头居中,交叉表的定义请看“复杂表格-交叉表”部分。)  
由于交叉表会在数值上套上好几层表头,所以下图错误示例中页面重量往右下角拉扯,造成页面不平衡,而且这个情况会随着套的表头层数越来越严重,所以我们选择了统一所有表头居中。

表格的用途

表格是常见的信息组织手段,是web页面布局的重要组成部分,可用于保存和展示少量或大量结构化数据、静态数据以及处于变化中的数据。具体说来,表格结构简单,分隔明确,可保证信息可读性,易于用户快速扫描浏览并获取所需;数据经过归纳整理和合理布局后,更易于用户感知分辨其中的差异与变化、关联与区别,并进行对比分析;交互层面,用户可以对数据信息进行排序、搜索、筛选、以及相关业务处理等复杂操作。

表格简单的结构不但能包含大量的信息,且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。

UI

  • 信息可视化。视觉元素能提高阅读速度。
1.状态显示。根据“7±2”原则,状态个数不能太多,不然人的记忆负担超负荷会适得其反。  
2.告警显示。超出阈值需要突出显示,提醒用户超标。  
3.变动显示。比如同步环比的正负值。  
4.感受显示。有些表达用户的感官评价,用icon更符合用户的心智模型,比如“满意”用笑脸icon,“不满意”用苦脸icon,总比用文字阐述直观吧。

  • 构建F型视觉流。通过视觉重量和视觉方向的组合来引导用户查看信息的轨迹。
1.突出表头。  
2.突出汇总信息。  
3.增加合适的对比度,区分行与行之间的数据。
  • 打造页面呼吸感。有利于控制用户的阅读速度,做到张弛有度,好像正在“呼吸”。避免大量信息毫无差异的堆积,从而使用户在阅读时视觉疲劳。
1.网格。通过物理实线割据内容。  
优点:更加直观,节省空间。  
缺点:物理割据显得不自然流畅。  
1)强调行。隐藏了纵向的线,不强调同列数据的上下对比,更加关注同条记录的阅读。  
2)强调列。隐藏了横向的线,不强调同行数据的左右对比,更加关注同个属性的对比。  
3)强调组。隐藏了同组的线,不强调同行和同列数据的对比,更加关注同组数据的对比。  
2.斑马线。通过填充底色割据内容。  
优点:在大量数据的表格中可以引导用户的视觉。  
缺点:在少量数据的表格中运用斑马线设计,用户可能会对高亮显示行产生困惑。  
3.留白。通过加大留白区域割据内容。  
优点:舒适自然,阅读流畅。  
缺点:留白区域不好控制,太小达不到效果,太大浪费空间。
  • 保证字体的可读性。
1.避免全大写字体,因为它很难读,需要转化思维。  
2.避免使用衬线字体,因为个性会产生阅读噪音,不利于用户对数据的理解和思考。  
3.避免使用斜体。易引起视线疲劳,影响阅读。  
4.避免使用多种字体。保持风格统一。
  • 消除视觉噪音。用户在处理数据时已接收大量的信息,多余的视觉符号容易对用户造成干扰。
1.避免不必要的视觉元素,无关的边框和底色。  
2.避免不必要的视觉效果,3D效果,阴影等酷炫效果。

表格的构成与布局

2.展示对比性信息

复杂表格

  • 图表结合。
1.在表格内嵌入图表,可实现部分数据可视化。  
2.在表格旁增加图表,根据表格数据与图表联动。
  • 交叉表。交叉报表是报表当中常见的类型,属于基本的报表,是行、列方向都有分组的报表。
在大多数产品中,我们见到的都是直联表(只在行方向有分组),基本可以满足大部分用户。交叉表出现的场景很少,复杂度极高,只要你的系统出现交叉表,很多规则要重新考虑。

表格的构成

内部构成元素

内部构成元素包括标题、表头、表体、表尾等。标题是对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等),以便用户对表格内容有整体认知。表头一般指列标签,这里也指首列行标签,是对所属行或列信息的描述。表尾一般是统计信息,例如总计、平均数等。

外部相关元素

外部相关元素包括筛选区、按钮区、底栏等。筛选区包含模糊搜索和条件筛选。按钮区的按钮可分为增删改操作和业务处理操作。底栏一般放统计信息、分页等内容。

通过合理的布局,表格能清晰的展示出同类对比信息,便于读者分辨不同条目信息之间的关联和区别,从而关注到关键、问题条目。

后记

表格的内容其实我才讲了一点点,只是给予各位一点启发,还有大多场景需要各位随机应变了,这里有几点想说的:

  • 没有绝对的规范,只有相对的规范。要适应自己产品的场景,选择最适合自己的规范。比如我的产品要考虑交叉表,然而制定对齐规范的文章作者从头到尾没讲到交叉表,我就要重新考虑这个规则的可用性。
  • 没有完全的规范,只有基本的原则。任何文章都不可能把所有的情况罗列出来,所以我们要理解规范背后的原则,推导出适应其他场景的规范,要知道很多事“万变不离其宗”。
  • 没有组合的规范,只有总结的规范。规范向来都是有理有据,比如“搜索和筛选”功能,很多人会将遇到的筛选的情况罗列出来作为类别,比如“时间筛选器+简易搜索”作为一类,下次遇到“时间筛选+下拉框”就分为一类,其实这是很片面的排列组合规范,而不是总结性的规范。

彩蛋:在微信公众号idatadesign后台回复“表格”(防止链接失效),可以得到数据表格设计的Axure源文件,希望能造福大众吧~

参考资料:
1.http://md.maxoxo.design/components/data-tables.html\#data-tables-interaction
2.https://design-nation.icons8.com/intro-to-data-tables-design-349f55861803
3.https://ux.shopify.com/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf
4.https://ant.design/docs/pattern/table-cn
5.https://www.biaodianfu.com/guidelines-for-designing-tables.html

表格的基本布局

一般来说,表格有水平型、垂直型和矩阵型三种布局。水平布局会弱化列的存在,强调信息的连贯性,保证用户阅读信息时视觉流是从左到右的,然后自上而下逐条扫描,适合大量信息的浏览。垂直布局是在行分割的基础上,通过强化列的视觉特征来突出行间信息的对比。矩形布局的表格有均匀而明显的分割线,边框单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息时。

总的来说,一个构造清晰的表格布局,将大大提升读者对信息的接收速度和理解程度

设计原则与目标

表格的设计集中体现在可视化(可读性)和易操作两个方面,好的数据表格允许用户对信息进行快速的扫描、查询、过滤、分析等操作,以获取深刻认知并快速准确完成目标任务。其基本设计原则是“全面整合并呈现业务数据,提供顺畅阅读体验,便于用户发掘重要信息,进行便捷操作”,简而言之,即“满足业务需求+符合用户心智模型”。

如果处理得当,复杂的数据也能让用户轻松浏览和比较;处理不善,简单的表格也会令用人难以理解。要平衡用户的浏览目的和设计者的传达目的,对部分信息进行强调或弱化处理。其中,如何让表格在表现层传达更好,考验UI的视觉表现功底;如何让表格在结构层更合理、在操作层更易用,则考验交互设计师的数据整合功力。

表格是为可读性而生的,一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。因此,设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。

例如下图中苹果官网对不同型号mac
book的信息陈列方式,就采用了表格的结构,清晰的展示了4款不同的macbook,及各自的性能、售价等属性,同时读者第一眼就可以扫描到并理解表格结构,横向是4款macbook的排列,纵向分别列出了各自的属性,然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比,信息完整且便于扫描。

设计技巧-视觉篇

亚洲城ca88 1

精简数据,明确信息优先级

虽然终极技巧是“在全面了解实际业务需求的基础上进行灵活设计”,但对于不熟悉业务的交互设计师而言,数据的取舍和处理却是最难的。对表格内容的取舍要建立在对业务的了解之上,尽量精简指标,隐藏不必要信息,减少干扰,避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量,尤其不要超出用户的视线范围,避免通过拖拽的方式查看信息。建议默认只展示用户所必须的信息,其他次要信息通过展开下拉等方式展示,为辅助信息提供深层入口。

如上所述,表格常用来展示大量的、对比性的信息,因此提高表格的可读性、便于用户快速扫描,是表格设计的关键。本文仅就笔者阅读过的几篇关于表格设计的文章结合工作中的一些拙见,整理成文,分享如下。

表头的优化

精简表头信息:表头标签应该简炼准确,以达到节省表头空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。如果精简后的生僻字段难以自我解释,可以跟一个释义标识,鼠标悬停时出现该字段的详细解释,同时满足新手用户、普通用户以及专家用户的需求。

情况允许时,去掉表头:如果表格数据可以自我解释,表头就不是必须的。

采用多级表头整合信息:数据结构比较复杂的时候,可使用多级表头来体现数据的层次关系。

功能复合型表头:除了容纳行标签之外,表头也可以包含排序、搜索、筛选等功能。

表格的要素

行的优化

合适的行高

行高是非常重要的参数,直接影响着阅读体验。较小的行高能承载更多信息,让用户无需滚动鼠标即可看到更多数据,但会降低扫描效果,导致视觉解析错误。适宜的行高使得页面更透气,但并不是越大越好。设置行高的原则是:A.单行显示时,数据显示紧凑、有序。B.多行显示时,弱化表格形式,提供丰富的视觉展现。因此,对于单行显示的表格,建议行高为字体高度的2.5倍到3倍;对于多行显示的表格,建议内容区到上下边框的距离略小于文字高度。当然,也可以提供切换按钮让用户自己控制显示密度。

横向斑马线

斑马线又称作间行换色、隔行变色、行交替样式。它能让行间界限更为明显,同时加强视觉流的横向引导,避免在阅读过宽表格时出现错行、迷失的情况,要注意两种颜色不能反差过大。另外,可以根据实际情况选择是否与1像素边框同时使用。

行的强调

有时为强调行内信息的连续性(此时不强调行间数据的对比),可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。此时,可以对行内信息进行扩充(例子:淘宝商品页),进一步弱化表格形式,丰富各类信息的视觉呈现,同时兼顾行与行之间的关键信息的对比。

研究如何提高表格可读性之前,我们先简要阐述下表格的组成要素,这里我们暂且这么总结:表格
= 标题 + 表头 + 行标签 + 单元格数据(信息),如下图

列的优化

合适的列宽

列宽的处理有三种方式。第一,可以按字段类型和内容给出固定宽度,如姓名100px,手机号150px,地址200px;第二,可以固定部分列的宽度,其余列则按百分比处理;第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。

纵向斑马线

即间列换色,是垂直版的隔行变色,用于强化列与列之间的差异,用处有限。

列的强调

一般列的强调是配合表格列排序功能使用的,如点击率、访问量的排序。有时会使用不同粗细的纵向分割线对信息进行区隔,增加同类信息对比性。

亚洲城ca88 2

分割线的处理

正确使用分割线可以实现对表格行与列的强调。首先,做纯粹客观的数据展示时会使用同样颜色和透明度的横纵分割线或斑马线,此时不强调单个数据或者数据之间的关系,避免带来错误的引导。其次,展示独立数据时需要弱化纵向分割线,会采用斑马线和悬浮高亮底色的方式以体现一条数据的完整性。最后,处理具有明确类别指向的数据时,在横线均匀分割的基础上,往往会用不同的纵向分隔线对数据进行分类区隔,以表达数据之间的类别关系。

表格标题是对表格整体的描述,应包含表格数据的来源及属性,使读者对表格内容有所认识,例如数据收集的日期、地区及其表格数据的其他属性。

对齐规则

合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐(符合格式塔心理学中相近原则)能够很好的形成视觉引导线。通过对齐,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。

按字符长度定义

按数据类型定义

其他特殊规则

行标签和列标签(表头)
是对本行/本列数据的描述,可以理解为是表格的骨架,是用户快速扫描并接收表格布局的关键要素。

数字的处理

数字和单位的使用

对数字字体而言,从高度上看可分为旧体数字与等高数字(旧体数字能很好匹配小写字母),从宽度上看可分为比例数字和表格数字(表格数字的每一个尺寸都相对独立,方便纵向对齐)。其中的关键区别在于数字“1”,为了更好对齐和对比,建议使用等宽的表格字体。数据的度量单位无需重复,只需要在表头标识清楚即可。

减少用户计算

对于进行对比分析的数据,在原始数据的基础上给出差值、升降变化、总计值、平均值等分析性的数据处理结果,直达用户获取信息的目标(需要明确用户目标),而尽量减少用户心算或者线下处理的过程,如股票数据变化,音乐排行榜等,能显著提升信息的阅读和理解效率。

空白单元格处理

一般指空数据或零数据的情况,空白单元格容易造成用户困惑甚至误解,用户会搞不清楚到底是没有数据,还是数值为零。正确做法是,对于不存在的数据,单元格不能空置,要用短横线代替,表示该项数据不存在,给用户明确指示;对于数据为零的单元格,要填上0,且小数点后位数、单位,都要与上下单元格保持一致。

单元格数据(单元格信息)这里就不在多说,是表格的主体内容。

设计视觉层级,高亮重点信息,引导读者视线

颜色的使用

颜色和可读性是密切相关的,所以要合理的使用颜色,尽量使用简单的背景色和点缀色。背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分。

足够的留白

既包括保证数据单元格之间的留白,又包括单元格内部(padding)留白,以保证易读性。

其他视觉突出手段

通过调整背景颜色、放大局部元素、颜色区分、icon点缀等手段,以及高亮强调重要的行和列,使重要信息突出,提高用户的阅读速度,帮助用户快速定位重点信息。

层级处理方法

通过调整标题、标签的字体,边框线的设计,底色的运用等,区分不同的功能模块,从而设计出合理的视觉层级,活跃表格氛围,引导用户的视线流动。

提高表格可读性的一些技巧

减少装饰元素,降低视觉噪音

信息内容的有效传达是表格设计的本质,就表格本身而言应该是隐型的,应该让用户注意力聚焦在核心内容上。所以,做减法设计就显得尤为可贵。

减少分隔线

水平分割线能显著减轻长表格在垂直方向的视觉重量,加快大量数值的对比工作。但如果在表格中使用适合的对齐方式,竖直分隔线完全是多余的。它们最大的贡献就是缩减元素之间的距离后也能区分不同元素。即使要用,也要非常淡,不能妨碍快速浏览。

不使用斑马线

使用不同底色区分指示不同类型的数据(如总和、平均值)是有必要的,但是斑马线在很多时候是没有必要的,因为它们是同一类数据,而且水平分割线就已经能够明显区隔。

尽量以黑白为主

运用彩色表达组织或含义可能会增加误解,并且引发视觉障碍者的易用性问题。

减少其他图形元素的使用

其他图形元素,如星号,三角,圆点,对勾,叉等,虽然能够帮助组织数据、更直观的传达信息,但物极必反,少即是多,要注意克制这些元素的使用。

1. 根据表格的用途,设计表格的布局

可视化趋势

图表的使用

除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。

卡片的使用

在信息量较少或特别多的情况下可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。

如下图,两张表格中所包含的数据完全相同,是关于10座山峰的高度和人类登顶年份数据。不同的是他们的成列方式:表1a根据山峰的高度排序陈列,而表1b则根据人类登顶山峰的年份排序陈列,一眼之下,这两张表无设计优劣高下之分,决定使用两站表中的哪一张的根据是这组数据的用途,如果这张表是用于向读者展示世界上的TOP
10山峰,则山峰的高度则是重点信息,a表的展示方式会更加合适;反之,如果这张表意在展示10大高峰中,哪座山峰是人类最先登顶的,人类先后登顶的时间顺序是读者的主要兴趣点,则表b就更加适用。

设计技巧-交互篇

亚洲城ca88 3

关键字搜索

用户可以通过输入特殊条件进行搜索,从而快速定位到所需的目标数据条目。搜索输入框尽量采用模糊搜索,不要让用户去辨认、识别要输入的内容。模糊搜索一般单独使用,或者和筛选区进行明显隔离后使用。筛选为主要场景时,搜索框可以作为筛选条件之一。搜索为主要场景时,筛选区可看做高级搜索隐藏起来。个人认为搜索和筛选同时使用在大多数情况下都是多余的,因为搜出来的结果已经比较明确了,而筛选一般有比较明确的业务目的。而关键的冲突在于触发方式的不同,筛选有“实时筛选”和“点击查询按钮触发筛选”两种,而搜索大部分是“触发搜索”,实时的比较少。

在样式上,搜索可以分为简单搜索、标签搜索、列标签搜索、高级搜索等四类。简单搜索由一个搜索框和一个按钮组成,搜索框内有提示语告诉用户可以输入哪些内容,支持模糊查询,可以实时搜索或触发点击搜索。特殊情况下,可以输入多个条件同时筛选,取并集或取交集。标签搜索指的是先选择搜索种类,再输入内容,由于每次只能对单一条件进行搜索,因此准确性更高。列标签搜索是指在一些特定标签上加上搜索框。高级搜索即点击更多展开更多筛选条件,减少了更多条件对用户的干扰,但降低了易发现性。

2. 减少读者计算

条件筛选

筛选按照触发方式可分为触发筛选和实时筛选,一般情况下,筛选条件存在交叉时使用触发筛选,不存在交叉时使实时筛选。但是在后台条件允许的情况下,发现型网站一般建议实时筛选,也可以根据筛选条件的数量选择合适的触发方式,比如条件少时用实时筛选,条件多时用触发筛选。

对于筛选条件有交叉的场景,建议采用展开形式,并手动触发刷新。对于筛选条件没有交叉的场景,当条件少于五个,采用tab切换;超过五个少于二十个,采用下拉选择;多于二十五个,为下拉选择添加模糊匹配,并且实时刷新。

其中,tab切换适合没有交集的内容,需要按照特定顺序分类,并保证分类覆盖所有情况,也不宜过多。对于需输入筛选条件的场景,如日期筛选条件,展示出来。下拉选择比tab占的空间小,但建议把重要项默认显示,下拉列表内也可以加入单选按钮或者复选框。表头筛选更节省空间,不过一次只能筛选一类条件。全部显示筛选项适用于输入项相对很少的情况。

其实类似上一点,表格的指标也不是永远固定的,而是从读者阅读表格的目的出发,调整所需展示的指标。在原始数据的基础上给出差值、总计等分析性的数据,可以直达用户阅读的目标,而尽量减少用户心算或者线下处理的过程。例如下图展示了2010年与2009年两年的公司财政报表,查看两年的具体数据当然必要,但深入分析,读者之所以要并列查看两年的数据,目的在于对比两年的数据变化,因此将指标变化情况列出能帮助用户更快的达成目标。

提供自定义列

为了满足多个角色在不同情况下的业务需求,系统往往采取宁多勿少的原则尽可能提供详细的数据给用户,结果造成表格指标过多,难以在一个屏幕内展示完全,需要横向拉伸,降低了易读性。在这个问题上可以采用的方法是给默认表格提供通用的字段指标,然后用户可根据自身所需添加或调整系统所提供的其它字段指标,让弹性化的表格满足用户的个性化需求。这样做首先可以让用户在表格上方看到所有的指标名称,避免了原来需要横向拖拽才能浏览到所有指标的情况;其次,用户可以根据自己的需要,自由选择所要显示的指标,隐藏不必要指标,减少干扰。有的表格除了自定义列,还允许自定义排序。

亚洲城ca88 4

排序

通过排序可以快速发掘出用户关注的信息,帮助用户发现信息条目之间的关系,提高关键条目的优先级。排序的列和不排序的列应该有明显区分,最好对某个重要列进行默认的排序。排序可以增加表格活力,一般有升序和降序两种方式。比较常见的是上下空心箭头表示默认,上箭头为升序,下箭头为降序。这种方式占空间较少,但认知有一定困难,且不适合排序方式较多的情况。排序方式较多时应采用下拉选择,因为这样信息展示最直接有效,且能减少反复操作的次数。

3.精简指标,创造信息层级

滚动与固定

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。设计大数据量表格时,不得不通过拖拽横向或纵向滚动条来阅读数据,此时,固定表格的表头或行标题列,可以帮助用户在阅读过程中清晰知晓单元格数据的属性。

表头固定

固定表头可以让用户明白当前单元格内信息的属性和含义,体现界面友好性。当数据列差异不大,用户不能直观的根据表格中的数据分辨出数据类型时,尤其需要固定顶部表头。当然,表头有操作时,固定表头更能提升使用效率。

首列固定

呈现大型数据时,横向滚动无法避免。固定属性列(一般为第一列或前几列)更方便信息的对比。

自定义固定列

作为高级功能,可以对列进行单独锁定,以便用户将数据与多个锚定标识符进行比较。

固定表尾和底栏

固定表尾和底栏可以避免页面无数据时的空洞。

尽量减少或压缩指标数量,避免出现用户不需要的数据,默认只展示用户所必须的信息,用户需要的非重点辅助信息可以通过提供深入细节的入口(弹窗、下拉)等形式来解决,仅在用户需要时进行提供。创造信息层级,避免无主次的铺出所有信息,干扰用户快速扫描定位目标条目。例如易迅的“我的订单”列表中,就将用户的信息、订单状态跟踪信息进行了默认隐藏,同时通过链接色很好的提示了进一步细节信息的入口,在用户需要时,可以方便的查阅。

查看详情

精简表格之后如何查看隐藏起来的次要信息呢?

展开行

展开行(Expandable
rows)允许用户无需打开新页面即可查看附加信息,防止用户迷失。

表格组节

表格组节(Table
sections)把相关的行组合在一起,并且能够收缩和展开,各组节层级要有样式区别。如果有需要,在每个组节里可以显示数据概要。

弹窗

包括模态弹窗和非模态弹窗,模态弹窗可以打开任一个条目进行详细查看,非模态弹窗可以同时打开多个,并允许拖动弹窗位置进行信息对比。

表格内部侧边展开

相比弹窗减少了页面层级和隔离感。

视图切换

可以通过视图切换查看更多细节,比如在“表格”和“左列表+右详情”之间切换,或者提供“只看文本,看文本和缩略图,只看缩略图”几种查看方式。

亚洲城ca88 5

数据的选择

数据的选择包括单选、多选和全选,一般通过复选框实现选择条目并进行批量操作。也可以进行整行选择,即点击某一行的局部能让整行被选中,这种做法可增大点击区域减少界面的混乱。

单选时必须给出明确的选中样式,而实际上纯粹的单选很少见,使用单选按钮的情况也很少,所以一般也可以使用复选框。多选自然是通过复选框实现,具体设计时,可以按照数据类型进行选择,如已读、未读等。全选时需要对数据范围进行限定,特别是遇到分页时,要明确是当页全选还是整表全选。

复选框一般放在左侧第一列,也有放在第二列(即序号之后)的,甚至放在右侧最后一列(便于用户在查看完一条数据后,决定是否勾选)。

4.不留空白单元格

数据的编辑操作

操作项一般存在于条目最后,以及表头位置,分别对应单条操作与批量操作的场景。

按操作对象分

单行操作和批量操作。对于单条数据操作频繁的场景,操作项不多于三个时,操作项跟在条目后面,常见操作仅用ICON,不常见操作用ICON+文字,当超过三个时,建议将操作折叠收起。对于数据批量操作频繁的场景,建议将操作放到表格顶部,与勾选操作配合使用。

按显隐性分

显性操作和隐性操作,显性操作的选项显示在行内,直观明显。隐性操作一般在鼠标悬停时或勾选后才显示操作选项,界面简洁明快,可减轻空间压力,减少干扰。

当表格单元格中没有相应数据时,要避免直接留出空白单元格。空白单元格容易造成读者的困惑甚至误解,读者会搞不清楚到底是没有数据,还是根本没有值?正确做法,没有数据的显示0,给没有值的单元格划线或者打叉。如下图:

底栏的处理

底栏紧跟在表格正文之后,主要展示正文中的数据量以及单页数据条目信息,同时,兼具一些导航的功能,指示当前所在页面以及跳转到指定页面。所以底栏最重要的元素就是分页,分页可以放在上部、下部或上下部均有,而分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。无限滚动有时可以替代分页,但更适用于发现型网站,但对于功能优先的应用程序未必合适。

分页可分为整体页码平铺式、全功能版、简易版等,需要根据不同的场景选择最优的设计方案,比如有的时候并不需要定点跳转,因为用户怎么可能记住自己想要的数据在哪一页。

参考:

1.Web页面中的表格设计,远没那么简单 http://www.woshipm.com/ucd/645427.html/comment-page-1

2.产品设计中关于表格设计的一些经验分享 http://www.woshipm.com/ucd/422496.html

3.表格设计的六种打开方式,正确提升表格的阅读效率 http://www.woshipm.com/pd/530280.html

4.糟糕的数据表格设计,它们到底问题出在哪里? http://www.woshipm.com/it/388185.html

5.数据表的用户界面最佳设计:设计结构、交互模式、技术列表浅析 http://www.woshipm.com/pd/661699.html

6.提高表格可读性的一些技巧 http://www.woshipm.com/it/29280.html

7.浅析7类数据表格的筛选设计 http://www.woshipm.com/pd/653433.html

8.表格的UI交互模式指南 http://www.woshipm.com/pd/476.html

9.表格可读性提升分析 http://www.woshipm.com/pd/430.html

亚洲城ca88 6

5.斑马条的运用

横向或纵向的斑马线以及悬停高亮底色能够很好的引导用户的视线,避免在阅读时出现错行、迷失的情况:斑马线会使得行与行的界限更为分明,尤其对数据列较多时的横向引导得到加强,这样看行内的内容时不容易错行,而悬停变色行主要是配合操作交互,明确区分出光标所在的行。

亚洲城ca88 7

6.高亮重点信息,提高阅读速度

通过合理的使用icon、背景色等视觉元素高亮重点信息,能够提高用户的阅读速度,帮助读者更快定位重点信息,例如下表中利用红绿的上下箭头很好的向用户表达了年度财务的变化情况。

亚洲城ca88 8

7.对齐,便于用户快速浏览

对比的数据如果有了明确的对齐方式,会大大提升数据的浏览效率,增加对比的效果。通常,我们将数据右对齐,便于对比:通过数字位数的长短即可对比数字的量级和大小;文字左对齐,符合人们阅读从左到右的习惯;而对一些固定长度的状态文字(如已完成,待支付等)采用居中对齐,使这些状态文字更突出。

像下面的图中,如果数据居中对齐没有明确的边界,阅读起来就会降低效率。

亚洲城ca88 9

经过调整后的下一张图中,我们就能看到,当数据对齐设计后,数据之间自动形成了规整的线,便于视线的流动。

亚洲城ca88 10

8.设计视觉层级,引导读者视线

通过调整标题、标签的字体,边框线的设计、底色的运用,从而计出合理的视觉层级,引导读者的视线流动曲线。例如下图:

亚洲城ca88 11

9. 坚持使用简单的矩阵布局,尽量减少视觉噪音

讲了很多通过表格style来提高表格可读性的方法,但是我们同时需要谨记的是,表格的主体是表格中所承载的数据信息,在进行表格的设计时,设计师们尤其要注意去除所有非必要的视觉元素,让用户将所有的注意力集中在数据信息上,而不是无关的边框、底色等。所有的视觉元素应该为更好的帮助用户阅读而服务,除此之外,再精美的设计都是对表格的破坏。

下图是个极端的例子,无谓的边框设计,大大降低了这张表格的可读性。

亚洲城ca88 12

第3点中我们提高,在取舍表格的内容时,要尽量精简指标,减少用户一次性接收的信息量过于庞大,尤其不要超出用户的视觉范围,通过拖拽的等方式查阅表格。但在实际想运用中,表格指标过多的情况,还是经常出现。但实在无法精简指标的时候我们能怎样提高表格的可读性呢,以下几个方法或许能有所帮助。

10.固定表头、标题列

当在阅读数据庞大的表格时,读者不得不通过拖拽横向或纵向滚动条来阅读数据,固定表格的表头或行标题列,能帮助读者在阅读过程中仍清晰的知晓单元格数据的属性。比如百度的涅槃系统提供了丰富的数据列,而如果缺少表头的说明恐怕会很快遗忘掉该列数据是什么。

亚洲城ca88 13

11.提供自定义选择

由于一份数据报表,往往需要满足各种不同的角色在不同情况下的需求,因而在数据内容上,一般采取宁多勿少的原则,即系统提供尽可能详细的数据给用户,由此就造成了表格指标过多,难以在一个屏幕内完整展示,导致需要横向拉伸,极大的降低了表格的可读性。在这个问题上,我们采取的方法是将所有的指标名称罗列在表格上方,并提供复选框选择,在默认情况下仅展示最常用、最重要的几个指标(如下图)。这样做的好处是,首先,用户能在表格上方看多所有的指标名称,避免了原来需要横向拖拽才能浏览到所有指标的情况;其次,用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。

亚洲城ca88 14

12. 提供搜索和筛选

提供表格搜索和筛选是帮助读者根据自身需求减少数据量的有效工具,用户通过输入自己所需的特殊条件,从而快速得到目标数据条目。

亚洲城ca88 15

13.提供排序

通过数据排序的方式,可以快捷的发掘出关注的信息,很好的帮助读者发现信息条目之间的关系,提高关键条目的优先级。这个方法不但在数据行多时适用,在数据量并不那么大时也同样适用。

亚洲城ca88 16

总结

  1. 从用户阅读表格的目标出发设计表格的内容和布局

  2. 从提高用户阅读速度的功能角度出发进行表格的视觉设计,避免过度设计

3.
当表格指标、数据过多时,提供一些自定义的工具帮助用户自助选择出最需要的数据条目

相关文章