画面布局方式对移动学习影响的实验研究

冯小燕?王志军?刘杜鹃?常亚飞

摘 要：将学习内容分模块呈现和作为整体以长屏形式呈现是移动学习资源常见的画面布局形式。通过实验研究的方式探究在标签式和瀑布流式两类布局方式和不同知识类型条件下，学习者的学习动机、注意力集中程度、学习时长、认知负荷和学习效果的差异。结果发现，画面布局方式对移动学习过程有较为复杂的影响;标签式布局通过知识模块切分和呈现顺序的设计影响学习者的学习路径和导航操作，比瀑布流式布局在激发动机、增加时间投入、减少认知负荷和提高学习效果方面更具优势;不同的画面布局方式对不同的知识类型具有一定的最佳适应性。

关键词：移动学习;画面布局;学习动机;学习效果

中图分类号：G434 文献标志码：A 文章编号：2096-0069（2018）06-0001-06

情境性、个性化、片段式的移动学习方式对学习资源的体系架构和内容规划提出了更多挑战;基于小屏幕呈现学习内容时，知识体系间的内在级联性较低，容易导致碎片化的学习结果。画面布局是学习资源信息架构的基础，如何优化移动学习资源画面布局，适应移动设备的屏幕尺寸，为学习者提供既符合移动学习特点，又保证体系完整的学习内容，是移动学习资源呈现方式与内容匹配必须解决的重要问题。

一、移动学习资源画面布局相关研究

合理的画面布局可以为设计者与使用者之间建立映射模型，使画面布局恰当地表达知识内容，让学习者将更多的认知资源投入到学习活动本身。[1]移动学习资源画面的信息架构设计应做到功能明确、结构清晰、操作流畅，并为学习者提供合适的导航结构。[2]学习者更喜欢阅读较窄的短屏文字，以及有规律、有节奏的排版布局。[3]有序的画面元素布局有助于优化信息获取效果，布局设计应遵循媒体多样性原则、时间和空间紧凑性原则、简练原则、人性化原则等。[4]移动学习资源画面设计应以合适的知识组块为资源单位，充分考虑学习内容的内在组织性与级联性，优化画面布局结构。

当前主流的移动学习资源画面布局方式有标签式、宫格式、列表式、抽屉式、瀑布流式等多种形式。其中，标签式、宫格式、列表式及抽屉式等布局方式是根据知识本身的逻辑体系和版式需求，按一定标准将知识内容进行分模块呈现;瀑布流式布局方式则是将内容作为整体，以长屏形式呈现，增加使用的流畅性。移动学习资源画面布局的已有研究结论不完全一致。有研究者认为由于画面尺寸有限，学习内容应使用小型的文本块，尽量将页面滚动范围最小化;在小屏幕画面上，一次呈现一页的方式与上下拖动滚动条式的方式之间存在学习时间和学习效率之间的差异。[5]也有研究者认为基于长屏的瀑布流式布局不仅能使学习信息传递更迅速，同时也使学习者获得更好的沉浸体验，有利于提高移动学习效果。[6]

以标签式为代表的分模块式布局和以瀑布流式为代表的整体式布局在移动设备屏幕画面设计中均有广泛应用。不同画面布局方式对学习内容的适应性及对学习效果影响的相关研究需要进一步深入;对于陈述性知识和程序性知识不同类型，是否存在最佳的画面布局方式也需要进一步实践验证。本文借助实验研究方法，开展移动学习资源画面布局方式和知识类型的不同组合方式对学习过程和学习效果影响的实证研究，探索移动学习资源画面布局的优化路径。

二、研究设计

（一）实验设计

采用2（布局方式）×2（知识类型）两因素完全随机实验。

自变量包括布局方式和知识类型。布局方式分为标签式和瀑布流式，知识类型分为陈述性知识和程序性知识。学习内容以手机竖屏形式呈现，标签式画面布局采用底部标签，用5个标签，根据知识内容的内在逻辑进行分割;瀑布流式画面布局按照知识内容的逻辑顺序以长屏形式由前到后依次呈现。

因变量包括学习动机、注意力集中程度、学习时长、认知负荷和学习效果。

