查看原文
其他

信息可视化课程教什么?怎么教?

李谦升 装饰杂志 2021-09-22

大设计    深阅读

《装饰》杂志2017年度

“优秀投稿论文”

编辑推荐与全文分享

2018首届装饰学术年会

期待您的到来!


你还在通宵写作

苦苦修改论文吗?

你还在为自己的学术研究无法

组织成有深度的学术论文而苦恼吗?

你还在恐惧被编辑秒退文稿后,

让你茫然不知所措吗?


如果真是这样

那么恭喜你

今天的文章对你太重要了

看完今天的文章大概需要10分钟

但看完之后

说不定能让你对设计论文的

写作思路豁然开朗^^

      

2014年,《装饰》杂志进行了首次“年度优秀投稿论文”的评选暨交流活动,并从此作为年度常设活动举办。今年举办的该项活动已是第五届。

 

本次评选以2017年《装饰》杂志发表的投稿论文为对象,主要集中在“教学档案”“史论空间”“个案点击”“设计实践”“民俗民艺”五个栏目。

点击以下链接可查看:

《装饰》杂志2017年度“优秀投稿论文”获奖名单


一直以来,《装饰》杂志都强调文献性与记录性,在实务研究中融入理论研究是杂志的一个努力方向。通过这样的评选活动,本刊旨在弘扬扎实严谨的学术风气,也意在向广大作者进一步明确《装饰》杂志的学术标准和投稿要求。我们将陆续在微信公众平台把2017年评选出的14篇优秀论文做全文的推送,还会附上每个栏目编辑的推荐语。

 


今天我们要推荐的是一篇

“教学档案”栏目的文章

教学档案
栏目主持:王小茉
  【编辑推荐】

 无论是设计学科还是其他专业领域,如何让学生以可视化的方式理解抽象知识,都是课程中的教学难点,需要教师用心进行教学设计。李谦升老师在信息可视化课程中“以情景为中心,基于实体的可视化模型制作”方式,让数据、信息等抽象的概念具象化,并通过设定主题、动手制作、成品展示等手段,将信息可视化问题回归日常生活,从而有效调动了学生的积极性,帮助他们理解知识难点,也适当降低了信息设计课程中的一些技术门槛。对于艺术院校相关专业,这是可借鉴推广的教学案例。(王小茉)

 

原文:

设计思考


随着数据产品

与相关服务的日渐兴起,

数据可视化开始向设计领域靠近,

信息可视化设计

(Information Visualization Design)

一词越来越多地被使用在

解决实际问题的产品服务中,

信息设计在当下艺术设计院校的

教学中需要重新定义


信息设计(InformationDesign)一词出现于 20 世纪 70 年代,一些平面设计师用来表示通过更加有效与易懂的方式来表现信息的设计。此后,信息设计的相关课程越来越多地成为艺术院校平面设计专业的一个重要部分。但随着信息时代的发展,信息设计的内涵与技术也发生了巨大变化,主要表现在以下方面:

  • 第一,数据的体量发生了巨大变化,由原来的“小数据”转变为现在的“大数据”;

  • 第二,图形生成越来越依靠算法与软件 ;

  • 第三,人们很难再单纯依靠人脑完成对数据的理解。上述趋势则催生了数据可视化(Data Visualization)的发展。


相对于信息设计,数据可视化更加关注解决大数据的视觉展示,更多使用计算机算法来生成图形,更多依靠人机互动分析数据,从而获得结果。这些特点也正顺应了时代发展的需要,数据可视化已经成为大数据时代最热门的领域之一。

 

面对数据可视化如火如荼的发展态势,信息设计类课程却没有跟上时代的步伐。笔者认为,这是由如下几个原因造成的:


首先,数据可视化的发展主要是由数据挖掘、图形算法、人机交互等新技术手段所推动的,这些突破主要集中在计算机科学领域 ;其次,信息可视化是典型的交叉学科,但国内艺术院校招生来源相对单一,造成相应的课程改革难以推进。随着数据产品与相关服务的日渐兴起,数据可视化开始向设计领域靠近,信息可视化设计(Information Visualization Design)一词越来越多地被使用在解决实际问题的产品服务中,信息设计在当下艺术设计院校的教学中需要重新定义

 

  • 可视化设计相关概念辨析


