不止于美:浅析信息图形设计

人在喝完可乐一小时内会有什么反应?高速发展的中国互联网在一分钟内会发生些什么事情?美国大选,川普和希拉里的支持率到底有多大差距?信息图带你一分钟搞懂这些事!随着经济技术的发展,信息化科技化速度越来越快,信息量的不断增加,使我们对于信息的整理与识别要求也越来越高。繁忙的工作生活下,如何使信息更为直观的提供给用户,信息图形设计在这种环境下应运而生。


人在喝完可乐一小时内会有什么反应?高速发展的中国互联网在一分钟内会发生些什么事情?美国大选,川普和希拉里的支持率到底有多大差距?信息图带你一分钟搞懂这些事!随着经济技术的发展,信息化科技化速度越来越快,信息量的不断增加,使我们对于信息的整理与识别要求也越来越高。繁忙的工作生活下,如何使信息更为直观的提供给用户,信息图形设计在这种环境下应运而生。

不止于美:浅析信息图形设计

一. 什么是信息图形

信息图形设计就是针对内容复杂、难以描述的信息进行充分的理解、提炼、整理、分类,并通过设计将其视觉化,通过图形简单清晰地向用户以更为直观的形式展示,这种图就叫做信息图形。

信息图形由信息和图形两个词语组成,它被称之为“信息图形”(Infographics或Information Graphics)。信息图形最初是用在报纸、杂志、新闻等媒体刊登的一般图解。图解这个词在国内外使用了多年,它只是为了充分利用信息,而将这些信息进行功能性的整理。有时候,信息图形也会运用符合各种文化习惯的比喻等手法,以不同的形式来表达。这种信息图形能使用户有惊喜感,也更容易理解、印象深刻。信息图形设计不仅从功能上满足人们对于信息的直观了解,同时从感官上带给人们更多的视觉享受。

二. 为什么要进行信息图形设计

1. 简化复杂的概念

面对复杂的事物,如何快速了解它到底是什么,有什么用?利用图形能使你快速理解信息,专注于信息结论,获得更轻松、更聚焦的阅读体验。

不止于美:浅析信息图形设计

2. 让用户记得更多更牢

相比于文字,人们能够在同等时间内记住更多信息图的内容。如下图中,禁止游泳的图形和两行文字,很明显,图形获取信息的速度快于文字。而且,图形的颜色很直观的传达了危险的信号。

不止于美:浅析信息图形设计

3. 易传播

一张信息图相当于一张创意海报,收藏、转发都是分分钟的事情,在手机、电脑、易拉宝什么地方都能清晰展示。

不止于美:浅析信息图形设计

4. 对比更清晰

这个事物和那个事物有多大区别?一条条的文字说明看起来太麻烦,来张图吧,简单明了的多。

不止于美:浅析信息图形设计

三. 信息图形的分类

根据木村博之的定义,从视觉表现形式的角度,将“信息图形”的呈现方式分为六大类:图解(Diagram)、图表(Chart)、表格(Table)、统计图(Graph)、地图(Map)、图形符号(Pictogram)。

不止于美:浅析信息图形设计

1. 图解(Diagrams):主要运用插图会事物进行说明

有些东西仅靠语言是无法有效传递的,但是通过图解就能很好的传达你所想要表达得信息。下图是一张健身动作图解,48 种健身动作,图解是每个健身动作。少去繁杂的文字解释,直接用图解表示,直观明了。

不止于美:浅析信息图形设计

2. 图表(Charts):运用图形、线条、及插图等,阐述事物的相互关系

图表是将复杂的信息进行整理,使之一目了然的表现形式。它运用线条连接或区分事物,利用箭头指示方向,将事物之间的关系表达得足够清楚明晰。流程图就是典型的图表。

下图是一张胎儿成形的发育图,巧妙的运用了图形变化和线条的顺时针转动向我们展示了整个过程。

不止于美:浅析信息图形设计

3. 表格(Table):根据特定信息标准进行区分,设置纵轴和横轴

表格是指按照一定的标准、规则设置纵轴与横轴,将数据进行罗的表现形式。

不止于美:浅析信息图形设计

