设计美观的 Moodle 课程

图片来源：

Opensource.com

当您在线工作并访问一个文本量很大的网页，需要滚动 5 页时，您的第一反应是什么？对于我们大多数人来说，一个充满大量文本，资源和活动列表的页面是不吸引人的。对于学生和在线课程来说也是如此。但是，通过一些技巧，再加上正确资源格式和标签的使用，您可以设计一个美观的在线课程，并避免冗长的网页滚动综合症。

首先，关于设计的迷你课程

一个好的用户界面具有：清晰度（无需手册），简洁（简洁明了），熟悉度（用户识别元素），响应性（点击产生快速响应），一致性（界面在所有区域保持一致），美观性（吸引人），效率（用户只需点击几下即可到达所需位置）和容错性（补救用户误点击的策略，“您确定要删除吗？”）。

可视化界面设计的构建块

布局定义了层次结构和关系。改变元素之间的空白以使分组显而易见。
定位可以改善流程。
为图标使用不同的形状使它们更容易识别。图标在视觉上很吸引人，但不如文字清晰，因此在选择按钮时请使用有效的隐喻。
大小可用于显示重要性。大小还可以通过使热点区域更大且易于点击来提供高效的界面。
使用颜色通过与背景形成强烈对比来吸引用户的注意力。使用颜色传达含义（红色=停止/错误）。颜色还可以显示关系，使数据更易于阅读或使按钮类型更易于查找。
使用对比度来提高界面的可用性并指示重要性。使用阴影和变暗的背景来集中用户的注意力并减少视觉噪音或增加视觉权重。
使用纹理来指示元素的使用方式（角落上的脊线表示用户可以单击并拖动它）。
对于文本，选择字体并设置比例以提高可读性。斜体和全部大写字母更难阅读，因此用于标题和字幕。使用大小来引导读者并提供组织结构。在使用多种字体时，少即是多。

Moodle 课程设计策略

我在布局 Moodle 课程时使用的四个策略

将内容分块到书本或课程中，并包含多媒体。
使用隐藏的主题，但资源和活动可见。
在上下文，书籍，课程，侧边栏模块等中链接到资源和活动。
在主题 0 中使用标签在主页上创建菜单。

将内容分块到书本或课程中

首先，我通常将我的内容分块到书本中。我喜欢使用书本资源来保持我的网页简短并提供目录，这意味着为我的用户提供轻松的导航。因此，与其在主页上使用 5 个主题框来显示资源和活动列表，我可能会使用一本包含 5 个章节的书，或者可能使用 5 本书，具体取决于内容的数量。

课程是另一种适用于此类目的的资源格式。课程允许您设置分支以根据用户的响应来控制用户接下来看到/做什么。我使用它为我的用户提供选择，但它也可以用于引导学生在继续下一个主题之前进行补救或复习。课程的“如果这样，就那样”分支系统设置起来可能有点令人困惑。

Moodle 中的书本和课程，来自 Willard High School，在 Vimeo 上。

我还通过发布网页，测验或证书来创建其他元素；上传 pdf 文件；或发布论坛以征求问题。我将视频上传到 Vimeo 并在需要的地方嵌入。对于幻灯片，我通常在 SlideRocket 中创建它们（我们的教师和学生可以通过他们的 Google Apps 帐户免费访问），并嵌入它们。我使用 Camtasia 录制屏幕录像，并将它们上传到 Vimeo，以便在课程中嵌入或链接到它们。 MyBrainShark（也可通过 Google Apps 获得）是一个用于在线发布幻灯片或文档并添加旁白的绝佳工具。

隐藏的主题，但资源和活动可见

对于我的 Moodle 课程，我使用主题格式。我在课程的主题 1 部分中创建所有资源和活动。主题 1 设置为隐藏。主题 1 中的每个资源都设置为显示。

在 Moodle 中使用隐藏主题来容纳资源和活动，来自 Willard High School，在 Vimeo 上。

链接到资源和活动

在我的书本和课程中，我将链接到讲义，测验和网页（全部列在主题 1 中）。有时我链接到侧边栏框（证书）中的一个元素。使用此方法，而不是在多个主题框中组织的资源和活动的长列表，我可以在上下文中链接到元素，使其对我的用户更有意义，并为我的课程增加清晰度。

通过右键单击主题 1 中的资源或活动，然后选择“复制链接位置”或 “复制快捷方式”，我将该元素的网址放在剪贴板上。现在，我可以在课程中的任何位置创建指向此元素的链接，方法是使用此复制的网址。

在您的 Moodle 课程中链接到资源和活动，来自 Willard High School，在 Vimeo 上。

使用标签创建导航系统

为了保持我的主页简洁高效，同时为我的用户提供一个有吸引力的起点，我在主题 0 中添加了一个标签，并使用它为课程创建菜单。我经常在标签中插入表格，以便我可以创建一组统一的按钮或图标。将表格的边框设置为 0 后，用户看不到表格，只能看到按钮。有时我使用照片，我通常通过 FlickrCC 找到照片。有时我使用来自 OpenClipart，LoveVectorFree 或 Clker.com 的剪贴画。我寻找使用知识共享许可的免费媒体，并且通常在侧边栏的模块中注明我的来源。我使用 Snag-it 根据需要编辑图像，有时添加 3 维按钮效果。任何图像编辑软件都可以工作。我经常将 Snag-it 用于屏幕截图，并且非常熟悉它。我通常在按钮中包含文本。有时我在书本或课程的页面中包含这些图像，以在我的课程中提供一致性和熟悉度。