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

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

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

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

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

5、系到交互閱讀產(chǎn)品的界面設(shè)計(jì)模式、圖形、特效以及文字的大小比例關(guān)系等，設(shè)計(jì)師必須歸納出目前主流的移動(dòng)設(shè)備像素尺寸，便于在進(jìn)行交互閱讀設(shè)計(jì)與制作時(shí)起到圖像大小生成的參考依據(jù)。目前市面上的主流移動(dòng)終端設(shè)備屏幕像素尺寸歸納如下。（1）智能手機(jī)：ios系統(tǒng)設(shè)備屏幕規(guī)格和像素尺寸包括iphone5系列是4英寸1136x640像素，iphone6是4.7英寸1334x750像素。android、windows phone系統(tǒng)設(shè)備屏幕規(guī)格像素尺寸包括4.5英寸以上超高清手機(jī)一般是1920x1080像素，4英寸高清手機(jī)一般是1280x720像素，3英寸普通手機(jī)一般是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.移動(dòng)終端交互學(xué)習(xí)課件響應(yīng)式布局結(jié)構(gòu)模式根據(jù)上述分析結(jié)果結(jié)合遵循“像素點(diǎn)的尺寸越小，屏幕密度越大，圖像的像素

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

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

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