响应式Web移动学习资源的技术实现与设计研究

开篇：润墨网以专业的文秘视角，为您筛选了一篇响应式Web移动学习资源的技术实现与设计研究范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

【摘要】在Web设计理念与技法不断发展、移动智能设各种类不断增多的背景下，如何最大限度地适应各种性能与规格的终端设备，成为Web移动学习资源设计过程中必须要解决的问题。文章分析了目前主流移动智能终端的发展状况，概述了传统Web移动学习资源的特点及面临的问题，并在论述了响应式web设计相关技术的基础上提出了响应式Web设计的四大原则，最后以“数字摄影”专题网站为例，重点阐述了响应式Web移动学习资源的技术实现和设计过程。

【关键词】移动智能终端；响应式设计；Web设计；移动学习资源

【中图分类号】G40-057 【文献标识码】A 【论文编号】1009—8097（2013）06—0107—05

引言

随着移动计算技术、无线通讯技术和软硬件技术的发展，特别是以手机为代表的移动设备的功能越来越强大，移动学习已经成为当前教育技术研究的热点。E-Learning Guild组织最新的一项研究表明：移动设备被证明是世界上发展最快的技术产业，它正改变着人们思考、工作、交往的方式。移动技术的最新进展更是能够让用户在任何时间、任何地点访问信息，从而为人们的学习和生活带来极大的便利。

我国正在建设学习型社会，《国家中长期教育改革和发展规划纲要（2010—2020年）》将到2020年基本形成学习型社会作为未来十年三大战略目标之一，由此可以预见，在即将到来的学习型社会中，人们的学习将会更多地依赖网络化学习资源。随着“共建共享”理念深入人心，学习资源以惊人的速度持续增长，资源的数量不再是制约人们学习的主要因素。而让开发的Web学习资源最大限度地适应各种性能各异的移动终端，在各种终端上最优化显示，成为移动学习者的普遍要求，也是资源建设者们必须着力解决的问题。

一 移动智能终端对移动学习的影响

在世界许多国家，各种移动智能终端正在成为个人与社会链接的新型信息接入端口，而数量庞大的移动智能终端进一步促进了终端应用产业的发展，这其中就包括了对移动学习的推动。2012年，eLeaming Guild组织在《Mobile Learning：The Time Is Now》的报告中指出，越来越多的组织和机构意识到移动学习的重要性和优势，并对2009年至2012年期间移动学习的开展情况、2012年开展移动学习过程中智能终端的使用情况分别进行了调查，结果显示2009年有44，3%的人计划进行移动学习，2012年这个数字已经增长到了65，7%，表明移动学习的人数在逐年大幅度增长。利用智能手机和平板电脑进行移动学习的人数分别占据各自使用人数的44，3%和40，3%，表明使用智能手机和平板电脑等移动智能终端进行移动学习的比例越来越高，投身到移动学习队伍中的人数越来越多。如此高比例的人使用移动智能终端进行移动学习，其原因在于以下方面：

1 移动互联网市场规模扩大

根据艾瑞咨询统计数据显示，2012年移动互联网的市场规模达到393亿，增长率达到97，5%。随着智能手机为代表的移动智能终端的进一步普及，以及在互联网细分领域中移动电子商务的爆发，2012年移动互联网的增长会达到一个新的高度，预测增长率达到148%。在如此大规模的移动互联网市场的驱动下，把移动学习资源与移动互联网充分整合，更有利于学习资源的传播与共享，使得移动学习的应用范围更加广泛。

2 移动智能终端发展迅猛

工信部电信研究院于2012年4月13日的《移动终端白皮书》中指出，2011年我国移动终端总出货量已达4.55亿部，其中包括智能手机和平板电脑在内的移动智能终端出货量达1.1亿部，超过此前历年移动智能终端出货量总和。随着智能终端的普及，移动互联网的网民增速也非常迅猛。2011年，移动互联网网民的规模达到3.6亿，趋势预测到2016年移动互联网用户的规模将超出PC互联网的网民规模。在移动智能终端和移动互联网交替发展、相互促进势头的引领下，移动学习者将目光转向移动智能终端是在情理之中，加之移动智能终端在移动学习中所拥有的得天独厚的优势，如屏幕尺寸大（与非智能移动终端相比）、便于携带、交互性强等，更加推动了移动学习向智能化方向发展。

3 适宜移动智能终端的学习资源日趋丰富

