UI静态页面设计与卡通动效结合研究

关志如（广东工商职业学院，广东 肇庆 526020）



UI静态页面设计与卡通动效结合研究

关志如
（广东工商职业学院，广东 肇庆 526020）

摘 要：“好的产品关注功能，优秀的产品关注情感”，这句话充分体现了功能和情感因素在产品设计中的重要作用，UI设计也不例外。本文以卡通动画效果为研究对象，重点就其在UI静态页面设计中的合理运用进行了探究。

关键词：UI设计；卡通；动画效果

UI是基于静态页面来进行设计的，并且页面之间通过跳转进行切换。在实际 UI设计的过程中，设计人员大都将设计重点放在了单页视觉效果上，却常常忽略对界面跳转这个过渡期的处理，所以很容易使用户感觉到困惑。然而，在卡通领域中，由于使用了大量的动画效果，可以帮助用户更好地理解某个动作。虽然UI设计领域与卡通动画效二者之间存在差异，但如果可以从情感认知层面上将UI设计与卡通动效的优点结合起来，则可以大大提高UI设计的质量。

1　UI界面与卡通动效概述

1.1UI界面的含义

UI界面实际上就是用户界面，用一句话概括就是人和工具之间的界面［1］。在我们日常生活当中，界面同样体现在某些方面，比如在用户观看电视的时候，遥控器和屏幕就相当于这个界面。它不仅仅是由用户与界面两个部分组成，同时还包含着用户与界面之间的交互关系。

1.2UI界面与卡通动效的联系性

UI界面通常均是基于静态页面来进行设计，并且无数个页面构成了一个软件。而UI设计人员也大都从静态页面开始设计，却忽略了他们之间的切换。由于用户事先不了解页面之间的联系性，所以很可能不理解，甚至会受到惊吓，进一步增加了用户理解的难度。实际上，卡通动画效果为用户理解图标之间的切换提供了必要的视觉线索，可以使用户清楚地理解对象的变形，深化用户对于某种动作的理解和认识。

2　UI界面设计中的常用技术

与卡通动效一样，UI界面也需要明确，清晰，简洁的沟通，同时也可以借助虚拟世界的营造来增强 UI界面对用户的吸引力。而就卡通动效在UI界面设计中应用的几个常用技术主要包括拟物化技术、夸张技术和增强现实技术等，下面就这几个技术的具体内容进行详细地阐述。

2.1拟物化技术

拟物化技术实际上是指将 UI界面设计中的各个元素当作真实的，有重量的实际物体。在卡通动画领域，人物和元素等均是有重量的真实物体，他们的每个动作均与我们实际生活中的表现保持一致，所以可以使观看者感觉非常真实。但是这种拟物感不单单只是填充像素区域，还需要借助增加惯性来实现物体的运动［2］。动画领域中全部原则，比如弧形运动、跟随和快进慢出等均需要按照有质量的物体来考虑。将UI界面设计中的各个主要元素变成独立的，并使其显著区别于其他背景物体，则可以进一步凸显主元素的动作变化。而就拟物化技术在UI静态页面设计中的具体应用而言，其可以通过采用运动模糊、出现和消失等形式来加以体现。其中的运动模糊是在确保 UI图标无卡顿的基础上来帮助用户的眼睛更好地接受其所捕捉到的物体的运动；而出现和消失则是在UI设计中，通过移入、擦除和模糊消失等三种消失效果来给用户必要的视觉线索来理解发生了什么。

2.2夸张技术

实践研究表表明，通过“夸张现实”的技术，常常也可以大大提高UI界面设计的效果，这恰好就是夸张技术在卡通动画领域中的处理来更加真实地展现某些东西的真实性，从而可以使观众更好地理解卡通动画所要展示的效果。与卡通动画效果一样，为了突出UI界面设计中的某些细节，增强用户理解的效果，也可以适当采用夸张技术来使UI界面中的各种对象变得更加“现实”，以增强UI界面对用户的吸引性。而就夸张技术的具体应用方法而言，可以给用户充足的时间来考虑下个界面的形象，避免被突如其来的UI动画效果所惊讶。比如，在Tumblr中当鼠标移动到某一功能的时候，相应的图标会调动一下来提醒用户点击之后会发生变化等。