学习动机：当学习者动机明确，对学习有较高兴趣，学习积极主动时，其学习状态较为理想。本研究选取林立甲[7]使用过的学习动机量表测量学习动机，该量表分为兴趣、能力、价值、努力、压力和选择六个分量。

注意力集中程度：当学习者注意力集中程度高时，其学习较投入，专注度高，沉浸感强。本研究采用查兰德[8]

等利用便携式脑波仪测量学习者注意力集中程度的方法，测量值以40为基线，在1—100之间波动变化。测量值低于40时表示被试的注意力集中程度较低，处于40—60之间时表示注意力集中程度一般，大于60时表示注意力集中程度较高。

学习时长：卡罗尔认为直接影响学习者学习的所有变量都可用时间来界定，布卢姆据此提出“时间本位”模式的掌握学习理论。[9]学习者按照自己的速度开展学习，学习者投入的时间越多，学习效果越好。在本研究中，实验情境下的学习时长是学习者从学习开始到结束所花费的时间，由便携式脑波仪采集相关数据。

认知负荷：指在特定学习时间内施加于个体认知系统的心理活动总量，其大小与具体的学习任务有关。[10]

本研究参考王雪[11]等人的測量方法，以被试主观判断的形式，测量任务的感知难度和心理努力程度，表征学习者的认知负荷。

学习效果：包括保持测试成绩和迁移测试成绩，保持测试主要测量学习者对学习内容的记忆情况，迁移测试主要测量学习者对学习内容的理解程度和应用情况。

（二）被试

从H大学招募120名本科生作为被试，剔除实验过程中先前知识过高及脑波数据干扰过多的被试，共得到有效被试112名，随机分为4组，其中标签式布局陈述性知识组29人，标签式布局程序性知识组27人，瀑布流式布局陈述性知识组27人，瀑布流式布局程序性知识组29人。

（三）实验材料

1.学习材料

学习材料采用小程序开发平台“即速应用”开发，陈述性知识为拉马德雷现象，共计2500个字左右，与学习内容有关的图片5张，主要介绍“太平洋涛动”的基本原理、对全球气温的影响以及与自然灾害的关系。程序性知识为海姆立克急救法，共计2600个字左右，与学习内容有关的图片7张，主要介绍海姆立克急救法的基本原理、不同情况下施救方法与基本操作流程。上述学习材料均由手机端呈现给学习者，学习者自主控制学习进度。设计开发之前邀请15名在校大学生对学习材料的感兴趣程度、难易程度和熟悉程度进行评价，受邀者均表示对相关知识的熟悉程度一般，兴趣浓厚，学习材料难易程度相当。

2.测试材料

包括基本信息、前测、学习效果测试、学习动机和认知负荷量表。

基本信息包括被试的性别、年龄、专业等基本信息。前测试题：陈述性知识和程序性知识的先前测试均包括5道题，考查被试对主题知识的掌握情况。学习效果测试包括保持测试和迁移测试。保持测试的试题答案可以在学习材料中找到;迁移测试需要被试理解学习材料后能够灵活运用。陈述性知识和程序性知识的保持测试题均包括8道填空题，7道判断题，每题1分，合计15分;迁移测试题均包括6道选择题，每题1分，3道简答题，每题3分，合计15分。学习内容和测试题在设计完成后均经过相关专业领域教师修改和评定，确保无学科性错误。学习动机和认知负荷均采用9级量表进行测试。

（四）实验设备

使用一部OPPO R11智能手机为被试呈现学习材料，屏幕尺寸为5.5英寸，分辨率为1920×1080

（FHD），屏幕为电容式触摸屏、多点式触摸屏;采用基于NeuroSkyBCI（Brain Computer Interface，脑机接口）专利技术的Cuband便携式脑波仪采集被试的脑波数据，信号采样频率为512Hz，信号精度为0.25uV，配套软件为佰意通脑电生物反馈训练系统专业版。

（五）实验流程

实驗人员告知被试实验要求与注意事项，被试填写个人信息与前测试题，实验人员为被试佩戴脑波仪并调试正常;被试按照要求进行学习;学习结束后被试填写后测试题及问卷。每个被试完成整个实验时间需30—40分钟。

