装饰条说明

故事线360最大的优点之一就是你可以为你的学习者创造一个完全自定义的体验用户界面(UI).但正如他们所说:权力越大,责任越大。当涉及到UI设计时,作为设计师的你有责任确保它对所有学习者来说都是简单和直观的。

如果你还没读过这篇文章是关于UI设计的,我建议在继续之前这样做。完成后,回到这里并潜入此详细的设计标准列表,以帮助您为学习者提供最佳体验。

你准备好了吗?在这里,我们走吧!

颜色

选择背景、按钮和文本颜色,使它们之间的对比度足够大。在本文中了解更多关于对比度和如何度量它们的信息:可访问的E-Learning的对比考虑

不要仅仅用颜色来传达信息。这样做会让有色觉缺陷的人很难或不可能理解你的内容。当答案不正确时,不要简单地用红色突出显示答案,还要包括视觉和文本信息来传达它的不正确。例如,一个红色的X和单词Incorrect将是理想的。

文本

  • 限制自己使用2-3种字体:
    • 1标题
    • 1身体
    • 1用于拨打操作(按钮)
  • 选择适用于多种语言的字体如果你打算翻译你的课程。检查字体信息以确保。
  • 使用12号或更高的字体对于所有屏幕文本,以确保可读性。
  • 不要选择花哨的、难以阅读的字体。
  • 不要居中或调整你的文本。这使得读取更难。
  • 不要强调文本除非它是超链接。

更多关于确保你的文本易读的技巧,看看这些文章:

图片

添加替代(ALT)文本的图片因此,ScreenReader用户将获得相同的信息作为视力学习者。

不要补充替代(ALT)文本装饰图像。这只是为屏幕阅读器提供噪音。

不确定图像是装饰性的还是信息性的?问问自己图片中是否包含有助于学习者更好理解内容的信息。如果是这样,那么这是一个信息图像。如果不是,那么它可能是一个装饰性的图像。

纽扣

  • 使用矩形(有圆形或方形边缘)形状的按钮。添加一个投影让它们看起来可以点击是很有帮助的。如果你喜欢平面设计,确保你的按钮在其他方面突出,例如,使用大胆的颜色。想了解更多设计按钮的技巧,请看这篇文章:设计“点击我!”按钮的技巧
  • 使按钮最小为44 * 44像素。这确保了大多数学习者可以轻松点击。看看WCAG 2.5.5指南为更多的信息。
  • 确保所有按钮的对比度至少为3:1背景和周围的任何东西。在本文中了解更多关于对比度和如何度量它们的信息:可访问的E-Learning的对比考虑
  • 向按钮添加状态,以便它们响应(通过改变颜色或格式)悬停或点击。
  • 确保重点令你的按钮(和其他屏幕上的对象)是有意义的。
  • 使用单选按钮因为测验只有一个正确答案。
  • 使用复选框因为测验多个正确答案。
  • 限制选项数量用于测验以避免认知过载。

图标

  • 使用容易辨认的图标。例如,主页的房屋图标。
  • 给图标配上标签(在下方或悬停)以增加清晰度。
  • 不要使用模棱两可的图标。如果不存在易于识别的图标,请使用单词而不是或除您的图标之外。

布局

  • 如果为移动设计,请将最常用的按钮放在底部附近。当用一只手握住手机时,学习者可以轻松地用拇指进入它们。
  • 不要在幻灯片上死记硬背太多的文字。这可能会让学习者不知所措。相反,每张幻灯片坚持一个观点。这里有一篇文章可以帮助你简化幻灯片:5种方法可以避免重载幻灯片

特征

  • 提供帮助功能喜欢说明和词汇表。
  • 不要跳过帮助功能。你可能会认为你的课程导航非常清晰,或者你的学习者已经知道你的课程中的所有术语,但是你至少会有一些学习者会从一些额外的帮助中受益——所以将它添加到你的课程中!

包起来

这不是一个详尽的清单,只是一些简单的指导方针来记住。不幸的是,没有官方UI手册,因为最佳实践取决于您的具体情况。如果您正在努力追求某些内容,请快速搜索,看看其他设计师如何接近它。如果对您感觉直观,请向您的课程应用相同的原则。

如果您正在寻找更多关于设计伟大的学习体验的提示,这里有一些您想要挖掘的文章:

记得跟着我们走推特然后回来电子学习英雄经常询问有关电子学习的更多有用的建议。如果你对UI设计和电子学习有任何意见,请在下面分享。

2评论