協(xié)作學(xué)習(xí)理念下多點(diǎn)觸控式課件設(shè)計(jì)與開(kāi)發(fā)

劉志娟

摘 要：多點(diǎn)觸控技術(shù)的出現(xiàn)，實(shí)現(xiàn)了多人同時(shí)在觸控設(shè)備上面對(duì)面操作的功能，給協(xié)作學(xué)習(xí)帶來(lái)新的交互方式。傳統(tǒng)的計(jì)算機(jī)課件主要以鼠標(biāo)鍵盤操作為主，協(xié)作學(xué)習(xí)通過(guò)網(wǎng)絡(luò)來(lái)實(shí)現(xiàn)交互，文章以《圖形的變換》內(nèi)容為例，提出多點(diǎn)觸控式課件開(kāi)發(fā)的原則、設(shè)計(jì)與開(kāi)發(fā)過(guò)程，體現(xiàn)了新的協(xié)作學(xué)習(xí)交互方式。

關(guān)鍵詞：多點(diǎn)觸控；課件設(shè)計(jì)；協(xié)作學(xué)習(xí)

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)志碼：B 文章編號(hào)：1673-8454（2016）02-0056-03

一、多點(diǎn)觸控技術(shù)概述

多點(diǎn)觸控 （英譯為Multitouch或Multi-touch）是采用人機(jī)交互技術(shù)與硬件設(shè)備共同實(shí)現(xiàn)的技術(shù)，能在沒(méi)有傳統(tǒng)輸入設(shè)備的情況下進(jìn)行計(jì)算機(jī)的人機(jī)交互操作。[1]使用者主要通過(guò)多點(diǎn)觸控手勢(shì)來(lái)實(shí)現(xiàn)交互，基本包括單擊、雙擊、拖動(dòng)、滑動(dòng)、旋轉(zhuǎn)等手勢(shì)，比如在觸摸屏上旋轉(zhuǎn)圖片，兩個(gè)手指劃開(kāi)或者收攏來(lái)放大或縮小圖片，或者左手用兩手指劃開(kāi)放大一張圖片，同時(shí)右手拖動(dòng)另一張圖片將其移開(kāi)。[2]多點(diǎn)觸控手勢(shì)顛覆了傳統(tǒng)用鼠標(biāo)單擊進(jìn)行輸入的方式，具有高效和自然的特點(diǎn)。

傳統(tǒng)的計(jì)算機(jī)課件主要以鼠標(biāo)單擊、鍵盤輸入為主，協(xié)作學(xué)習(xí)主要依靠網(wǎng)絡(luò)完成。隨著電子白板、平板電腦、智能手機(jī)等多點(diǎn)觸控設(shè)備進(jìn)入教育領(lǐng)域，其操作自然、多用戶的特點(diǎn)使得面對(duì)面的協(xié)作學(xué)習(xí)方式發(fā)生了改變，打破了傳統(tǒng)計(jì)算機(jī)輔助教學(xué)的方式。

二、多點(diǎn)觸控技術(shù)支持的協(xié)作學(xué)習(xí)

計(jì)算機(jī)支持的協(xié)作學(xué)習(xí)（Computer Supported Collaborative Learning，簡(jiǎn)稱CSCL），是指利用計(jì)算機(jī)技術(shù)建立協(xié)作學(xué)習(xí)的環(huán)境，使教師與學(xué)生、學(xué)生與學(xué)生在討論、協(xié)作與交流的基礎(chǔ)上進(jìn)行協(xié)作學(xué)習(xí)的一種學(xué)習(xí)方式，是傳統(tǒng)合作學(xué)習(xí)的延伸和發(fā)展。[3] Lipponen 提出“CSCL 的重點(diǎn)是為了增強(qiáng)同伴之間的交互和小組協(xié)同工作通過(guò)技術(shù)支持協(xié)作學(xué)習(xí)的方式實(shí)現(xiàn)，以及技術(shù)如何促進(jìn)知識(shí)和技能在社區(qū)成員間的協(xié)作共享及交流”。[4]