除了专门针对移动智能终端开发的学习资源，如App、教育应用软件外，移动智能终端能够适应多种学习资源。这种普适性不仅能够充分利用现有的学习资源，而且可以节约资源制作成本。

由此可见，现阶段移动学习的发展主要得益于这三方面因素：移动互联网规模的扩大、移动智能终端的普及以及移动学习资源的丰富，三者缺一不可。由于移动学习资源是移动学习系统的核心，是对现有学习资源的一种补充，是开展一切移动学习活动的基础，因此移动学习资源质量的高低直接决定了移动学习的成效。

二 传统Web移动学习资源的特点及面临的问题

目前常见的移动学习资源形式可以概括为以下几种：短信/彩信、电子书、网页（即Web学习资源）、微课程、网络课程、智能交互课程以及教育游戏等，其中Web移动学习资源凭借其跨浏览器和跨平台的特性广受用户好评。就连原苹果公司CEO乔布斯在谈到这个问题时也明确表达了他的观点：虽然现阶段原生应用程序给了用户更好的体验，但是Web才是应用程序的未来。由此可以看出，Web技术在程序开发和资源建设方面具有广阔的前景和巨大的潜力。

传统Web移动学习资源主要是面向PC机的桌面浏览器设计开发的，其特点主要有：（1）在内容选择方面：为了从视、听等多方面调动人们的感官接受信息，并能充分、准确、有效地呈现信息，Web页面往往采用音频、视频、动画等多媒体信息呈现形式；（2）在页面布局方面：为了适应PC机的屏幕尺寸和分辨率，Web页面通常采用两栏式或三栏式布局；（3）在交互设计方面：用户一般都是通过鼠标和键盘设备与Web界面进行交互。

然而由于移动智能终端在尺寸、分辨率以及交互方式等方面与PC机存在较大的差异（见表1），因此原先针对PC机设计的传统Web移动学习资源，在很大程度上不适合移动智能终端使用，主要体现在以下4方面：

1 页面大小不能匹配终端屏幕大小

目前主流PC机的分辨率都在1024*768以上，在设计页面时宽度一般固定在1000像素左右，按钮、广告条幅等其他网页元素都是基于这个宽度进行设计的。而移动终端的屏幕分辨率相对较小，大多处于480*800-960*640之间。如果使用移动终端来呈现，那么页面必然会被裁切，不能显示完整的内容。此时，用户必须通过缩放和移动来显示被裁切的部分，直接影响用户的使用效果和满意度。

2 页面布局不能自适应调整

由于移动智能终端屏幕分辨率纷繁复杂，尺寸类别大小各异，定向类型横竖兼容。因此，要求所呈现的学习资源在布局上要相对灵活，能够针对屏幕进行自适应调整。否则，在显示过程中将会出现混乱的页面布局，极大地降低了移动学习资源的质量。传统的Web学习资源的两栏式或三栏式布局，结构相对稳定，符合用户的认知心理和行为方式，能够提高PC机用户的阅读效率，但却不适合移动终端用户的体验。

3 页面交互元素不适宣手指触摸

在触屏移动设备中，主要通过手指与界面进行交互操作。比起传统的鼠标指针，手指触控方式需要的目标作用区域更大。然而传统的Web学习资源在设计过程中却没有考虑到这一点，因此增加了移动终端用户的使用难度。

4 页面多媒体呈现形式受到制约

众所周知，Web是一种超媒体，是在超文本环境下的多媒体综合。因此，传统的Web学习资源在内容方面已经从文本扩展到图形、图像、动画、视频和声音等多种媒介形式。而对于移动终端而言，设计者除了要选择合适的媒介形式来呈现学习资源外，还要考虑带宽的限制和终端设备的性能。由于无线网络速度慢、稳定性差、传输较大数据时容易造成学习的中断，从而影响学习的效果和效率。因此从这个角度而言，传统的Web学习资源已经不再适合在移动终端呈现了。

三 响应式Web移动学习资源技术支持及设计原则

为了解决传统Web学习资源在移动智能终端上呈现时出现的上述问题，使用户能够获得与PC机的桌面端一致的用户体验，最直接的方法就是为不同尺寸和分辨率的设备制作特定的页面。而电子产品的“摩尔定律”表明，随着时间的推移会有更多的移动设备投入市场。如果为每种设备都制作特定的页面，将会耗费巨大的人力和物力，并造成资源的重复建设。人们期待的是只做一个网站或一套页面，既能适合桌面大尺寸屏幕，同时也可以适合各种不同移动设备的小尺寸屏幕。

