起点学院课程

如何设计数据类页面?

4 评论 1.2万 浏览 54 收藏 10 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

对于数据类页面来说,首要注重的应该是页面信息,其次再是各种功能操作。那么页面信息又有什么搭建框架与要点呢?笔者将为我们进行分析。

信息才是页面的主角,不要让功能操作喧宾夺主。

而数据展示类页面比较特殊,相较于常规页面信息量更大,设计方法与常规页面还是略有不同,总结了一些设计思路,结合实例分享一下。

这种页面设计比较考验产品能力,如果只是摆数据就没意思了,产品经理需要让数据类信息清晰易获取,且简单易懂,才能让用户用起来。

一、明确信息点-用户关注什么?

注意是用户的关注点,不是数据项。

数据是产品设计中的产物,而用户期望的并不是数据,而是获取最终处理后的信息,也就是用户的关注点。所以先整理出用户的关注点,不要直接将数据项罗列出来。

一个页面往往承载多类信息,建议将信息分类梳理,逐步细化。

1. 明确大类信息点

信息是分层级的,为了避免遗漏,我们先找到大的关注点,也就是大类信息点,然后逐层拆解。

如何明确大类信息点?取决于用户需求和产品目的,也就是用户需要什么 和你想让他看到什么?据此确定功能的关注点,这一步建议多花时间想想,否则后续都是白搭。

直接上例子,这是一个作业查阅页面-教师查阅学生们单词学习计划的完成情况,这样一个页面教师的关注点是:计划做没做 和 做得怎么样,也就是计划完成情况和单词掌握情况。

2. 拆解大类信息点

大类信息点往往是比较笼统的,不具有落地效果,需要进一步拆解,用子信息点来支撑大类信息点。

如何拆解?

原则就是寻找能支撑大类信息点的子信息点。不同的业务会有不同的拆分维度,但原则是一样的,拆解成可落地的子信息点。

如下图,将上述大类信息点拆解成子信息点,采用 总体 和 当日 作为拆分维度,最终拆解出对应的子信息点。

二、搭建信息面-将信息点组织为有效信息

零散的信息点是无效的,将信息点有组织地呈现给用户,才有价值,也就是信息面。

先说一下我所理解的信息面,信息面=能清晰且完整地表达出信息价值的信息点组合。

信息点是存在关联的,我们需要明确组织成什么样的信息面给用户才是最高效的,在常见的设计中,一般可以分为重要信息面和次要信息面。

  • 重要信息面:用户关注度很高,一般是对页面具有高度概括性,让用户可以快速获取页面概况,又或者是特殊关注的重要信息;
  • 次要信息面:用户关注度一般,对概况信息起到详解或补充的作用,可以全面阐述页面信息。

这是常见页面的信息面层级划分,并不是所有页面都这样,有些页面也会是同等级的信息面,这个取决于你的业务需求和产品目标,可以灵活调整。

需要注意的是,一个页面可能会同时存在多个同等级信息面,比如两个次要信息面,就是两个同等重要但表达不同内容的信息面,这种情况我们就需要根据业务需求,再排列优先级,在设计中体现出侧重。

回到上面的例子,搭建起两个信息面:重要和次要信息面:

重要信息面是是全班信息面,次要信息面是个人信息面,在后续的设计中,要利用整理好的这份信息框架,让信息点支撑起全班信息面和个人信息面,这对用户来说才是一组有效信息,而不是杂乱无章的信息噪点。

三、确定数据项-建立信息点和数据项的关联性

从信息点整理出了信息面,那么信息点又从哪里来呢?

一开始也有说,数据只是产品设计的产物,并不是用户想要的,但我们终须从数据出发,将其转化为信息点,这就需要我们建立起数据和信息点的关联。

要做的就是,确定什么数据项能代表这个信息点。

如下图,产品经理根据对业务的理解,确定各信息点的对应数据项,这样就完整地将原始数据转化为可读的信息点了,最终再搭建为易读的信息面。

四、设计页面-将信息框架落地到页面上

最后一步,有了整理好的信息框架,接下来该如何落地到页面上?

根据自己的设计经验,有以下几个方法论分享一下,目的只有一个:让用户高效获取到想要的信息。

1. 信息有结构,就像写文章一样

好的页面信息就像写文章一样,是有类似于“总分总”或者“总分”结构的,读者可以很自然地读懂这篇文章。

页面就是文章,信息就是文字,页面信息怎么铺就是文章结构,“总分总”还是“总分”结构好,看你对业务和用户习惯的理解。

前面我们梳理了一份信息框架,接下来就开始转化为实际页面:

  • 首先,将全班信息面(重要信息面)放在了顶部,作为整页信息的概况;
  • 然后,将个人信息面(次要信息面)放在了下面的卡片中,作为概括信息的详解,但没有将原始的次要信息(右图)冰冷地摆给用户,而是进一步提炼了用户想要的信息,所以在左图中你很少看到数字,更多的是可视化图表和重点关注用户名称,这样可以让用户更高效地获取信息;
  • 最后,将又臭又长又啰嗦的表单放在了二级页面,让那些少数具有高阶数据需求的用户也可以获取到最全面的信息。

不知道你有没有看出来,我在用“总分”结构呈现这个页面,将信息从一个点逐渐拆给用户,类似于金字塔结构。

一个好的页面一定是有结构的,将梳理好的信息面有结构地铺在页面上,这样就完成了从数据项->信息点->信息面->实际页面的完整流程!

2. 数据可视化,不要直接摆数据

字不如表,表不如图,是亘古不变的的道理,从原始数据里去获取信息是很累的事情,可以尝试通过可视化图表来呈现数据,比如解决上述例子中的个人信息面-学生掌握词量的信息呈现问题,用下图所示这种类似于成绩分布图,可以让用户快速获取到班内学生的掌握词量分布,这是用数据项很难传达出来的。

要善于使用可视化图表,尽量避免让用户自行处理复杂难懂的数据项。

五、最后,总结一下

数据类页面设计方法:

  1. 明确信息点,找到用户关注什么,从大到小逐层细化;
  2. 搭建信息面,将信息点组织为信息面,使其成为有效信息;
  3. 确定数据项,建立信息点和数据项之间的关联;
  4. 设计页面,将整理好的信息框架有结构、可视化地落地到页面上。

 

本文由 @十八线产品 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 写的很好啊

    回复
  2. 逻辑清晰,一看就懂

    回复
  3. 清晰透彻,非常棒!

    回复
  4. 写得很清楚,赞!

    回复