智能移动应用界面的动效设计研究

设计艺术研究 Research on Design Art
133
智能移动应用界面的动效设计研究
王颖惠
（山东工艺美术学院视觉传达设计学院，山东 济南 250000）
摘要：自从2007年苹果发布了iPhone，开启了智能手机终端的浪潮，随之而来的移动应用蓬勃发展，而应用界面的设计就越来越被消费者和手机使用者看重。

本文着重研究了移动应用界面中的动效设计，探寻了动效设计从电影和动画的源起到手机应用界面设计应用的变迁，通过对比苹果和谷歌两家公司不同的动效设计理念，综合分析提出了界面设计师们应该遵循的动效设计通用原则，为移动应用设计师和用户提供了合适的动效设计参考。

关键词：动效设计；界面设计；用户体验
一、动效设计的概念
Motion Graphic Design – 动态图形设计，简称Motion Design，就是本文题目中的动效设计。

运效设计既要符合平面设计的原则，也要兼顾视听语言设计标准，是通过视频或动画等创作成动态影像的艺术表现形式。

动效设计最早提出于20世纪50年代，它注重实践性，现在还没有权威的定义。

而其形式和内容非常广泛，除了字体和版面的运动变化，还囊括了电影片头和界面中的动态图像等。

从广义上讲，动效设计的真正意义在于对事情发生的过程和内在机理的描述和说明，而不仅仅是表面形式的图形动态实现。

用户体验设计师Hazwani和Bernard在2016年发表在杂志《Interaction Design》上的文章“Motion with Meaning： Semantic Animation in Interface Design”提出用户界面设计在1970年代只是一系列没有任何过渡的静态PDF。

尽管早期有一些值得注意的优秀动效设计的例子可以追溯到最初的苹果电脑Macintosh，但由于当时计算机的图形功能有限，有效的动效设计仍然凤毛麟角。

20世纪80年代后，随着计算机功能的日益强大，动效的制作越来越便捷，开始被频繁地使用，而设计的效果也更加华丽。

动效设计也不仅仅局限于传统的电视节目，而且在各种媒体中得到了广泛的应用。

例如电影《功夫熊猫》就是动效设计在电影中应用非常成功的典范，动效和实景的交融展现，为观众没呈现了一个多彩多姿的视听盛宴。

随着2007年iPhone带动下的智能手机极速发展改变了人类生活方式，也为动效设计开辟了一个崭新的应用领域。

交互设计大师Alan Cooper 在《About Face 3 交互设计精髓》中总结，因为可以阐述事物间的关系，动效是一种强大工具，而这个工具的作用在屏幕较小的手机上尤为突出，设计者可以充分发挥内容隐藏的功效。

而且动效可以帮助设计者梳理清新旧内容的关系以及激发设计者对新内容的创作。

除了在手机应用设计上的显著功效，动效在网站设计上的应用也非常有效，
它可以高效的引导用户浏览页面。

除了在电影中的应用，结合着物联网和大数据的发展，动效也广泛应用于互动营销的应用中。

而互动营销结合了动效设计的概念之后，形式变得更加新颖，也让客户能更高效的了解产品。

图文有了动感设计之后大大提升了吸引力，而且动效设计的互动性和特殊性是其他艺术形式无法取代的。

综上所述，动效设计不但为电影，网站和移动终端应用界面提供了音像，动画及解说，更是实现了在符合了用户心理的基础上的表达、解释和交流功能。

随着动感处理软件和硬件显示设备的性能提升，动效设计的发展将更加丰富和成熟。

二、移动终端应用设计的易用性（一）视觉元素设计
从自然进化出眼睛之后，视觉信息就占据了绝大部分的信息采集。

而人类用视觉信息作为接收信息手段的比例更高（高达80%），而从信息传达的效率角度来讲，信息的结构和视觉元素能够有机的结合可以极大的提高信息传达和接受的准确和高效性。

在这个结合过程中，视觉元素之间的关系处理至关重要，归纳为以下三点：1、辨识一个视觉元素的最基本的特征是它的可识别性，而形状、尺寸、色彩构成了元素重要的三大要素。

