`
WebAppTrend
  • 浏览: 54959 次
社区版块
存档分类
最新评论

如何一步一步制作出高品质Infographic?

 
阅读更多

译者注:Infographic就是 information+graphic 的组合,透过图像的力量让生硬的数据显出趣味与生命力,也让读者可以轻松的理解并在脑海中留下印象。无论是从Infographic备受大家关注还是从信息时代需要更有效的途径处理大量信息的角度来看,Infographic的制作教程都能够使你受益匪浅。

(知识储备:信息设计,图像设计  必备工具:图形设计软件(推荐Adobe Illustrator 项目工期:20 小时)

优秀的数据信息图可以是强有力的工具,用以快速精准地传递复杂的观点。Matthew Scharpnick Elefint Designs 的联合创始人,会在本教程中指导你制作出精美意义丰富的。

在以用户浏览短幅文章为主的Internet 时代, 我们如何在短时间内传递大量复杂、微妙的信息呢?答案是:使用一系列可视化信息图 表。

如果你注意过深受设计影响的刊物,像Good Fast Company ,或 Mashable ,你会毫无疑问地看到近几年来可视化信息图表如潮水般涌入 Web 。每天,你都能看到有关各种主题的可视化信息图表,包括政治、经济、通俗文化、科技、电影、运动等各个方面。往好的方面说,这些图像和数据的混合体具有引用户入胜并以小篇幅传递大量信息的效力。

很遗憾,这些信息图表中的大部分都是关于一些琐碎的话题,其中很多都忽视了信息设计的重要原则。在下面的教程中,我们会帮助你区分作品的好坏,并向你展示如果使用你的作品来制造非常棒的噱头。下面我用到的例子是Full Circle Fund FCF ),这是我们最近发布的公益作品,用以引导公众言论。

策略:要达到什么样的目的?主要针对那些目标读者?

所 有优秀的设计作品的关键在于,充分理解了作品要达到的目的。扪心自问,你是否真的需要可视化信息图表?为什么需要信息图表?你试图给谁什么人传递什么信 息?为什么这是最合适的媒介?在你着手进行设计之前花些时间了解读者和要传递的信息。信息图表用得恰到好处,带来的优势是显而易见的,比如说,即时是复杂 的问题也可以吸引用户关注,明确地地阐述出目的和某个方案或组织的活动,美观地展示出数据。一般来说,越复杂越丰富的数据,越需要更多的设计去简化它。一 旦你弄清楚策略,就要开始追踪正确的数据了。

教程样例:Full Circle Fund (FCF):比如,Full Circle Fund 的关键就是解释以浏览者感兴趣的方式,简单地解释这个组织和它进行的活动。

收集数据和综合分析

一旦你决定在你的项目中使用信息数据图,你要开始搜集会用到的数据。制作一个优秀的信息数据图,需要提出不重要的数据,并重点强调读者的需求。元数据可以根据你所制作的信息数据图的类型采取多种方式来表示。

FCF

为该特定的项目搜集数据意味着从PowerPoint 展示和网页中找出最重要的信息。 FCF 是个独特的模型,它把成功的专业人士集中在一起,提供时间、金钱、专业知识。使用简单有趣的方式吸引观众的注意是这件作品的重心。接着,我们通过查看辅助材料来找出内容中最重要的部分,并开始考虑如何把这几部分完美地结合在一起。

An example of a piece of existing FCF collateral

进入设计环节

根据Elefint 的 调查,我们总喜欢从草图着手我们的设计过程。这种方法允许你把所有的细节画到纸上,开始考虑使用一种最佳方式把所有的信息组合成为一致的主题。弄清楚作品 的重点和非重点是非常重要的。一些数据信息图把所有内容放在一起,做成一个可滑动浏览的文件,虽然有时候这些作品能够成为很棒的设计。但是一般情况下,我 们喜欢使用工具条把一整块内容分解成几个部分,使设计更简单易懂。

The content and presentation begin to come together in this sketch

一旦你了解了整个的流程,我们开始进入设计阶段,使用一些信息设计中最优秀的原则是非常重要的。到目前为止,我们所使用的设计理念的倡导人是伟大的Edward Tufte 。他的书对所有设计数据信息图的人士都大有帮助。

下面是一些我们需要经常考虑到的信息设计原则:

1. 数据密度 :你可以在一个小空间里展示出多少信息,并不破坏整体的美感?一般说来,你能够展示的信息越多越好。我们认为,最优秀的信息数据图能够把大量数据整合到一个故事中,来加深观众的理解。

2. 准确性 :一些图表,有意或者无意地,使用多重标准或者扭曲的观点展示数据,来误导观众。务必确保你的数据是正确的,并在设计中没有弯曲由数据得出的结论。

3. 易用性 :站在观众的角度思考一些问题。观众会在什么地方看到该作品?在网上还是 PowerPoint 的展示中?会有人想把它打印出来吗?这不知决定的作品的长宽比和大小,同时也鼓励你使用标识图案而不是文字说明,或者至少要把文字说明放在观众重新查阅的时候能够很容易找到的位置。

在做这个信息数据图之前,我们彻底抛弃了Full Circle Fund 的原有图表,因为图表中各种类型和文字段落,使内容有些复杂并且很难吸引观众的注意。我们使用友好有趣的人物和图标,为儿童提供更好更简单的阅读体验。再结合精选的内容,我们以一个简单有趣并且传递了丰富数据的数据信息图作为结尾。

The final design after a few rounds of revisions incorporating client input

PR

PR是一门自成一体的科目,在 Elefint 上,我们发现信息数据图尤其受某些媒体机构和博客的欢迎。 Google 搜 索中会出现很多在线平台定期发布数据信息图。除了这些,你还需要考虑到谁会关心你的信息数据图的内容。举个例子,如果你正在制作一个政治方面的作品,你需 要查阅政治方面的一些刊物。根据你的作品的主题进行搜索,你可能会发现一些机构为了使他们的文章内容更生动而添加的优美且具有启发性的数据信息图。

结论

近 来,数据信息图深受大家喜欢。根据我们的经验,最优秀的作品关于重要的主题,可以在此基础上小心选择内容,提出新的视角。最优秀的信息数据图把信息设计最 重要的原则和视觉设计的样式结合在一起,使用户易于理解并讨用户喜欢。当这些元素结合在一起,你会得到一件艺术品,它不但吸引人们的注意力并且促进重要问 题的理解。

原文出处:How to create great infographics

 

 

译文来源:http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注ITeye的同时,关注我们的新浪微博@WebAppTrend  http://weibo.com/webapptrend,Q Q群见官方博客右侧。
分享到:
评论

相关推荐

    RS485Infographic.pdf

    RS485是一种广泛应用于工业领域的通信协议,其在标题为"RS485Infographic.pdf"的文档中被详细阐述。RS485以其出色的性能和灵活性在各种设备间的数据传输中扮演着重要角色,如编程逻辑控制器、电机、焊接设备、建筑...

    RS485Infographic.zip

    硬件接口+总线+教程资料

    Infographic and diagram business design vector 28 (1).eps

    Infographic and diagram business design vector 28 (1).eps

    Growing_SQL_Server_Infographic ZH CN

    9. **高可用性与灾难恢复**:讨论SQL Server的高可用性解决方案,如镜像、复制、Always On Availability Groups等,以及如何设计灾难恢复计划。 10. **最佳实践**:总结在SQL Server管理和开发中的常见最佳实践,...

    MS Cloud Design Patterns Infographic

    通过更高的灵活性支持系统的随时间演化;并防止更新命令在领域级别引起合并冲突。 织物控制器模式(Fabric Controller):在云计算环境中,织物控制器管理虚拟资源的生命周期。它负责初始化任务所使用的资源,在...

    siemens-vehicle-to-x-communication-technology-infographic.pptx

    siemens-vehicle-to-x-communication-technology-infographic.pptx

    Machine-learning-infographic:动画机器学习信息图,是在卡内基梅隆大学的一名学生时制作的

    概述 这是我在卡内基梅隆大学上的一门名为“编程可用接口编程”的课程的资料库。 该课程提供了对用户界面和用户体验的强大而深入的介绍。... 我选择使用D3.JS,因为它具有我想从高保真模型中实现的功能。 我

    动漫专业毕业论文—MG风格科普动画制作的尝试.doc

    MG 风格科普动画在科普类动画中的应用非常广泛,科普类动画拥有很高的信息密集度,Infographic 是最好的载体,Infographic 就是 Information + Graphic 的组合,透过图像的力量让生硬的数据显出趣味与生命力,也让...

    which-programming-language-should-i-learn-first-infographic.png

    which-programming-language-should-i-learn-first-infographic.png

    ngc-gpu-cloud-infographic.pdf

    在当今科技迅速发展的时代,高性能计算(HPC)和人工智能(AI)已成为科学研究和产业创新的关键驱动力。为了推动这些领域的快速发展,NVIDIA推出了NVIDIA GPU Cloud(NGC),这是一个专为GPU加速的系统设计的云服务...

    FF0283-01-7-item-umbrella-infographic-template-16x9.pptx

    非常好用的资讯图表Infograph powerpoint 简报,Infographic (资讯图表) 是〝information (资讯) + graphic (图表)〞的组合, 简单地说, 就是将大量的资讯(数据或知识) 以视觉化图形来呈现, 期能让人快速、清楚,...

    Building-an-informative-Infographic-with-Power-Bi

    在IT行业中,数据可视化是传达复杂信息的关键工具之一,而Power BI则是Microsoft提供的一款强大的商业分析工具,专为创建引人入胜的仪表板和信息图表而设计。本主题将探讨如何利用Power BI来构建一个信息丰富的信息...

    Covid19_InfoGraphic

    在这个名为"Covid19_InfoGraphic"的项目中,我们的目标是利用Python编程语言来创建一个有关美国Covid-19情况的信息图表,帮助公众了解病毒的最新动态并减轻其引发的焦虑。 Python在数据科学领域有着广泛的应用,...

    网页设计与制作.pdf

    本课程旨在培养适应 ICT 发展需要,能够具备较高的数字内容产品策划、设计和制作技能的复合型人才,并具备较宽的传播与文化知识,正确把握网络传播法规与政策,熟练掌握网页设计的基础知识及制作技巧、网络推广和...

    INFOGRAPHIC-TCG-part-3-1.jpg

    基于 TPM 的可信网络连接技术规范

    INFOGRAPHIC-TPM-Part-03_2014-1.jpg

    TPM 相关技术规范

    Wecycle-Infographic

    【标题】:“Wecycle-Infographic” 【描述】:“Wecycle-Infographic”项目似乎是一个以环保为主题的信息图表设计,可能包含使用JavaScript技术来增强交互性和用户体验。此项目可能涉及数据可视化,通过图形化的...

    Growing_SQL_Server_Infographic_ZH_CN.pdf

    AlwaysOn是一个高可用性和灾难恢复解决方案,可以在发生故障时自动将工作负载转移到备份服务器,以确保业务连续性。此外,SQL Server 2017还提供了增强的读取扩展可用性组和备份加密功能,以增强数据的安全性和可靠...

    siemens-vehicle-to-x-communication-technology-infographic.pdf

    V2X通信技术通过建立一个覆盖所有交通参与者和基础设施的信息网络,极大提高了交通安全性和道路使用效率,并在减少交通拥堵和降低事故发生率方面展现出巨大潜力。这一技术的核心在于车辆之间(V2V)、车辆与基础设施...

    zero-trust-Endpoint-IoT-Security-Infographic-2020.pdf

    零信任安全模型是一种信息安全范式,其核心理念是“永不信任,总是验证”。在当今移动工作和远程工作场所灵活性日益增加的背景下,2020年网络安全生态面临着显著的挑战。根据2020年的网络安全报告,72%的受访者表示...

Global site tag (gtag.js) - Google Analytics