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

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


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

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

一. 什么是信息图形

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

信息图形由信息和图形两个词语组成,它被称之为“信息图形”(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

相关推荐

  • 【设计思维】移动思维和WEB思维

    随着移动互联网的兴起,移动思维这个词也越来越多被提起。经常会有人问我什么是移动思维,其实这个词是相当WEB思维而言的。 我总结了下: 由于物理设备的不同导致的使用方法和使用习惯不同。 (思维是针对 移动产品…

    交互设计 2014-11-29
  • 設計者說 | 交互设计总监+创始人+设计师导师 潘翔的多维思考

    设计者说  |  设计发声平台| 第 53位设计师 |▲ 专访:设计总监+企业管理者+资深导师 三位一体经验分享今天的嘉宾经历过很多次转型——工业设计出身;毕业做交互设计;创业做用户体验设计;当然他也是一只梨的导师之一:潘翔尚器设计联合创始人资深交互设计师同济大学硕士曾任职于designeaffairs一只梨交互设计资深导师几次转型都成功是潘翔最厉害的地方。每换一次角色就会让他的思考和经历叠加一层全新维度。在他身上,同时有资深设计师的专...

    2018-03-26
  • 30个笑死人的设计【UXRen译#168】

    作者:ARMIN ZAHIROVIC   |  翻译:楠木,校审:天蛙   乔布斯曾经说过:设计不仅是看上去如何,感觉如何,而是用起来如何。 一般来说,我们喜欢展示伟大的设计,但其实从糟糕的设计中也可以学到很多。我们不认为St…

    交互专题 2017-08-07
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 灵兽奇谋之教你5招提升用户体验

    (来自梧桐树资本远方的祝福)007灵兽奇谋《灵兽奇谋》起源于我们携手100位行业大咖组成灵兽家族,每位家族成员都必须跟新零售007的粉丝们分享一篇,自己近年最干货的心得文章,可以是感悟,也可以是奇招,没有任何限制与约束,给予读者们干货与奇谋,是我们唯一的标准。每十篇奇谋为一季,2018年第一季,火热连载中。奇谋无高下,真诚见初心,谢谢每一位老师的付出,亦谢谢对面每一位乐于倾听的你。今晚灵兽奇谋来自灵兽家族代盐人兽哥,兽哥跟大家聊聊新零售...

    2018-02-11
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 探究当前数据可视化的用户体验设计趋势

    作者:Jake Rocheleau 译者:ITsCrystal   我们发现,对后台设计的技巧通常不会像普通网页布局设计那样公开分享。这是因为我们通常很难在网络上找到后台的一些样例。由于要进入后台界面都需要账户和密码,所以很多…

    交互专题 2017-08-07
  • 别逗了,真正的“用户体验”并不如你们所说!

    User Experience is “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”.— ISO 9241-210The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.— ISO 9241-11— Baekdal, T., 2006. The Battle Between Usability and User-Experience [Online] Available at: The Battle Between Usability and User-Experience–Nielsen Norman Group, 2007. User Experience – Our Definition [Online] Available at: http://www.nngroup.com/about/userexperience.htmlBy Alan Penn, director of the Virtual Reality Centre for the Built Environment at University College LondonReference:Why User Experience Cannot Be DesignediA | Can Experience be Designed?文章一:Eric Baczuk, Design and the (Ir)Rational Mind: The Rise of Affective Sensing
    https://designmind.frogdesign.com/2014/05/design-irrational-mind-rise-affective-sensing-2;
    文章二:Daniel H. Pink, A Whole New Mind Moving from the Information Age to the Conceptual Age
    http://www.goodreads.com/book/show/99315.A_Whole_New_Mind“做项目久了,难免就会职业病发,没成想现在最大的爱好就是拆字玩儿,总想着能从字本身的意思去弄点洞察出来。现在哪哪儿都在说用户体验,说实话,这个概念本人听的是真有点腻了,凡是个东西都要扯上“体验”二字。顺手在网上搜了下在线词典,这下面倒是有对于体验的几种原生态解释:1.亲自处于某种环境而产生认识2.指通过亲身实践所获得的经验3.所谓亲身经历与实地领会4.也含有查核,考察的意思
    从这些个解释里不难看出,从1,2,3的解释中,体验是包含有时间概念的:体验当下的那一刻,体验后的回想总结,以及建立下一次体验的心理预期和评判标准,其中反复强调的是“亲身”一词,这个时候,人的概念就被带出来了,不难看出所谓“体验”又包含了多少亲历者的主观意识;从4的解释中,个人觉得特有嚼头,这似乎是来了个总结:大多数的人都是带着“挑刺儿”的情怀去走完整个时间线的。
    最后,简单的总结下我想说的1.体验设计的who 是别人,体验包含太多主观因素,设计师要懂得如何充分提炼每个人情怀背后的深层共性。2.体验设计是围绕过去,现在和将来这条完整时间线的设计,绝对不是一锤子买卖。3.只要是人,就会对你为他们所架构的体验进行“审核”,所以作为设计师,千万要宽容要大度,那个被“骂”的点或许就是支撑前行的机会。文章中揭示的“互联网产业中对于User Experience和Interaction Design的混淆”可谓是一针见血。作为一名有着一点用户体验sense的互联网从业者,我往往会花费很多时间去说服决策者将投入更多地精力去研究用户,用更加宏观的角度去看待用户体验,但由于自己对于用户体验理解和阐述的局限性,这样的尝试往往无疾而终。我觉得这篇文章提供了很好的逻辑结构和对比佐证,让设计师能够更好地理解用户体验的同时也可以更好地把这个概念传输给别人。
    对于文章中提到的两个工具,Customer Journey Map和User Experience Questionnaire,在我看来虽然被证明在设计咨询和设计用户研究领域非常有效。但是在产品迭代迅速的互联网行业,决策者往往会更倾向于快速地推出产品、快速地试错、快速地更新迭代这样的“野蛮”方式来获取更加直接与准确的用户反馈。在这样的一种大环境下,相对传统的用户研究工具似乎因为周期长与结论的不确定性显得有些“笨重”,这也间接导致了部门互联网公司的决策者对于类似调研方式的抵触。如何做出改变,让这些有效地工具和理论在这样相对“野蛮”的环境中显得“接地气”,我觉得是作为一名设计师需要思考的问题。这篇文章很是解答了大家对于“用户体验”,“易用性”,包括“体验设计”的差别。非常赞同对于未来设计世界和人类世界对于情感化消费需求的方向,很多时候人们看似理性的消费实际上也是出于背后难以明状的亦或是潜意识亦或是外界的多重的信息刺激。神经科学(neuro science) 主张的决策下达从来都不是由内而外的,而是由外而内的。从这一点看,似乎“体验“还是可以被”设计“的,这种预设,结果当然越接近最终的现实越好。在《Thinking fast and slow》这本书中提到了诸多人们下决定的包括背后存在的偏见,所谓主观的意见实际也掺杂了背后潜意识的,本能的,直觉的迅速的判断,在这样的情况下,消费者的“体验”可以”被操控”的因素也大大增加了。说到底,人都是很有同理心(empathy)的动物,再正经地挣扎表现出理性的样子,也不过是那层薄如蝉翼的外壳罢了。“用户体验”就是在不停地触碰这层外壳,让“体验”直入你心。作为一个Service Design背景的设计策略师,用户体验之与我并不是虚拟产品中的手势,按钮,和A/B测试。用户体验融合在一整套服务系统里无形或有型的用户触点中。正如文章所提到的,实体体验的内容层级要远远超越互联网产品的易用性,它是一个更加复杂而庞大的系统,它需要深入挖掘人类需求的本源与动机,而并非只是依照某种需求本身位用户提供某类的便捷工具。
    正如Pine II和Gilmore在The Experience Economy一书中所述,任何企业在喝消费者互动时都是在导演体验,以一种个性化,令人难忘的方式与消费者建立联系,以服务为舞台,产品为道具,以品牌故事为剧本,当我们购买的是体验时,我们花钱享受的事商家为我们提供的一场难忘的回忆,就如同参与一场戏剧演出,其价值将长久地存在于我们的心里。
    试想一下MM巧克力世界,乐高积木世界,苹果体验中心,以及把体验做到极致的迪斯尼。他们永远不可能收到互联网产品的冲击。许多人说随着互联网服务的发展,电影院,商场,美容院,餐厅,所有的产业都将受到影响。然而,良好的体验是在一个人心理,生理,智力和精神水平处于高度刺激状态下形成的,这并非是互联网产品的良好易用性就可以轻易满足的需求。
    对于“用户体验”而言,“易用性”是衡量整个体验过程中所需要的某一工具的标准之一,而体验则应该思考如何通过全方位的营造让服务变乃至于整个生活状态变的更加丰满和人性。“用户体验”被广泛的使用和探讨,说明随着经济发展,消费者的需求已不再单薄。以设计为主导商业创新挑战才刚刚开始,作为这个时代的设计师,我们更应该以开放和学习的心态来迎接新的挑战!关于用户体验的未来的展望非常有趣。说到底是对人的更深入的了解是用户体验的根本。传统上来说,用户体验是基于对于用户更深切的研究,是以用户研究为基础的。也就是根据用户的所说,所做,所想,甚至所感挖掘出真实的用户的能力,需求和期待。而从上文用户体验不能被设计上来说,Context of use和User两个都是影响的因素。也就是说,未来对于User本身的了解的加深, 以及Context of use的改变也会对用户体验本身有着极大的影响。

    2017-06-03
  • 从交互设计角度,聊聊Web网站和移动App的六大差异

    做交互设计近4年,参与过Web网站和移动App的设计,前者依托于PC的浏览器,后者则是依托于手机/平板电脑。不同的设备/平台均有各自的特点,以至于在设计这两类产品时也有些许差异。

    2017-05-27
  • 设计一生要读的书汇总

    如果你是一名设计师,绝不要满足于从各个地方学来的小技巧,而忽略系统的学习。真正的设计高手,绝不仅是因为知道的招数比别人多,而是对 Photoshop和自我有深刻的、系统的认识。他们熟稔各种技巧,恰恰是因为他们…

    2017-03-08