IT技术博客大学习 共学习 共进步

轻触,数据美丽的外衣

阿里巴巴(中国站)用户体验设计部博客 2012-03-31 23:32:36 浏览 2,644 次

    数据之美

     “我生活在一个拥有7,080,360,000人的星球上,这是关于他们的故事,

     现今平均每人会对7.4个人说2250个词,人们会发3000亿封邮件

     190亿条短信,加起来可组成1个巨大的马赛克图案……”——《触摸未来》(最近很迷的一部美剧)

    没错,在这个信息爆炸的时代,借助图形化的手段,高效和清晰的交流信息是数据可视化的目的所在,作为一种信息载体,她拥有对数据的多种表现形式,可以是美丽的且带有趣味性的,以前对于数据在图形上表现只是停留在饼图、柱状图和直方图等简单的视觉表现形式上,为了更加有效的传达数据信息,帮助用户理解引起共鸣,依附与目前多媒体的科技手段,可视化的表现形式从平面到三维,媒介形式从纸张到网络以及视频,在互动性及时效性上都不断发生着变化。

    当然,之所以将数据的外衣称之为美,也并不意味这对于她的表现仅仅只是拥有华丽的视觉外观而已,而更重要的是能把握好外观与信息本身功能之间的平衡关系。有学者认为这是理性与感性、“美”与“用”结合的一种设计方式,我很赞同这样的说法,如果对于可视化的设计只是为了漂亮而绘制出图形复杂内容空洞的数据图形是没有任何意义的。

    

    上图为David Mccandless在Informationisbeatiful上发布的《怎么样做出好的可视化设计》。

    曾看过不少的相关类型设计文章,都对于可视化的设计方式拥有一个比较同一的说法——关注视觉上的信噪比,这也许是所有视觉传达设计共有的一个核心概念,将其衍生到数据可视化的设计领域应该就是将文字,图表、图形等核心的关键元素予以强调并清晰表达在媒介之上,弱化或者去除没有必要的符号,线条,列表等,而后再对信息根据不同的纬度(平面或者立体)划分并重组,逐步对数据进行视觉化的呈现。

    对于数据的可视化并不是很新的一种设计表现思路,在史前时期的洞穴壁画中的体现到土耳其地区公元前7500年出现的地图再到1786年威廉普莱费尔《The Commercial and Political Atlas》数据型图表、1861年卡尔斯拿破仑东征(征俄)的信息图表等都表现出了可视化设计的雏形,历史的沿革一直带动着此类设计的发展,到了现代随着科技日新月异,对于各类设计的划分及定位也逐渐细致,可视化以其美丽雅致的外型、对于特定人群所关注的信息清晰定位才再一次成为了众设计师们关注的焦点,我们也才可以通过更加多的设计手段对于这类设计进行更好的呈现。

    

    上图为商代甲骨文象形文字

    

    上图为经典的卡尔斯拿破仑东征(征俄)信息图

    说了那么多可视化的好处,难道到她就没什么弊端吗??答案是否定的,可视化的优势在我看来是图形语言的传播速度比较快,而且范围广, 一般的语言文字无法相比,但对于相对复杂的可视化数据图表,必须要针对特定人群绘制才能降低理解的成本,而在这一点上语言文字相对而言更具有普遍的适配性,(这跟咱们平时的icon绘制很相似,如果绘制的图形不能很好的映射当前功能的操作,那不如用文字来清楚明白),并且数据可视化是一门综合的学科,并不是单纯靠视觉上的表现能解决所有问题的,她涉及数据采集、统计学、动画、三维建模、制图学,影象学等等,一旦要立项所涉及的成本还是挺高的,在项目的任何一个环节都需要比较高的专业度去完成,才可以拿出一个比较好的作品。

    数据的可视化是一种让人痛并快乐着的设计形式,作为一个视觉动物,我一直为其漂亮的外部表现形式所折服,网上也找一些案例,根据不同的表现形式及自己的个人的理解进行了归纳和分类与大家分享。

    动态视频的数据可视化案例:图形阐释音乐

    互动型的数据可视化案例:与电脑玩剪刀石头布

    

    http://www.nytimes.com/interactive/science/rock-paper-scissors.html(有兴趣的同学可以去玩一下)此类设计形式重在突出用户参与性、娱乐性及信息的实时性。

    静态的数据可视化案例:根据视觉呈现的样式进行划分

    

    (极区图):视觉上的特点是以中心为基点,向外发散,构成图形好像花朵也称为玫瑰图。

    

    (桑基图):视觉上的特点是图的始末端两端的宽度相等

    

    (矩形式图):顾名思义都是方块状的格子,在大小色彩上对信息进行区分

    

    (热力图):这类图是一种使用冷暖色来映射二维变量,以便于做出聚类分析的图像,擅长用于体现频率、密度等

    

    (树状图):感官上比较象树根的分支,可以描述事件的进程或者数据的流程等

    

    (HyperbolicTree图):美国施乐公司的专利,可用Java和JavaScript的实现,上图为阿里巴巴中国站首页HTML的结构图表现。(蓝色:链接A标记,红色:表、TR和TD标签,绿色:DIV标记,紫:图像IMG标记,黄:表格、输入、文本区域、选择和选项标记,橙色:换行符和引用文字BR、P和BLOCKQUOTE标签,黑色: 源码所有其他标记的HTML标记,灰色:根节点)

    

    (气泡图):使用点形的设计元素,以大小色彩密度的变化描述数据状态

    

    (地图):最根本的设计元素使用的地图,常与起泡图的形式组合出现,描述地址位置、交通及人口分布、收入分配等

    本文对于可视化案例整理及分类只是冰山一角,根据不同的信息纬度去划分还有非常多的设计形式,比如按时间线、情感化的因素或数据内在关联性等等。(欢迎同学们组队拍砖)

    写在最后,一直很喜欢日本的一位设计大师-原研哉,用他的一段话与各位设计的同学共勉:设计师的任务就是提高信息的品质,增强传播的力量。技术的进步并不能直接带来信息品质的提高。“如何更容易了解?如何令人更加舒适?如何更为简单的传达?如何才能让人感动?”这些才是衡量设计师的信息处理能力的尺度。创意并不是要让人惊异它崭新的形式和素材,而应该让人惊异于它居然来自于看似平凡的日常生活。不断的开发出这些创意才是真正的设计。

建议继续学习

  1. 海量数据面试题举例 (阅读 10,827)
  2. 三种东西永远不要放到数据库里 (阅读 7,866)
  3. 如何对统计数据进行分析 (阅读 4,983)
  4. 从数据中了解用户——数据在新产品设计中的应用 (阅读 4,304)
  5. 数据即代码,我和小伙伴们都惊呆了! (阅读 4,307)
  6. 从数据中了解用户——数据在现有产品改版设计中的应用 (阅读 4,203)
  7. 给数据穿上美丽的外衣 (阅读 3,623)
  8. 浅谈信息可视化――航空篇 (阅读 3,484)
  9. 我们需要什么样的网站数据 (阅读 3,403)
  10. iOS可视化编程 Tips 之“无需代码设置圆角” (阅读 3,402)