三、数据分析

利用SPSS 22.0对实验数据进行管理和分析。

（一）学习动机、专注程度与学习时长

学习动机、注意力集中程度和学习时长的数据结果如表1所示。

（1）学习动机：两种知识类型条件下，标签式布局组学习者的动机高于瀑布流式布局组，表明标签式布局比瀑布流式布局方式更容易激发学习者较高的学习动机。（2）注意力集中程度：对于陈述性知识，瀑布流式布局组学习者的注意力集中程度高于标签式布局组;对于程序性知识，标签式布局组学习者的注意力集中程度高于瀑布流式布局组。（3）学习时长：两种知识类型条件下，标签式布局条件下学习者的学习时间更长。

多因素方差分析结果显示，学习动机：布局方式（F=3.432，p=0.067<0.1）主效应边缘显著;知识类型（F=12.192，p=0.000<0.01）主效应极其显著;二者的交互作用（F=0.000，p=0.999>0.05）不显著。注意力集中程度：布局方式（F=0.002，p=0.964>0.05）主效应不显著，知识类型（F=2.072，p=0.153>0.05）主效应不显著，二者的交互作用（F=1.200，p=0.276>0.05）不显著。学习时长：布局方式（F=9.248，p=0.003<0.01）主效应极其显著;知识类型（F=2.081，p=0.152>0.05）主效应不显著;二者的交互作用（F=2.204，p=0.141>0.05）不显著。

在四组中分别选取注意力集中程度接近各组均值的被试，对其注意力集中程度的脑波动态变化情况进行分析发现，学习者在整个学习过程中的注意力集中程度的变化情况存在一定差异：（1）对于陈述性知识，标签式布局和瀑布流式布局组被试的注意力变化情况较为一致，前期较高，中后期相对较低，注意力变化过程相对稳定。表明对于陈述性知识，布局结构的差异对学习者注意力的影响差异不大。（2）对于程序性知识，标签式布局组学习初期和学习即将结束时注意力集中程度较高，中期呈现有规律波动;瀑布流式布局组学习初期时注意力集中度较高，随着时间的推移出现缓慢下降，整个学习过程中注意力没有出现显著的回升。这表明对于程序性知识，标签式布局条件下，学习者根据知识内容切分情况有选择地进行学习，注意力集中程度因学习模块的差异而呈现一定波动，但未出现显著下降;瀑布流式布局条件下，由于缺乏明确的知识模块划分，随着学习内容的增多，学习者逐渐出现认知倦怠，注意力集中程度下降。因此，对于程序性知识，标签式布局更有利于学习者较高注意力的维持。

（二）认知负荷

对于两种知识类型，标签式布局组学习者的认知负荷水平相对于瀑布流式布局组较低，表明在降低认知负荷方面，标签式画面布局比瀑布流式布局更有优势，如表2所示。原因可能是学习者认知容量有限，当知识分块呈现时，有利于降低学习者的认知难度。

进一步对不同布局方式和不同知识类型的认知负荷情况进行两因素被试间方差分析，布局方式（F=1.185，p=0.279>0.05）主效应不显著;知识类型（F=6.309，p=0.013<0.05）主效应显著;二者的交互作用（F=0.033，p=0.856>0.05）不显著。

（三）学习效果

学习效果指标包括保持测试成绩和迁移测试成绩，结果如表3所示。

对于两种知识类型，标签式布局组学习者的保持测试成绩和迁移测试成绩均高于瀑布流式布局组。这表明无论是陈述性知识还是程序性知识，对于优化学习效果，标签式布局比瀑布流式布局更有优势。

进一步对各组被试的学习效果进行两因素被试间方差分析。（1）保持测试成绩：布局方式（F=1.250，p=0.266>0.05）主效应不显著;知识类型（F=8.430，p=0.005<0.01）主效应极其显著;二者的交互作用（F=0.285，p=0.594>0.05）不显著。（2）迁移测试成绩：布局方式（F=6.074，p=0.015<0.05）主效应显著;知识类型（F=10.573，p=0.002<0.01）主效应极其显著;二者的交互作用（F=0.154，p=0.696>0.05）不显著。

