響應式Web移動學習資源的技術實現與設計研究

楊葉　陳琳　董啟標

【摘要】在Web設計理念與技法不斷發展、移動智能設各種類不斷增多的背景下，如何最大限度地適應各種性能與規格的終端設備，成為Web移動學習資源設計過程中必須要解決的問題。文章分析了目前主流移動智能終端的發展狀況，概述了傳統Web移動學習資源的特點及面臨的問題，并在論述了響應式Web設計相關技術的基礎上提出了響應式Web設計的四大原則，最后以“數字攝影”專題網站為例，重點闡述了響應式Web移動學習資源的技術實現和設計過程。

【關鍵詞】移動智能終端；響應式設計；Web設計；移動學習資源

【中圖分類號】G40-057 【文獻標識碼】A 【論文編號】1009—8097（2013）06—0107—05

引言

隨著移動計算技術、無線通訊技術和軟硬件技術的發展，特別是以手機為代表的移動設備的功能越來越強大，移動學習已經成為當前教育技術研究的熱點。E-Learning Guild組織最新的一項研究表明：移動設備被證明是世界上發展最快的技術產業，它正改變著人們思考、工作、交往的方式。移動技術的最新進展更是能夠讓用戶在任何時間、任何地點訪問信息，從而為人們的學習和生活帶來極大的便利。

我國正在建設學習型社會，《國家中長期教育改革和發展規劃綱要（2010—2020年）》將到2020年基本形成學習型社會作為未來十年三大戰略目標之一，由此可以預見，在即將到來的學習型社會中，人們的學習將會更多地依賴網絡化學習資源。隨著“共建共享”理念深入人心，學習資源以驚人的速度持續增長，資源的數量不再是制約人們學習的主要因素。而讓開發的Web學習資源最大限度地適應各種性能各異的移動終端，在各種終端上最優化顯示，成為移動學習者的普遍要求，也是資源建設者們必須著力解決的問題。

一 移動智能終端對移動學習的影響

在世界許多國家，各種移動智能終端正在成為個人與社會鏈接的新型信息接入端口，而數量龐大的移動智能終端進一步促進了終端應用產業的發展，這其中就包括了對移動學習的推動。2012年，eLeaming Guild組織在《Mobile Learning：The Time Is Now》的報告中指出，越來越多的組織和機構意識到移動學習的重要性和優勢，并對2009年至2012年期間移動學習的開展情況、2012年開展移動學習過程中智能終端的使用情況分別進行了調查，結果顯示2009年有44，3%的人計劃進行移動學習，2012年這個數字已經增長到了65，7%，表明移動學習的人數在逐年大幅度增長。利用智能手機和平板電腦進行移動學習的人數分別占據各自使用人數的44，3%和40，3%，表明使用智能手機和平板電腦等移動智能終端進行移動學習的比例越來越高，投身到移動學習隊伍中的人數越來越多。如此高比例的人使用移動智能終端進行移動學習，其原因在于以下方面：

1 移動互聯網市場規模擴大

根據艾瑞咨詢統計數據顯示，2012年移動互聯網的市場規模達到393億，增長率達到97，5%。隨著智能手機為代表的移動智能終端的進一步普及，以及在互聯網細分領域中移動電子商務的爆發，2012年移動互聯網的增長會達到一個新的高度，預測增長率達到148%。在如此大規模的移動互聯網市場的驅動下，把移動學習資源與移動互聯網充分整合，更有利于學習資源的傳播與共享，使得移動學習的應用范圍更加廣泛。

2 移動智能終端發展迅猛

工信部電信研究院于2012年4月13日發布的《移動終端白皮書》中指出，2011年我國移動終端總出貨量已達4.55億部，其中包括智能手機和平板電腦在內的移動智能終端出貨量達1.1億部，超過此前歷年移動智能終端出貨量總和。隨著智能終端的普及，移動互聯網的網民增速也非常迅猛。2011年，移動互聯網網民的規模達到3.6億，趨勢預測到2016年移動互聯網用戶的規模將超出PC互聯網的網民規模。在移動智能終端和移動互聯網交替發展、相互促進勢頭的引領下，移動學習者將目光轉向移動智能終端是在情理之中，加之移動智能終端在移動學習中所擁有的得天獨厚的優勢，如屏幕尺寸大（與非智能移動終端相比）、便于攜帶、交互性強等，更加推動了移動學習向智能化方向發展。

3 適宜移動智能終端的學習資源日趨豐富

除了專門針對移動智能終端開發的學習資源，如App、教育應用軟件外，移動智能終端能夠適應多種學習資源。這種普適性不僅能夠充分利用現有的學習資源，而且可以節約資源制作成本。