英國(guó)達(dá)勒姆大學(xué)SynergyNet項(xiàng)目利用多點(diǎn)觸控桌開(kāi)展協(xié)作學(xué)習(xí)活動(dòng)，以促進(jìn)課堂對(duì)話和合作學(xué)習(xí)，多名學(xué)生同時(shí)在觸控桌上操作。

為探索多點(diǎn)觸控技術(shù)有效促進(jìn)課堂教學(xué)效果，此次課的目標(biāo)是學(xué)生利用紙張與數(shù)字提供的線索找出礦難的原因，Steve Higgins將學(xué)生分成兩組，一組學(xué)生利用多點(diǎn)觸控桌中提供的數(shù)字和紙張完成任務(wù)，另一組學(xué)生利用放置在普通桌子上的小紙片完成任務(wù)，在多點(diǎn)觸控桌當(dāng)中，學(xué)生可以任意放大、縮小旋轉(zhuǎn)紙片的大小和方向，并且能看到其他同學(xué)的操作，實(shí)現(xiàn)協(xié)作學(xué)習(xí)的無(wú)縫對(duì)接。[5] Steve Higgins發(fā)現(xiàn)學(xué)生利用多點(diǎn)觸控桌完成任務(wù)比在普通桌子上利用小紙片完成任務(wù)的效果要好。SynergyNet項(xiàng)目利用多點(diǎn)觸控技術(shù)做了大量的學(xué)習(xí)活動(dòng)，利用新技術(shù)整合了傳統(tǒng)教育的課堂環(huán)境，為設(shè)計(jì)多點(diǎn)觸控式教學(xué)資源提供了新的指導(dǎo)策略。

三、多點(diǎn)觸控式課件案例設(shè)計(jì)分析

筆者以小學(xué)五年級(jí)數(shù)學(xué)中《圖形的變換》這節(jié)學(xué)習(xí)內(nèi)容為例設(shè)計(jì)開(kāi)發(fā)多點(diǎn)觸控式課件。

1.多點(diǎn)觸控式課件設(shè)計(jì)原則

設(shè)計(jì)原則是教學(xué)軟件進(jìn)行設(shè)計(jì)的基本要求之一，針對(duì)多點(diǎn)觸控技術(shù)的各種特征和優(yōu)勢(shì)，圍繞學(xué)習(xí)者對(duì)學(xué)習(xí)的影響為基礎(chǔ)，在開(kāi)發(fā)多點(diǎn)觸控式課件要注意以下幾點(diǎn)原則：

（1）學(xué)習(xí)者為中心

在進(jìn)行多點(diǎn)觸控式課件設(shè)計(jì)時(shí)，首先要確定學(xué)習(xí)者的學(xué)習(xí)基礎(chǔ)，案例中的學(xué)習(xí)對(duì)象為小學(xué)五年級(jí)的學(xué)生，具有一定的計(jì)算機(jī)基礎(chǔ)，大部分都操作過(guò)智能手機(jī)等觸控設(shè)備，操作多點(diǎn)觸控式課件不存在太大障礙。

（2）易操作互動(dòng)強(qiáng)

多點(diǎn)觸控式課件的設(shè)計(jì)元素應(yīng)該簡(jiǎn)潔明了，容易操作，學(xué)習(xí)者不必花大量的時(shí)間去學(xué)習(xí)復(fù)雜的操作，讓學(xué)習(xí)者體驗(yàn)最直接自然的交互方式。本案例中優(yōu)化了多點(diǎn)觸控式課件界面設(shè)計(jì)，提高了學(xué)習(xí)者的學(xué)習(xí)效率。

（3）兼容性

安卓系統(tǒng)、蘋果系統(tǒng)、windows系統(tǒng)等多個(gè)平臺(tái)都支持多點(diǎn)觸控式課件的運(yùn)行，相同的平臺(tái)有多個(gè)版本，這就要求在設(shè)計(jì)開(kāi)發(fā)多點(diǎn)觸控式課件時(shí)要考慮它的兼容性，能夠兼容到不同版本或者不同平臺(tái)上使用。[6]