2.3增强现实技术

增强现实技术主要是通过采用缓进缓出、弧形运动和跟随运动等三个方面的动作来更加真实的体验和感受某种真实效果。其中的缓进缓出实际上就是在主元素缓慢进入屏幕，接着一个快速的动作，最后以缓慢的动作首尾，其可以凸显主元素在移动过程中的质量感，UI界面设计也不例外，否则会使用户感觉元素运动非常假；弧形运动则可以给用户更加活泼的感觉，不像直线运动那样生硬，从而有效地增强了动画的活泼性；而跟随运动则可以使主元素的部分结构运动，以进一步增强动效变化感。在动画设计领域中，当动画人物停止走动后，其身体或者衣服等一些局部动作可以大大增强人物的动效变效果，UI界面设计中也不例外。比如在ISO系统中，将某个app移动位置的时候，其他的app位置也会跟着发生位移等。

3　注意事项

3.1要遵从“零感知”特性

零感知是相对于操作用户而言，即让UI界面操作用户感知不到UI界面的过渡状态，使用户可以在UI过渡动画结束之前进行下一个操作。虽然动效在 UI界面中的应用具有很好的效果，但是UI毕竟不是卡通，他们二者之间的最大差距就在于卡通是一种被动的介质，而 UI界面则是互动式。因此，UI界面设计需要合理运用动画技术来实现用户最直接的控制。

3.2要遵从严谨性特性

卡通与 UI的另一个显著区别就是他们的使用目标：卡通动画效果专注在于娱乐和享受，而UI用户界面则是用来完成工作的，所以UI静态页面设计工作具有明显的严谨性，必须要排除卡通动画效果中存在的娱乐元素。但是如果某些古怪的元素可以更好地让用户理解 UI界面的某些功能，则可以适当加以保留。

3.3要遵从清晰性特性

UI静态页面设计除了要尽可能的快之外，也要保持足够的清晰度，从而更好地帮助用户来完成 UI所要完成的任务。例如，将卡通动画作为UI静态页面设计中的元素时，要确保动画效果的速度，以便减少UI界面操作用户理解的时间。

总之，从情感认知层角度来讲，卡通动画效果在UI界面间的切换中具有很大的益处。它不仅可以帮助用户更好地理解UI界面，也可以增强用户体验的舒适感和愉悦感。本文重点就卡通动画效果在 UI静态页面设计中的应用方法进行了探究，以期更好地指导 UI静态页面设计工作的开展，确保所设计出的UI产品具有良好的品质，并包含着丰富的情感因素。

参考文献：

［1］崔蔷.论在 UI设计中制定设计的规范［J］.艺术品鉴，2015，15（3）:167-168.

［2］吴琼.交互设计的域与界［J］.装饰， 2010，27（2）:167-168.

（责任编辑：黄 密）

中图分类号：S611

文献标识码：A

doi:10.3969/j.issn.1672-7304.2016.01.065

文章编号：1672–7304（2016）01–0140–02

作者简介：关志如（1987-），女，广东肇庆人，研究方向：二维动画、Flash动画。

Research on the combination of UI static page design and cartoon dynamic effect

GUAN Zhi-ru
（Guangdong College of Business and Technology， Zhaoqing Guangdong 526020）

Abstract:"Good products focus on function， excellent products pay more attention to the emotional"，this sentence fully embodies the important role of functional and emotional factors in product design， UI design is no exception. However， in UI design， design personnel mostly not to cut between the UI for enough to handle， so users often feel confused. And reasonable application of cartoon animation effect between the UI page switching can help users to better understand a certain action. This paper to cartoon animation effect as the research object， focus on the UI static page design in the rational use of were explored.

Key words:UI design； cartoon； animation effect