無論是在計算機(jī)科學(xué)中，還是在我們平日的生活里，設(shè)計，都是必不可少的組成部分。時下如( yǐ)火( bèi )如( yòng )荼( làn )的STEAM教育中，“A”的存在也讓教育者們越來越重視設(shè)計的部分。但是孩子學(xué)設(shè)計應(yīng)該從哪里入手？會用PS做個圖？會用Flash做個動畫（拜托別再教孩子Flash了）？這些是“術(shù)”，當(dāng)老師的更要教給他們“道”。這一課，我們是這么上的。

　　課程目標(biāo)

　　理解軟件和游戲的用戶界面設(shè)計中的基本原則

　　理解生活中的設(shè)計的“好”與“壞”

　　學(xué)會用“設(shè)計”的眼光去看待生活中的種種事物，有意識的去觀察和改進(jìn)

　　培養(yǎng)計算機(jī)科學(xué)基本素養(yǎng)

　　課程工具

　　白板&白板筆

　　視頻播放設(shè)備（可選）

　　課程時長：90分鐘

　　課程設(shè)計思路

　　“設(shè)計”是計算機(jī)科學(xué)中必不可少的一環(huán)。很多科學(xué)老師對于設(shè)計的概念還是停留在會用 PS、會做個動畫的階段；很多孩子說起設(shè)計，又很容易天馬行空，或者和“發(fā)明”相混淆；怎么樣讓孩子明白設(shè)計到底是什么，并理解真正可行的“設(shè)計方法”，既不會不切實際，也不會淪為“軟件工具操作員”，便是本課程設(shè)計的初衷。

　　作為“編程課”，本課程就從軟件項目的 UI 設(shè)計切入，開始聊設(shè)計。借用 UI 中一個最基礎(chǔ)的“按鈕”設(shè)計，引出設(shè)計中強(qiáng)調(diào)的“可用性”、“一致性”等基本概念，引發(fā)孩子們積極思考。

　　接著，我們從虛擬的界面設(shè)計過渡到現(xiàn)實中的設(shè)計，引導(dǎo)孩子去觀察身邊周遭的事物；過程中，讓孩子明白什么是“好的設(shè)計”，什么是“不好的設(shè)計”：桌上的水壺，身邊的門窗，都是很好的分析材料；同時，也要讓孩子了解設(shè)計過程的基本步驟和方法：觀察、拆解、從功能出發(fā)、從使用習(xí)慣出發(fā)，等等。

　　最后，推薦師生共同觀看日本 NHK 電視臺專門為孩子制作的關(guān)于設(shè)計的電視片《あ！設(shè)計》。雖然我們的課程叫做“不插電編程課”，但視頻播放設(shè)備已經(jīng)相當(dāng)普及，哪怕用手機(jī)播放，也是可以的。在不增加課程實施負(fù)擔(dān)的情況下，建議孩子們觀看。

　　再次強(qiáng)調(diào)，這堂課的目的在于啟發(fā)孩子用一個全新的視角去看待我們身邊的事物，讓他們對“設(shè)計”有一個正確的 sense 。

　　詳細(xì)流水賬

　　“今天這節(jié)課和之前的課程都不太一樣哦！”確實不太一樣，這節(jié)課會和孩子們做大量的討論，但并沒有專門設(shè)計一個游戲。

　　孩子們的眼睛已經(jīng)瞪得大大的了，充滿期待。

　　“我們今天要來聊聊設(shè)計！”還沒來得及轉(zhuǎn)身在白板上寫下這兩個字，孩子們已經(jīng)開始七嘴八舌的討論了。傾聽他們的討論，老師可以了解孩子們對設(shè)計的理解。

　　“設(shè)計有什么難的，我設(shè)計了好幾個機(jī)器人了！”

　　“我昨天設(shè)計了一個自動喂食機(jī)！我躺著不動就能吃飯！”……

　　孩子們很喜歡把設(shè)計想象成“我想怎樣就怎樣”，或是認(rèn)為設(shè)計就是要從無到有的創(chuàng)造、發(fā)明一個全新的東西。揮灑想象力固然沒有錯，但毫無章法的任意發(fā)散，也很難真正深入。老師在回應(yīng)孩子的時候，要告訴他們：“設(shè)計”和“發(fā)明”是有區(qū)別的；做設(shè)計，我們可以先從身邊的事物開始，先從我們熟悉的事物開始；而且設(shè)計也是一個博大精深的學(xué)問，任何一個小小的點，都可以發(fā)散出許多需要鉆研的方面。

　　既然這樣，我們不妨就先從一個很小的點開始。

　　現(xiàn)在，我們學(xué)的是《不插電編程課》，是編程的基礎(chǔ)課程。要不了多久，我們就要開始學(xué)習(xí)真正的編程。我們以后一定會做復(fù)雜的、龐大的項目。在這樣的大項目里，我們要怎樣去做設(shè)計呢？

　　孩子有些茫然了。顯然6、7歲的他們還沒有想過一個軟件或者游戲的界面該如何設(shè)計，在他們眼里，一切似乎都存在的理所當(dāng)然。

　　“比如說，我們拿著手機(jī)或者iPad，我們在操作的時候，做的動作最多的是什么？”

　　“在屏幕上點點點點點！”他們是移動互聯(lián)網(wǎng)的原住民，這個他們最熟悉了。

　　那我們怎么知道我們要點哪里呢？假設(shè)在我們制作的游戲里，有一個按鈕，需要玩家去點擊。玩家怎么知道這個東西就是個按鈕呢？他怎么知道這個是可以點擊的呢？

　　“因為上面有字！開始！或者是什么……”

　　“因為它有一圈邊！它是一個長方形或者圓形……”

　　“因為它顏色和其他不一樣！”

　　孩子們覺得這個問題很簡單，各種答案瞬間冒出來。突然有個孩子一臉質(zhì)疑的舉手發(fā)問：

　　“可是老師，那路邊有個指示牌，它也有邊，是按鈕一樣的形狀，顏色也不一樣，上面也有字，那我們看著怎么沒想上去按它呢？”

　　多么好的問題。孩子太聰明了，問題都問在點子上，老師上課不要太輕松。?

　　很多孩子說，那它就是個牌子，我們都知道；而且它也沒在屏幕上……

　　好，那老師的問題又來了：如果反過來呢？比如在一個游戲界面里，比如祖瑪，（孩子們一臉蒙圈，好吧老師暴露了年齡 ?）我們把需要點擊的地方畫成和路牌一模一樣的樣子，完全沒有區(qū)別；這個時候玩家還知道要去點擊它嗎？

　　孩子們陷入了沉思……

　　“那點一下不就知道了嗎……”一個孩子自言自語道。

　　這個時候老師可以搬出“學(xué)習(xí)成本”的概念了。

　　我們確實可以點擊一下，試試看。如果點擊進(jìn)去，確實是我們期待的內(nèi)容，就很好，“我蒙對了”。如果點進(jìn)去發(fā)現(xiàn)不是自己想看到的，甚至發(fā)現(xiàn)點都點不進(jìn)去……好吧其實也沒什么了不起，因為我的“成本”比較低，只是“點兩下”。但是設(shè)想一下，這樣的情況如果連續(xù)發(fā)生兩次、三次，我們的耐心就會快速衰減，受挫的心理負(fù)擔(dān)就會陡增，這個時候，學(xué)習(xí)使用軟件的“學(xué)習(xí)成本”已經(jīng)非常高了。而我們的設(shè)計，就是要努力地減少“學(xué)習(xí)成本”，讓所有的操作都合乎習(xí)慣，符合邏輯，一目了然；我們要講求軟件的“易用性”。比如，我們就可以把一個按鈕做的真的像一個真實的按鈕，按下去甚至有動畫效果或震動觸感，以符合用戶的直覺和習(xí)慣；我們可以把同樣功能的按鈕始終放在同樣的位置，以達(dá)成“一致性”（安卓系統(tǒng)的 UI 內(nèi)返回鍵和硬件返回鍵的沖突就是一個經(jīng)典的反例）；我們梳理清楚用戶什么時候需要做什么事情，在設(shè)計上突出重點，而不是給用戶過多選擇；必要的時候，我們也可以給與一定的引導(dǎo)……當(dāng)然，同時，我們也要盡可能的設(shè)計美觀，我們講求審美，我們追求品味。

　　“嗷~~我知道了！我們可以加一個手，指著要點的地方！”馬上有孩子開始產(chǎn)生新想法。

　　嗯，這是一種方法。在軟件或游戲里，經(jīng)常使用這種“引導(dǎo)教程”類的方式?？墒侨绻龑?dǎo)過于頻繁，就像很多國產(chǎn)游戲，感覺就很不好了，就不是我們玩游戲了，成了游戲玩我們。當(dāng)然，引導(dǎo)部分可以說是一個游戲里最難設(shè)計的地方，這需要豐富的經(jīng)驗和反復(fù)的打磨，才能做出精品。

　　談到這里，老師可以觀察學(xué)生們的興致，如果節(jié)奏合適，就可以開始從虛擬的 UI 設(shè)計往身邊的實物設(shè)計引申了。

　　“其實，這種從使用者出發(fā)的設(shè)計，不單單是出現(xiàn)在軟件的設(shè)計中，我們身邊的每一個用品，都有設(shè)計在里面，都值得我們?nèi)ゴ?，去思考怎樣可以做得更好?rdquo;

