您现在的位置: 破洛洛 >> 建站学院 >> 网站设计 >> 交互设计 >> 正文

web表格设计攻略

作者:佚名 来源:chinaz 更新时间:2017-7-17
分享到

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

表格的定义与用途表格的定义

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

表格的用途

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

表格的构成与布局表格的构成

1、内部构成元素

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

2、外部相关元素

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

表格的基本布局

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

设计原则与目标

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

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

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

设计技巧:视觉篇

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

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

表头的优化

(1)精简表头信息

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

(2)情况允许时,去掉表头

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

(3)采用多级表头整合信息

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

(4)功能复合型表头

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

行的优化

(1)合适的行高

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

(2)横向斑马线

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

(3)行的强调

有时为强调行内信息的连续性(此时不强调行间数据的对比),可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。此时,可以对行内

转载请注明:破洛洛(谢谢合作)
网友评论: