在移动学习中,创建跨屏内容设计的五点建议

当前,在线学习内容的生态系统正在快速发展;而移动学习、跨屏学习内容、响应式设计等发展节奏放缓。这其中的问题在于,要将尽可能多的内容填塞到不同移动屏幕中去,并不是件容易的事。

 

因此,移动内容交付程序需要开发者采用一种“少即是多”的模式。本文作者Fiona专注于现代跨屏内容设计和开发。他结合过去两年的项目经验,提出了跨屏内容设计的五点建议。


一、理解“移动”的内涵


移动学习可以被定义为多种不同类型的学习经验。它是能够充分利用移动设备特性的应用程序吗(例如在Duolingo上学习某种技能)?它是利用Google移动网页版搜索信息吗?它是压缩电子学习内容以适应更小屏幕的学习方式吗?又或者它是多版本的电子学习内容,只是部分内容被“砍”掉以更好地适应移动设备吗?

 

实际上,移动学习包含以上所有信息,甚至还有更多层意义。但是,在实践过程中,不少教学设计师仅将移动学习定义为“压缩在线学习内容以适应更小屏幕的学习方式”。事实证明,这很难吸引到学习者。

 

而最受欢迎的是移动响应式内容。它,根据不同设备特性进行页面排版,根据屏幕大小自动调整显示界面(如图1)。这是同一在线学习课程在不同设备终端(PC电脑、iPad mini及iPhone)上呈现的示意图。


 QQ图片20150522104757.png


图1:跨屏内容展示


二、确定最小设备集


在弄清移动学习和移动响应式设计后,你就能更好地确定最小设备集。这显得尤为重要。为什么呢?这有助于更好地区分不同应用程序的特征,从而让同一内容适用于不同设备终端。


当然,客户只是希望内容能在自有的设备上操作。调研发现,客户方的设备集如下:


● 平板电脑(android、iOS)——ipad mini为最小设备集

● 手机(android、iOS)——iPhone5为最小设备集


在内容设计过程中,不要试图为所有人考虑所有事,只用根据客户的需求来即可。毕竟,某些情况下,屏幕越小,学员认知性负载会越大。同时,要记住,想设计专门的应用程序内容,那么你可能需要掌握一组特定的设计技巧。


三、学习新的设计参数


是时候对固定屏、单击next和枯燥的学习内容说再见了!而更好的消息是,教学设计师有机会学习新的视觉设计技巧了!


如果学习内容必须被不同类型的设备操作,那么你需要掌握从一个大小固定的屏幕转向更流畅、滚动的格式。事实上,与传统的固定屏幕设计相比,跨屏内容设计更类似于网页设计。


现在,教学设计师需要敞开怀抱,去拥抱滚动屏幕!同时,还要考虑每个页面布局和“视觉吸引力”。作为一个跨屏内容的教学设计者,你会发现:与之前相比,现在需要更多参与到内容视觉设计模块。


如果你想为跨屏内容增加视觉吸引力,那就看看杂志和报纸的布局吧。看看他们是如何将空间、颜色、图片以及其他视觉元素等联系在一起的。这里有一些技巧:


● 首先设计最小设备大小。试想下,最小设备上的文本、图像和互动,将会带给用户怎样的体验?

● 谨慎处理音频和视频。用户能在自有的设备上听音频、看视频吗?

● 在同一个页面将相关概念联系在一起。当然,页面可以有不同长度。

● 使用视觉标题、相关图片和颜色编码来帮助强化相关概念。

● 充分利用后续资源。首先专注于屏幕内容传达的核心信息,然后通过另一种媒体提供后续清单、流程图等等。要知道,学习过程并不是不可逆的,我们需要充分利用这些后续资源。


四、保存不同类型的脚本示例


作为一名教学设计师,你应当要保存不同类型的脚本demo。在Fiona看来,微软PowerPoint是最受用的保存工具。


脚本demo的形成过程是这样:建立一个幻灯片模板,其中包括页面名称、部分标题、页面类型及交互模板。这使得内容流程可视化,方便设计师进行最大幅度的调整。如果需要对脚本进行补充或者修改,你只需要打开PowerPoint幻灯片进行编辑即可。


QQ截图20150522105707.png

图2:脚本示例


五、将触屏滚屏融入到设计中


如果只是简单地将固定屏幕设计转化成过长的滚动页面,那还不够有吸引力。


而最有吸引力的做法是,将三分屏/迷你页面填充到滚动屏幕中去,充分利用移动设备触摸屏的功能,而不是简单地使用 “单击next屏幕”。这里引入了“触觉互动”的概念,是指“屏幕触摸、敲击和交互”。这比传统意义上的“单击next在线学习”更具移动内容的特征。


图3提供了滚动屏幕设计的示例。Cardigan Kate在可持续性学习课程中扮演着关键角色。她是内部节能冠军,正对她的一些同事产生积极影响,如大忙人Barney、拖延症患者Pete、怀疑论者Sue和漠不关心的Danny。


虽然故事的页面布局是一个长滚动的设计,但是通过Kate角色的设计及互动,学员能够更有节能意识。这样做的好处在于避免将故事切割成好几页,能够形成视觉连续性,便于整体性地了解知识结构。


quigley-figure3 (1).png


图3:触屏滚动设计的案例


以上是移动学习跨屏内容设计的五个建议。作为教学设计师,你需要不断汲取这些优秀设计师的设计心得。是时候敞开怀抱拥抱跨屏内容世界了!


bottomads.jpg




标签: 移动学习
©版权申明:凡作者标为“移动学习前沿”的文章,均为前沿网站编辑组原创,欢迎查看!
转载请注明出处-来自“问鼎云学习”!