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

相关推荐

  • 当与需求方争论时,UX 设计师的正确姿势该是怎样的?

    在我们平常的设计工作中,和需求方产生各种争论的情况很常见,双方都比较偏执强势的时候,很容易陷在各自的立场中,谁也说服不了谁;如果设计师本身就离自己负责业务的用户有一定距离(比如大多数的 B 类产品),就更容易在需求方面前陷入被动。这种时候,我们更需要从自己的专业思考角度走出来,用科学的方式去收集、分析、定位、验证问题,洞见问题本质,来和对方更好地达成一致。产品经理 A:我们的首页好久没改版了,要不要来点动作?
    设计师:好啊好啊,我也正想和你提议呢,早就看不下去了!
    (省略双方需求沟通过程若干字)
    ***进入设计评审阶段***
    运营:哎,这个内容对我们推广 XX 很重要的,怎么能去掉呢?
    产品经理 B:我负责的这块业务你是不是漏掉了,要首页首屏重点透出!
    产品经理 C:你要考虑万一某某用户来访怎么办,他们的诉求得满足~
    老板:我需要什么什么感觉,没体现出来啊!
    设计师:塞这么多东西用户都想看吗?
    众人:我不管,这块内容很重要的!
    ***设计师吭哧吭哧改了一版新的***
    众人:感觉好复杂啊!是不是还是别改了……当所有人都觉得一匹更快的马已经够用时,该如何说服他们接受相对昂贵、不容易习惯的汽车呢?

    2017-05-02
  • 用户体验与seo并重的域名选择

    谈及网站域名的选择,在搜索引擎优化中,域名权重一直是困扰SOE优化的难题,因为域名权重和其他外部、内部优化不同,并不能在短时间内取得很好的效果,但是各大搜索引擎在各自的排名算法中,对域名权重“估分”却是较为重要的。在域名权重被提及初期,很多优化们使用各种各样的方法,对域名权重是否真的存在进行了繁杂的测试—毕竟各大搜索引擎的排名算法是绝对的核心商业机密,是不可能公开所有细节的。据了解经过各种测试,最后的结果均表明,域名权重在搜索引擎排名中...

    2018-04-20
  • 从我个人经历来说,交互新人需要注意这3点

    当你做完交互稿的时候你可以不停的讲述给自己或者另外一个人听;在这个反复的过程中你就会发现你的交互稿中的漏洞。

    2017-05-25
  • 一名交互设计师的日常思考方式

    如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。

    2017-05-05
  • 什么样的文字聊天,才是一种好的阅读体验?

    本文不是要讨论IM产品的体验设计,而是聊天内容本身的阅读体验。××(我的姓名)

    手机号:186××××××××

    身份证:360103××××××××××××××(我的姓名)

    手机号:186 ×××× ××××

    身份证:360 103 ×××× ×××× ××××姓名:××手机号:186××××××××身份证:360103××××××××××××在UI需要手绘?不会手绘不行吗投简历没有回应 是不是 经验不够ui规范有那些啊 ios andriod都要看啊在吗在吗、没有作品怎么办啊?“滚滚长江东逝水……”“说人话!”“大河向东流哇!”

    2017-05-13
  • 用AB测试改进用户体验设计,做出正确决策

    本文转译自TubikStudio,全文有删减。设计师们每天都在面对一些难以抉择的情况。面对这样的问题,有经验的团队会对两者进行测试,来确定哪种方案最好,其中一种流行的方法是AB测试。AB测试将用户分成两组,每组都显示不同的版本,一半看到A版本,另一半看到B版本。AB两个选项的差异根据产品经理来决定,可以是颜色差异,也可以是位置差异等。两个版本的有效性可以用浏览量、点击次数或其他数据来衡量。对于设计师来说,这是分析目标受众群体行为模式和特...

    2018-02-24
  • 重要交互设计原则

    不管是开发者还是交互设计师,每一位从业者都想要创造让自己自豪的产品。为了改善结果,两方人员一直在重新思考整个开发流程,要求有更好的工具、更好的指南、更高的权限。交互设计的强大力量不容置疑。它能让用户在工作、娱乐和交流之际,获得难忘、有效、简单,以及有益的体验。设计原则:1. 用户界面应该基于用户心理模型,而不是实现模型。2. 目标导向的交互设计反映了用户的心理模型。3.交互设计不是凭空猜测。4.不要让用户感觉自己愚笨。5. 界面设计的关...

    2018-03-01
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 《设计之下》之交互总结

    作者:ManUx 拖了很久的读书笔记总结,总算稍稍总结了一下。有些内容都已经开始模糊了,每次重新再看的时候,又会发现跟之前不一样的理解。这篇读书笔记主要是对《设计之下》交互部分进行总结,书中基于搜狐新闻客…

    2015-08-18
  • 经验分享|利用品牌基因法进行图标设计

    在看这篇文章之前你需要清楚,我所讲的东西并不是什么权威,只是在工作中总结出来的一些的小经验而已,制作图标的方法也有很多种,这里只是给大家一个思路上的启发,希望能对你有所帮助吧!

    2017-05-06