2.開(kāi)發(fā)工具

本案例的多點(diǎn)觸控式課件以Android系統(tǒng)為開(kāi)發(fā)平臺(tái)，利用Flash CS6進(jìn)行開(kāi)發(fā)。Android是Google公司發(fā)布的基于linux的自由及開(kāi)放源代碼的操作系統(tǒng)，應(yīng)用于智能手機(jī)、平板電腦等移動(dòng)設(shè)備，Android平臺(tái)的開(kāi)放性使得更多開(kāi)發(fā)者和移動(dòng)終端廠商加入到Android應(yīng)用開(kāi)發(fā)中。[7]新版本的Flash CS6可生成Sprite 表單和訪問(wèn)專用設(shè)備，Adobe Flash Player 和 AIR 運(yùn)行時(shí)針對(duì) Android 和 iOS 設(shè)備平臺(tái)進(jìn)行設(shè)計(jì)，具有跨平臺(tái)的特性。[8]

3.內(nèi)容設(shè)計(jì)分析與開(kāi)發(fā)

小學(xué)五年級(jí)數(shù)學(xué)《圖形的變換》這一節(jié)課內(nèi)容中設(shè)計(jì)了“做一做、“畫一畫”、“設(shè)計(jì)欣賞” 等模塊，主要讓學(xué)生動(dòng)手操作設(shè)計(jì)美麗圖案，體會(huì)平移、對(duì)稱、旋轉(zhuǎn)在設(shè)計(jì)圖案中的應(yīng)用，[9]從運(yùn)動(dòng)變化的角度去探索和認(rèn)識(shí)空間與圖形，鍛煉學(xué)生的空間想象力和空間思維能力，發(fā)展空間觀念，同時(shí)提高學(xué)生合作學(xué)習(xí)的能力。利用平移、旋轉(zhuǎn)等特性進(jìn)行圖案設(shè)計(jì)在傳統(tǒng)的計(jì)算機(jī)輔助教學(xué)中，學(xué)生通過(guò)鼠標(biāo)來(lái)移動(dòng)、旋轉(zhuǎn)圖形或者利用傳統(tǒng)的教學(xué)道具來(lái)設(shè)計(jì)，但是學(xué)生只能獨(dú)自操作完成任務(wù)。傳統(tǒng)的計(jì)算機(jī)輔助教學(xué)主要以鼠標(biāo)鍵盤為交互事件，通過(guò)網(wǎng)絡(luò)環(huán)境來(lái)實(shí)現(xiàn)的協(xié)同操作，準(zhǔn)備多臺(tái)主機(jī)，同時(shí)提供網(wǎng)絡(luò)連接的環(huán)境，難以滿足多事件同時(shí)觸發(fā)的需求。而教師利用平板多點(diǎn)觸控技術(shù)的交互特性，可以充分調(diào)動(dòng)學(xué)生的視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等多種感官，能讓學(xué)生更加直接地參與到課件的協(xié)作學(xué)習(xí)中來(lái)，同時(shí)學(xué)生面對(duì)面地操作與討論，也鍛煉了學(xué)生的合作學(xué)習(xí)能力。

（1）“軸對(duì)稱——做一做”模塊設(shè)計(jì)

“做一做”模塊通過(guò)模擬一個(gè)剪紙制作軸對(duì)稱圖形的過(guò)程，讓學(xué)生體驗(yàn)剪紙中蘊(yùn)含著的對(duì)稱思想。在平板上模擬剪紙的五個(gè)步驟如下：

①學(xué)生手指從左到右滑動(dòng)，就可將紙張從左到右滑動(dòng)，同時(shí)紙張對(duì)折；

②用手指在屏幕上畫出對(duì)稱圖形的一半，比如畫小樹(shù)，如圖1（a）所示；

