楊葉　陳琳　董啟標

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

【關(guān)鍵詞】移動智能終端；響應式設(shè)計；Web設(shè)計；移動學習資源

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

引言

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

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

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

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

1 移動互聯(lián)網(wǎng)市場規(guī)模擴大

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

2 移動智能終端發(fā)展迅猛

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

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

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

由此可見，現(xiàn)階段移動學習的發(fā)展主要得益于這三方面因素：移動互聯(lián)網(wǎng)規(guī)模的擴大、移動智能終端的普及以及移動學習資源的豐富，三者缺一不可。由于移動學習資源是移動學習系統(tǒng)的核心，是對現(xiàn)有學習資源的一種補充，是開展一切移動學習活動的基礎(chǔ)，因此移動學習資源質(zhì)量的高低直接決定了移動學習的成效。

二 傳統(tǒng)Web移動學習資源的特點及面臨的問題

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

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

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

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

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

2 頁面布局不能自適應調(diào)整

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

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

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

4 頁面多媒體呈現(xiàn)形式受到制約

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

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

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

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

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

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

（1）一切以彈性為基礎(chǔ)

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

（2）引入媒介查詢

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

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

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

2 響應式Web移動學習資源設(shè)計原則

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

（1）彈性化原則

彈性布局是進行一切響應式Web設(shè)計的前提，在此基礎(chǔ)上再引入媒介查詢的功能，根據(jù)不同的設(shè)備對內(nèi)容、圖片和布局進行相應的調(diào)整與優(yōu)化，讓頁面更加“彈性化”。

（2）觸控優(yōu)先原則

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

（3）宏觀性原則

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

（4）移動優(yōu)先原則

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

四 響應式Web移動學習資源設(shè)計實例

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

1 內(nèi)容設(shè)計

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

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

2 界面布局設(shè)計

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

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

只有彈性布局還遠遠不能實現(xiàn)響應式布局，只有結(jié)合媒介查詢才能發(fā)揮其功能。在進行Web頁面設(shè)計之前必須考慮到該頁面最終要匹配哪幾種屏幕分辨率，如本設(shè)計為了兼容目前主流移動智能終端的屏幕分辨率，特此將分辨率的寬度值設(shè)置為3個數(shù)值段：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），然后結(jié)合靈活網(wǎng)格模式分別為不同數(shù)值段的分辨率寫相應的樣式。至此，響應式Web設(shè)計與開發(fā)的部分就結(jié)束了，當不斷改變屏幕分辨率時，布局和內(nèi)容也會隨之改變。最終呈現(xiàn)效果見圖3。

五 結(jié)束語

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