信息图表的七种设计要点 - 纳金网
联系我们

给我们留言

联系我们

地址:福建省晋江市青阳街道洪山路国际工业设计园纳金网

邮箱:info@narkii.com

电话:0595-82682267

(周一到周五, 周六周日休息)

当前位置: 主页 > 其它 > 其它新闻 >

信息图表的七种设计要点

来源:未知 浏览数:
责任编辑:比巴卜
时间:2013-11-07 14:38

[导读]信息图表已经成为信息有效传达的强有力工具,特别是在外国,无论是大中小型公司,有很多都已经开始尝试用信息图表来进行品牌的构建、公司年度报告设计、向特定客户群传达及进

信息图表已经成为信息有效传达的强有力工具,特别是在外国,无论是大中小型公司,有很多都已经开始尝试用信息图表来进行品牌的构建、公司年度报告设计、向特定客户群传达及进行教育,而且大多数都是通过互联网来传播,使到其资源及面向的人群非常之广。
图表设计是为了让数据更容易更清晰地表达,而不是仅仅为了设计而设计。

一、不要告诉,要展示!

在《乘机必读,看哪种飞机最安全》一文中,编辑要传达几个重点信息,“危险地点”(飞机发生危险的多发地点)、“危险时刻”(飞行时哪个时段最容易出现危险)、“安全驾驶”(哪种飞机型号相对更安全)、“安全位置”(在飞机上坐在哪个位置相对更安全)及“安全概率”(与其它导致死亡的情况相比)。每个标题都涉及很多数据要表达,但如果只是用文字,这几个意思用几行字就可以告诉读者(但读者有没有兴趣听是另一回事),而本文中编辑在每个标题中都使用了图表来设计,虽然整个设计颜色很节制(仅用了两种颜色),但已经足够引起读者的兴趣。

在设计中,不仅仅是罗列数据,而是进入主题的情景之中,用设计语言形象化地进行表达。上图通过简单的图案形象化地表达从起飞到降落的整个过程,配上数据,让人一清二楚。

图案的放置要符合常理,上图中,飞行次数越多的飞机,就越往右靠。右方的文字整齐排列,如果担心文字离左边的飞机离得太远(特别是下方的几个数据),其实也可以将文字顺着飞机的排列边缘排下来(但这个时候上下数据的对比直观性可能会稍削弱一些)。

通过这张图的表达,收到了仅靠文字很难一下子说清楚的传达。

在《失败的中国式控烟 全球四成香烟中国制造》一文中,在细节上通过香烟作为数据的背景,简单直接,而在右则,则进一步形象化地传达出这个数量的对比,这种表达可以进一步加深人们对数据的认识,而不仅仅是知道一个数据。

在《方兴未艾的中国高楼竞赛》一文中,采用了高楼剪影来排列,虽然这种方式非常常见,但既然有效,用多几次也没有所谓:

上述三个例子就是通过真实的图案或模拟事件的情景来表达。

二、打破常规的表达

信息图表在表达上是需要通过充分的设计语言来表达,打破常规的一些表达能够使信息图更容易抓住读者的眼睛,整个图表富吸引力,但在这里,需要留意一点的是,必须避免“设计过度”,不要忘记你的终极目标是数据及信息要传达,最理想的状态当然是设计及数据得到完美的平衡。

在《中超俱乐部生存状态:贫富差异大,收支难平衡》一文中,设计人员打破了以往通常的柱状、直线图及圆饼,利用圆环来表达数据,能够让人产生视觉吸引力的,同时也与表达的“足球”主题非常契合。

在第一张图的中超俱乐部球员薪金投入对比数据中,利用了圆环作为坐标,通过弧线的长短来形成对比,同时,中心点以足球形象作为视觉焦点,绿色的圆环形成绿茵场的感觉,制造了一个添加其它信息的空间,能够让人一眼弄清主题。但这张图在数据的有效传达上有所欠缺。图上只标出了“广州恒大”(最长弧线)的薪金金额,其余的均没有标出,使到数据上略欠严谨。当然,可以在每个对应的俱乐部的弧线最后标上数据,如果担心位置拥挤,也可以直接在俱乐部名称旁边标识。同时将各个弧线间隔一深蓝一浅蓝来排列,也可以进一步提升信息传达的清晰性。

圆环内部下方通过传统的直线统计图传达其它项目的统计,与圆环结合是一个很理想的搭配及互补。打破常规的表达可以形成一个焦点,所以并不需要在一个设计中所有图表都要出人意表地进行这种设计,否则显得有些凌乱。在本文的其它统计数据中则采用了传统的图表。但颜色却必须一致地应用,这里的蓝绿邻近色的搭配贯穿了本文的所有设计,使整个设计形成清新、和谐及符合主题的气息。

在《中国外科整形数世界第二 十年毁掉20万张脸》一文中,只有一张图片,所以这张图片是否能够产生吸引人的效果至关重要。

在上图中,有两个整形数据要传达,一是外科手术类的数量,另一个是非外科手术类量,各个类别又细分了多种整形细项。设计师巧妙地使两个类别形成了一个优美的循环图案,圆点的大小与数量的大小形成比例。中结合的中间位置,适时地标出了合计数据。这个合计数据本应是一个重要的数字,如果能够通过其它颜色或方式来强调一下,对整体视觉效果可能会更好一些。颜色通过一种色调的不同明暗色相形成对比,使整体圆点给人更加连贯的感觉。

在《透明的美国政府官员财产》一文中,用下图表达了骆家辉的个人资产构成:

