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

夏丽雯　张立里　钟山

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

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

【中图分类号】G642.22 【文献标识码】A 【文章编号】2095-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、Windows Phone系统设备屏幕规格像素尺寸包括4.5英寸以上超高清手机一般是1920x1080像素，4英寸高清手机一般是1280x720像素，3英寸普通手机一般是960x540像素或800x480像素。

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

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

根据上述分析结果结合遵循“像素点的尺寸越小，屏幕密度越大，图像的像素大小是可以根据尺寸向下兼容的，图像像素尺寸偏大，载入到屏幕对角尺寸较小的移动终端时会被缩小，清晰度不会损失；但图像像素尺寸偏小，载入到屏幕对角尺寸较大的移动终端时会被放大，清晰度下降”[2]的原理。我们把这些复杂的屏幕尺寸简单归纳为三个层次：手机屏幕、平板端屏幕及PC端屏幕，并且在结构布局、绘制图形、生成图像文件时必须尽量按照大屏幕像素尺寸生成文件，以便适应各种移动终端设备的显示效果。又因为移动端屏幕小，手势操作不精确，所以以移动优先为原则，选取这三类屏幕中分辨率、像素密度最大的三个典型产品（手机屏幕为4.5英寸、1920x1080像素、490ppi；平板屏幕为10英寸、2560x1600像素、301ppi；PC屏幕为23英寸、1920x1080像素）结合交互学习课件 中比较典型内容页面进行响应式布局模式研究，具体分析结论如下。

1、封面式布局模式

封面式布局一般是整个页面上没有明显的划分出内容区域，就像杂志封面那样排版简洁，主体内容尽量居于画面中间。响应后，整体画面集中向主体内容部分缩放，会根据小屏尺寸缩减背景图片的一部分内容，但不影响主要信息的传达，如图1所示。这种布局模式适合交互学习课件 中某一类或一段内容的开篇提示页，甚至还可以在页面上放几个简单的内容链接。

2、左右双列布局模式

左右式布局一般是整个页面明显有左右两块不同的内容区域。响应后，页面会根据内容信息的重要性，将一边区域更为重要的信息响应到最顶部，然后另一边区域的内容会随着重要性逐层向下显示，最后形成单列布局模式，如图2所示。这种布局模式适合交互学习课件 中的内容概述页，即一边图片一边是详细说明文字。

3、标题布局模式

标题模式一般是上下结构，最上面是标题或问题，下面是图片或文字区域，层级划分明显。响应时，内容结构基本不变，只会随着屏幕变窄，横向多余内容会依次向下堆叠，如图3所示。这种模式适合目录和知识点页，内容信息单一堆叠起来不会出现信息混乱繁杂的问题。

4、网格式布局模式

网格模式一般是排列整齐的上下结构，最上面的内容和标题模式很像多半是标题或问题，而下面是九宫格式的布局模式。响应后，页面内容会根据屏幕的宽度自动从多列调整到双列或单列模式，如图4所示。这种布局模式适合交互学习课件 的图片展示内容详解页，并且每块内容信息相对独立互不干扰，多以图片展示或图文混合展示为主。

参考文献：

[1]傅小贞，胡甲超，郑元拢.移动设计[M].电子工业出版社 ，2013.

[2]赵大羽，关东升. 品味移动设计——iOS、Android、W英寸dows Phone用户体验设计最佳实践[M].人民邮电出版社 ，2013.

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

[4]赵国栋，李志刚.混合式教学与交互式视频课件设计教程[M].高等教育出社.2013.7