芥末堆芥末堆

清华大学终身学习实验室:一堂“不插电的编程课”

作者:张飞 发布时间:

清华大学终身学习实验室:一堂“不插电的编程课”

作者:张飞 发布时间:

摘要:无论是在计算机科学中,还是在我们平日的生活里,设计,都是必不可少的组成部分。

1.webp.jpg

无论是在计算机科学中,还是在我们平日的生活里,设计,都是必不可少的组成部分。时下如 ( yǐ ) 火 ( bèi ) 如 ( yòng ) 荼 ( làn ) 的 STEAM 教育中,“A”的存在也让教育者们越来越重视设计的部分。但是孩子学设计应该从哪里入手?会用 PS 做个图?会用 Flash 做个动画(拜托别再教孩子 Flash 了)?这些是“术”,当老师的更要教给他们“道”。这一课,我们是这么上的。

课程目标

  1. 理解软件和游戏的用户界面设计中的基本原则

  2. 理解生活中的设计的“好”与“坏”

  3. 学会用“设计”的眼光去看待生活中的种种事物,有意识的去观察和改进

  4. 培养计算机科学基本素养

课程工具

  1. 白板&白板笔

  2. 视频播放设备(可选)

课程时长

90分钟

课程设计思路

“设计”是计算机科学中必不可少的一环。 很多科学老师对于设计的概念还是停留在会用 PS、会做个动画的阶段;很多孩子说起设计,又很容易天马行空,或者和“发明”相混淆;怎么样让孩子明白设计到底是什么,并理解真正可行的“设计方法”,既不会不切实际,也不会沦为“软件工具操作员”,便是本课程设计的初衷。

作为“编程课”,本课程就从软件项目的 UI 设计切入,开始聊设计。借用 UI 中一个最基础的“按钮”设计,引出设计中强调的“可用性”、“一致性”等基本概念,引发孩子们积极思考。

接着,我们从虚拟的界面设计过渡到现实中的设计,引导孩子去观察身边周遭的事物;过程中,让孩子明白什么是“好的设计”,什么是“不好的设计”:桌上的水壶,身边的门窗,都是很好的分析材料;同时,也要让孩子了解设计过程的基本步骤和方法:观察、拆解、从功能出发、从使用习惯出发,等等。

最后,推荐师生共同观看日本 NHK 电视台专门为孩子制作的关于设计的电视片《あ!设计》。虽然我们的课程叫做“不插电编程课”,但视频播放设备已经相当普及,哪怕用手机播放,也是可以的。在不增加课程实施负担的情况下,建议孩子们观看。

再次强调,这堂课的目的在于启发孩子用一个全新的视角去看待我们身边的事物,让他们对“设计”有一个正确的 sense 。

详细流水账

“今天这节课和之前的课程都不太一样哦!” 确实不太一样,这节课会和孩子们做大量的讨论,但并没有专门设计一个游戏。

孩子们的眼睛已经瞪得大大的了,充满期待。

“我们今天要来聊聊设计!” 还没来得及转身在白板上写下这两个字,孩子们已经开始七嘴八舌的讨论了。倾听他们的讨论,老师可以了解孩子们对设计的理解。

“设计有什么难的,我设计了好几个机器人了!”

“我昨天设计了一个自动喂食机!我躺着不动就能吃饭!”……

孩子们很喜欢把设计想象成“我想怎样就怎样”,或是认为设计就是要从无到有的创造、发明一个全新的东西。挥洒想象力固然没有错,但毫无章法的任意发散,也很难真正深入。老师在回应孩子的时候,要告诉他们:“设计”和“发明”是有区别的;做设计,我们可以先从身边的事物开始,先从我们熟悉的事物开始;而且设计也是一个博大精深的学问,任何一个小小的点,都可以发散出许多需要钻研的方面。

既然这样,我们不妨就先从一个很小的点开始。

现在,我们学的是《不插电编程课》,是编程的基础课程。要不了多久,我们就要开始学习真正的编程。我们以后一定会做复杂的、庞大的项目。在这样的大项目里,我们要怎样去做设计呢?

2.webp.jpg