元素所传达的信息必须是准确可靠的，可以让用户正确理解所包含的意义，这就要求合理有机的搭配三要素而达到吸引用户的作用并能准确高效的传递信息。

2、而两个或多个元素间形状、尺寸、颜色的对比是元素设计的第二个关键点。

除了对元素做静态对比之外，可以借助元素之间动态的变化比对使元素之间的异同更具有吸引力，也可以增加各个不同元素的辨识性。

如苹果手表中图标大小和形状分区设计，并结合动态交互控制，使得用户选择和操作更高效和流畅，而产品也更具有吸引力。

3、第三个关键点是元素的空间位置， 是通过对二维平面内元素间的对比产生三维的空间感。

通过对元素空间位置的摆放设计而产生视觉上的三维层次结构，
作者简介：王颖惠，山东工艺美术学院视觉传达设计学院。

这样更接近物体在现实中的视觉效果，使用户可以清晰准确的区分元素前后及层级结构关系。

而这种对元素空间位置的特殊设计，跳出了二维空间的平面束缚，增加了界面的沉浸感和现实感。

（二）交互设计逻辑层面的动效
动效设计可以用作移动应用中交互设计逻辑的辅助说明，这样可以有效地降低学习成本，并且能简化引导流程，可以在用户体验中达到事半功倍的效果。

这个功能也是动效设计的一个主要应用功能，而其中典型的设计形式包括动画转场、下拉刷新、界面消隐等。

在动画转场设计形式中，转到下一级的页面是从右侧面叠加进入，而返回上一级的页面的时候，页面会从右侧渐渐隐去，这种对页面翻转，滑动，渐隐等动效可以有效地营造出一种现实世界的三维空间感，使用户能快速有效理解页面之间的从属和层级关系；在下拉动刷新中，用户通过向下滑动屏幕来实现更新内容的功能，下拉区域的旋转设计代表正在加载的状态，动态滑动屏幕刷新的功能完全取代了原来通过点击才能实现的刷新功能，这在操作上极大地简化了设计，而且在给用户体验上达到了非常流畅、自然的设计，使得该应用在用户中的得到了深入的传播；界面消隐是指在向下滑动页面时，自动隐藏导航条的功能设计。

这种动效设计的应用可以合理地拓宽界面的面积，也使得内容的上下关联性得到了很好的提升，使用户在查看内容的同时体验流畅而舒适的用户体验。

所以可以说，具有指向性和功能性的动效设计是交互设计逻辑层面设计的本质。

（三）动效设计的自然性和合理性
自然并且合理是动效设计必须要达到的要求，这是因为动效设计的基础是自然界和现实生活。

而在现实生活中，物体是有着固有的物理属性的，是有质量有体积的，要想让物体位移，必须施加作用力。

而且由于惯性和阻力的存在，大部分物体的运动都是加速或减速的过程，也是人们习以为常地缓进缓出。

如果动效设计中的界面或元素突然启停或突兀的转向运动，会使设计脱离现实，用户产生不适的感觉。

所以在动效设计中，元素的运动要符合物理常规，包含正确的逻辑与动作次序，而不能一味地追求动画效果的与众不同。

而在视觉信息层级方面，也要注意现实世界中的合理层次关系。

在现实中，物体在视觉上总是近大远小，所以在动效设计中也要遵循这个统一原则，根据要传达的整体系统的视觉层次来设计元素的大小和排列，合理展示视觉信息的层次感。

在过渡转场时，因为人脑对现实世界的故有感官（物体位移、形变、色变等），所以在动效设计中加入舒适平稳地过渡效果，会极大提升设计的用户体验，也能使用户迅速有效的理解界面变化的前后逻辑。

（四）最小化记忆负担
在设计和用户交流互动的应用时，要遵守操作方法和步骤越简单越好的原则。

因为用户在进行应用操作时不可能记住非常烦琐和复杂的流程和方法，而且烦琐的步骤也会大大降低应用的用户体验。

这就要求在动效设计的过程中有效地减少华而不实的装饰性动效，尽量保持简洁的交互设计，最小化用户的记忆负担，方便用户在使用过程中集中注意力在功能上的体验。

