这篇文章给大家分享静态信息图的设计方法。时间仓促难免有疏漏不足,欢迎各位指正,信息在“设计”之前应有数据的收集、整理等步骤,在完成之后,应进行整体规划。然后才是“设计”的步骤:先选择各个部分的图表基本类型,接着进行装饰,最后再进行整合:
一、选择图表类型
任何信息图表都是在一些基本图表的基础上,加以装饰。就像先有“骨架”再往上“贴皮”。
在选择图表类型的时候,给大家推荐两个小工具:
Choosing a good chart 英文版 、 Choosing a good chart 中文版

它提供了一个选择图表的流程图,根据它的导引可以一步步明确需求,并最终找到合适的图表类型。
Chart Chooser

它提供一个需求筛选器,根据选择的需求为你筛选合适的图表类型
二、进行装饰
图表类型确定后,需要开始对其进行装饰。
装饰的基本方法有二:图形化和变形。
A.图形化
图形化包括四个小的步骤:
找出代表性概念
确定表现风格与收集素材
对图表主体进行装饰
对图表其它部分进行装饰
1. 找出代表性概念
进行图形化则需要先联想出代表性概念,最好是具体的、能够直接图形化的概念。比如有关“石油”的数据,可以选择用“油滴”、“油桶”等代表性概念;有关“钱”的数据,可以选用“金币”、“货币符号”、“钱袋”等作为代表性概念。
2. 确定表现风格与收集素材
接下来,进一步将概念图形化,确定一种表现风格。可以有以字做形、使用矢量图形、使用实物照片和手绘四种表现风格:
a. 以字做形
这是个偷懒的方法,直接用文字当做图形,如:

b. 使用矢量图形
如图中的水滴形状:
这里推荐一组超赞的矢量信息图元素免费下载,帮同学们节省时间:

矢量图形素材可以在以下网站找到:
vectorss.com
all-silhouettes.com
vectorstock.com
iconfinder.com
flaticon.com
glyphsearch.com
c. 实物照片
如图中的烟叶:

实物照片推荐自行拍摄,如不具备拍摄条件。
d. 手绘图案

3. 对图表主体进行装饰
确定好表现风格及收集好素材后,我们开始用已有的图形给“骨架”进行“贴皮”。
上一步骤的以字做形、矢量图形、实物照片、手绘图案都适用以下的五种方法:
a. 辅助
让图形作以辅助理解的作用直接标在数据或文字旁。
如:图中动物和人的icon,用于辅助理解相应文字

b. 替换
把柱条、扇形、散点等替换为图形
如:用 薯条的实物图片 替换 柱状图的柱条

如:用长短不同的 价签的矢量图形 替换 柱状图的柱条

c. 嫁接
将1、2两种方法巧妙结合 如:图中既有美国国旗的图案,又将折线替换为星条旗的红条纹

d. 作为容器
保留图形的边框,将基本图表填充于其中。图形作为“瓶子”,基本图表作为“水” ,将“水”填进“瓶子”。 如:用 手机、钥匙的矢量图形 作为 容器,将柱状图填于其中

如:将 人的矢量图形 作为 容器,将柱状图填于其中

e. 作为单元
将图形作为单元,通过图形的重复来表示数量关系
如:图中将 硬币的矢量图形 作为 单元,组成柱状图

如:图中将 rss符号、twitter的logo以及人的icon 作为单元:

情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
实例解析3种文档大屏适配方法
相关文章2632020-03-09
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
UI设计师如何设计最常见的关闭按钮
相关文章4042019-02-24
21个Sketch实用高频小技巧
相关文章6572019-02-15
设计师解读如何让扁平的网页更出彩
相关文章10302018-12-07
UI设计师需要学习的保存功能设计总结
相关文章3422018-12-07
7招表单设计设计师方法提升表单体验
相关文章5672018-12-07
UI设计师必学栅格设计原理和技巧
相关文章4992018-11-29