③用手指將多余的紙張從左到右滑動(dòng)，紙張移開(kāi)，得到小樹(shù)的一半圖形；

④用手指將折疊的紙張從右到左滑動(dòng)，得出一個(gè)軸對(duì)稱的小樹(shù)圖形，如圖1（b）所示。

“做一做”模塊的實(shí)現(xiàn)主要涉及過(guò)渡動(dòng)畫的設(shè)置、繪制自定義形狀、剪切效果和翻轉(zhuǎn)效果等內(nèi)容，而在傳統(tǒng)滑鼠式課件中主要通過(guò)鼠標(biāo)單擊來(lái)實(shí)現(xiàn)這一系列操作。

（2）“旋轉(zhuǎn)——畫一畫” 模塊的設(shè)計(jì)

“畫一畫” 模塊學(xué)生已經(jīng)掌握了部分圖形旋轉(zhuǎn)的知識(shí)，通過(guò)設(shè)計(jì)扇形圖的旋轉(zhuǎn)動(dòng)畫來(lái)讓學(xué)生一步一步體驗(yàn)圖形的旋轉(zhuǎn)效果。課件中要求學(xué)生利用“旋轉(zhuǎn)手勢(shì)”旋轉(zhuǎn)右邊的扇形圖，圖形順時(shí)針旋轉(zhuǎn)90度，確定將要旋轉(zhuǎn)的圖形，利用旋轉(zhuǎn)手勢(shì)旋轉(zhuǎn)圖形，如圖2。第一次旋轉(zhuǎn)圖形A90度得到圖形B，同樣用旋轉(zhuǎn)手勢(shì)旋轉(zhuǎn)B、C、D三個(gè)圖形，從中探索圖形旋轉(zhuǎn)的特征和性質(zhì)。

“畫一畫”模塊實(shí)現(xiàn)的關(guān)鍵技術(shù)是觸摸環(huán)境下“旋轉(zhuǎn)手勢(shì)”的使用，程序在手勢(shì)模式MultitouchInputMode.GESTURE下監(jiān)聽(tīng)旋轉(zhuǎn)手勢(shì)TransformGestureEvent.GESTURE_ROTATE事件，而在傳統(tǒng)滑鼠式課件中是通過(guò)滑動(dòng)鼠標(biāo)來(lái)實(shí)現(xiàn)圖形旋轉(zhuǎn)90度。

（3）“設(shè)計(jì)欣賞”模塊設(shè)計(jì)與開(kāi)發(fā)

在“設(shè)計(jì)欣賞“模塊中利用對(duì)稱和旋轉(zhuǎn)的特性設(shè)計(jì)了拼圖課件，支持多人共同操作課件，本課件設(shè)計(jì)了兩名學(xué)生共同協(xié)作完成拼圖設(shè)計(jì)。學(xué)生將手指定位在小方塊中間，手指拖動(dòng)小方塊到拼圖的位置。為構(gòu)建對(duì)稱圖形，需要旋轉(zhuǎn)小方塊的方向，學(xué)生利用旋轉(zhuǎn)手勢(shì)將小方塊旋轉(zhuǎn)。在課件中兩名學(xué)生可以同時(shí)操作左右兩邊的小方塊，通過(guò)變換旋轉(zhuǎn)組成新的圖案，如圖3。傳統(tǒng)課件的交互主要是鼠標(biāo)點(diǎn)擊的人機(jī)交互方式，多點(diǎn)觸控平板的環(huán)境下，學(xué)生面對(duì)面共同操作課件，體現(xiàn)了協(xié)作學(xué)習(xí)的新的交互方式。

“設(shè)計(jì)欣賞” 模塊實(shí)現(xiàn)的關(guān)鍵技術(shù)是多點(diǎn)交互事件的處理。課件中操作部件需要添加相應(yīng)的事件監(jiān)聽(tīng)操作，傳統(tǒng)滑鼠課件主要是處理MouseEvent.MOUSE_ DOWN事件，而多點(diǎn)觸控環(huán)境下，則處理TouchEvent.TOUCH_BEGIN的開(kāi)始事件。該模塊中主要是移動(dòng)和旋轉(zhuǎn)的操作。