在功能引导的动效设计中，应利用动效模拟用户操作的情景，使用户能在情景下高效的记忆操作步骤，减少用户在操作中的思考负担。

（五）动效中隐喻的应用
谷歌公司在2014年I/O 大会上展示了Material Design，一种全新的设计语言，是通过实体隐喻的方法来进行界面设计。

这个全新的设计通过对光影效果、物体表面质感、物体动感三种方式来实现对物体的运动、空间及交互关系的表达。

通过对真实世界的效果模拟使用户操作更接近现实，提高用户的体验度。

（六）动效设计中的情感元素
细节的处理往往是区别优秀设计和普通设计的关键。

真正好的用户体验设计也是在细微处见功力。

通过细节功能的设计而体现应用产品的差异化，这样能更好地吸引用户，而用户在使用产品的时候也会有很丰富的体验。

在动效设计中增加情感元素的细节往往能提升产品的体验值。

通过营造细腻的场景，动效设计可以让用户的操作变得轻松而自然，还可以加入文化或情感的唤醒，唤起用户的潜在情绪，比如回忆、联想等。

如“网易云音乐”的音乐播放界面动效设计就在情感细节方面做地非常到位，视觉元素上模仿20世纪的唱片机外形，唱臂采用金属材质增强了场景的真实感，给用户以强烈的沉浸感。

这在很大程度上吸引了用户，也能很好的引发用户的情感共鸣，尤其是年纪较长的用户。

（七）操控行为的有效性
操控的有效性是指设计预期的完成程度。

动效的设计要考虑用户的下意识动作流程，因为下意识的操作是用户的非条件反射似的操作，要比有意识的操作反应速度快很多。

动效设计要符合用户的下意识的使用步骤。

例如在鼠标滚动设计上，MacOS El Capitan以不同于传统的滚动方式来设计。

这是符合自然的滚动规律，也符合用户的使用习惯。

三、移动设备应用界面动效的易用性设计原则
（一）内容为先，动效应依据不同的目标任务进行设计，近期谷歌设计团队对事物的本质进行思考重构，并推出了一种全新的设计语言Material Design（原质化设计）并将动效写入到这项设计原则中：Motion provides meaning（动画表达含义）。

合理的动效表达可以代替文字的表述需求，阐明应用的具体含义。

在进行移动设备应用界面动效设计时，要从目标用户使用动效的实际目的和需求出发，在基础的交互逻辑层面的动效架构之上，进行视觉感知甚至情感需求上的深层研究。

当界面中各个部分的编排设计和动效能够清晰的指出并告诉用户它们的作用以及动向，使用户能够将注意力集中在他们所关注的目标上，那么动效的设计使用就是成功且达成设计意图的。

下转第136页
134
上接第134页
（二）运用通感，遵照现实规律，打造无割裂浸入式的用户体验时，要注意不同的动效节奏会给用户带来不同的心理感受。

因此，界面动效在移动应用的设计中离不开“现实体验”这个概念，动效的设计应合理遵循人的运动规律，按照现实的物理规律和节奏，不断地与其他学科如人机交互学、社会学等融合汲取正确的处理方式，确保界面中的信息能够被用户正确地理解，更好地为用户所服务，实现易用性目标。

通感属于认知心理学的范畴，巧妙地运用通感并遵循界面设计的基本规律，让用户在感官、经验与界面等各个关键要素之间建立联系，可以帮助用户快速的熟悉和理解动效，使那些即使没有使用经验的用户在面对一个全新的界面时也能够迅速地在潜意识中调动其长期记忆而形成某种意识，清楚地知道每个元素的基本含义是什么、该如何使用、同时顺利产生交互以达到自己的使用目的。

（三）动效具有非独立性和一致性，动效设计只是界面交互体验设计的一部分，并不能独立存在，因此，动效设计往往需要符合整体视觉设计语言的一致性。