在大数据时代到来之前,以信息图为代表的信息设计主要是一种解释性设计,目的是为了对某些复杂知识或事件进行图形化展示,从而更加清晰有效地传递信息。相对而言,数据可视化虽然同样是对于抽象数据与信息的视觉表现,但更偏向于一种探索性设计,目的是为了展示复杂数据的内在特征与规律,发掘数据背后的潜在价值。传统的信息设计与数据可视化之间有着不同甚至是截然相反的特征,笔者在这里通过一幅图(图 1)来表示两者之间的差别。

1. 数据可视化与传统信息设计的区别

 

图 1 中的横轴代表需要通过手工绘制的工作量,越往右边意味着需要手工绘制的工作量越大。竖轴则代表数据的体量,越向上也就越偏向所谓的“大数据”。图中的两条线段分表代表作品中包含的信息量和设计美感。从图中可以看出,手工绘制的工作量越大,作品可以处理的数据量就越小,但其中所包含的设计美感也越多;而依靠计算机算法生成的图形量越多,可以处理的数据量就越大,但其所包含的设计美感就越低。这张图表形象地反映了传统信息设计与数据可视化之间的区别,图中左侧的区域更偏向数据可视化,右侧区域更偏向信息图设计。就可视化教学而言,希望可以从最右侧的传统信息设计向中间位置靠近,在尽量保持设计美学水准的情况下,增加数据的表现能力。


2. 可视化设计中三要素之间的关系


从设计师、设计对象、设计受众三个角度上看,信息可视化构成了三角关系(图 2),不同的偏重代表了不同取向的信息可视化作品。受众与数据之间是通过中立的图形来传达信息 ;受众与设计师之间是通过某种观点将设计师的想法传递给受众;设计师与数据之间是通过寻找具有设计美感的形式来表现数据,与任何的观点和语境都无关,纯粹是对数据的具象表达。研究这三者的关系,也就可以划分出不同侧重的设计特征:



数据可视化作品更加偏向于受众与数据之间的信息化关系 ;信息设计作品则更倾向于设计师与受众之间的说服性关系 ;数据艺术作品则是单纯表现数据之美,更加突出设计师与数据之间的美学关系。当然,现实的可视化作品大多融合了三种不同的关系,只是各有侧重,但上述分析为教学中梳理具体的训练目标提供了参考依据。



  • 层次化的可视化教学模式



数据本身具有三个层次 :数据、信息、知识。其中,数据是数字的集合,反映事物的原始事实,并无特定指向意义;信息是在特定上下文语境下的数据,具有特定的意义 ;而知识更进一步,是根据数据和信息提炼得出的结论,对于决策具有指导作用。不同的数据层次对应的可视化方式有所差别,数据可视化主要针对原始数据;信息图、信息可视化、信息设计主要是针对信息的设计 ;可视分析则是针对知识的发现与挖掘。每个阶段所对应的技能各有侧重,数据可视化强调对于数据本身属性与图形算法的理解;信息可视化注重故事情境,通过数据来表达特定的观点 ;可视分析利用人机交互技术对数据进行挖掘和理解。在教学过程中,需针对不同学生有的放矢地准备课堂内容,笔者在课程中设计了面对不同阶段与层次的课程内容。

 

1抽象数字的具象化练习

  

该课程练习随机提供了一组毫无关联与意义的数字,让学生在生活中寻找任意的具体形象进行表现。例如,在某次课程中,笔者选择了“15、86、149、366、575”这一组数字作为练习题目,让学生以这 5 个数字为基础做视觉化表现。根据作业的反馈,呈现出各种出人意料的表现形式(图 3-6),有些作业很好地对数字进行了视觉转化。当然,也有一些常见错误,例如图形无法精确代表数字、图形选择不直观等。这些问题在课堂点评中都会被一一指出。


通过这个环节的训练,

学生初步建立起

数字与图形之间的联系,

并体会到可视化

在理解抽象信息上的优势。

3. 使用剪刀夹角的度数表示 5 组数字


2逆向过程的图形算法认知

  

作为合格的信息设计师,需要了解与掌握基本的计算机图形生成方法。但计算机图形背后都是由复杂的数学模型所构建的,对设计专业背景的学生来说,理解起来相对困难。笔者经过摸索,提出“视觉优先,应用为主”的教学思路,在实际的教学过程中取得了不错的效果。

4. 咖啡豆的数量表示 5组数字

5. 线的根数表示数字6. 颜料与水的比例表示 5组数字

