M-learning時代網絡課程設計新范式*
——響應式課程設計

陸靈明（玉林師范學院，廣西 玉林537000）

?

M-learning時代網絡課程設計新范式*
——響應式課程設計

陸靈明
（玉林師范學院，廣西 玉林537000）

當今的互聯網已步入移動互聯時代，各種移動設備飛速發展，計算機進入后PC時代，這種變化也導致網絡課程設計的底層——WEB設計發生巨大變化。文章從響應式WEB設計的三個關鍵要素談起，闡述了WEB課件設計的響應式布局趨勢，分析了響應式WEB設計面臨的挑戰，最后指出隨著未來的移動終端各種傳感的使用，將會大大擴展“響應式”課程設計的內涵，并最終使課程交互產生革命性的變革。

M-learning；響應式布局；課件交互

傳統互聯網進一步深入發展與電子技術的突飛猛進，使得全球快速進入了移動互聯網時代，據CNNIC發布的第34次《中國互聯網絡發展狀況統計報告》顯示，截至2014年6月，我國網民上網設備中，手機使用率達83.4%，首次超越傳統PC整體使用率80.9%，手機已經成為第一大上網終端設備。

對于教育、培訓領域來說，大都采用B/S架構，其主流的課件制作軟件正進一步向標準化、跨平臺的Web格式趨勢發展。李麗萍、莫永華等認為，“Html5與Flash這兩者功能上的互補是課件發展的趨勢，也是未來課件發布的主流”，“課件的發布遵從LMS平臺標準，從而便于學習跟蹤和測試。”［1］從根本上說，這也是課件開發的成本與效果這兩個維度所決定的。我們知道，自從蘋果公司與谷歌公司的移動操作系統發布以來，智能終端迅速普及。智能手機的移動性是傳統PC無可比擬的，尤其是近幾年來，手機CPU的運算速度，ROM容量與PC的差距越來越小，操作系統越來越完善，用戶體驗好，然而PC也自有其優勢，屏幕大，顯示的內容多，操作便利性，應用功能強大，幾十年積累的數以萬計軟件優勢，也是手機所不能比擬的。“一次編寫，到處運行”是課件開發者最理想的追求。

一、響應式建筑與響應式WEB設計

響應式設計源于建筑設計的概念：這種理論認為，智能建筑可以感知和反饋信息的，用戶可以參與的環境與空間。即物理空間應該可以根據存在于其中的人的情況進行響應。根據這種理念，建筑師們建造的房屋應是一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的墻體結構；同時還可以使用運動傳感器配合氣候控制系統，調整室內的溫度及環境光。

2010年5月，Ethan Marcotte發表的一篇文章《Responsive Web Design》認為：Web設計同樣應該做到根據不同設備環境自動響應及調整。他制作了一個范例，里面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。如果設備寬度在600像素到1300像素之間，6張圖片分成兩行。自此，這個思路延伸到了Web設計的領域。響應式Web設計興起的原因主要是計算機已進入了 “后PC時代”，各種終端的屏幕尺寸與分辨率在不斷變化中，而網頁要能夠適應不同環境下的需要，一個網站、多種終端進行訪問使得開銷成本大大降低。

二、響應式WEB的三大關鍵技術

1.流體網格（Fluid Grid）

因為現代文字的排列方式為橫排，所以根據閱讀不間斷的原理，在PC上閱讀，人們習慣于使用上下滾動條以擴大閱讀的范圍，同樣，在各種各樣的移動設備上，視圖區域并不固定，理想的方式是隨著屏幕的大小變化，內容進行重排，這樣就可以避免使用水平滾動條或者縮小版面。要做到這一點，流布局時對網站尺寸的測量單位需不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，它提供了很強的可塑性和流動性。通過設置百分比，你將不需要考慮設備尺寸或者屏幕寬度大小，可以為每種情形找到一種可行的方案，因為你的設計尺寸將適應所有的設備尺寸。響應式布局最大的特色就是版面調整的靈活性，它的顯示并不是針對瀏覽器的窗口，而是將網頁中的DIV塊進行靈活布局，大小和表現形式都是動態的。

2.彈性圖片與相對大小的字體（Flex Picture）

彈性圖片：指的是圖片能夠在不同的設備中呈現不同的效果。彈性布局跟流布局很相像，彈性布局的方法之一是采用em做為單位。一個em單位等于參考字體的大寫字母的高度，定義在CSS規則里面。例如，我們設置文本的font-size大小為20像素，那么 1em就等于20px。另外按照比例縮放圖片，也是很容易實現，最方便的是使用max-width和height:auto的屬性值。第一條規則確保圖像保持在父容器，而并不會溢出，忽略元素的高度與寬度，讓瀏覽器根據設備來設置圖像的大小。把圖像的寬度設置為最大值就是瀏覽器的寬度或者設備的寬度，所有當寬度減少時，圖像會按照比例縮小。

3.媒體查詢（Media Query）

媒體查詢是通過不同的環境下查詢到不同的值，以此來決定設備的特性，從而設計出更為行之有效的方案，解決之前單一布局中的問題。媒體類型（Media Type）在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式。到了CSS3里，得到了增強，Media Query就是對Media Type的增強版，它是響應式設計的核心，根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。設備通過媒介查詢的檢驗，然后調入相關的CSS樣式表，附加到HTML源碼上，從而控制相應的布局樣式。

三、技術實現

目前，關于響應式Web設計可以說是進行得熱火朝天，一些大型的門戶網站，諸如騰訊、百度等公司紛紛使用了響應式布局，教育領域的大學網站也陸續都改版為響應式布局，方便了移動終端的瀏覽。在實現手段上，技術人員除了上述的基本方式之外，還開發出各類響應式布局框架。

