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

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

  • 垂直布局
  • 水平布局
  • 矩阵布局

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

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

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

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

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

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

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

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

4、在排序的方式上采取提示说明

上图为一种最常见的表格排序方式,是默认为上下空心箭头,上箭头为升序,下箭头为降序,这种排序方式的好处是比较节省空间,但是由于在使用中带来的许多认知上的问题,多数网站对其进行了改造。

5、区分信息获取的优先级,通过下拉表格显示过多信息

对用户阅读信息的行为方式进行分析提炼出常被阅览的信息,区分优先级,对整体信息进行聚类排放,这样做的好处是隐藏不必要指标,减少干扰,对用户的使用情景进行判断从而根据不同的情景下提供相应的信息。

6、信息卡片化

在信息量较少或特别多的情况下可以尽量不用表格,用卡片的形式来展示信息,将信息以组的概念呈现,单独卡片内的内容可看做一个小组根据视觉的优先级进行排列,不受外部排列方式的影响,如下图的卡片方式。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2016-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术总结

UIKit Dynamics 置身真实世界

25710
来自专栏大数据文摘

手把手 | 教你爬下100部电影数据:R语言网页爬取入门指南

2687
来自专栏编程

前端开发者常用的 9个JavaScript 图表库

英文: Anton Shaleynikov 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/top-9-javascri...

3385
来自专栏CDA数据分析师

教你掌握Excel中最为重要的逻辑 ——「链接」(一)

如果把Excel比作武侠小说中的“剑”,那么按照武侠小说中御“剑”能力的高低程度可以大致将剑客分为以下几个等级: Level 1(剑客):小说中常见的劫匪甲乙...

2257
来自专栏Material Design组件

Human Interface Guidelines —— Collections

35011
来自专栏GIS讲堂

当我们遇到问题的时候改如何解决

问题 在Openlayer3中直接加载PNG图片,在API中提供了ImageStatic可以将图片展示出来,但是如何设置图片的imageExtent让图片能...

1462
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

4167
来自专栏我有一个梦想

UE4新手编程之创建空白关卡和添加碰撞体

让我们接着上次继续学习UE4引擎,今天我们学习下怎样创建空白的关卡以及添加碰撞物体。 一. 创建空白关卡 1) 点击文件 -> 新建关卡(或者按快捷键Ctrl+...

2669
来自专栏Android机动车

Android的16ms和垂直同步以及三重缓存

手机屏幕是由许多的像素点组成的,每个像素点通过显示不同的颜色最终屏幕呈现各种各样的图像。手机系统的类型和手机硬件的不同导致UI的流畅性体验个不一致。

1692
来自专栏数据小魔方

数据透视表入门

今天跟大家分享有关数据透视表入门的技巧! 数据透视表是excel附带功能中为数不多的学习成本低、投资回报率高、门槛低上手快的良心技能! 对于日程的排序、汇总、...

3276

扫码关注云+社区