满足人们期待的是利用响应式Web设计（Responsive WebDesign）。响应式Web设计是EthanMarcotte在2010年5月份提出的一个概念，其内容的核心是一个网站或网页能够兼容多个终端——而不是为每个终端定制一个特定的版本。它的设计理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。这样，人们就不必为不断到来的新设备做专门的版本设计和开发了。

1 支持移动学习资源“响应式”的新技术

响应式Web移动学习资源的设计与开发是新课题，主要有三大支撑技术——弹性布局、媒体查询和液态图片。

（1）一切以弹性为基础

所谓弹性布局就是不对浏览器的宽度作任何设定，即非固定式布局，因而能优雅地适应不论是水平式的还是竖直式的终端设备。然而，无论是固定式还是非固定式布局，都要依赖其原本的媒介环境来设计，而弹性布局只能很好地适应普通PC机显示屏。因此，所谓的弹性布局其实也并非那样弹性，但它是进行一切响应式设计的基础。如果没有弹性布局，那么后续的响应式Web设计工作将无法进行。只有在弹性布局的基础上再嵌入各种基于互联网标准的其他技术，才能更好地适应不同媒介的呈现。

（2）引入媒介查询

媒介查询是响应式设计的核心，它根据条件告诉浏览器如何为指定宽度的视图渲染页面。媒介查询使我们不仅能针对某些特定的设备类型，还能够对呈现设计的设备物理特性进行检验。例如，随着移动WebKit的普及，媒介查询已经成为一项很常用的技巧，用以向iOS、Android及其他移动系统提供定制的样式表。具体方法是在链接样式表的媒介属性中加上这样一个查询语句：。这个语句中包含两个部分：①媒介类别——屏幕（screen）；②括号中的查询内容，包括具体需要检验的媒介特性——最大设备宽度（max-device-width），以及紧跟其后的目标数值480px。代码本身可以很好地说明工作机制：当屏幕宽度不超过480px，则加载layout，css样式表；否则，该样式表将被忽略。另外，不仅可以把媒介查询放置在链接中，还可以用“@media”方法在CSS样式表内进行媒介查询：@media screen and（max-device-width：480px）{float：none；）。以上使用的两种媒介查询方式，其效果是相同的：一旦设备通过媒介查询的检验，相关的CSS样式表即被附加到源码上。

（3）让图片“流动”起来

响应式Web设计的思路中，图片如何显示是一个至关重要的问题。有很多同比缩放图片的技术，其中有不少是简单易行的，如使用CSS的max-width属性：img{max-width：100%；）。只要没有另外规定图片的具体宽度，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会被容器边缘隐藏和覆盖。这种做法就好像把图片比作液体一样，能够自由“流动”，液态图片也由此得来。

2 响应式Web移动学习资源设计原则

美国交互媒体设计大师Rob Flaherty在他的Design垤The Well-Tempered Web文章中就响应式Web设计的一系列问题给出了一些建议，在此基础上，本文结合作者的Web开发经验，提出在响应式Web设计中要遵循的四大原则：

（1）弹性化原则

弹性布局是进行一切响应式Web设计的前提，在此基础上再引入媒介查询的功能，根据不同的设备对内容、图片和布局进行相应的调整与优化，让页面更加“弹性化”。

（2）触控优先原则

易于手指触摸的按钮同样易于鼠标点击，但反之则不然。因此为了使界面能够适用于更多的平台环境，设计师应该在触控优先原则的基础上将原始的设计方案进行微调，最终达到一种折中的状态，即既适合手指触摸又适合鼠标点击。

（3）宏观性原则

俗话说“尽早测试，经常测试”。在响应式Web开发过程中，设计人员每一阶段都要在多种浏览器和不同尺寸屏幕中进行测试，以尽早发现问题。

（4）移动优先原则

从移动端开始产品的设计工作，能够让设计人员关注到对用户来说什么才是真正的问题。同时要特别留意那些不具备跨平台能力的交互形式，其中最常见的一个问题就是触屏设备通常无法支持传统设备当中的鼠标悬停状态。

四 响应式Web移动学习资源设计实例

为了更加深入地研究响应式Web移动学习资源的设计过程，文章以陈琳教授的国家精品教材、国家级规划教材——《数字影像技术》为内容参照，运用以上三大支撑技术来进行“数字摄影”专题网站的设计与开发。众所周知，Web学习资源主要是在Web上进行信息传播的系统实体，内容、结构与界面是其核心所在。因此，根据学习资源设计的基本原则和Web学习资源的特点，我们将设计过程概括为以下两大部分：

1 内容设计

移动学习资源的学习内容与教学目标、教学对象、教学设计方案的选择等方面有关，设计者必须根据学习者本身的特性和教学目标进行学习资源的内容结构设计。《数字影像技术》作为高等学校教育技术专业以及美术、设计、广告、印刷、医学影像、新闻等专业摄影及相关课程教材，针对的多是高校学生、专业摄影人员等成人学者。因而，在进行响应式Web移动学习资源设计时，必须考虑相关学习者的学习特点和认知特性，在此基础上才能进行内容的选取和设计。从一般意义上讲，成人学习者的特性包括学习者认知风格多样、元认知能力强、有较强烈的学习动机、对学习内容与学习进度的个性化要求程度高等方面。因此，在内容选取时要做到：全面、科学的把握教材的重点，准确、精炼的提炼研究的难点，深入浅出的表达原理、技法，最终达到理论与实践、知识与能力、技术与艺术等多样化的统一。

为了能达到这三方面的统一，在内容安排上除了介绍关于摄影方面的理论知识外，还要进行关于加工创意的阐释；除了介绍相关摄影的技术技法外，还要进行关于拍摄艺术方面的指导等等。因此网站的内容主要包括：数字照相机、拍摄技术、拍摄艺术、加工创意、专题摄影、专家博客、开放资源和课程学习等。

2 界面布局设计

界面布局设计是对页面的空间进行分割的设计，包括对导航、按钮、图片、文字等内容的位置进行设计。友好的界面布局主要体现在布局合理和响应式布局这两方面。所谓布局合理，是指运用美学构图中的形式美规律，即对称、平衡、黄金分割、对比、多样统一和变化，结合光影、色彩、影调等辅助手段，对网页设计元素及内容进行合理布局，使网页形式富有节奏感并且图文并茂，符合学习者的认知规律和审美特点。在本设计中，为了突出布局的合理性，采用图片和文本搭配的方式来均衡整体布局；针对学习资源使用的人群特点来选取恰当的呈现风格；根据视觉的主次关系来安排网站内容的布局方式等等。这是从宏观层面进行的界面布局，而微观层面的界面布局只能依靠响应式布局来实现了。

响应式布局是在弹性布局的基础上，结合媒介查询的功能实现的。常用的弹性布局模式主要有灵活网格模式和垂直列表模式。所谓灵活网格模式主要依赖灵活的栅格和液态图片来实现，随着分辨率的不断缩小，内容的显示方式是随着某列的内容依次往下排，而栅格或图片的大小也可以灵活变动，如图1所示。而垂直列表模式是以多列开始，以单列结束，当屏幕尺寸变小时，列内容会依次往下，从而使栅格和图片的大小基本保持不变，如图2所示。考虑到专题网站内容的丰富性，因此本设计选择灵活网格模式来进行弹性布局。

只有弹性布局还远远不能实现响应式布局，只有结合媒介查询才能发挥其功能。在进行Web页面设计之前必须考虑到该页面最终要匹配哪几种屏幕分辨率，如本设计为了兼容目前主流移动智能终端的屏幕分辨率，特此将分辨率的宽度值设置为3个数值段：1080px以上、768px～1080px以及480px～768px。因此在写CSS样式表时就可以将媒介查询语句分别写为：@media only screen and（min-width：768px）and（max-width：1080px）、@media only screen and（max-width：767px）和@media only screen and（min-width：480px）and（max-width：767px），然后结合灵活网格模式分别为不同数值段的分辨率写相应的样式。至此，响应式Web设计与开发的部分就结束了，当不断改变屏幕分辨率时，布局和内容也会随之改变。最终呈现效果见图3。

五 结束语

响应式Web设计可以为不同智能终端的用户提供更加舒适的界面和更好的用户体验，随着Web技术的不断进步和移动智能设备的不断普及，用大势所趋来形容丝毫不为过。虽然响应式Web设计在技术方面还存在着一些不足，并且对于不同终端设备的用户体验来说也不是最完美的解决方案，然而就目前的Web技术发展状况而言，它的确能给我们带来不一样的惊喜。随着越来越多的Web设计人员采用响应式设计方案，也将会有越来越多的基于响应式Web设计的移动学习资源产生。到那时，它不仅能提升用户体验的满意度，而且还能改变人们的学习媒介，进而转变人们的学习方式，乃至最后推动整个移动学习的发展。