以 可 视 化 中 的 一 种 热 门 图 表 ——“ 树图 ”(Treemap)为 例。 该 图 形 在 20 世 纪90 年代由马里兰大学的本·施奈德曼(BenShneiderman)教授提出,可以有效展现层级结构、对比多个同类事物之间的关系。树图在限定面积的矩形中,根据不同数值划分节点的长短与位置关系,本身在视觉上呈现出一种秩序性的美感,可以说达到了功能与美学的统一。为了达到图形效果,目前就有 5 种布局算法用来实现图形的生成。但对于设计师而言,理解图形背后的算法对设计并没有很大帮助,最重要的是建立图形与信息之间的对应关系。在实践中,笔者选择了著名的可视化制作工具 D3.js 来讲解计算机图形与图表,D3.js 基于 javascript 脚本语言,以网页形式呈现。信息设计专业的学生一般在前置课程中都已经接触并且学习过相关的制作技术,可以快速地理解并制作网页。对于没有学习过网页制作相关知识的学生,也可以通过替换数据文件的方式获得相应的图形效果。在实际的课堂作业中,通常利用 D3.js 生成图表,再使用 Photoshop、Illustrator 等设计软件进行二次加工,这样学生可以较为顺利地完成以自动化生成图形为主的可视化训练。(图 7-9)

 

图7

图8-9

7. 上海公园占地面积统计树图8. 生物种类树图9. 全球水储量分布树图


3基于实体的可视化模型制作


除了平面的图形图表训练,笔者在近年的教学实践中发现,实体模型对学生理解信息可视化也具有非常好的学习效果。实体模型的优点如下:第一,制作简单,容易调动所有学生的学习积极性 ;第二,成品展示效果好,便于课堂统一讲解与点评 ;第三,有利于形象思维发达的设计专业学生理解各种图表的内在逻辑。在笔者看来,实体模型的最大优势就是制作门槛几乎为零,只要有基本的动手能力,就能做出有趣的数据实体模型。甚至在选修课上,纯艺术类的学生都可以完成课程所布置的任务。在以往的教学过程中,基本全部使用电脑制作,总有学生因为软件的熟练程度、上课听讲时的专注度等问题无法完成学习任务。但笔者在使用实体数据模型的教学方法中发现,几乎所有学生都能投入课程课题中(图 10),激发出在传统上机方式的课上很难达到的学习与制作热情,收到了理想的教学效果。


 10. 同学分组制作可视化实体模型


另外,将作业内容由数字转化为实体后,所有作业在同一个空间中进行展示,既方便了学生之间的交流,也可以通过对比发现不同可视化模型之间的优缺点。艺术生的思维方式更加偏向形象思维,而实体模型将二维图形拓展到了三维空间,虽然缺少在数字表现上的灵活性与交互性,但学生在理解水平上有明显提高。 


  • 以情境为中心的可视化教学案例


在信息设计的教学过程中,过于抽象的学习目标很容易使学生产生沮丧感,因为没有上下文语境的支持,缺少评判标准,作业内容在改进上就没有完结,总能找到其他的方式来修正。例如,笔者曾经在一门课程中,布置学生完成对归纳整理数字音乐文件的设计任务,但由于缺少运行平台、服务对象、软件架构等具体的使用情境,学生在设计后期往往由于无法实现一个具体的目标而产生沮丧感,不知道如何对方案进行优化与深入。而作为任课教师,往往也因为没有标准,很难对设计方案做有效评断。设计专业的学生更加善于从实际出发,根据具体问题来找到解决方案,这是他们在本科学习过程中一直注重的能力之一。

 

针对上述问题,笔者在信息可视化设计课程中同时使用以情境为中心的可视化教学方法,将可视化设计中的图形图表与专业背景结合、与使用情境结合,在实践过程中收到了较好的教学效果。以近年为建筑与城市规划专业学生开设的信息设计课程为例,在经过前期的概念讲述与基础练习之后,笔者在课程中策划了与城市相关联的一组课题,让学生分组完成。课题包括前期调研、数据采集、内容策划、图形绘制、可视化模型制作等几个步骤。课题的数据与资料完全来源于上海市政府数据服务网。作为上海市政数据的开放资源,该网站平台集中了全市包括道路交通、教育科技、资源环境等 12 大类几百项数据资源,这些数据集中反映了上海城市运行的方方面面。这样的课题范围正是针对建筑与城市规划专业学生的知识背景,使其可以跨过专业鸿沟,快速进入课题所需要的情境中。最终,各小组确定了“上海地区公园调查数据可视化”“上海市健身步道调查统计分析”“上海市部分消防局影响分布图”等 8 个与上海市政建设息息相关的课题,从信息的视角重新审视了城市的建筑设计与城市规划。

 