由此可見，現階段移動學習的發展主要得益于這三方面因素：移動互聯網規模的擴大、移動智能終端的普及以及移動學習資源的豐富，三者缺一不可。由于移動學習資源是移動學習系統的核心，是對現有學習資源的一種補充，是開展一切移動學習活動的基礎，因此移動學習資源質量的高低直接決定了移動學習的成效。

二 傳統Web移動學習資源的特點及面臨的問題

目前常見的移動學習資源形式可以概括為以下幾種：短信/彩信、電子書、網頁（即Web學習資源）、微課程、網絡課程、智能交互課程以及教育游戲等，其中Web移動學習資源憑借其跨瀏覽器和跨平臺的特性廣受用戶好評。就連原蘋果公司CEO喬布斯在談到這個問題時也明確表達了他的觀點：雖然現階段原生應用程序給了用戶更好的體驗，但是Web才是應用程序的未來。由此可以看出，Web技術在程序開發和資源建設方面具有廣闊的前景和巨大的潛力。

傳統Web移動學習資源主要是面向PC機的桌面瀏覽器設計開發的，其特點主要有：（1）在內容選擇方面：為了從視、聽等多方面調動人們的感官接受信息，并能充分、準確、有效地呈現信息，Web頁面往往采用音頻、視頻、動畫等多媒體信息呈現形式；（2）在頁面布局方面：為了適應PC機的屏幕尺寸和分辨率，Web頁面通常采用兩欄式或三欄式布局；（3）在交互設計方面：用戶一般都是通過鼠標和鍵盤設備與Web界面進行交互。

然而由于移動智能終端在尺寸、分辨率以及交互方式等方面與PC機存在較大的差異（見表1），因此原先針對PC機設計的傳統Web移動學習資源，在很大程度上不適合移動智能終端使用，主要體現在以下4方面：

1 頁面大小不能匹配終端屏幕大小

目前主流PC機的分辨率都在1024*768以上，在設計頁面時寬度一般固定在1000像素左右，按鈕、廣告條幅等其他網頁元素都是基于這個寬度進行設計的。而移動終端的屏幕分辨率相對較小，大多處于480*800-960*640之間。如果使用移動終端來呈現，那么頁面必然會被裁切，不能顯示完整的內容。此時，用戶必須通過縮放和移動來顯示被裁切的部分，直接影響用戶的使用效果和滿意度。

2 頁面布局不能自適應調整

由于移動智能終端屏幕分辨率紛繁復雜，尺寸類別大小各異，定向類型橫豎兼容。因此，要求所呈現的學習資源在布局上要相對靈活，能夠針對屏幕進行自適應調整。否則，在顯示過程中將會出現混亂的頁面布局，極大地降低了移動學習資源的質量。傳統的Web學習資源的兩欄式或三欄式布局，結構相對穩定，符合用戶的認知心理和行為方式，能夠提高PC機用戶的閱讀效率，但卻不適合移動終端用戶的體驗。

3 頁面交互元素不適宣手指觸摸

在觸屏移動設備中，主要通過手指與界面進行交互操作。比起傳統的鼠標指針，手指觸控方式需要的目標作用區域更大。然而傳統的Web學習資源在設計過程中卻沒有考慮到這一點，因此增加了移動終端用戶的使用難度。

4 頁面多媒體呈現形式受到制約

眾所周知，Web是一種超媒體，是在超文本環境下的多媒體綜合。因此，傳統的Web學習資源在內容方面已經從文本擴展到圖形、圖像、動畫、視頻和聲音等多種媒介形式。而對于移動終端而言，設計者除了要選擇合適的媒介形式來呈現學習資源外，還要考慮帶寬的限制和終端設備的性能。由于無線網絡速度慢、穩定性差、傳輸較大數據時容易造成學習的中斷，從而影響學習的效果和效率。因此從這個角度而言，傳統的Web學習資源已經不再適合在移動終端呈現了。

三 響應式Web移動學習資源技術支持及設計原則

為了解決傳統Web學習資源在移動智能終端上呈現時出現的上述問題，使用戶能夠獲得與PC機的桌面端一致的用戶體驗，最直接的方法就是為不同尺寸和分辨率的設備制作特定的頁面。而電子產品的“摩爾定律”表明，隨著時間的推移會有更多的移動設備投入市場。如果為每種設備都制作特定的頁面，將會耗費巨大的人力和物力，并造成資源的重復建設。人們期待的是只做一個網站或一套頁面，既能適合桌面大尺寸屏幕，同時也可以適合各種不同移動設備的小尺寸屏幕。

滿足人們期待的是利用響應式Web設計（Responsive WebDesign）。響應式Web設計是EthanMarcotte在2010年5月份提出的一個概念，其內容的核心是一個網站或網頁能夠兼容多個終端——而不是為每個終端定制一個特定的版本。它的設計理念是：頁面的設計與開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。這樣，人們就不必為不斷到來的新設備做專門的版本設計和開發了。

