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

相关推荐

  • 5个2016年UI/UX设计趋势

    随着“响应式Web设计”以及“Google提升移动友好性设计” 持续升温,在过去的一年开始流行的一些UI/UX设计趋势,将会在新的一年里继续流行下去。鉴于此,我总结了一下在2016年仍会持续大热的一些UI/UX设计趋势。

    2017-05-26
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • 五一福利大放送,再不收藏就没有了哦

    老板阿西太抠,说了好久才同意五一送福利,今天小编就放血,给大家送点福利,机会不是天天有该出手时就出手。 图标和字体想怎么用就怎么就,让设计不再孤单,要的就是这个范儿。 字体下载地址:http://pan.baidu.co…

    2015-05-01
  • 六个步骤,细说电商banner图设计之色彩的奥秘

    我们常常会说到做设计需要知道三大构成(色彩构成/平面构成/立体构成),设计又可以分很多个类别,比如网页设计/UI设计/电商设计/室内设计/工业设计等等,那对于电商设计有没有专门的三大构成呢?至今好像没有看到,所以我想尝试着梳理一下我脑袋里的知识点,专门讲解一下三大构成在电商设计中的运用,而今天我先从色彩在电商设计中的运用开始说起。

    2017-05-21
  • 原创服装设计师APP产品概念

    这是针对原创服装设计师的APP,作者感觉现在很少有专门针对他们分享自己作品和交流的平台。这是作者模拟出来的一个产品的概念图,还有很多不足,慢慢优化... 我们不光有原创,同时也是原创的搬运工。  

    2015-01-23
  • 以人为中心的沉浸式交互设计如何做?

    对于VR的产品中很多的的问题,我们并没有一个通用的解决方式,最好的办法依然是迭代、迭代、迭代!比如头部参考系:它通常定义了一个透明的光标来定位屏幕坐标系。
    又比如虚拟现实坐标系:由于我们容易在虚拟世界中迷路,所以放一个指南针在脚下使得用户一直有方向感是个不错的选择。
    还有躯干参考系:我们可以把信息和工具放在躯干的周围,使它一直跟随着用户,这样当用户低下头时就能看见他需要的东西。
    此外,现实世界参考系:我们可以提供和现实世界有着稳固联系的线索来减少VR眩晕,通过现实参考系可以减少用户看到的和感觉到的感知冲突。

    2017-05-21
  • 从9个方面聊聊用户体验设计的发展

    今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验 设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-29
  • 解读互动行业,鲜为人知的我们这样做网站

    大浪淘沙,就像2.0时代最火的人人、开心网没有把握移动互联网的机遇纷纷衰败,转型脚步落后的互动公司也逆流而逝,很多互动设计师都被迫找寻新的方向。本文作者将给大家介绍什么是互动设计,为什么要那样做网站以及互动行业的兴衰史。Infecting your screen for your enjoyment
    为你的愉悦而感染你的屏幕被遗忘的是
    那些放开手的人
    被遗忘的是
    放开手的人梦里南柯,且无痕,浮生若是;
    生非苦短,知天命,则无所怠。

    2017-05-13
  • 视力设计:如何为弱势群体做包容性设计

    世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。

    2017-05-15