各小组将所需要的数据资料收集完备后,就开始内容策划与可视化图表绘制的部分。这是整个课题的核心,其中包括核心信息提取与视觉转化两个部分。核心信息提取从可视化学科的角度讲就是数据挖掘的过程,教师在其中的作用很关键,不仅需要引导学生找到合适的课题方向,还要提供相应的工具让学生对数据进行挖掘。这个过程主要通过讨论课来完成,实际教学中需要通过三到四次的小组讨论课,才能逐渐让学生找准课题方向,并且理解数据挖掘的意义。根据学生的专业背景,笔者选择了微软公司的 Excel 和开源包 D3.js 这两个软件作为数据挖掘与可视化效果的工具。Excel作为初级的数据处理工具,入门门槛低,方便易用,其自带的排序、筛选、均值计算、分类统计等基本的数据处理功能,可以满足课堂上对于数据分析的需要。课程前期,学生使用Excel 对手头数据进行整理、分析,为课题的方向奠定基础。在对信息进行视觉转换阶段,则主要依靠数据可视化工具库 D3.js。D3.js 包括目前可视化领域大部分的经典图形与图表,它本身基于网页形式,不需要额外安装其他软件,通过浏览器就可以查看,便于学生使用。视觉转换过程中,教师在图形选择、表现方式等问题上进行指导,从而使学生可以分辨不同视觉形式之间的差异。(图 11-13)


  

11-13. 作业过程中使用的数据、图表和初步可视化图形


最后是可视化模型的制作过程。在课堂中使用实体模型的想法,是笔者在面对建筑与城市规划学生的课程中首先就想到的。建筑专业学生虽然对于平面图像处理并不熟练,但在专业基础课中已经学习过基本的建筑沙盘模型制作。所以,笔者就选择让他们以实体模型的方式作为可视化的课程结果。(图 14-17)经过二三年的教学实践,笔者逐渐发现,该形式对于艺术设计类学生来说,确实是学习可视化的一种非常好的方法,之后逐渐推广到其他专业课程中。可视化模型的具体优势在前文中已经做了比较详细的介绍,在此不再赘述。

 

14-17. 可视化模型成品


在建筑专业信息设计课程中使用情境化的教学方法,结合学生专业背景,根据可视化设计步骤,完成了一次完整的信息可视化设计。从数据到模型,学生在这个过程中高效、有趣地了解到现代信息可视化设计中的各个环节。在上述案例中,笔者以建筑专业的信息设计课程为例,说明了以情境为中心的教学方法中的一些细节,面对艺术学院其他专业学生,针对不同的专业背景,有侧重地进行调整,同样也可以收到良好的教学效果。


结  语

 

时至今日,信息设计领域的多学科交叉性已经越来越明显,仅是对其他学科的发展具有一定了解,或者是利用其他学科的相关成果已经远远不够了。多学科的交叉已经在制作流程、学科内容和思想方法上相互造成了影响,这也意味着信息设计课程从课题选择到教学过程上都需要进行探索与突破。本文就是笔者根据在艺术院校信息设计课程教学过程中所积累的经验,加上对学科本身发展与内涵的思考,提出的针对艺术设计类学生学习信息可视化设计的新方法,希望可以为国内艺术院校相关专业老师提供一些参考。


原文标题:《挖掘数据之美——信息可视化课程在艺术院校中的教学实践》

来源:《装饰》杂志2017年第1期“教学档案”

作者:李谦升  上海美术学院

 

相关阅读:2017年度优秀论文请点击

这把中国的“铁壶”惊艳了美国工业设计协会

传统工艺能通过集体教育传承吗?

为什么女性受到的批判总比男性多?

“折叠城市”之下街市小贩的生存策略

项目式教学:虾米音乐与浙工大的界面设计教学合作

欲知2018装饰学术年会参与方式,请点击以下链接:

《装饰》杂志2017年度“优秀投稿论文”获奖名单

点击以下图片可查看本期介绍

点击最下方“阅读原文"可购买近期刊物

《装饰》杂志2017年第1期介绍



《装饰》杂志欢迎您的来稿

E-mail:zhuangshi689@263.net  

地址:北京市海淀区清华园清华大学美术学院A431   中国装饰杂志社编辑部

电话:010-62798189  010-62798878

邮编:100084

官网:http://www.izhsh.com.cn

建议邮件 书信亦可

在微信中回复“投稿”即可获得投稿须知



: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存