孩子有些茫然了。显然6、7岁的他们还没有想过一个软件或者游戏的界面该如何设计,在他们眼里,一切似乎都存在的理所当然。

“比如说,我们拿着手机或者 iPad,我们在操作的时候,做的动作最多的是什么?”

“在屏幕上点点点点点!”他们是移动互联网的原住民,这个他们最熟悉了。

那我们怎么知道我们要点哪里呢?假设在我们制作的游戏里,有一个按钮,需要玩家去点击。玩家怎么知道这个东西就是个按钮呢?他怎么知道这个是可以点击的呢?

3.webp.jpg

“因为上面有字!开始!或者是什么……”

“因为它有一圈边!它是一个长方形或者圆形……”

“因为它颜色和其他不一样!”

孩子们觉得这个问题很简单,各种答案瞬间冒出来。突然有个孩子一脸质疑的举手发问:

4.webp.jpg

“可是老师,那路边有个指示牌,它也有边,是按钮一样的形状,颜色也不一样,上面也有字,那我们看着怎么没想上去按它呢?”

多么好的问题。孩子太聪明了,问题都问在点子上,老师上课不要太轻松。?

很多孩子说,那它就是个牌子,我们都知道;而且它也没在屏幕上……

好,那老师的问题又来了:如果反过来呢?比如在一个游戏界面里,比如祖玛,(孩子们一脸蒙圈,好吧老师暴露了年龄 ?)我们把需要点击的地方画成和路牌一模一样的样子,完全没有区别;这个时候玩家还知道要去点击它吗?

孩子们陷入了沉思……

5.webp.jpg

“那点一下不就知道了吗……”一个孩子自言自语道。

这个时候老师可以搬出“学习成本”的概念了。

我们确实可以点击一下,试试看。如果点击进去,确实是我们期待的内容,就很好,“我蒙对了”。如果点进去发现不是自己想看到的,甚至发现点都点不进去……好吧其实也没什么了不起,因为我的“成本”比较低,只是“点两下”。但是设想一下,这样的情况如果连续发生两次、三次,我们的耐心就会快速衰减,受挫的心理负担就会陡增,这个时候,学习使用软件的“学习成本”已经非常高了。而我们的设计,就是要努力地减少“学习成本”,让所有的操作都合乎习惯,符合逻辑,一目了然;我们要讲求软件的“易用性”。比如,我们就可以把一个按钮做的真的像一个真实的按钮,按下去甚至有动画效果或震动触感,以符合用户的直觉和习惯;我们可以把同样功能的按钮始终放在同样的位置,以达成“一致性”(安卓系统的 UI 内返回键和硬件返回键的冲突就是一个经典的反例);我们梳理清楚用户什么时候需要做什么事情,在设计上突出重点,而不是给用户过多选择;必要的时候,我们也可以给与一定的引导……当然,同时,我们也要尽可能的设计美观,我们讲求审美,我们追求品味。

6.webp.jpg

“嗷~~我知道了!我们可以加一个手,指着要点的地方!”马上有孩子开始产生新想法。

嗯,这是一种方法。在软件或游戏里,经常使用这种“引导教程”类的方式。可是如果引导过于频繁,就像很多国产游戏,感觉就很不好了,就不是我们玩游戏了,成了游戏玩我们。当然,引导部分可以说是一个游戏里最难设计的地方,这需要丰富的经验和反复的打磨,才能做出精品。

谈到这里,老师可以观察学生们的兴致,如果节奏合适,就可以开始从虚拟的 UI 设计往身边的实物设计引申了。

8.webp.jpg

“其实,这种从使用者出发的设计,不单单是出现在软件的设计中,我们身边的每一个用品,都有设计在里面,都值得我们去揣摩,去思考怎样可以做得更好。”

接下来,老师的举例,可以完全围绕着孩子们身边的生活。他们的文具,他们的家庭环境、学习环境等等。我相信不同学校、不同的老师,给出的例子应该是完全不同的,但是都能激发孩子重新思考他们之前没有想过的事情。

“你们有谁被爸爸妈妈纠正过握笔的姿势?”我先从他们天天使用的笔开始说起。

不少孩子举了手。

