基于移动终端交互式学习课件响应式布局模式研究.docx

?

?

基于移动终端交互式学习课件响应式布局模式研究

?

?

夏丽雯张立里钟山

【摘要】随着移动终端应用设计的发展，更便携的小屏移动终端交互阅读的普及化已是一个重大的发展趋势，但仅简单的将PC电脑端的交互学习课件设计策略简单的移植到移动设备上是行不通的。所以为了节约时间和成本，使交互学习课件兼容各种设备，本文通过移植Web界面的响应式设计理念以及对移动设备和PC电脑设备的特性对比分析，研究总结出既能在PC端设备上效果显示良好又能同时优化适配各种移动终端设备的交互学习课件响应式布局模式，从而使移动终端交互学习课件用户获得得更好的学习体验。

【关键词】移动终端；交互学习课件；响应式布局模式

G642.22A2095-3089（2016）07-00-01

1.引言

随着移动终端设备的普及，越来越多的交互阅读用户开始从大屏电脑端转向屏幕更小更易携带的移动终端进行各种移动学习，那么在这样的背景下“如果只是简单的将桌面web的工作策略移植到移动设备上经常是行不通的。这也让教师和课件设计开发者面临着各种问题。为不同的移动设备去开发交互学习课件，不仅耗费时间和成本，而且移动设备的更新换代更快，想要产品兼容手机、平板电脑和PC，就得为不同的设备制定不同的版本”[1]。这些问题的存在使得教师和课件开发者需要考虑的不仅仅是交互学习课件的形式感和创新性，还应考虑交互学习课件从大屏幕转向小屏幕阅读的适应性，即让交互学习课件的设计既能在PC端设备上效果显示良好又能同时优化适配各种移动终端设备，从而使交互学习课件用户获得更好的学习体验。

2.多设备的响应式课件设计

如果希望交互学习课件能兼容各种移动终端设备，就必须借鉴响应式设计的原理。响应式的设计理念是为了web用户在不同设备上的阅读体验一致，它“倡导用一种全新的方式去思考设计。其原则是页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。无论用户正在使用PC、平板还是手机，显示页面应该都能够自动调整布局、自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备”[1]。而根据移动设备复杂的使用情景特点迫使设计师在设计开发时需“优先考虑内容在移动端的展示和实现，使用移动优先的设计理念，使产品更简单，也能更好地表达产品的功能”[3]。所以随着移动学习者的增多，为了给学习者提供便利的个性化学习资源，减少开发时间成本，移动优先的设计必然会受到越来越多的交互学习课件开发者的青睐。

3.移动设备的屏幕特点分析

要研究移动终端交互学习课件的响应式设计，就必须了解产品要兼容的设备类型和屏幕像素尺寸。而移动交互学习课件应用的设备类型包括手机、平板电脑。因为市面最主流的三大移动平台所对应产品屏幕的物理尺寸、屏幕比例和密度相对PC电脑端更为复杂多样，又因为移动终端设备的屏幕像素尺寸直接关系到交互阅读产品的界面设计模式、图形、特效以及文字的大小比例关系等，设计师必须归纳出目前主流的移动设备像素尺寸，便于在进行交互阅读设计与制作时起到图像大小生成的参考依据。目前市面上的主流移动终端设备屏幕像素尺寸归纳如下。

（1）智能手机：iOS系统设备屏幕规格和像素尺寸包括iPhone5系列是4英寸1136x640像素，iPhone6是4.7英寸1334x750像素。Android、WindowsPhone系统设备屏幕规格像素尺寸包括4.5英寸以上超高清手机一般是1920x1080像素，4英寸高清手机一般是1280x720像素，3英寸普通手机一般是960x540像素或800x480像素。

（2）平板电脑：iOS系统设备屏幕规格和像素尺寸包括iPadmini系列是7.9英寸1024x768像素2048x1536像素，iPadAir是9.7英寸2048x1536像素。Android、WindowsPhone系统设备屏幕规格像素尺寸包括7-7.85英寸小屏一般是1024x600像素，1024x768像素，1280x800像素，8-10.8英寸中屏和11-13英寸大屏一般使用平率最高的是1280x800像素，1366x768像素，1920x1080像素，2560x1600像素。

4.移动终端交互学习课件响应式布局结构模式

根据上述分析结果结合遵循“像素点的尺寸越小，屏幕密度越大，图像的像素大小是可以根据尺寸向下兼容的，图像像素尺寸偏大，载入到屏幕对角尺寸较小的移动终端时会被缩小，清晰度不会损失；但图像像素尺寸偏小，载入到屏幕对角尺寸较大的移动终端时会被放大，清晰度下降”[2]的原理。我们把这些复杂的屏幕尺寸简单归纳为三个层次：手机屏幕、平板端屏幕及PC端屏幕，并且在结构布局、绘制图形、生成图像文件时必须尽量按照大屏幕像素尺寸生成文件，以便适应各种移动终端设备的显示效果。