首先，基于目前业界内对于界面基础动效的设计规范，尊重其对用户已形成的固有使用习惯，提高用户易用性，例如我们平时操作中经常用到过的跳转下一层及为从右往左淡入页面，返回上一级从左往右淡入界面等基础动效，就是沿用了iOS3的设计法则，至今仍然被许多APP所沿用；其次，是要注意动效其传递的感情基调是否与应用程序整体一致，例如，移动办公应用类的APP应多用响应速度快，视觉感知迅捷的动效，以降低用户在使用过程中的疲惫感；而艺术创意类的APP应更多地关注动效的趣味性体验，例如不同层级展示和空间扩展会给用户带来与众不同的质感体验。

四、结语
基于移动应用界面动效的易用性研究，本文梳理了动效和界面设计易用性之间的联系，提出了合理且针对性较强的动效易用性设计策略。

为了使用户易于接受界面的动效引导，在移动应用动效设计中应更加注重用户的使用体验，从功能角度出发遵循用户的使用轨迹和视觉规律。

未来在交互层面的几何体系中应注重垂直Z轴的分层方向，通过对交互设计层面上三维物理空间感的纵深加入，使得视觉感官不在处于同一平面上。

从当前简单的二维设计转向更富层次感的三维动效设计发展方向，使移动应用界面动效的设计给用户带来更优质的视觉维度体验和操控体验。

参考文献：
[1]陈星海，杨焕，廖海进.基于效率的移动界面视觉设计美 学发展研究[J].包装工程，2015（16）：107-110.
（责任编辑：董冉达）
方式进行素材准备工作，素材的查找及制作必须先达到一定的量后再进行讨论逐一排除，对剩下的三到五个关键词进行排序、组合、提炼和加工。

（五）第五步：创意设计
创意讲求的是新，尽量寻找新的元素，但旧元素新组合，用比喻、夸张、展示主题、拟人、对比等是平时用得较多的创意手法。

具体图形设计时可用元素替代、同构图形、影子创意、正负形、共生图形、比拟图形等手法对各元素进行整合产生一个新的组合。

最后对图、文、色进行合理编排搭配，完成作品。

（六）第六步：成果展示用点评
作品定稿后，形式上可以通过网上展示或打印装裱后实物展示，展示范围可以是班级内部展示或学校公开展示等，展示期间学生可互评，老师根据结合学生互评的情况集中进行点评。

三、海报设计教学中集思广益的特点
海报设计教学中集思广益的特点主要体现在有效的信息筛选阶段。

在海报设计中，除了与主题相关的原理外，还必须“表达并表达抽象思想的特定视觉图像”。

信息可以直接对应于特定的视觉图像。

这种信息筛选方法还将用于“包装设计”，“书本装订设计”，“标记设计”和其他课程中。

四、“头脑风暴”的好处
综上所述，集思广益的好处如下：1.具有很强的操作和实用价值，非常适合集思广益和团队合作；2.有效地拓宽思想，启发和有效地训练一个人。

以及团队的创造力；3.让参与者更加自信，因为他会发现自己是如此“有创造力”；4.提高工作和学习效率，更快，更有效地解决问题。

五、“头脑风暴”组织
参加人数通常为5至10人（课堂教学也可以是一堂课），最好由不同的职业或不同的职位组成。

会议时间控制在1小时左右，并且只有一位主持人。

主持人仅主持会议，不对想法发表评论。

设置1或2个记录器，并要求完整记录每个参与者的想法，无论是好是坏。

六、结语
头脑风暴法广泛应用在各个行业，也是广告创意行业常用的创意激发方式，我们要根据不同的行业或任务做出有针对性的流程和方案，头脑风暴法在招贴设计教学中的应用整体流程没有改变，只是根据任务特点个性化地制定了“与主题的关联性”和“具象化”两大信息筛选的原则，在实际应用中提高了效率，获得了较好的效果。

参考文献：
[1]王国平，阎力.头脑风暴法研究的现状和展望[J].绥化学院 学报，2006（6）：173-175.
[2]魏春艳，刘治国.浅谈“头脑风暴法”在新课程教学中的运 用[J].中国校外教育，2014（20）：89.
（责任编辑：董冉达）
136。