基于移動終端交互式學(xué)習(xí)課件響應(yīng)式布局模式研究

1、    基于移動終端交互式學(xué)習(xí)課件響應(yīng)式布局模式研究    夏麗雯張立里鐘山【摘 要】 隨著移動終端應(yīng)用設(shè)計的發(fā)展，更便攜的小屏移動終端交互閱讀的普及化已是一個重大的發(fā)展趨勢，但僅簡單的將pc電腦端的交互學(xué)習(xí)課件設(shè)計策略簡單的移植到移動設(shè)備上是行不通的。所以為了節(jié)約時間和成本，使交互學(xué)習(xí)課件兼容各種設(shè)備，本文通過移植web界面的響應(yīng)式設(shè)計理念以及對移動設(shè)備和pc電腦設(shè)備的特性對比分析，研究總結(jié)出既能在pc端設(shè)備上效果顯示良好又能同時優(yōu)化適配各種移動終端設(shè)備的交互學(xué)習(xí)課件響應(yīng)式布局模式，從而使移動終端交互學(xué)習(xí)課件用戶獲得得更好的學(xué)習(xí)體驗?！娟P(guān)鍵詞】 移動終

2、端；交互學(xué)習(xí)課件；響應(yīng)式布局模式g642.22 a 2095-3089（2016）07-00-011.引言隨著移動終端設(shè)備的普及，越來越多的交互閱讀用戶開始從大屏電腦端轉(zhuǎn)向屏幕更小更易攜帶的移動終端進行各種移動學(xué)習(xí)，那么在這樣的背景下“如果只是簡單的將桌面web的工作策略移植到移動設(shè)備上經(jīng)常是行不通的。這也讓教師和課件設(shè)計開發(fā)者面臨著各種問題。為不同的移動設(shè)備去開發(fā)交互學(xué)習(xí)課件 ，不僅耗費時間和成本，而且移動設(shè)備的更新?lián)Q代更快，想要產(chǎn)品兼容手機、平板電腦和pc，就得為不同的設(shè)備制定不同的版本”1。這些問題的存在使得教師和課件開發(fā)者需要考慮的不僅僅是交互學(xué)習(xí)課件的形式感和創(chuàng)新性，還應(yīng)考慮交互學(xué)習(xí)

3、課件從大屏幕轉(zhuǎn)向小屏幕閱讀的適應(yīng)性，即讓交互學(xué)習(xí)課件的設(shè)計既能在pc端設(shè)備上效果顯示良好又能同時優(yōu)化適配各種移動終端設(shè)備，從而使交互學(xué)習(xí)課件 用戶獲得更好的學(xué)習(xí)體驗。2.多設(shè)備的響應(yīng)式課件設(shè)計如果希望交互學(xué)習(xí)課件 能兼容各種移動終端設(shè)備，就必須借鑒響應(yīng)式設(shè)計的原理。響應(yīng)式的設(shè)計理念是為了web用戶在不同設(shè)備上的閱讀體驗一致，它“倡導(dǎo)用一種全新的方式去思考設(shè)計。其原則是頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整。無論用戶正在使用pc、平板還是手機，顯示頁面應(yīng)該都能夠自動調(diào)整布局、自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備”1。

4、而根據(jù)移動設(shè)備復(fù)雜的使用情景特點迫使設(shè)計師在設(shè)計開發(fā)時需“優(yōu)先考慮內(nèi)容在移動端的展示和實現(xiàn)，使用移動優(yōu)先的設(shè)計理念，使產(chǎn)品更簡單，也能更好地表達產(chǎn)品的功能”3。所以隨著移動學(xué)習(xí)者的增多，為了給學(xué)習(xí)者提供便利的個性化學(xué)習(xí)資源，減少開發(fā)時間成本，移動優(yōu)先的設(shè)計必然會受到越來越多的交互學(xué)習(xí)課件開發(fā)者的青睞。3.移動設(shè)備的屏幕特點分析要研究移動終端交互學(xué)習(xí)課件的響應(yīng)式設(shè)計，就必須了解產(chǎn)品要兼容的設(shè)備類型和屏幕像素尺寸。而移動交互學(xué)習(xí)課件應(yīng)用的設(shè)備類型包括手機、平板電腦。因為市面最主流的三大移動平臺所對應(yīng)產(chǎn)品屏幕的物理尺寸、屏幕比例和密度相對pc電腦端更為復(fù)雜多樣，又因為移動終端設(shè)備的屏幕像素尺寸直接關(guān)