4. 统计图(Graph)  —  通过数值来表现变化趋势或者进行比较

常用的统计图有三种,根据主要功能,可以将其分为两大类。第一类是为了体现变化或比较关系的柱状图及折线图;第二类是用于体现某种要素在整体中所占比例的饼图。

不止于美:浅析信息图形设计

上图,是某活动页面的信息图形展示,通过这些柱状图和折线图,我们能很清晰地看到通过这个活动页,用户从参与、领取优惠券、下单到成功支付的比例是怎样的,以及订单的金额和新用户的参与情况。

5. 地图(Map) :描述在特定区域和空间里的位置关系

将真实的世界转换为平面,在此过程中必然要将一些东西略去。实际上,要说“省略”是地图上最关键的词也不为过。无论是哪种信息地图,最重要的是让用户找到想要看到的信息。信息地图也可分为两大类:第一类:将整个区域的布局或结构完整呈现的地图;第二类:将特定对象突出显示的地图。看看以下美国大选中的美国地图吧!

不止于美:浅析信息图形设计

6. 图形符号(Pictogram):不使用文字,直接运用图画传达信息

所谓图形符号,基本就是利用图形,通过易于理解、与人直觉相符的形式传达信息的一种形式。我们在街上、商场里、机场、医院,经常会看到图形符号,有些是指示方向的标记,有些是安全出口之类的标记。图形符号的设计原则是尽可能不使用文字,避免语言不通造成困扰,图形要易懂。

不止于美:浅析信息图形设计

小结:信息图形的设计,基本是运用这些元素设计的,有的可能用了其中一个元素,有的可能用了几个元素,有的信息图形可能涵盖了这六大元素。一个好的信息图,不是为了做一个好看的图表,而是讲好了一个故事。归根究底,还是那句话:形式跟随内容。

四. 什么才算好的信息图形设计?

2009年2月,由国际新闻媒体视觉设计协会(SND)主办的新闻视觉设计大赛在美国纽约州Syracuse举行, 评审结束后,图文设计组的专家们总结了他们认为的在制作理想的信息图时应该考虑的五大要素:

1. 吸引眼球,令人心动

庞大的信息量充斥我们的生活,一张信息图的设计如果没有特色很快就会被淹没。因此,不论是从结构出发,还是趣味性,抑或是色彩冲击力,一定要有足够吸引人的地方,首先让用户产生兴趣。不管是展示什么样的信息内容,都要加入一些让人耳目一新的元素。

注:但需要注意的是,刻意的追求不同也是不可取的。

不止于美:浅析信息图形设计

这是一张facebook社交图,美国的facebook friendships(脸谱好友)度是最高的,而非洲是最低的。南极洲和俄罗斯基本上看不到,其他地区相对比较明显。

2. 准确传达,清晰明了

想要传达给用户的内容,还没有在大脑里面好好思考就急于去设计,其结果就像一个人说话文不对题一样。用户遇到这种设计的时候,很难从你的设计中提取到有效信息。设计重心不明确,设计就会显得摇摆不定,注定做不出好的图形。所以在信息图形设计中,要学会取舍,要给用户传达一个最想要传达的主题,然后将这个主题巧妙的表现出来。

不止于美:浅析信息图形设计

Kantar Media CIC,在上海发布了「60 秒看中国社会化媒体表现」信息图(上图)。该信息图提供直观全面的中国社会化媒体表现,帮助客户更好地了解中国社会化媒体平台每天产生的数以亿万计的数据 。

3. 去粗取精,简单易懂

根据概念去推敲创意时,其要点在于要从庞大的信息量中将真正必要的信息甄选出来。所谓“真正必要的信息”指的是那些能使用最少的信息使效果最大化的内容。好的设计,读者只需扫一眼就能知道其主旨是什么。因此,我们要有快速从信息中抓取最有价值的元素。

简化也不单单只是对信息内容进行简化,表现手法也可简化。如下图,关于咖啡种类的说明,通过一杯咖啡的图形样式,不但直观的表现出不同种类咖啡的成分组成,而且各成分之间的比例关系也一目了然。

