表格设计的六种打开方式,正确提升表格的阅读效率

作者:CQITer小编 时间:2018-03-11 09:00

字号

1482198340-9132-ee1CV66xCg2oubD3OTgC

1482198340-9132-ee1CV66xCg2oubD3OTgC

  在设计数据类产品、后台配置产品时,PD 常常会指着一块地方说「这儿放个表格,需要有balabala…」,而表格的结构不外乎这几种类型:

  垂直布局

  水平布局

  矩阵布局

1482198338-4036-PZHqHfYDTiYn5LAD4dA1

1482198338-4036-PZHqHfYDTiYn5LAD4dA1

  水平布局:邮箱是一种典型的强调行的表格设计,它弱化了列的概念,阅读信息的视觉流是从左到右,一条一条的阅读信息。这种排列方式强调信息的连贯性,适合大量信息的浏览。大多数的表格设计都属于这种类型。

  而垂直布局的表格比较讲究行与行信息的对比,多数在数据统计中出现。

  矩形布局的表格则是横竖都有明确的分割线,区块比较明显。适用于列信息较多的情况下,没有足够的空间用来分割信息时。

  对于像 CRM、数据后台类产品等­,表格的目的是为了满足用户浏览信息的需求。然而现实中的设计场景往往面临了许多情况:信息量过大,信息量过少等。同时设计师需要在表格的设计中思考如何让表格更易于阅读、在视觉上更适合现在的设计趋势。下面就主要从提升表格的阅读效率的角度给出设计方法。

  1、不要吝啬表格的行高,给页面「喘气」的空间

  适宜的行高使得数据更易于被阅读,但这不代表行高越大越利于阅读,行高的大小应该是与字体成比例的,在单行文字的情况下表格间距一般在字符大小的三倍以内。

1482198341-2320-nUeL3OtYAqzuwdVE92ki

1482198341-2320-nUeL3OtYAqzuwdVE92ki

  2、齐方式形成的引导线提升阅读效率

  表格内的信息纵向列对齐是能够很好的形成视觉引导线,这样的表格即使没有分割线也能在视觉上起到很好的分割作用。

1482198339-2311-GsMho7BgX5eoMRsKGL2c

1482198339-2311-GsMho7BgX5eoMRsKGL2c

  3、斑马线明确区分信息组

责任编辑:CQITer新闻报料:400-888-8888   本站原创,未经授权不得转载
继续阅读
热新闻
推荐
关于我们联系我们免责声明隐私政策 友情链接