1 支持移動學習資源“響應式”的新技術

響應式Web移動學習資源的設計與開發是新課題，主要有三大支撐技術——彈性布局、媒體查詢和液態圖片。

（1）一切以彈性為基礎

所謂彈性布局就是不對瀏覽器的寬度作任何設定，即非固定式布局，因而能優雅地適應不論是水平式的還是豎直式的終端設備。然而，無論是固定式還是非固定式布局，都要依賴其原本的媒介環境來設計，而彈性布局只能很好地適應普通PC機顯示屏。因此，所謂的彈性布局其實也并非那樣彈性，但它是進行一切響應式設計的基礎。如果沒有彈性布局，那么后續的響應式Web設計工作將無法進行。只有在彈性布局的基礎上再嵌入各種基于互聯網標準的其他技術，才能更好地適應不同媒介的呈現。

（2）引入媒介查詢

媒介查詢是響應式設計的核心，它根據條件告訴瀏覽器如何為指定寬度的視圖渲染頁面。媒介查詢使我們不僅能針對某些特定的設備類型，還能夠對呈現設計的設備物理特性進行檢驗。例如，隨著移動WebKit的普及，媒介查詢已經成為一項很常用的技巧，用以向iOS、Android及其他移動系統提供定制的樣式表。具體方法是在鏈接樣式表的媒介屬性中加上這樣一個查詢語句：。這個語句中包含兩個部分：①媒介類別——屏幕（screen）；②括號中的查詢內容，包括具體需要檢驗的媒介特性——最大設備寬度（max-device-width），以及緊跟其后的目標數值480px。代碼本身可以很好地說明工作機制：當屏幕寬度不超過480px，則加載layout，css樣式表；否則，該樣式表將被忽略。另外，不僅可以把媒介查詢放置在鏈接中，還可以用“@media”方法在CSS樣式表內進行媒介查詢：@media screen and（max-device-width：480px）{float：none；）。以上使用的兩種媒介查詢方式，其效果是相同的：一旦設備通過媒介查詢的檢驗，相關的CSS樣式表即被附加到源碼上。

（3）讓圖片“流動”起來

響應式Web設計的思路中，圖片如何顯示是一個至關重要的問題。有很多同比縮放圖片的技術，其中有不少是簡單易行的，如使用CSS的max-width屬性：img{max-width：100%；）。只要沒有另外規定圖片的具體寬度，頁面上所有的圖片就會以其原始寬度進行加載，除非其容器可視部分的寬度小于圖片的原始寬度。上面的代碼確保圖片最大的寬度不會超過瀏覽器窗口或是其容器可視部分的寬度，所以當窗口或容器的可視部分開始變窄時，圖片的最大寬度值也會相應的減小，圖片本身永遠不會被容器邊緣隱藏和覆蓋。這種做法就好像把圖片比作液體一樣，能夠自由“流動”，液態圖片也由此得來。

2 響應式Web移動學習資源設計原則

美國交互媒體設計大師Rob Flaherty在他的Design垤The Well-Tempered Web文章中就響應式Web設計的一系列問題給出了一些建議，在此基礎上，本文結合作者的Web開發經驗，提出在響應式Web設計中要遵循的四大原則：

（1）彈性化原則

彈性布局是進行一切響應式Web設計的前提，在此基礎上再引入媒介查詢的功能，根據不同的設備對內容、圖片和布局進行相應的調整與優化，讓頁面更加“彈性化”。

（2）觸控優先原則

易于手指觸摸的按鈕同樣易于鼠標點擊，但反之則不然。因此為了使界面能夠適用于更多的平臺環境，設計師應該在觸控優先原則的基礎上將原始的設計方案進行微調，最終達到一種折中的狀態，即既適合手指觸摸又適合鼠標點擊。

（3）宏觀性原則

俗話說“盡早測試，經常測試”。在響應式Web開發過程中，設計人員每一階段都要在多種瀏覽器和不同尺寸屏幕中進行測試，以盡早發現問題。

（4）移動優先原則

從移動端開始產品的設計工作，能夠讓設計人員關注到對用戶來說什么才是真正的問題。同時要特別留意那些不具備跨平臺能力的交互形式，其中最常見的一個問題就是觸屏設備通常無法支持傳統設備當中的鼠標懸停狀態。

四 響應式Web移動學習資源設計實例

為了更加深入地研究響應式Web移動學習資源的設計過程，文章以陳琳教授的國家精品教材、國家級規劃教材——《數字影像技術》為內容參照，運用以上三大支撐技術來進行“數字攝影”專題網站的設計與開發。眾所周知，Web學習資源主要是在Web上進行信息傳播的系統實體，內容、結構與界面是其核心所在。因此，根據學習資源設計的基本原則和Web學習資源的特點，我們將設計過程概括為以下兩大部分：

1 內容設計

移動學習資源的學習內容與教學目標、教學對象、教學設計方案的選擇等方面有關，設計者必須根據學習者本身的特性和教學目標進行學習資源的內容結構設計。《數字影像技術》作為高等學校教育技術專業以及美術、設計、廣告、印刷、醫學影像、新聞等專業攝影及相關課程教材，針對的多是高校學生、專業攝影人員等成人學者。因而，在進行響應式Web移動學習資源設計時，必須考慮相關學習者的學習特點和認知特性，在此基礎上才能進行內容的選取和設計。從一般意義上講，成人學習者的特性包括學習者認知風格多樣、元認知能力強、有較強烈的學習動機、對學習內容與學習進度的個性化要求程度高等方面。因此，在內容選取時要做到：全面、科學的把握教材的重點，準確、精煉的提煉研究的難點，深入淺出的表達原理、技法，最終達到理論與實踐、知識與能力、技術與藝術等多樣化的統一。

為了能達到這三方面的統一，在內容安排上除了介紹關于攝影方面的理論知識外，還要進行關于加工創意的闡釋；除了介紹相關攝影的技術技法外，還要進行關于拍攝藝術方面的指導等等。因此網站的內容主要包括：數字照相機、拍攝技術、拍攝藝術、加工創意、專題攝影、專家博客、開放資源和課程學習等。

2 界面布局設計

界面布局設計是對頁面的空間進行分割的設計，包括對導航、按鈕、圖片、文字等內容的位置進行設計。友好的界面布局主要體現在布局合理和響應式布局這兩方面。所謂布局合理，是指運用美學構圖中的形式美規律，即對稱、平衡、黃金分割、對比、多樣統一和變化，結合光影、色彩、影調等輔助手段，對網頁設計元素及內容進行合理布局，使網頁形式富有節奏感并且圖文并茂，符合學習者的認知規律和審美特點。在本設計中，為了突出布局的合理性，采用圖片和文本搭配的方式來均衡整體布局；針對學習資源使用的人群特點來選取恰當的呈現風格；根據視覺的主次關系來安排網站內容的布局方式等等。這是從宏觀層面進行的界面布局，而微觀層面的界面布局只能依靠響應式布局來實現了。

響應式布局是在彈性布局的基礎上，結合媒介查詢的功能實現的。常用的彈性布局模式主要有靈活網格模式和垂直列表模式。所謂靈活網格模式主要依賴靈活的柵格和液態圖片來實現，隨著分辨率的不斷縮小，內容的顯示方式是隨著某列的內容依次往下排，而柵格或圖片的大小也可以靈活變動，如圖1所示。而垂直列表模式是以多列開始，以單列結束，當屏幕尺寸變小時，列內容會依次往下，從而使柵格和圖片的大小基本保持不變，如圖2所示。考慮到專題網站內容的豐富性，因此本設計選擇靈活網格模式來進行彈性布局。

只有彈性布局還遠遠不能實現響應式布局，只有結合媒介查詢才能發揮其功能。在進行Web頁面設計之前必須考慮到該頁面最終要匹配哪幾種屏幕分辨率，如本設計為了兼容目前主流移動智能終端的屏幕分辨率，特此將分辨率的寬度值設置為3個數值段：1080px以上、768px～1080px以及480px～768px。因此在寫CSS樣式表時就可以將媒介查詢語句分別寫為：@media only screen and（min-width：768px）and（max-width：1080px）、@media only screen and（max-width：767px）和@media only screen and（min-width：480px）and（max-width：767px），然后結合靈活網格模式分別為不同數值段的分辨率寫相應的樣式。至此，響應式Web設計與開發的部分就結束了，當不斷改變屏幕分辨率時，布局和內容也會隨之改變。最終呈現效果見圖3。

五 結束語

響應式Web設計可以為不同智能終端的用戶提供更加舒適的界面和更好的用戶體驗，隨著Web技術的不斷進步和移動智能設備的不斷普及，用大勢所趨來形容絲毫不為過。雖然響應式Web設計在技術方面還存在著一些不足，并且對于不同終端設備的用戶體驗來說也不是最完美的解決方案，然而就目前的Web技術發展狀況而言，它的確能給我們帶來不一樣的驚喜。隨著越來越多的Web設計人員采用響應式設計方案，也將會有越來越多的基于響應式Web設計的移動學習資源產生。到那時，它不僅能提升用戶體驗的滿意度，而且還能改變人們的學習媒介，進而轉變人們的學習方式，乃至最后推動整個移動學習的發展。