“这为什么是我们的错呢?笔为什么不能设计成我一握住它,就是正确的姿势呢?”

“哦!对!有这种笔!笔杆上有三个棱!”孩子们马上想到了更好的设计。

9.webp.jpg

“没错!某种程度上来说,不能怪我们没有拿好笔,为什么不说是笔设计的不好呢?明明可以设计的更好,更容易握啊!那再想想,又有多少人被纠正过拿筷子的姿势?” 更多的孩子举手了。

“既然笔可以修改设计,那筷子可不可以?为什么总是我们纠正姿势?为什么不是筷子设计的不够好?” 孩子们的眼睛越挣越大,对哦!从来没有这么想过呢!对哦!为什么不把筷子设计的更容易拿呢?!

脑洞已经渐渐打开。我又顺手抄起了一个孩子的水壶。看形状孩子们都知道,这是一个运动水壶。

10.webp.jpg

那为什么运动水壶要设计成曲线的造型而普通的水壶却没有?

因为要看起来更运动!因为更容易拿!因为拿着不容易掉!

孩子们很快就能够从使用者的角度来考虑设计了。没错,收腰的造型,让你在握持时,握得更稳、更紧,激烈运动时,心理上也更安全。看,每一个曲线,每一个造型,并不是没来由的。设计中,处处都是思考。

11.webp.jpg

再看看我们身边的环境,我们的教室。比如我们的门。门可以向里开,向外开,或是横向的推拉门。当我们面对一个门,如何才能第一次就开对?

12.webp.jpg

孩子们马上脑洞大开,改进把手!写上文字!画上图示!各种妙招。

如果课时允许,老师应该带着孩子去看各种各样的门,实际的体验会给孩子更多的灵感。

再比如我们的窗户。怎样的设计可以保证孩子不能轻易打开?怎样的设计能够一眼看出开或锁?现有的设计是不是好设计?好在哪儿不好在哪儿?

13.webp.jpg

很多时候,老师其实只是个启发者,是个开球的人,是个挖洞的人。把孩子们的脑洞挖的足够大,让孩子在正确的道路上飞奔,就OK 了。

这样的启发过程,孩子们会表现出各种啊!噢!的顿悟时刻,尤里卡的瞬间,正是我们创造力课程所追求的!

在探讨的气氛堆到高点时,可以给孩子们看一个视频:《啊!设计!》

14.webp.jpg

(这是个可选项。鉴于我们是“不插电”的编程课,视频是个锦上添花的东西,没有也没关系。不过现在连智能手机都这么普及了,我们用手机也可以播放,所以,就加在了课程内容里。)

《啊!设计》是日本 NHK 电视台制作的20集电视节目,旨在向小盆友们说清楚设计到底是什么。这和本课的教学目标太契合了!讨论到酣畅时,就一起来看看第一集吧!

(第一集时长16分钟。介于版权问题,我在这里就不放视频了,我也不会给下载地址。老师家长孩子们可以移步去 哔哩哔哩网站 bilibili.com ,搜索:啊 设计,你就可以在线看啦!)

15.webp.jpg

孩子们瞪大了眼睛,一声不吭、认认真真的看完。最喜欢看孩子们全神贯注的表情。

看完以后让孩子们谈谈感想,都学到了什么?自己以后会怎么改进?认真的听完孩子们的发言,老师可以判断,我们是否达成了本课最重要的目标:给孩子一个全新的视角,来重新审视周遭的一切事物;观察、拆解、改进、精进……哪怕只是开了个头,我们的目的就达到了。

16.webp.jpg

下课!

本文转自微信公众号“ Alex老师的大脑洞”,作者张飞,原标题《不插电编程课 | あ!设计!》。文章为作者独立观点,不代表芥末堆立场。

1、本文是 芥末堆网转载文章,原文: Alex老师的大脑洞
2、芥末堆不接受通过公关费、车马费等任何形式发布失实文章,只呈现有价值的内容给读者;
3、如果你也从事教育,并希望被芥末堆报道,请您 填写信息告诉我们。
来源: Alex老师的大脑洞
芥末堆商务合作:王老师 18710003484
  • 清华大学终身学习实验室:一堂“不插电的编程课”分享二维码