5、系到交互閱讀產(chǎn)品的界面設(shè)計模式、圖形、特效以及文字的大小比例關(guān)系等，設(shè)計師必須歸納出目前主流的移動設(shè)備像素尺寸，便于在進行交互閱讀設(shè)計與制作時起到圖像大小生成的參考依據(jù)。目前市面上的主流移動終端設(shè)備屏幕像素尺寸歸納如下。（1）智能手機：ios系統(tǒng)設(shè)備屏幕規(guī)格和像素尺寸包括iphone5系列是4英寸1136x640像素，iphone6是4.7英寸1334x750像素。android、windows phone系統(tǒng)設(shè)備屏幕規(guī)格像素尺寸包括4.5英寸以上超高清手機一般是1920x1080像素，4英寸高清手機一般是1280x720像素，3英寸普通手機一般是960x540像素或800x480像素。（2）

6、平板電腦：ios系統(tǒng)設(shè)備屏幕規(guī)格和像素尺寸包括ipad mini系列是7.9英寸1024x768像素2048x1536像素，ipad air是9.7英寸2048x1536像素。android、windows phone系統(tǒng)設(shè)備屏幕規(guī)格像素尺寸包括7-7.85英寸小屏一般是1024x600像素，1024x768像素，1280x800像素，8-10.8英寸中屏和11-13英寸大屏一般使用平率最高的是1280x800像素，1366x768像素，1920x1080像素，2560x1600像素。4.移動終端交互學(xué)習(xí)課件響應(yīng)式布局結(jié)構(gòu)模式根據(jù)上述分析結(jié)果結(jié)合遵循“像素點的尺寸越小，屏幕密度越大，圖像的像素

7、大小是可以根據(jù)尺寸向下兼容的，圖像像素尺寸偏大，載入到屏幕對角尺寸較小的移動終端時會被縮小，清晰度不會損失；但圖像像素尺寸偏小，載入到屏幕對角尺寸較大的移動終端時會被放大，清晰度下降”2的原理。我們把這些復(fù)雜的屏幕尺寸簡單歸納為三個層次：手機屏幕、平板端屏幕及pc端屏幕，并且在結(jié)構(gòu)布局、繪制圖形、生成圖像文件時必須盡量按照大屏幕像素尺寸生成文件，以便適應(yīng)各種移動終端設(shè)備的顯示效果。又因為移動端屏幕小，手勢操作不精確，所以以移動優(yōu)先為原則，選取這三類屏幕中分辨率、像素密度最大的三個典型產(chǎn)品（手機屏幕為4.5英寸、1920x1080像素、490ppi；平板屏幕為10英寸、2560x1600像素、3

8、01ppi；pc屏幕為23英寸、1920x1080像素）結(jié)合交互學(xué)習(xí)課件 中比較典型內(nèi)容頁面進行響應(yīng)式布局模式研究，具體分析結(jié)論如下。1、封面式布局模式封面式布局一般是整個頁面上沒有明顯的劃分出內(nèi)容區(qū)域，就像雜志封面那樣排版簡潔，主體內(nèi)容盡量居于畫面中間。響應(yīng)后，整體畫面集中向主體內(nèi)容部分縮放，會根據(jù)小屏尺寸縮減背景圖片的一部分內(nèi)容，但不影響主要信息的傳達，如圖1所示。這種布局模式適合交互學(xué)習(xí)課件 中某一類或一段內(nèi)容的開篇提示頁，甚至還可以在頁面上放幾個簡單的內(nèi)容鏈接。2、左右雙列布局模式左右式布局一般是整個頁面明顯有左右兩塊不同的內(nèi)容區(qū)域。響應(yīng)后，頁面會根據(jù)內(nèi)容信息的重要性，將一邊區(qū)域更為重

9、要的信息響應(yīng)到最頂部，然后另一邊區(qū)域的內(nèi)容會隨著重要性逐層向下顯示，最后形成單列布局模式，如圖2所示。這種布局模式適合交互學(xué)習(xí)課件 中的內(nèi)容概述頁，即一邊圖片一邊是詳細說明文字。3、標(biāo)題布局模式標(biāo)題模式一般是上下結(jié)構(gòu)，最上面是標(biāo)題或問題，下面是圖片或文字區(qū)域，層級劃分明顯。響應(yīng)時，內(nèi)容結(jié)構(gòu)基本不變，只會隨著屏幕變窄，橫向多余內(nèi)容會依次向下堆疊，如圖3所示。這種模式適合目錄和知識點頁，內(nèi)容信息單一堆疊起來不會出現(xiàn)信息混亂繁雜的問題。4、網(wǎng)格式布局模式網(wǎng)格模式一般是排列整齊的上下結(jié)構(gòu)，最上面的內(nèi)容和標(biāo)題模式很像多半是標(biāo)題或問題，而下面是九宮格式的布局模式。響應(yīng)后，頁面內(nèi)容會根據(jù)屏幕的寬度自動從多列調(diào)整到雙列或單列模式，如圖4所示。這種布局模式適合交互學(xué)習(xí)課件 的圖片展示內(nèi)容詳解頁，并且每塊內(nèi)容信息相對獨立互不干擾，多以圖片展示或圖文混合展示為主。參考文獻：1傅小貞，胡甲超，鄭元攏.移動設(shè)計m.電子工