网页交互界面的动效设计教学探索研究

    摘 要：网页界面动效设计的应用有助于用户对网页界面操作的学习、理解和使用。本文针对网页界面交互动效设计的教学环节进行了探索和研究，目的在于研究网页动效设计如何在视觉规范的框架下展开。以网站交互功能的层级为参照，制定与之匹配的不同视觉权重的动效设计方案，能有效地发挥动效对交互的演示和诠释作用，通过教学过程中对基本设计方法的研讨、讲解和实践训练，使学生对网页界面设计中如何使用户互动体验更加感性、高效和愉快的认知更加深刻。

    关键词：网页视觉规范;动效设计;形象识别;用户体验;课堂研讨

    1 动效设计教学在网页界面设计课程教学中的必要性

    界面的核心是交互，而动效是对当前交互状态的一种更有效的注解，其本身糅合了视觉、触觉和听觉3种人类接收信息的主要途径来传递信息，是一种更具吸引力的交互展示方式。动效提升了网站系统交互的易用性，提高了网页交互的用户体验质量，是网页视觉设计重要且关键的一个组成部分。

    动效在早期的网页界面设计中，是网页设计与制作从业人员发现的一种能增加界面交互操作趣味性的额外工作，在移动端界面设计行业兴起后，动效成为包括网页在内的界面设计方案中的一种标准配置，也是界面相关专业课程的重要组成部分，同时也是专业教学中实践价值的体现。

    2 动效设计的授课内容安排

    授课内容，包括研讨议题的设置、实践案例的选择等方面，在当前包括网页界面在内的界面设计教学内容中，动效设计教学的内容主要涉及动效设计方法和动效制作工具等方面。网页界面的动效设计，相对于APP、游戏等界面设计中的动效设计，在使用场景、视觉形式、限制因素等方面有所不同。网页界面的空间相对于其他界面类型，视觉设计空间相对充足，操作环境更加单一，对于动效的需求也更加灵活。

    2.1 动效的使用场景

    动效在网页中的需求，除了交互层面的刚需外，还有趣味性等层面的需求。互联网刚兴起时，正是互联网用户适应网页交互模式的习惯定型阶段，此时对于动效的需求并没有得到充分的体现，在互联网技术急速发展的今天，对网页交互动效提出了更高的要求和期待，作为后来者的APP等移动端的动效场景应用，更多地反向影响了网页的交互动态设计，网页交互动效使用场景的定位也更加精准。

    2.2 交互构成与布局的整体性

    整个网页或者整个功能业务流程页面作为一个需要整体，各个部分必须履行好每个零件该有的功能。网页上的不同功能有着不同的权重定位，对应着不同精彩程度的动效细节和形态。精确合理的权重定位，需要科学地分析页面各处不同交互功能重要性的相对关系，对于不同的交互功能区域根据交互功能的重要程度进行对应的动效原型的推定。

    2.3 动效与交互表达需求相匹配

    德国拉班认为，任何运动都是由重力（轻或重）、时间（快或慢）、空间（收缩或延伸）和流畅度（限制或自由）4种因素构成的。[1]视觉传达专业学生并没有专门的关于熟悉动画运动规律的专业课程，因为课时等因素的限制，只能通过案例素材中运动的4种要素来分析和获取动效运动规律的关键帧形态，根据细节取舍的需要，调整中间过程帧的密度和强度，重点在于对形态模拟的把握，影响动效运动规律合适程度的因素主要有空间视角、对象形态的概括程度以及细节的取舍等，保证动效的设计方案与交互功能表达需求的匹配度。

    3 研讨模式下动效设计案例的教学组织与实施

    3.1 设计教学中研讨模式的实施背景

    视觉传达设计专业的专业课程课堂教学形式一般都会有案例实践环节的存在，有某种程度上的应用实践，但缺乏对实际应用、思维方法的研究以及学生原创意识与原创动力的培养。在高考高录取率的背景下，班级人数远远超出当年设计教育所倡导的师生高频交流互动启发并维持质量、深度和广度，以及当下课堂的思想交流活动等教育方式所能承载的数量。同时，在生源质量参差不齐的背景下，原有的精耕细作的设计教育教学方式，已经无法解决新的问题。

    3.2 基于研讨模式的动效设计课堂的教学设计

    （1）结合动效设计教学的内容特点调整课程的教学设计。湖南师范大学郭汉民教授总结了“研讨式五步教学法”，即将一门课程的教学分为五个步骤，五个步骤环环相扣，逐步递进，每一步都是后一步的必要准备，也是其前一步的自然延伸。[2]这五个步骤分别是：指导选题、独立探索、小组交流、大班讲评、成果总结。[1]在本门课程中，根据动效内容的特点和教学的侧重点，归纳为四个方面，由“设计/提出问题、探索解决方案、举一反三的应用、思考总结与巩固”组成。

    动效设计的课堂教学内容，本质是应用跨学科技能和知识去综合解决问题，单独强调动效设计的某个方面，都会让动效设计方案偏离目标导向。教学设计的重点在于对研讨模式前的教学案例的选择、实践项目的设定以及对应的研讨主题的设置，并就学生在参与研讨的过程中可能会出现的问题进行反复推理、调整、实践、总结的循环改进，这是一个长期的过程。

    （2）用问题引导学生对设计方法的应用与把握。动效设计方法的目的，并不是只针对动效本身的设计，而是针对动效的方式、效果和强度选择一种恰到好处的方案去实现动效设计的初衷。动效的设计方案包括动效的定位，动效定位的分析依据包括交互功能的权重、页面视觉效果以及交互的功能性视觉联想关联程度等方面。

    动效的制作、動效的规范化与模块化处理三个方面，每个方面都必须设置问题引导学生解决，在解决的过程中加深对设计方法的理解和感悟。

    3.3 关于动效设计的课堂研讨关键点思考

    （1）动效设计与交互功能关系的教学思考。通过案例研讨分析，加深学生对“以目的为导向”设计方法重要性的认知，理解“以目的为导向”是网页界面设计的基本思路和课堂案例实践的指导原则。任何视觉效果、动效效果的设计都是围绕着交互功能进行布置和统筹的，在教学中，需要时刻让学生知道这些设计的目的，修正设计方案中的冗余装饰或者过度设计，始终坚持功能决定形式的基本设计思路。

    （2）动效视觉与网页视觉规范关系的教学思考。用问题引导学生思考网页视觉规范和动效设计之间的关系，有助于学生针对规范和设计自由之间的关系，保持足够独立和有深度的思考能力。保持设计的一致性原则可以有效地传递信息，方便用户学习和减少用户的记忆负担。[2]动效作为围绕交互功能而具备实际价值的事物，首要的因素是动效能被视觉感知，进而引发运动的联想，增进交互体验的深度与广度。

    动效是网站或者网站所属机构视觉识别体系的一个组成部分，同时动效的使用场景具有非常大的灵活性，在具体实践中又表现出很大的自由度，将动效设计方案以一种有效的视觉规则纳入网页或者界面视觉的规范体系中，是网页交互动效设计的一种趋势，教学中应该通过设计案例，强调在多途径感官同感方面有成体系的平衡方法和原则，以模块化的方式满足不同功能交互层级表达组合，以及网页界面动效应用的规范化需求。

    4 结语

    研讨模式介入动效设计教学环节中，有助于通过对动效的设计实践，培养学生综合分析问题、制定实施方案的执行能力。动效设计虽然设计的是动效效果，但动效设计的定位是以交互需求为根本展开的活动，动效本身是一种富有状态变化的网页效果，在研讨模式的教学实践中，对动效设计流程每个环节的思考、分析和决策都能在课堂研讨活动中使学生充分地参与进来，对设计方法的理解认知与应用感悟以及教学质量得到提升，同时也激发了学生积极创新并主动去创造内容的积极性。

    参考文献：

    [1] 马薇.研讨式教学法在机电专业本科学生毕业设计中的应用[J].教育探索，2010（5）：80-82.

    [2] 渠芳，连承波.讲授式教学法与研讨式教学法在石油地质专业本科毕业设计中的应用[J].黑龙江教育，2011（9）：86-88.

    [3] SANTOS L，DIAS J . Laban Movement Analysis Towards Be-havior Patterns[J]. Emerging Trends in Technological Innova-tion，2010（14）：187-194.

    [4] 許钰伟.移动应用界面动效易用性研究[J].设计艺术与理论，2016（6）：60-61.

    作者简介：熊科军（1982—），男，湖南常德人，讲师，湖南文理学院艺术学院专任教师，研究方向：信息的视觉与交互设计。