基于黄金法则的Mugeda界面设计与制作

摘要：近年来，无论是在新媒体领域，或是在通用、教育领域，屏媒的使用愈发广泛，H5作品的应用广受人们的欢迎。而H5作品的设计效果直接影响观者观看的效果，甚至会影响用户互动以及浏览的数据，因此，在设计原则的指导下开展H5作品的设计与制作变得很有必要。Ben Shneiderman提出的界面设计的八条黄金法则可为作品资源建设者提供参考与借鉴。

关键词：界面设计;Mugeda;黄金法则;用户体验;H5

中图分类号：TP37      文献标识码：A

文章编号：1009-3044（2022）17-0097-02

1  引言

H5作品随着移动互联网时代的快速发展愈发流行，H5能够满足人们目前能够接触到的多种媒体形式，包括文本、图像、音频、视频以及图标、网页、动画等。Mugeda作为专业级H5交互动画内容制作云平台，拥有业界最为强大的动画编辑能力和最为自由的创作空间。与其他H5设计开发平台相比，Mugeda有独特的类似Flash制作的时间轴，并在控件功能上研发了很多交互方式。此外，它不提供可直接进行修改的模板，开发者需要在制作作品之前进行设计构思[1]，因此，设计原则的问题就随之而来。

与Mugeda类似的众多H5交互平台，处在移动设备的载体上，从界面设计的视角看，这种技术特性会限制发布内容的布局设计、导航设计、交互设计，尤其是信息如何呈现的问题[2]，此外，手机屏幕空间的大小对于呈现复杂的内容时相对比较困难。

2  问题提出与理论基础

2.1 问题提出

现有研究大多数关注Mugeda技术操作以及功能实现层面，而忽略了设计的美观性以及带给人们的认知负荷。作品的设计与制作过程遵循一定的设计原则，才能发挥其较大的价值。

无论是应用在营销宣传的推广方面，还是在教育课件以及音视频报道等方面的应用，设计原则的选择都会影响最终Mugeda作品的质量，从而影响作品的视觉呈现以及观看效果，甚至涉及用户互动数据以及浏览行为数据的监控。Shneiderman从受众出发，基于对用户角度的认知提出用户界面设计的八条黄金法则，充分体现了交互系统中人与计算机有效交互的策略[3]。针对手机端观看Mugeda作品而言，手机屏幕是相对于其他设备最小的一个终端，并且尺寸多种多样，用户通过移动终端设备进行翻阅报道、答题测试、观看视频等，是一种典型的交互方式，因此设计的好坏直接影响用户交互的体验。

2.2 用户体验

用户体验自Donald Norman提出以来，众多学者提出关于用户体验的理论、方法与模型。Donald Norman将用户体验划分为本能层面、行为层面以及反思层面[4]。Whitney Quesenbery等提出用户体验的5E设计原则，即有效性（Effective）、效率（Efficient）、吸引（Engaging）、容错（Error Tolerant）、易学（Easy to learn）[5]。指导Web界面设计实践最著名的为Peter Morville总结的用户体验蜂巢模型，它揭示了用户除了可用性需求之外的更多体验需求[6]。

作为重要的理论基础，要在使用黄金法则设计和制作Mugeda作品时将“以用户为中心”的思想贯穿始终。

3 Mugeda界面设计的黄金法则

3.1 一致性

在设计界面的功能和操作时，可以利用图标、颜色、菜单的层次结构、行为召唤、用户流程图来实现一致性。规范界面中信息表现的方式可以减少用户认知负担，用户体验易懂清晰且流畅。

当无关的信息被排除时，观者对于作品的关注度更高，这里的信息包括词语、画面和声音。若在本来就狭窄的手机屏幕页面上再添加不必要的信息，观者的浏览效果会大打折扣。

3.2 提供快捷操作功能

提供给用户更加快捷完成任务的方法，他们可以更轻松地浏览和操作用户界面，尤其是对于相对烦琐的操作。

Mugeda提供跳转功能，快速地跳转到指定页面，当浏览完所有信息，可设置直接跳转首页继续浏览，不必退出重新进入界面。处于舞台编辑区域制作，点击所要触发跳转的元素，点击行为按钮，即添加或编辑行为。行为包括动画或媒体播放控制、属性控制、微信定制、手机功能、数据服务。触发条件包括点击、滑动、拖动、自定义触发等。

3.3 提供相关信息的反馈

用户每完成一个关键操作，需要在合理的时间给出适当且人性化的反馈，然后用户才能感知并进入下一步操作。反馈有很多类型，例如声音提示、触摸感、语言提示，以及各种类型的组合。例如在设计多页问卷时，应该告诉用户进行到哪个步骤，保证让用户在尽量少受干扰的情况下得到最有价值的信息。