小方塊的移動(dòng)主要處理TouchEvent.TOUCH_END和TouchEvent.TOUCH_BEGIN兩個(gè)事件。拖動(dòng)事件從點(diǎn)擊操作部件的TouchEvent.TOUCH_BEGIN事件，通過(guò)touchPointID來(lái)識(shí)別事件對(duì)應(yīng)的拖動(dòng)對(duì)象。

四、結(jié)語(yǔ)

多點(diǎn)觸控式課件改變了傳統(tǒng)滑鼠式課件的交互方式，用手勢(shì)操作課件使得人機(jī)交互更加自然，同時(shí)改變了傳統(tǒng)的協(xié)作學(xué)習(xí)方式，允許多個(gè)人同時(shí)書(shū)寫和繪畫等，實(shí)時(shí)面對(duì)面討論與動(dòng)手合作，創(chuàng)造了更多互動(dòng)的環(huán)境。多點(diǎn)觸控式課件作為新的計(jì)算機(jī)輔助教學(xué)的新工具，促進(jìn)了課堂協(xié)作學(xué)習(xí)新方式的發(fā)展，給協(xié)作學(xué)習(xí)教育帶來(lái)了新的變革與挑戰(zhàn)。如今，很多學(xué)校引進(jìn)了觸控式的電子白板、一體機(jī)等新教學(xué)設(shè)備，如何利用新的教學(xué)設(shè)備助力設(shè)計(jì)和開(kāi)發(fā)更多協(xié)作學(xué)習(xí)的教學(xué)資源，在新技術(shù)變革教育的研究方向當(dāng)中需要進(jìn)一步探討。

參考文獻(xiàn)：

[1]百度百科.多點(diǎn)觸摸技術(shù)[DB/OL].http：//baike.baidu.com/link？url =PpbEnvG7-kBlwp0TMh-WrlXypsOIFbnn8ZdEb7iYz6NbLKyx5qHsBebMSqhY9C7ObZduFgBEKVtwkszAReKwWq.

[2]網(wǎng)易科技報(bào)道.前沿視頻體驗(yàn)：神奇的多重觸控屏技術(shù)[EB/OL]. http：//tech.163.com/07/0227/09/38B1EJA 1000926PT.html.2007-02-27.

[3]黃榮懷.計(jì)算機(jī)支持的協(xié)作學(xué)習(xí)（理論與方法）[M].北京：人民教育出版社，2003.

[4]Lipponen Lasse.Exploring foundations for computer-supported[C].CSCL '02 Proceedings of the Conference on Computer Support for Collaborative Learning： Foundations for a CSCL Community.2002.

[5]Steve Higgins， Emma Mercier， Liz Burd， Joyce-Gibbons Andrew. Multi-touch tables and the relationship with collaborative classroom pedagogies A synthetic review[J].British Journal of Educational Technology.2012，43（6）：1042

[6]王冬冬.移動(dòng)學(xué)習(xí)游戲的設(shè)計(jì)與開(kāi)發(fā)[D].上海：華東師范大學(xué)，2011.

[7]劉世珍.基于Anbroid平臺(tái)學(xué)習(xí)軟件開(kāi)發(fā)研究與實(shí)踐[D].大慶：東北石油大學(xué)，2013.

[8]百度百科.flash cs6 [DB/OL]. http：//baike.baidu.com/

link？url= OREZBWvKdCDuDmB7_6UgfFCJ0XqoyMkiQ5m EFnaU9kJYQYnrzDF9YLXTzn9noqea-7RkJpA H wC18ei kkbBtgva.

[9]王棟昌.“圖形與變換”的教學(xué)分析——以北師大版教材為例[J].教學(xué)月刊：小學(xué)版（數(shù)學(xué)），2012（7）.

（編輯：李曉萍）