（四）学习动机、注意力集中程度、学习时长、认知负荷与学习效果的关系

为进一步明确移动学习资源不同画面布局条件下学习者的学习动机、注意力集中程度、学习时长和认知负荷对学习效果的影响，利用多元回归法进行分析，结果如表4所示。

不同画面布局条件下，学习者的学习效果主要受到学习动机、学习时长的正向影响和认知负荷的负向影响，即学习者的学习动机越强，学习时间越长，认知负荷越低，学习者的学习效果越好。注意力集中程度对学习效果也有一定正向影响，但影响较弱，未达到显著水平。学习动机、注意力集中程度、学习时长和认知负荷能联合预测学习效果变异的37.8%，其中学习时长的预测力最佳，其次是学习动机，注意力集中程度虽然对学习效果也有一定的预测力，但这种预测力没有达到显著水平。

四、结果讨论

无论是陈述性知识，还是程序性知识，良好的画面布局结构影响学习者的学习动机、学习时间和认知负荷，进而影响学习效果。

（一）画面布局方式和知识类型对学习动机、注意力集中程度和学习时长的影响

标签式和瀑布流式布局在不同知识类型条件下，对学习动机和学习时长的影响趋势相同，标签式布局组学习者的学习动机和学习时长均高于瀑布流式布局组，且差异显著。这表明无论对于哪种知识类型，标签式布局比瀑布流式布局更有利于激发学习者的学习动机，引发更多的时间投入。画面布局的差异主要体现在知识呈现的先后顺序、学习路径的选择和导航的使用等方面，以及由此引起的学习动机和学习体验差异;同时，标签式布局增加了学习者与学习内容间的操作互动，引发学习者更多的行为投入和时间投入。

标签式布局和瀑布流式布局在不同知识类型条件下，对学习者注意力集中程度的影响趋势不同。当学习陈述性知识时，瀑布流式布局组学习者的注意力集中程度高于标签式布局组;当学习程序性知识时，情况则相反，标签式布局组学习者的注意力集中程度高于瀑布流式布局组。虽然这种差异未达到统计学的显著水平，但差异趋势在一定程度上表明画面布局方式对不同知识类型具有不同的适应性。

知识类型对学习动机有显著影响，对学习时长和注意力集中程度均无显著影响。知识类型主要影响学习者的兴趣、爱好等主观感知体验，对学习过程中的注意力集中程度、学习时间的花费等方面的影响没有显著差异。

（二）画面布局方式和知识类型对认知负荷的影响

标签式布局和瀑布流式布局在不同知识类型条件下，對认知负荷的影响趋势相同。两种知识类型条件下，学习者的认知负荷均为标签式布局组低于瀑布流式布局组，尽管这种差异未达到统计学的显著水平，但这一趋势表明，将知识分块呈现的标签式布局在一定程度上有利于降低学习者对学习内容的感知难度，进而减少认知负荷。

知识类型对认知负荷有着显著的影响，陈述性知识引起的认知负荷极其显著地高于程序性知识，即在难度相当的情况下，学习者感知到陈述性知识的难度和需要付出的努力程度显著高于程序性知识。

（三）画面布局方式和知识类型对学习效果的影响

两种知识类型条件下，标签式布局组学习者的迁移测试成绩显著高于瀑布流式布局组。标签式布局有利于学习者将新的知识内容体系与原有的认知图式进行加工整合，理解更加深入和透彻，促进学习层次的加深，从而提高学习者的迁移测试成绩。

两种布局方式条件下，程序性知识组学习者保持测试成绩和迁移测试成绩均显著高于陈述性知识组。程序性知识在条理性、模块化、逻辑性、步骤流程化等方面优于陈述性知识。在小屏幕的移动设备上呈现难度相当的程序性和陈述性知识时，程序性知识更容易被学习者所接受并融入已有知识体系，有利于提高学习效果。

同时本研究也发现，学习动机、学习时间和认知负荷对学习效果有显著的预测作用，学习时长的预测力最佳，其次是学习动机，再次是认知负荷。因移动学习过程中学习者注意力集中程度具有较高的浮动性，注意力集中程度对学习效果的影响较为复杂，预测作用有限。

