《B8_信息图表的设计和应用_钟磊&郝亚男》由会员分享，可在线阅读，更多相关《B8_信息图表的设计和应用_钟磊&郝亚男（153页珍藏版）》请在金锄头文库上搜索。
1、 graphicinfo 12年9月27日星期四 graphic info 12年9月27日星期四 graphic info 12年9月27日星期四 信息量过载 注意力分散 浅阅读 Why 12年9月27日星期四 Jakob Nielsen How Little Do Users Read May 6th 2008 12年9月27日星期四 Jakob Nielsen How Little Do Users Read May 6th 2008 12年9月27日星期四 30秒90秒 12年9月27日星期四 20 50 12年9月27日星期四 什么是信息图表 Infographic infograp
2、hic是帮助人们更有效理解特定内容的 信息展示方式 如图表 示意图 动画等 12年9月27日星期四 12年9月27日星期四 马耳他十字机芯 12年9月27日星期四 http slaveryfootprint org 12年9月27日星期四 12年9月27日星期四 X 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 信息精简 观点聚焦 高效传达 12年9月27日星期四 信息图表包括 数据可视化 过程和事件的再现 空间和结构的说明 思维表达 12年9月27日星期四 课程内容 Infographic简史 如何处理数据可视化 其他类型的信息图表 信息图表的应用 工具介绍 12年
3、9月27日星期四 Infographic简史1 12年9月27日星期四 William Playfair The Commercial Political Atlas 1786 苏格兰工程师 政治经济学家 柱状图和饼图发明者 12年9月27日星期四 1801 土耳其帝国的领土构成 12年9月27日星期四 William Playfair Universal Commercial Histroy 1805 12年9月27日星期四 Charles Minard 的拿破仑征俄示意图 1861 1 线条的宽度实时地指代着军队规模 2 军队移动的大方向 棕色表示前进 黑色表示撤退 3 军队在某些特定日期
4、的所在地点 4 军队所到之处的经纬度 5 撤退途中的温度变化 12年9月27日星期四 Otto Neurath 的 ISOType 1920 s Isotype 圖像符號 是奧圖於1925年發表經過系統化設計的圖畫文字 ISOTYPE International System of Typographic Picture Education 希望透過系統文的圖像來 取代文字 形成一種世界共通的語言 其本質類似於現在流行於網路的MSN表情符號 等 奧圖曾試圖用這種圖畫文字來取代溝通 雖然最後失敗了 但是這種Isotype 的概 念 後來在ICON 標示等設計領域 有著十分深遠的影响 12年9月2
5、7日星期四 12年9月27日星期四 12年9月27日星期四 1931 1932的伦敦地铁图 12年9月27日星期四 1933 Henry Beck 的伦敦地铁交通图 Beck的地图有着一个有趣而非刻意制作的附带细节 这张地图压缩了 市郊部分的比例尺 这样郊区看上去就和伦敦中心区靠得更近了 12年9月27日星期四 1933 George Rorick 的气象图 12年9月27日星期四 如何处理数据可视化2 12年9月27日星期四 淘宝网数据观察室 12年9月27日星期四 大量的数据 有时间 有百分比 有金额等 等 可是我们却无法看 清全貌 海量的原始数据 12年9月27日星期四 12年9月27日
6、星期四 快速理解复杂数据所表达的核心观点 12年9月27日星期四 2 1 确定主题 2 2 分析重组数据 2 3 选择合适的表现方式 2 4 优化表达 12年9月27日星期四 2 1确定主题 12年9月27日星期四 是否有必要可视化 性价比怎样 1 快速阅读到核心内容 2 复杂的数据 已买到的宝贝列表vs交易提醒 一个是大量 变化的数据 发现现有呈现方式的问题 VS 12年9月27日星期四 用户想要快速阅读怎样的内容 描述核心内容 12年9月27日星期四 表达明确的观点 用一句话阐述你的观点 账户中某段 时间的收支是否平衡 12年9月27日星期四 趋势 对比 分布 关联 12年9月27日星期四
7、 趋势 对比 分布 关联 12年9月27日星期四 趋势 对比 分布 关联 12年9月27日星期四 趋势 对比 分布 关联 12年9月27日星期四 2 2分析 重组数据 12年9月27日星期四 整理原始数据 标出主题中的关键词 重组与关键词相关的数据 12年9月27日星期四 预计数据的规模 容量与单位 设计允许的空间 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 VS 12年9月27日星期四 2 3 选择合适的表现方式 12年9月27日星期四 常用图表的基本类型 变体 饼图 散点图 柱状图 曲线图 12年9月27日星期四 单一维度数据 占比百分比 整体 与局部关系 没有
8、负数 饼图 12年9月27日星期四 饼图 12年9月27日星期四 饼图 12年9月27日星期四 柱状图 12年9月27日星期四 12年9月27日星期四 柱状图 12年9月27日星期四 柱状图 12年9月27日星期四 曲线图 12年9月27日星期四 12年9月27日星期四 2006年TED大会上Hans Rosling的演讲 其开发小组 设计的Gapminder完成了一个以在线统计数据为基础 散点图 12年9月27日星期四 散点图 12年9月27日星期四 12年9月27日星期四 先描述较单一的数据关系 12年9月27日星期四 组合多个简单的关系 通过联动组合 减少用户在内容间的移动 次要信息 需
9、要交互才呈现 12年9月27日星期四 2 4 优化表达 12年9月27日星期四 剔除干扰因素 去噪 核对信息的优先级 去除产生误解的元素 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 具象的元素 易于传播 适度的趣味 情感 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 实践案例 12年9月27日星期四 确定主题 12年9月27日星期四 1 不同款式的商品在时间段内的价格趋势 2 不同款式的销售占比 确定主题 12年9月27日星期四 0 25 00
10、50 00 75 00 100 00 1月1日1月2日1月3日1月4日1月5日1月6日1月7日 价格趋势 11 12 15 17 款式1 45 热销款式占比 款式1 款式2 款式3 款式4 款式5 寻找数据间的联系 时间与价格 形成趋势 款式销量 形成占比 描述单一的数据关系 12年9月27日星期四 分析重组数据 0 5 5000 000 12年9月27日星期四 优化表达 如果所有款式的价格一致 如何简化 如果款式众多 优先展示什么 主题 款式是否需要具象化 是不是图表越复杂越好 12年9月27日星期四 12年9月27日星期四 将原始数据碎片化 经过组织优化重新呈现 12年9月27日星期四 案
11、例练习 12年9月27日星期四 传达什么样的信息 着重突出数据的变化 对比 关联 采用合适的图表或图表组合 去噪 设计润色 12年9月27日星期四 职业 经理及行政人 员 专业人员辅助专业人员 工艺及有关人 员 文员 机械操作及配 置员 服务及商店销 售 非技术工人 占比10 8 6 4 16 1 8 5 16 9 6 2 16 4 16 4 月平均收入 港币 260002500015000100009500950085004900 香港各职业比例和月平均收入 香港不同教育程度比例 教育程度专上教育中学小学或以下 占比30 56 2 13 8 香港不同教育程度月平均收入 教育程度学士及以上副学
12、士文凭中六高中初中小学未受教育 占比20 7 4 9 4 5 6 3 30 8 19 0 12 2 1 6 月平均收入195001200011600100009000800070005500 香港总人口和工作人口数 香港总人口6 864 346 香港工作人口3 572 384 12年9月27日星期四 职业专上教育中学小学及以下 经理及行政人员50 1 48 2 1 7 专业人员88 4 11 6 0 辅助专业人员61 2 38 8 0 工艺及有关人员13 8 59 9 26 3 文员22 3 72 0 5 7 机械操作及配置员13 0 65 5 21 5 服务及商店销售15 1 66 3 18
13、 6 非技术工人7 8 51 8 40 4 香港各职业的教育程度占比 12年9月27日星期四 希望直观地传达什么信息 哪种职业的收入和教育占比高 高学历的人较多从事的是哪些职业的工作 香港的平均工资 香港受高等教育的人数 学历和工资间的关系和差距大小 各职业的收入差距以反应贫富差距是否严重 香港的整体薪资和教育状况 12年9月27日星期四 12年9月27日星期四 其他类型的信息图表 3过程与事件 空间与结构 思维表达 12年9月27日星期四 3 1过程和事件的解构 12年9月27日星期四 EL PAIS 是一家西班牙的网站 专门通过 信息图表的方式 对犯罪和事故进行解 12年9月27日星期四
14、具体地点 英国 Doncaster附近 铁路和M62公路交汇处 时间 6点20 2001年2月 来自哪两个方向的火车 角色 来自伦敦和newcastle方向的火车 12年9月27日星期四 起因 M62高速公路上的两辆汽车追尾后从 公路坠落到下方的铁轨上 12年9月27日星期四 事故过程 经过 来自newcastle方向的火车撞到掉落在 铁轨上的汽车 转向后同相对方向驶 来的另一辆火车相撞 相关细节 火车类型 车厢节数 载货火车的载 重和时速 12年9月27日星期四 事件后果 结果 两车均造成车厢脱落和损坏 人员伤 亡 相关细节 货车损失了4节车厢 客车损失了11节车厢 并造成至少13 人死亡和
15、70人受伤 事故现场照片 过往发生的类似事故 12年9月27日星期四 12年9月27日星期四 地点和时间 角色 人或物 起因 导火索 经过 事件流的时间顺序 相关方的客观资料 12年9月27日星期四 3 2空间和结构的表现 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 组成部分 层次关系 结构 内部 外部 断面 12年9月27日星期四 3 3思维表达 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12
16、年9月27日星期四 非线性的思维过程 横向发散 细节深入 环境 场景 12年9月27日星期四 12年9月27日星期四 综合案例 法航空难 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 信息图表的应用 4 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 问题 需求 目标 定位 设计探索 展示 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 12年9月27日星期四 工具介绍 5 12年9月27日星期四 如何兼顾效率 用较短的时间设计视觉和传达效率并重的信息图表 12年9月27日星期四 Numb
