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

夏麗雯　張立里　鐘山

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

【關(guān)鍵詞】 移動終端；交互學(xué)習(xí)課件；響應(yīng)式布局模式

【中圖分類號】G642.22 【文獻(xiàn)標(biāo)識碼】A 【文章編號】2095-3089（2016）07-00-01

1.引言

隨著移動終端設(shè)備的普及，越來越多的交互閱讀用戶開始從大屏電腦端轉(zhuǎn)向屏幕更小更易攜帶的移動終端進(jìn)行各種移動學(xué)習(xí)，那么在這樣的背景下“如果只是簡單的將桌面web的工作策略移植到移動設(shè)備上經(jīng)常是行不通的。這也讓教師和課件設(shè)計(jì)開發(fā)者面臨著各種問題。為不同的移動設(shè)備去開發(fā)交互學(xué)習(xí)課件 ，不僅耗費(fèi)時(shí)間和成本，而且移動設(shè)備的更新?lián)Q代更快，想要產(chǎn)品兼容手機(jī)、平板電腦和PC，就得為不同的設(shè)備制定不同的版本”[1]。這些問題的存在使得教師和課件開發(fā)者需要考慮的不僅僅是交互學(xué)習(xí)課件的形式感和創(chuàng)新性，還應(yīng)考慮交互學(xué)習(xí)課件從大屏幕轉(zhuǎn)向小屏幕閱讀的適應(yīng)性，即讓交互學(xué)習(xí)課件的設(shè)計(jì)既能在PC端設(shè)備上效果顯示良好又能同時(shí)優(yōu)化適配各種移動終端設(shè)備，從而使交互學(xué)習(xí)課件 用戶獲得更好的學(xué)習(xí)體驗(yàn)。

2.多設(shè)備的響應(yīng)式課件設(shè)計(jì)

如果希望交互學(xué)習(xí)課件 能兼容各種移動終端設(shè)備，就必須借鑒響應(yīng)式設(shè)計(jì)的原理。響應(yīng)式的設(shè)計(jì)理念是為了web用戶在不同設(shè)備上的閱讀體驗(yàn)一致，它“倡導(dǎo)用一種全新的方式去思考設(shè)計(jì)。其原則是頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。無論用戶正在使用PC、平板還是手機(jī)，顯示頁面應(yīng)該都能夠自動調(diào)整布局、自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備”[1]。而根據(jù)移動設(shè)備復(fù)雜的使用情景特點(diǎn)迫使設(shè)計(jì)師在設(shè)計(jì)開發(fā)時(shí)需“優(yōu)先考慮內(nèi)容在移動端的展示和實(shí)現(xiàn)，使用移動優(yōu)先的設(shè)計(jì)理念，使產(chǎn)品更簡單，也能更好地表達(dá)產(chǎn)品的功能”[3]。所以隨著移動學(xué)習(xí)者的增多，為了給學(xué)習(xí)者提供便利的個(gè)性化學(xué)習(xí)資源，減少開發(fā)時(shí)間成本，移動優(yōu)先的設(shè)計(jì)必然會受到越來越多的交互學(xué)習(xí)課件開發(fā)者的青睞。

3.移動設(shè)備的屏幕特點(diǎn)分析

