基于移動終端交互式學習課件響應式布局模式研究_第1頁
基于移動終端交互式學習課件響應式布局模式研究_第2頁
基于移動終端交互式學習課件響應式布局模式研究_第3頁
基于移動終端交互式學習課件響應式布局模式研究_第4頁
基于移動終端交互式學習課件響應式布局模式研究_第5頁
免費預覽已結束,剩余1頁可下載查看

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領

文檔簡介

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

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

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

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

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論