一个表格的自我修养

如题所述

第1个回答  2022-06-15

在处理一些信息时,为了更好地展示和传递数据信息,将表格作为载体来承载信息,使信息更易于阅读与理解。

在一些企业级的复杂应用里(订单系统、销售系统等),表格更是起着举足轻重的作用,它的易读性,便捷性、易操作性等对产品的体验都会产生重要影响。

问题来了,如何设计好 表格 呢?

在写报告、文章、邮件、PPT等地方都会经常用到表格。使用时,要让表格能够“ 独立存在 ”,即每个表格除了主体内容外,还要包含标题、数据来源等内容,在被用到其它地方时,即使没有上下文,仍能够被正确的解读。普通的表格(二维表格)通常由6个部分构成:标题、行标题、列标题、数据内容、脚注,数据来源。

但是在企业级产品中,用的更多的是简化版表格(一维表格),本文对表格展开的相关讨论也主要是建立在一维表格的基础上。一维表格的构成很简单,主要由2个部分构成:列标题和数据内容。

单线表格

双线表格

下面以双线表格为样表,从 视觉设计 交互体验 两个方面来具体谈谈如何做好表格设计。

首先需要明确的是,这边的视觉设计,并不是指对表格进行一些花哨,炫酷的色彩修饰,而是从用户的阅读、体验角度来对表格采取的颜色设计,辅助表格更好的展示与传递数据信息。

1、列标题颜色
表格的“列标题”与“数据内容”需要使用不同的背景色块,这样建立起来的内容分区,让用户对表格的结构一目了然,更易于对数据的阅读、识别。

3、数据内容颜色
表格中,数据内容的颜色一般都采用黑色,对于有操作功能的数据,或者是需要引起用户注意的关键数据,可以用不同的颜色来进行标识。科学研究表明,相比于文字,人对颜色的辨认、感知力更强。

1、居左对齐
列标题由一个个字段组成,因 字段值 的长短不一,所以通常会采用居左的对齐方式。例如“物品名称”、“规格型号”,“单位”等,同一个字段的字段值有长有短,左对齐一方面不会显得乱(相对于居中对齐),另一方面也符合人们从左往右的阅读习惯。

3、居右对齐
居右对齐只适用于一些 字段值 是数字类型的字段,例如“单价”、“数量”、“金额”等字段。为什么这类字段要居右对齐呢?

为了提高表格的可用性,满足用户对表格使用的深层次需求,需要对表格进行适当的功能扩展,提供更好的交互体验。

当查阅表格数据时,很容在数据的海洋中“迷失”(容易看岔行,数据间的定位、跳跃让眼睛很疲劳),这时需要帮助用户去定位、聚焦数据。可采用通过背景色对 当前定位的行 鼠标悬停的行 进行标识。

1、列扩展
使用表格时,A类型用户(例如:领导)只需要看一小部分数据,而B类型用户(例如:员工)需要看更多更详细的数据,怎么兼顾A、B类型用户的需求?如果表格只展示少量数据,B的需求得不到满足;如果展示更多更全的数据,对于A来说,会带来较大的阅读负担。

比较好的方法是,让用户自己去设置表格显示的内容,只看自己需要的数据。

2、行扩展
因屏幕空间的限制,通常一个页面中显示10行的数据内容,更多的数据是通过翻页来查看的。但是当快速查找数据,或对比查看数据时,翻页就显得非常不方便。此时,需要提供在一个页面上查看更多数据的功能。

用过Excel的人对 “排序” 功能一定不陌生,通过排序可以很方便的切换数据的阅读维度。例如上学时的成绩单,可以对“学号”排序,以“学号”的维度来查看成绩,也可以对“总分”排序,以“总分”的维度来查看同学的排名。

设计表格,并不是要将上述说的内容都加进去,而是要根据表格的数据类型,以及用户的使用需求,来做出最合适、最合理的设计。