　　接下來，老師的舉例，可以完全圍繞著孩子們身邊的生活。他們的文具，他們的家庭環(huán)境、學(xué)習(xí)環(huán)境等等。我相信不同學(xué)校、不同的老師，給出的例子應(yīng)該是完全不同的，但是都能激發(fā)孩子重新思考他們之前沒有想過的事情。

　　“你們有誰被爸爸媽媽糾正過握筆的姿勢？”我先從他們天天使用的筆開始說起。

　　不少孩子舉了手。

　　“這為什么是我們的錯呢？筆為什么不能設(shè)計成我一握住它，就是正確的姿勢呢？”

　　“哦！對！有這種筆！筆桿上有三個棱！”孩子們馬上想到了更好的設(shè)計。

　　“沒錯！某種程度上來說，不能怪我們沒有拿好筆，為什么不說是筆設(shè)計的不好呢？明明可以設(shè)計的更好，更容易握??！那再想想，又有多少人被糾正過拿筷子的姿勢？”更多的孩子舉手了。

　　“既然筆可以修改設(shè)計，那筷子可不可以？為什么總是我們糾正姿勢？為什么不是筷子設(shè)計的不夠好？”孩子們的眼睛越掙越大，對哦！從來沒有這么想過呢！對哦！為什么不把筷子設(shè)計的更容易拿呢？！

　　腦洞已經(jīng)漸漸打開。我又順手抄起了一個孩子的水壺?？葱螤詈⒆觽兌贾?，這是一個運動水壺。

　　那為什么運動水壺要設(shè)計成曲線的造型而普通的水壺卻沒有？

　　因為要看起來更運動！因為更容易拿！因為拿著不容易掉！

　　孩子們很快就能夠從使用者的角度來考慮設(shè)計了。沒錯，收腰的造型，讓你在握持時，握得更穩(wěn)、更緊，激烈運動時，心理上也更安全?？矗恳粋€曲線，每一個造型，并不是沒來由的。設(shè)計中，處處都是思考。

　　看看我們身邊的環(huán)境，我們的教室。比如我們的門。門可以向里開，向外開，或是橫向的推拉門。當(dāng)我們面對一個門，如何才能第一次就開對？

　　孩子們馬上腦洞大開，改進(jìn)把手！寫上文字！畫上圖示！各種妙招。

　　如果課時允許，老師應(yīng)該帶著孩子去看各種各樣的門，實際的體驗會給孩子更多的靈感。

　　再比如我們的窗戶。怎樣的設(shè)計可以保證孩子不能輕易打開？怎樣的設(shè)計能夠一眼看出開或鎖？現(xiàn)有的設(shè)計是不是好設(shè)計？好在哪兒不好在哪兒？

　　很多時候，老師其實只是個啟發(fā)者，是個開球的人，是個挖洞的人。把孩子們的腦洞挖的足夠大，讓孩子在正確的道路上飛奔，就OK 了。

　　這樣的啟發(fā)過程，孩子們會表現(xiàn)出各種??！噢！的頓悟時刻，尤里卡的瞬間，正是我們創(chuàng)造力課程所追求的！

　　在探討的氣氛堆到高點時，可以給孩子們看一個視頻：《??！設(shè)計！》

　?。ㄟ@是個可選項。鑒于我們是“不插電”的編程課，視頻是個錦上添花的東西，沒有也沒關(guān)系。不過現(xiàn)在連智能手機(jī)都這么普及了，我們用手機(jī)也可以播放，所以，就加在了課程內(nèi)容里。）

　　《啊！設(shè)計》是日本 NHK 電視臺制作的20集電視節(jié)目，旨在向小盆友們說清楚設(shè)計到底是什么。這和本課的教學(xué)目標(biāo)太契合了！討論到酣暢時，就一起來看看第一集吧！

　?。ǖ谝患瘯r長16分鐘。介于版權(quán)問題，我在這里就不放視頻了，我也不會給下載地址。老師家長孩子們可以移步去 嗶哩嗶哩網(wǎng)站 bilibili.com ，搜索：啊 設(shè)計，你就可以在線看啦！）

　　孩子們瞪大了眼睛，一聲不吭、認(rèn)認(rèn)真真的看完。最喜歡看孩子們?nèi)褙炞⒌谋砬椤?/p>

　　看完以后讓孩子們談?wù)劯邢?，都學(xué)到了什么？自己以后會怎么改進(jìn)？認(rèn)真的聽完孩子們的發(fā)言，老師可以判斷，我們是否達(dá)成了本課最重要的目標(biāo)：給孩子一個全新的視角，來重新審視周遭的一切事物；觀察、拆解、改進(jìn)、精進(jìn)……哪怕只是開了個頭，我們的目的就達(dá)到了。

　　下課！