五、结论与展望

画面布局方式在提高学习动机、引发时间投入、减少认知负荷和提高学习效果方面有着积极作用和复杂影响。将知识按一定的内在逻辑进行分块呈现的标签式布局方式比将知识作为一个整体的瀑布流式布局方式更有利于激发学习者的动机，减少认知负荷，提高学习效果;对于程序性知识，这种优势更加突出。瀑布流式布局呈现陈述性知识时，有利于学习者提高注意力，并且增加沉浸感，但由于缺乏对知识体系的适当分割和学习路径导航，在学习过程中增加了学习者的认知负荷，这种方式在沉浸感与专注度方面的优势并未引起更为理想的学习效果。

本研究通过实验方式探索不同知识类型的画面布局方式对学习过程中的学习动机、注意力、学习时间、认知负荷及学习效果的影响。发现合适的移动学习资源画面布局可以使学习者动机更强，更好地学习投入，从而更好地参与到移动学习过程中，获得更好的学习效果。受实验条件的限制，本研究仅选取了112名有效被试的数据，对于多样化学习对象的适应性需要进一步验证;另外，本研究仅选取了标签式和瀑布流式两种画面布局方式，对于其他类型画面布局方式对移动学习的影响仍需要进一步深入探索。

参考文献

[1]李蕾，李晓丽.基于iOS手持终端的移动学习资源设计研究[J].中国电化教育，2014，（12）：93-97.

[2]李青.移动学习：让学习无处不在[M].北京：中央广播电视大学出版社，2014：8-11.

[3]李明辉，魏亚云.安卓手机移动端的界面设计美学法则探析[J].包装工程，2016，37（10）：170-173.

[4]叶新东，章道争.网络课程设计中界面媒体元素的布局与信息获取效果的关系研究[J].现代教育技术，2010，20（3）：87-92，60.

[5]ZHANG X M，Li Y N，Blumberg F C.Studies on Human Computer Interface Design of Chinese Mobile Phone Users[C]//International Conference on Advances in Web Based Learn-ing.Springer-Verlag，2008：477-485.

[6]田嵩.基于輕应用的移动学习内容呈现模式研究：以“瀑布流”式布局体验为例[J].电化教育研究，2016，（2）：31-37.

[7]林立甲.基于数字技术的学习科学理论、研究与实践[M].上海：华东师范大学出版社，2016：72-73.

[8]CHARLAND P，LGER P M，MERCLER J，et al.Measuring implicit cognitive and emotional engagement to better under-stand learners performance in problem solving-A research note[J].ZeitschriftFürPsychologie，2016，224（4）：294-296.

[9]井维华.布卢姆掌握学习理论评析[J].中国教育学刊，1999，（3）：40-42.

[10]孙崇勇.认知负荷的理论与实证研究[M].沈阳：辽宁人民出版社，2014：4-7.

[11]王雪，周围，王志军.教学视频中交互控制促进有意义学习的实验研究[J].远程教育杂志，2018，36（1）：97-105.

An Experimental Study of the Influence of Screen Layout on Mobile Learning

FENG Xiaoyan1，WANG Zhijun2，LIU Dujuan1，CHANG Yafei1

（1.School of Information and Engineering，Henan Institute of Science and Technology，Xinxiang，Henan，China 453000;

2.School of Education Science，Tianjin Normal University，Tianjin，China 300387）

Abstract： It is a common form of screen layout for mobile learning resources to present learning content in modules and as a whole in long-screen form.This paper explores the differences of learnersmotivation，degree of concentration，learning time，cognitive load and learning effect under the conditions of label and waterfall flow layout and different types of knowledge.The results show that the screen layout methods have a more complex effect on the mobile learning process;the label layout affects the learnerslearning path and navigation operation through knowledge module segmentation and presentation sequence design;it can better stimulate motivation，increase time input，reduce cognitive load and improve learning effect than the waterfall flow layout.It has more advantages，and different screen layout methods have the optimal adaptability to different types of knowledge.

Key words： mobile learning;screen layout;learning motivation;learning effect