恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
大数据可视化的交互思想
0.0°
2016-05-12 原创文章 经验/观点 举报 4843 7 14 0

在这个信息爆炸的时代,作为交互设计师,我一直钟爱数据以及它的表现形式,因为它理性,真实。透过数据的各种展示方式,我可以构建用户场景,向用户传达信息,让以数据为载体产品体验更加优越。要想了解交互设计的数据可视化世界,首先要了解下面的问题:

为什么我们的大脑偏爱图形呢?

“人类学家会告诉我们:人类通过大脑的视觉系统, 可以迅速的识别、贮存、回忆起图形信息,本能地将图形信息中的理念转化为长期记忆。”

数据可视化的表现形式多种多样,但万变不离其中,一般定量研究的数据比较容易被做成三种类型的图表:折线图,柱状图,饼状图。通常折线图多用来反应数据的变化趋势,柱状图多用来反应数据的数值比较,饼状图多用来反应数据的组成成分。了解了这些基础图表的的特性和用法,才能在此基础上演变创新。企业级产品可以利用数据可视化实现信息高效传播,能帮助用户更持久的记住这些信息。我的日常工作处理最多的是人事变动和财务的数据。

现在,我以比较简单的柱状图为例,和大家一起探讨数据可视化设计的小技巧并分享工作中设计的一些案例。

常见柱状图有哪些?

柱状图的结构是怎样的?

如果想应用一种图表,就要了解这种图表是怎样产生的,由哪些元素构成的。柱状图的基本架构是由两个维度变量构成,即我们看到的横轴与纵轴,并且这两个维度的变量组中的子集是一一对应的。此外,我们还可以利用柱状图的各种元素向用户传达各种信息,例如柱状图的高度(相对高度,绝对高度),宽度,面积,颜色,填充纹样等。

柱状图适合表现那些数据?

一般情况下,柱状图多用于反应数值的对比关系,具体可以归纳为以下三种:

1.数据随着某一变量的规律变化或不规律变化

2.不连续数据间数值的对比

3.部分和整体的对比

通常数据可视化并不是由一种图表构成的,而是由多种图表共同说明一个问题的。下面通过两个案例来诠释柱状图的应用与特性。

案例一比例柱状图的直接应用

例图1中所示为公司内各种角色某一时间段内离职的数据。

一般情况下,交互设计师得到需求后最先要判断的是这一组数据是定量分析所得还是定性分析所得,这是一个很关键的环节,因为它直接决定这组数据的界面交互方式。根据需求,我判断这一组数据是定量分析所得结果,需要展示的信息有以下三点:1.离职总人数 2.各种角色的离职人数 3.各种角色离职占比。可以归类于不同数据间的对比与部分与整体的对比两种关系。Image title根据这个结论,设计师就要思考怎样将这些信息传达给用户。考虑到用户的特性和数据的样本,根据调研得知用户最想得到的信息为“各种角色离职占比”,因此选择了比例柱状图。图中灰色的背景柱状图用于展示离职总人数,前面带有颜色的柱状图展示各种角色的离职数据,并在每个柱状图的顶端直接显示已经计算好的离职占比。用户所需信息一览无遗。与此同时,当鼠标聚焦于每个柱状图时,彩色柱状图呈现从零开始的加载过程,通过动态的微交互增加产品的趣味性,并向用户传达这些数据是实时更新的理念。Image title

例图2为员工在公司内部同他人的亲密度信息,

上图所示看起来和柱状图的关系不大,但实际确是变形的柱状图,利用气泡这一隐喻设计改变了柱状图的外观,可以让这组柱状图样式更加生动,更好的表达数据,并且更容易让用户理解。

主要有以下几个设计点:

1.用不同的颜色表现员工的不同种类(是否同一部门)

2.将数值展现在横轴上

3.用图例和颜色承载更多的信息

4.移除纵轴,刻度和网格线,减少不必要的视觉噪声元素

以上是数据可视化设计中的一些小故事,总而言之。对于企业级产品而言,数据可视化是很有效的工具,它可以用来分享信息,说明问题,智能分析数据并提供指导性的结论。面对不同的用户,设计师应根据需求的特性来确认数据的展现形式与交互方式,并且用数据讲述一个让用户印象深刻的故事。

更新:2016-05-12

收藏

7人已收藏

DongPia

用户不是上帝,而是朋友。

  • 6

    作品

  • 2

    粉丝

  • 22

    关注

  • 小粉猪
  • 路径动画—倒计时
  • 卡哇伊
  • 刚做的动效练习一枚
相关标签
经验分享

    猜你喜欢

      2016-05-12 原创文章 经验/观点 举报 4843 7 14 0

      大数据可视化的交互思想

      0.0°

      你确定要举报大数据可视化的交互思想

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年05月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录