此原则比较适用于答题测试类作品，当答题者回答错误时，可给予关于此题的提示，若回答正确，可给予答题者以鼓励。Mugeda制作时可将内容与所给反馈放在同一页，反馈放置于时间轴最后一帧，通过选项跳转至帧并停止来实现。

3.4 设计含结束提示的流程

避免用户在浏览作品或操作页面时产生疑惑与犹豫，必要时需要在页面添加引导。例如，用户在终端设备上完成支付后，看到“谢谢购买”消息提示会感到满足和安心。

在Mugeda中同样可通过页内的帧跳转来应用此原则，当用户填写完整所有必填信息后，在结束页内的提交按钮上添加行为，提示“您已填写完整所有信息”或“感谢参与”等字样。

3.5 提供简洁的错误操作解决方案

在设计作品时应该尽量考虑如何减少用户犯錯误的机会，但如果用户操作时发生不可避免的错误，不能只报错而不提供解决方案。若作品内容较复杂且目录较多时，需确保为用户提供简单、直观的分步说明，以引导他们轻松快速地解决问题。例如，用户在填写表单时忘记填写某个输入框时，可以以较小字号提示或星号标记这个输入框以提醒用户。

Mugeda提供点赞、投票、拖放容器等多种控件以及表单功能，在制作时设计出错误操作的解决方案，用户会更专注于内容本身，同时避免后台数据冗余的发生。

3.6 允许撤销操作

设计人员应为用户提供明显的方式来让用户恢复之前的操作，无论是单次动作、数据输入还是整个动作序列后都应允许进行返回操作，即用户可获得控制权。Shneiderman认为此功能可有效减轻用户的焦虑，当用户知道由于操作失误导致的错误可以被撤销时，用户会满怀信心地去大胆探索。

在涉及重要信息填写操作时，开发者需设置返回按钮或重置按钮，允许用户清空之前填写的内容，或在最后一步操作之前询问用户是否确认。

3.7 用户掌控感

设计时应考虑如何让用户主动去使用，而不是被动接受，要让用户感受他们对界面的操作与内容具有掌控感，在设计时按照他们预期的方式来获得他们的信任。

此原则适合营销推广或宣传推广类作品，当用户对界面的操作以及内容了如指掌时，用户会更愿意继续浏览，继而达到推广数据的目的。

3.8 减少短时记忆负担

人的记忆力是有限的，短时记忆的容量一般为7±2个组块，短时记忆是通过复述来保持信息的[7]。因此，界面设计应当尽可能简洁，保持适当的信息层次结构，让用户去再认信息而不是去回忆，再认通过感知线索让相关信息重现。例如，一般选择题比简答题更容易，因为选择题只需要对正确答案再认，而不是从记忆中提取。

比如教育类作品，当浏览一定信息后，在后面的内容中适当地设置一些返回功能可供学习者再认知识。同时，设计者需保证对应的文本与画面出现在时间轴的单个图层或多个图层的同一帧，切忌相继出现，从而减轻学习者的认知负荷。此外，不要添加过多或无关的人物形象或卡通形象等，不仅由于屏幕本身的局限性，而且会使学习者转移注意力。

4  结论

任何一个H5作品被设计出来都应有其遵循的设计原则与使用规则，一个优秀的H5作品更应该符合人们的认知，并且具有一定的美学基础，甚至能够达到开发设计者关于用户体验或营销数据的目的。以Ben Shneiderman提出的界面设计的八条黄金法则为基础，设计并制作不同类型的Mugeda作品，以期为开发者、设計者提供参考与借鉴，创作更优秀的H5界面。

参考文献：

[1] 陈海燕.初探H5移动微课设计开发原则[J]. 读书文摘（中），2020（4）：1.

[2] 司国东，赵玉，赵鹏.移动学习资源的界面设计模式研究[J].电化教育研究，2015，36（2）：71-76.

[3] Shneiderman B.Designing the user interface[M].3rd Ed.Pearson Education，Inc，1998.

[4] Norman D.Emotional design：why we love （or hate） everyday things[M].New York： Basic books，2004.

[5] Quesenbery W， Brooks K. Storytelling for User Experience： Crafting Stories for Better Design[M].New York： Rosenfeld Media，2010.

[6] 焦婧，刘东，李亚文.用户体验蜂窝模型在网络教学中的应用研究[J].北京联合大学学报，2013，27（2）：27-30.

[7] 但菲，刘野.心理学[M].北京：北京师范大学出版社，2011.

收稿日期：2022-02-10

作者简介：王秀芳（1999—），女， 山东聊城人，硕士在读，主要研究方向为教育软件系统开发。