要研究移動終端交互學(xué)習(xí)課件的響應(yīng)式設(shè)計(jì)，就必須了解產(chǎn)品要兼容的設(shè)備類型和屏幕像素尺寸。而移動交互學(xué)習(xí)課件應(yīng)用的設(shè)備類型包括手機(jī)、平板電腦。因?yàn)槭忻孀钪髁鞯娜笠苿悠脚_所對應(yīng)產(chǎn)品屏幕的物理尺寸、屏幕比例和密度相對PC電腦端更為復(fù)雜多樣，又因?yàn)橐苿咏K端設(shè)備的屏幕像素尺寸直接關(guān)系到交互閱讀產(chǎn)品的界面設(shè)計(jì)模式、圖形、特效以及文字的大小比例關(guān)系等，設(shè)計(jì)師必須歸納出目前主流的移動設(shè)備像素尺寸，便于在進(jìn)行交互閱讀設(shè)計(jì)與制作時(shí)起到圖像大小生成的參考依據(jù)。目前市面上的主流移動終端設(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）平板電腦：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é)合遵循“像素點(diǎn)的尺寸越小，屏幕密度越大，圖像的像素大小是可以根據(jù)尺寸向下兼容的，圖像像素尺寸偏大，載入到屏幕對角尺寸較小的移動終端時(shí)會被縮小，清晰度不會損失；但圖像像素尺寸偏小，載入到屏幕對角尺寸較大的移動終端時(shí)會被放大，清晰度下降”[2]的原理。我們把這些復(fù)雜的屏幕尺寸簡單歸納為三個(gè)層次：手機(jī)屏幕、平板端屏幕及PC端屏幕，并且在結(jié)構(gòu)布局、繪制圖形、生成圖像文件時(shí)必須盡量按照大屏幕像素尺寸生成文件，以便適應(yīng)各種移動終端設(shè)備的顯示效果。又因?yàn)橐苿佣似聊恍?，手勢操作不精確，所以以移動優(yōu)先為原則，選取這三類屏幕中分辨率、像素密度最大的三個(gè)典型產(chǎn)品（手機(jī)屏幕為4.5英寸、1920x1080像素、490ppi；平板屏幕為10英寸、2560x1600像素、301ppi；PC屏幕為23英寸、1920x1080像素）結(jié)合交互學(xué)習(xí)課件 中比較典型內(nèi)容頁面進(jìn)行響應(yīng)式布局模式研究，具體分析結(jié)論如下。

1、封面式布局模式

封面式布局一般是整個(gè)頁面上沒有明顯的劃分出內(nèi)容區(qū)域，就像雜志封面那樣排版簡潔，主體內(nèi)容盡量居于畫面中間。響應(yīng)后，整體畫面集中向主體內(nèi)容部分縮放，會根據(jù)小屏尺寸縮減背景圖片的一部分內(nèi)容，但不影響主要信息的傳達(dá)，如圖1所示。這種布局模式適合交互學(xué)習(xí)課件 中某一類或一段內(nèi)容的開篇提示頁，甚至還可以在頁面上放幾個(gè)簡單的內(nèi)容鏈接。

2、左右雙列布局模式

左右式布局一般是整個(gè)頁面明顯有左右兩塊不同的內(nèi)容區(qū)域。響應(yīng)后，頁面會根據(jù)內(nèi)容信息的重要性，將一邊區(qū)域更為重要的信息響應(yīng)到最頂部，然后另一邊區(qū)域的內(nèi)容會隨著重要性逐層向下顯示，最后形成單列布局模式，如圖2所示。這種布局模式適合交互學(xué)習(xí)課件 中的內(nèi)容概述頁，即一邊圖片一邊是詳細(xì)說明文字。

3、標(biāo)題布局模式

標(biāo)題模式一般是上下結(jié)構(gòu)，最上面是標(biāo)題或問題，下面是圖片或文字區(qū)域，層級劃分明顯。響應(yīng)時(shí)，內(nèi)容結(jié)構(gòu)基本不變，只會隨著屏幕變窄，橫向多余內(nèi)容會依次向下堆疊，如圖3所示。這種模式適合目錄和知識點(diǎn)頁，內(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)容信息相對獨(dú)立互不干擾，多以圖片展示或圖文混合展示為主。

參考文獻(xiàn)：

[1]傅小貞，胡甲超，鄭元攏.移動設(shè)計(jì)[M].電子工業(yè)出版社 ，2013.

[2]趙大羽，關(guān)東升. 品味移動設(shè)計(jì)——iOS、Android、W英寸dows Phone用戶體驗(yàn)設(shè)計(jì)最佳實(shí)踐[M].人民郵電出版社 ，2013.

[3]http：//www.ch英寸az.com/manage/2011/1121/221607.shtml

[4]趙國棟，李志剛.混合式教學(xué)與交互式視頻課件設(shè)計(jì)教程[M].高等教育出社.2013.7