用细格是信息图表经常会采用的手法,非常多的细格构成本身就有一种直观的“数量”感,并且具有一定的视觉冲击力,也给人一种下载模块及系统清理的新鲜感。而下方对比较强烈的深红色是骆家辉的债务部分,与上方蓝色清晰地区分出来。整体给人一种一览无遗的感觉。

三,产生一个视觉焦点

万变不离其宗,与其它的平面设计一样,在设计一些信息较多的图表时,有一个视觉焦点,更加容易使人认清主题,引起阅读的兴趣。

在《中国电影票价占人均收入1/57 为美国的8.5倍》一文中,希望通过数据来说明中国电影票价的昂贵。切入点可以有很多,本文的设计人员选择了“爆米花”作为点题,由于其尺寸及位置都很突出,使它无疑成为了一个视觉焦点。再通过形象化的表达,传达出各种相关的数据。

图表的排版使读者轻易能够知道阅读的顺序

在《十年里,他们问了总理什么问题》里一文中,下图上方的这张充满文字的图案无疑让人无法忽略:

上面的图片的文字大小已经是通过关键词的出现次数来决定,本身就已经有一种数据传达的功能,再配合下方更加具体清晰的图表,使整张信息图表传达出非常丰富的含义。文字图中的颜色也应用得很成功,杂而不乱。

四、颜色

信息图表中的颜色运用当然可以是丰富多样的,但如果作为主要是网页传播的信息图表,你也不能过于为所欲为,通用性及中性是优先考虑的颜色搭配。有很多信息图表都会“分享”到其它网页及博客上被人浏览,一些过于刺眼的颜色应该尽量避免,而中性的颜色(特别是一些不饱和颜色)可以使信息图表符合最多数人的审美观。

网易“数读”考虑到其自身风格,他们往往采用白色背景,但如果你为客户设计的信息图表,我倒不赞成你过多使用白色背景,因为大多数网站的背景也是白色,一个白色背景的信息图表放在一个白色背景的网页上,有时会造成“不知从哪里开始”的困惑,加上一个背景,则形成了自己的地盘。

“数读”大部分的色调都不会超过三个,三个色调已经足够(当然,这里并不存在一个绝对标准),这也可作为我们设计的一个基本准则,如果有背景的话,最浅的色调作为背景,其余两种色调作为上面元素来设计。如果你无法判定你的主题应该用哪种色调准确,除了查找相关颜色搭配书籍,其实有些网站可以帮助你完成这个步骤。如:Adobe’s Kuler及COLOURlovers ,你只要懂点简单的英文就可以按照自己的主题来寻找颜色搭配——效果往往非常不错。

在《比百度百科靠谱的维基百科》一文中,设计人员通篇只有了三种颜色(粉红,粉蓝,灰色),就产生了良好的效果:

500

在《全球雇员休假天数:中国倒数第三》的图表设计中,基本上设计人员只采用蓝色调与灰色调:

而在中国这一行,则采用突出的其它颜色来强调,这是一个恰当的选择,通过这种强调,呼应了标题,这也是信息图表的一个吸引力,能够产生“不比不知道,一比吓一跳”的感觉。

500

注意我们说的三种是三种色调,每种色调当然包含着明暗的对比,如在《中国清廉指数全球排名第75位,低于男足排名》的一文中,所使用的图表的颜色虽然初看有很多,但基本上就是绿色调及红色调。
这个图表虽然使用了简单的柱状,但由于是向下指向,由绿至红过度,形成了一下“地层”的构造,符合主题的气息(水深火热嘛),而男足的直线条则与柱状图表形成双重对比(形状及数据)。

五:文字

文字与颜色一样,必须节制清晰,从理论上说,网页上的字体要比印刷品的字体使用得更节制,“数读”中的字体有时甚至通篇只使用一种字体,当然,使用两三种问题都不大,但无论何种字体,都应该平实、端庄及清晰。

在《18亿亩红线——安全的只是数字》下图中所有中文都使用一种字体,无论是标题还是说明文字。从横向比较来看,这种字体也是“数读”的最主要字体,这也形成了一种清晰的系列感。当然,将主标题或副标题采用另一种字体也是一种完全可以考虑的。

六、增加气息

恰当地增加一些插图能够活跃版面,填充空间,平衡视觉,但这些插图一般在视觉上不能强于信息图表,同样是上文《18亿亩红线——安全的只是数字》,设计人员加了两幅插图:一是中部的线条勾勒图,由于只是线条构成,在视觉上只是起到一个辅助补充的角色。而在最下方,拖拉机的插图虽然显得厚重很多,但这个位置已经是本图表的最下方,所以并不会对上方的阅读造成干扰(但在颜色上仍然与本图表的色调一致)。

500

七:交换式的设计

利用一些新的动态设计,可以使图表给人一种更吸引人的感觉,同时也增加了一种参与感。在《超150年老字号企业中国仅5家,日本上万》一文中,通过移动的拉杆,直观地传达了主题的数据。

读者可以拉动拉杆,地图上会出现不同年代出现的企业并且仍传承至今的地区(圆点不是指数量),而鼠标点击圆点,则出现具体的企业数量。

 

免责声明:本文仅代表作者个人观点,与纳金网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。



  • TAGS:图表设计
    • 分享到:


    相关阅读
    网友评论

    您需要登录后才可以发帖 登录 | 立即注册

    关闭

    全部评论:0条

    联系方式

    服务热线:15059788121/13489872927/15959158412

    换链QQ:435820619

    电子邮箱:info@narkii.com

    联系地址:福建省晋江国际工业设计园5号楼

    福建省纳金网信息技术有限公司 闽ICP备08008928号-1

    Copyright www.narkii.com 2008-2019 All Rights Reserved

    开展“净网2019"专项行动,坚决保障网络空间清朗

    IOS版

    安卓版

    官网认证