不止于美:浅析信息图形设计

4. 依据视线,眼动规律

这一点要求我们注意视线的移动规律。比如横向排版的信息,人们一般会首先注意左上角。因此,标题一般出现在这个位置。看过左上角之后,用户的视线会往右下方移动。我们在排版布局的时候,应该遵循视线的移动规律,人眼在观察物体的时候,目光不会只聚焦在一点上,而是会覆盖焦点周边的一片区域。把时间的流逝感和视线的移动相结合,就能产生更好的效果。

不止于美:浅析信息图形设计

5. 少用文字,用图释义

一幅信息图很少或没有没有文字信息,其内涵也能被用户充分理解,这才不失为最理想的信息图,这张图在全世界范围内使用,也不会有什么问题。因此,我们在信息图形的设计过程中,不采用大篇幅的文字,而是尽量使用图形。在信息设计中,确保在语言不通的情况下也能让读者无误的理解信息内容,这是信息图形设计所要追求的目标。

不止于美:浅析信息图形设计

图中通过箭头的方向表示非洲出口的目标国,并且通过箭头的大小对比来表现不同的出口增长率。文字信息很少,却能很清楚的传达信息。

总结

在信息图的制作过程中,设计只是其中的一个环节而已,清晰明了地传达主题才是我们设计的核心内容,掌握这些技巧是为了实现这个最终目的。信息图形的设计也并不是随意而为,它是一个循序渐进的过程,主导设计全程的并非只是美感和创意,而恰恰应该是理性思维。因为对设计而言,是要为信息服务,确保信息更为明确、有效地为人们所接受,在这个基础上,再去追求美感和创意。

参考文献:木村博之《图解力》

 

作者:许琴,UEDC视觉设计师,现从事网易帐号中心视觉设计,做过手机ROM、IM产品、云端存储产品等;热爱设计,相信设计可以改变生活,且在此过程中贡献自己的力量。

本文来源于人人都是产品经理合作媒体@网易UEDC,作者@许琴

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

(0)
CatherineCatherine
上一篇 2017-04-30 05:00
下一篇 2017-04-30 07:12

相关推荐

  • UI设计师工作必备的七个设计神器

    今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

    2017-05-31
  • 提示信息的情感化设计,做一个有故事的淘宝

    未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

    2017-05-05
  • 为什么重视用户体验的公司最后死掉了?

    今日头条候选:易到完成股权变更,乐视仍未完全退出;“ofo小黄车”被诉商标侵权;今天,给大家推荐的头条是「黑马高管营」导师刘爽从管理决策角度分享如何做决策、决策的依据以及避免陷入的误区,值得每一位管理者仔细阅读。【黑马高调头条】第185期文 | 创业黑马学院什么是管理决策论?管理决策论就是在管理中做各种决策的相应依据。很多创业公司的折腾闹剧现象,就是管理层管理决策弱的结果,如果具备基本的make sense,有些“学费”不是一定要交的,...

    2018-01-30
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20
  • Axure中使用图标字体【FontAwesome】

    我们使用Axure制作原型时,经常会使用到各种小图标。有些朋友自己制作、有些到网上下载,然后使用截图导入到Axure中使用。这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用图标字体呢?答…

    2015-01-16
  • 和华为交互设计师一起聊聊“如何让别人认可你的设计”

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈。什么鬼?辛苦完成的工作,又要重新改过。这感觉就像自己的价值被否认,没存在感。马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而久之可能会迷失自我,失去对设计的敏锐嗅觉,不敢贸然做出决策。甚至慢慢变得上级要求你什么,就做什么,毫无想法,沦为设计的“工具”。

    2017-06-05
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • 实例解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,姑本文将分为上下两篇来发~一、费茨定律(Fitts’ Law)费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(...

    2018-03-16
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 交互设计和我-一个大四学生的探索交互设计之路

    我不敢说交互设计是什么,因为我没有真正的项目经验,我现在所理解所定义的一切,都是根据交互前辈们的经验以及相关的经典书籍和部分项目讲解。所以用一句不好听的话来说,就是纸上谈兵,对于这个十分刺激我的事实…

    2015-07-27