web表格设计攻略

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

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

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

1、内部构成元素

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

2、外部相关元素

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

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

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

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

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

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

（1）精简表头信息

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

（2）情况允许时，去掉表头

如果表格数据可以自我解释，表头就不是必须的。

（3）采用多级表头整合信息

数据结构比较复杂的时候，可使用多级表头来体现数据的层次关系。

（4）功能复合型表头

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

（1）合适的行高

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

（2）横向斑马线

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

（3）行的强调

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

（1）合适的列宽

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

（2）纵向斑马线

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

（3）列的强调

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

编辑：cherlee