7种方式玩转信息可视化中的时间线设计

时间常常被认为是一种主观的体验,然而在可视化的表达中,时间却成为了结构化维度。时间帮助我们构建稳健而直观的框架,使我们更好地建立事件间的联系。

7种方式玩转信息可视化中的时间线设计

按照时间线的方式阐述信息已经广泛应用于企业传播、营销的各个领域。从小扎、雷总介绍新产品,到日常做年报、里程碑事件的PPT,我们都能发现时间线的身影。或许你和我一样抱有疑惑:怎样才能将时间线用得出彩?那么今天我们不妨看看以下七种有意思的时间线设计。

时间线的构成

要玩转时间线,首先我们需要了解其四方面的构成元素:

  1. 描述时间的轨迹或路径:我们以何种方式呈现时间线,它的发展轨迹如果,如何体现时间的变化?
  2. 点或段的定义:时间线上排布哪些要素,某一个固定的时间节点如何展开?
  3. 文本或图形的定义:文本和图形所放置的位置,他们是否需要呈现某种变化关系?
  4. 标签和调用的定义:补充说明的标签如何植入,需要调用哪些图文来增强阐释?

三维螺旋时间线

7种方式玩转信息可视化中的时间线设计

在古时候,东西方的先贤已经用首尾相衔的蛇来表示时空的无尽,柏拉图形容衔尾蛇为一头处于自我吞食状态的宇宙始祖。而同样的螺旋方式也可以用在时间线的表达上。我们发现三维螺旋时间线能够更理想地刻画时间周期中其他要素的变化。在这个例子中,插图增加了地理、生物的演变,让整个历史周期的显得更为奇妙。我们在农业、工业产品制造中也可以通过三维建模地形式将生物科技、产品流程等不易观察的内容进行更好地展示。

交互时间线

7种方式玩转信息可视化中的时间线设计

这个精致的时间线显示了大英图书馆中的西方历史资源。用户在显示的顶部选择一个时间线,然后通过在底部的滚轴控制时间周期,最后选择一个图像卡,并访问该卡背面的信息页面。与大多数时间线不同的是,使用交互的时间线并没有描绘一个完整而庞大的时间路径,而是将他们打包好,卡片化地放置在最底层的时间线上布局。这样的形式可以用在目前的游戏、网页页面中。

棋盘时间线

7种方式玩转信息可视化中的时间线设计

一款当年盛行的大富翁游戏,将棋盘类的时间线深深地印刻在我们的记忆里。棋盘时间线浅显易懂、生动活泼,在设计上也能植入丰富的元素,因此是许多流程图、进程表、大事件表的理想选择。

大数据时间线

7种方式玩转信息可视化中的时间线设计

这个时间线描绘了从公元前1184年到公元3978年间的历史。要将这么庞大的时间脉络放进一个整洁的图上几乎是不可能的。因此设计师和艺术家们尝试用更为抽象的方式来描绘时间旅行。在银河系搭车手册、星际穿越、三体等许多著作里,我们都感受到了时间线是一个可以扭曲的维度,而在这张图里,便是用曲线和混沌的关系网来描绘时间的轨迹,并用颜色代表了时间旅行的方法。并非所有人都能看懂和接受这样的时间线图,但相信这个图的受众,大多数的科幻迷都会理解的。大数据时间线可能离我们日常所见的信息图稍远一些,但在数据分析越来越重要的当下社会,必将有更多的应用。

关系时间线

7种方式玩转信息可视化中的时间线设计

在哲学和艺术史的研究里,我们常常通过三种方法来判定一个人属于什么流派:他的风格如何、他推崇会跟随过谁、他处于什么时代。在这张西方文化史的时间线图里,背景形态刻画了各类流派存在的时间跨度,顺着时间线,我们可以点击查看各流派之间的冲突和融合。具有关系的时间线目前越来越多地搭配交互使用,在电脑端和移动端数据新闻页面上,均有过出色的实践。

甘特时间线

7种方式玩转信息可视化中的时间线设计

甘特图又称为横道图、条状图,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图,横轴表示时间,纵轴表示项目,线条表示在整个期间上计划和实际的活动完成情况。甘特图不仅常常出现在我们的Excel项目计划里,也在影音剪辑软件等界面上颇为常见。这张时间线图描绘了“美国总统选举的辩论情况”。设计师为此创作多重的时间表:左侧代表了选举年份,上方代表了辩论日程,下方代表了每个阶段的议题,并有一个简单引向图例的颜色代码。我们可以将甘特图运用于项目的规划上,同时也可以用来反映一个项目进行中的多层面事件。

复杂时间线信息图

7种方式玩转信息可视化中的时间线设计

在如图所示的趋势图中,时间线提供了一个框架,用于整合其他类型的抽象图形。混合的格式允许设计师添加新的维度,将相关信息与时间线相串联。与此同时,为了帮助读者区分图形类型,设计师需要增加更清晰的视觉引导,比如:图标、放大区域。在复杂的时间线信息图中,到底是帮助理解还是阻碍沟通,取决于信息是否能够按照逻辑聚焦。复杂时间线信息图常常用在企业墙、画册首页,用于介绍里程碑事件和企业的发展历程。

 

作者@当归视觉工作室Donegood_Studio

来源:http://www.36dsj.com/archives/32041

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/8840/

(0)
iouedioued
上一篇 2015-08-26
下一篇 2015-08-27

相关推荐

  • Axure RP软件安装教程

    Axure RP各种版本软件安装教程及下载地址:链接:https://pan.baidu.com/s/1AUHDQmeQejc9OMg7t2gmzQ密码:n29o

    2018-04-29
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • 用户体验设计师的进阶指南

    互联网行业大步流星、产品迭代周期越来越短,设计挑战日趋严峻。作为一名奋斗在前沿的设计师,你有多久没有更新自己的知识体系了呢?不论新人还是老司机,如何让自己的成长速度跟上行业的飞速发展,已然成为了一个重要命题。本文旨在帮助设计师正确、快速的成长,希望给进阶之路上的设计者们带来思考和启发(注:本文主要是指互联网产品设计、用户体验设计、交互设计、视觉设计等相关设计岗位)。我们认为,只有明确了努力的方向、找到了合适的方法、优化了学习的路径,才能...

    2018-03-14
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 千万级用户的视频体验,我们是这么做的

    如今app的更新迭代速度很快,因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化,且在功能上较难满足用户预期,因此需要在整体视觉和产品功能上进行相应的美化和完善,使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

    2017-05-26
  • 动起来才好玩——创意交互设计景观

    设计是靠亮点征服人,吸引眼球,大部分方案构思雷同,建成后风格水平都差不多,如何让场地更加吸引人而脱颖而出,这就需要在新、奇上下功夫。电子梦幻天幕世贸天阶最著名的“全北京向上看”的“超豪华LED天幕”,这座天幕将为整条商业街带来富于梦幻色彩和时尚品位的声光组合,成为一座吸引人潮的世界级奇观。建成之后,人们在这里可以欣赏缤纷悦目的日夜景观,感受现代科技带来的富于梦幻色彩和时尚品位的声光艺术。而且游客可以把想说的话发送短信到平台号码,天幕上就...

    2018-02-03
  • 交互进阶!如何扫除交互设计路上的3大障碍?

    Echo  :目前网上基本没有对做交互设计 师的难点进行系统的归纳和总结。基于这个原因我总结交互设计 师的三大障碍以及如何扫除交互设计 师路上的3大障碍。

    2017-09-14
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12
  • 在设计过程中,设计师如何输出一个更落地的动效呢?

    优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。

    2017-05-05