下面是目前最受響應式開發者歡迎的框架：

在課件制作領域，一些軟件公司也開始研發出相應的技術，下面是Trivantis公司的Lectora軟件，它的最新版本Lectora 16也已經開始支持響應式課程設計。下面是一個E-learning課件在臺式機或筆記本中呈現出的版面，在這個視圖中，很多元素是可以選擇顯示或者隱藏的。

表1　最常見的十大響應式布局框架

圖1　響應式課程的筆記本視圖［2］

當學習者在手機上訪問同一課件時，由于屏幕顯示區域的大小發生了很大的變化，在這樣的情況下，課件的內容就需要重新考慮。由于4∶3或16∶9的屏幕比例，橫向顯示時，顯示的區域變寬變窄，這種情況下可以去掉一些額外的導航按鈕，同時縮小圖片，這樣可以確保基本版式不變，學習者能看到完整的學習內容，繼續保持良好的學習體驗。

圖2　響應式課程的手機視圖

這一切，在新版本的Lectora 16里是通過一個叫做“響應式課程設計”的獨特方法來實現這個功能的。這個軟件的編輯界面頂部有一個“響應式工具條”，切換時可以顯示不同終端的顯示效果，可根據當前的特殊情況進行微調，這樣在作品編輯時查看不同設備的顯示效果，修改時候可以根據設備的不同進行多方考慮。

同時軟件還具有這樣的功能：根據Lectora非常有特色的繼承方式，可以讓它在臺式機模式下進行的調整繼承到其它視圖。在平板視圖下調整不會影響臺式機模式下的排版，但是會繼承到手機視圖。在手機視圖下進行的調整只影響到手機端的視圖，真正做到了“一次發布，到處運行”的理想狀態。

四、響應式網頁設計的挑戰

1.性能不佳

移動網絡體驗必須非常快，這樣才能做到實用，但目前市場上新上市的設備都有太多的屏幕分辨率與尺寸。從qHD（960×540）到QHD（2560×1440）甚至4K顯示器，相應的CSS像素數目也需要發生變化。如果使用基于寬度“節點”來為平板定義內容，手機的邏輯屏幕寬度和平板一樣時，手機上渲染顯示會非常的小，不適合瀏覽者觀看。不僅如此，瀏覽器的渲染在計算能力有限、動力不足的移動設備上，以及受限的移動網絡上，會對用戶體驗產生不利影響。

2.最終效果可能不一致

課件中對象呈現的相對位置有時非常重要。比如人物操作物件，不同的顯示方式會帶來不同的效果，即使重新排版。

3.交互方式

PC基于鼠標指針的互動，觸屏技術主要是觸摸、劃動；兩者有各自所適用的領域。設計課件時我們應該同時滿足這兩類設備的規范，比如觸屏設備無法反映CSS定義的hover行為及相應的樣式，因為它沒有鼠標指針的概念，手指點擊就是click行為。所以在觸摸屏上不應該有功能依賴于對hover狀態的觸發。

五、結束語

移動終端盛行的時代，這些設備不僅僅是為學習者提供的“應手之物”（馬丁·海德格爾），同時也是教師管理學生的“教具”。羅斯切利和皮（Roschelle&Pea，2002）曾經描述了移動終端可以將教師從“講臺上的圣人”（以教師為中心的教學）和“站在邊上指導者”（教師指導下的探索）這兩種對立的教學范式中解脫出來。［3］這些論述從全新的視角論述了移動設備的功能。

近幾年“電子書包”熱在國內被數字出版、IT企業和教育技術界掀起，然而電子書包并不只是包括一個單一的硬件設備，它的組成部分應該是 “移動終端+教育內容+服務平臺”，其中教育內容的建設是電子書包取代傳統出版物的關鍵。

當今，我們已經生活在一個日益豐富的智能設備世界里，我們的課件設計也應該做到一次設計，然后發布到任何設備上。這就會大大增加資源的使用效率，也能使泛在學習環境能夠更好的構建。與此同時，智能終端的傳感器和模式識別技術的發展帶來了人機交互的革命。各種傳感器都搭載到了移動設備上，如重力加速度、陀螺儀、GPS定位器、距離傳感器、NFC近場通訊等，這些器件已經讓手機具備了類似人的五官，能夠對周圍環境進行感知，大大增強了功能和體驗。

“新的輸入方式決定了終端有更加人性化的人機交互界面，用戶可以通過和智能終端的對話、肢體等方式操作智能終端。”［4］而這些特性，還并未引起教育領域課程制作者的重視，我們必須意識到：“響應式”課程并不單單是網頁布局的“響應”，它有著更廣泛的內涵。

［1］李麗萍，莫永華，楊上影等.主流快速課件工具對比及其發展趨勢［J］.現代教育技術，2015（9）：110-115.

［2］John Blackmon.響應式課程設計Responsive Course Design［EB/OL］.http：//blog.sina.com.cn/s/blog_946caa 3b0102 vwza.html.

［3］R·基思·索耶主編.劍橋學習科學手冊［M］.北京：教育科學出版社，2010.

［4］智能終端白皮書［DB/OL］.http：//www.cesi.ac.cn/cesi/guanwanglanmu/biaozhunhuayanjiu/2014/0724/11531. html.

（編輯：李曉萍）

G434

B

1673-8454（2016）10-0049-03

玉林師范學院高等教育本科教學改革工程立項項目“教育技術學專業（信息技術教育方向）課程改革研究”（編號：15XJJG37）的研究成果。