电商类App 用户界面中动画设计的研究

张楷

（南京信息工程大学艺术学院，江苏 南京 210044）

1 电商类App 用户界面中动画设计的作用

1.1 动画的引导提示作用

引导类动画给用户提供指引，让用户更好地了解App 的功能以及各种所需要的信息。对于第一次下载使用电商App 的用户来说，引导类动画给用户提供简单明了的操作信息，让用户更好地使用App。避免年龄较大的用户无法正确、高效地使用App 来购买商品，让他们能够第一时间内获取商品的信息以及找到所需要的。从电商的角度，也避免了用户的流失。引导类动画一般出现在App 初次打开的时候，是用户了解、使用App 的第一步。除了基本的功能展现和信息提供，引导类动画对于用户的及时需求也有引导和提示。用户在使用电商App 购物过程当中，对于商品物流信息的掌握需求会比较多。清晰明确的提示能够迅速抓取购物者的眼球。当静止的物体突然出现变化的时候，往往非常吸引人的眼球。不断反复地出现变化，将促使用户进行选择。界面图片的切换动画，以及字体放大缩小的动画来吸引用户，激发了用户的兴趣，提示用户进行选择。用户对于主要功能的使用有了更加清晰明确的认识[1]。

1.2 动画提升加载体验的作用

加载动画一般出现在两个界面切换之间以及上下滑动页面的刷新。随着软件的升级，传统的文字提示已经远远不能够安抚用户在等待过程当中急躁的情绪，加载动画不再是那种非常生硬的圆形旋转，传统刻板、生硬的加载类动画已经由如今富有表现力的图形、颜色、充满设计感的动画所代替。冲破了原有的时间和空间上的局限性，具有非常丰富的表现力。用户在选购商品的时候不希望因为网络或者移动设备的问题影响自己的购物体验。因此加载动画让电商用户在使用App 购物等待的时候保持良好的情绪，增加了用户对于问题出现的包容程度[2]。在等待过程当中，生动有趣的小动画安抚了用户情绪的同时，也增强了用户对于App 的好感度，用户在网络购物的愉悦感迅速提升。例如当闲鱼App 网络出现中断时的加载动画。两个生动有趣的卡通形象之间的变化大大提高了用户的好感程度。闲鱼生动活泼的品牌形象也很好地展现在了用户的面前。这个加载动画的设计同时也大大提高了产品的品牌形象，极大地促进了品牌的宣传和推广。

2 电商类App 用户界面中动画设计的方法

2.1 视觉色彩的动态设计

色彩在信息传递的过程当中是一个非常重要的元素。随着用户智能设备的不断升级，电商App 用户界面中的视觉色彩元素也产生了新的变化，动画设计当中传统的静态色彩开始向动态色彩变化。与静态的色彩元素不同的是，动态的视觉色彩更具生命力，视觉上的变化更大。采用动态的视觉色彩设计让用户可以非常敏感地捕捉到界面之间的变化。这样富有表现力的变化为信息传递提供了非常有力的保障。动态视觉色彩的变化，让电商App 中的商品展现效果更加的丰富，通过多变的、富有节奏的色彩变化，来不断吸引用户的视觉焦点。动态色彩除了明度、饱和度、色相上的变化，同时也可以运用大小、位置以及形状方面的变化[3]。不同的颜色变化也让用户产生了不同的情感变化。在以女性用户为主的电商App 当中，多采用饱和度较高的色彩变化设计能够让用户产生愉悦感，提升用户在购物时候的满足感。用户在首次打开App 时，引导页的画面是最先能够让用户获取电商平台信息，提升用户兴趣感与愉悦度的。引导页动画设计的好坏，间接决定了用户对于平台的第一印象，因此在进行引导页的色彩动态设计时，色彩的动态变化幅度不能过大，通过色彩的逐渐变化来吸引电商用户，同时丰富整体的画面效果。色彩动态设计以承载信息为主，起到积极的引导作用，将呈现的信息更加直观地体现出来。在引导页当中，色彩的动态变化要符合一定规律，根据产品的不同功能点要有主次不同的变化，要与电商产品整体的调性相互协调统一，不能出现过于浮夸的色彩变化，这样反而会加重电商用户的视觉疲劳，直接影响用户对于产品的进一步使用，从而加重了用户的体验负担。

2.2 与音效相结合的设计

电商App 动画设计当中通过运用合理的声音效果来丰富用户的视觉体验，能够让电商用户得到真实的融入感和参与感。在电商App 下拉页面刷新的过程当中可以增加泡泡破裂的卡通音效来提示用户已经成功完成页面的刷新。音效的设计并不仅仅是对现实中的声音进行简单叠加和还原，在音效的设计过程当中要考虑全面，全方面地与电商用户的交互动作、操作的结果、操作时候的状态环境以及画面视觉效果等因素相互结合，进行画面的构思和设计，运用不同风格的音效与生动的动画设计相互结合，从而给用户带来更好的体验[4]。比如，当用户在购物车当中成功地加入商品时，可以出现一个短暂的提示音来提示用户商品已经加入。这样，用户使用App 购物的过程当中合理的音效使用户的感官体验更加全面立体，使用户完全沉浸在购物的体验当中。在滑动产品图片的过程中融入现实中物品滑动的声音，在某些特殊操作事件发生时，利用具有特殊意义的音效来吸引用户听觉感知，可以给用户带来及时的提醒。需要注意的是在动画与音效设计的结合时，音效的应用不是越多越好，音效的展现效果需要简单明了，其目的主要还是用来辅助用户操作的完成。目前，在众多电商类App 中，动画与音效的结合设计还未被广泛应用其中，用户操作完成后的反馈主要以视觉上变化来表现出来，音效的合理设计增加了操作反馈的体现状态，增加了用户购物时的沉浸感，从而增强用户的操作体验。

2.3 情节的优化设计

情节在动画中具有非常重要的作用，好的情节能够使观众第一时间沉浸在电商产品当中。动画角色需要通过情节来表达情绪，展现鲜活的生命力。在电商App 中，由于展示范围有限，所以给动画表演的场景范围也十分有限，当动画角色利用身体受到限制时，便开始通过情节设计来重复实现，见得比较多的是人物角色情绪上的变化，如喜怒哀乐等。在进行情节设计时，创作者通常会采用面部表情放大夸张的方式来处理，通过夸张的方式来表现情绪无论是在动画设计上还是其他领域上都是最为常见的方法。不仅如此，还可以将面部表情化设计与动作相结合，更加突出其视觉冲击力，同时也将角色情绪变得更新颖多变又不觉尴尬。譬如在进行动态角色设计时，瞪眼睛的时候手叉腰、哭泣的时候用手去揉眼睛、愤怒的时候握紧拳头等等类似的表现方式，将不同的表现方式相互结合，使得角色的情绪更加戏剧化。一些开发者在突出动画视觉效果的时候，容易忽视情节的重要性，好的情节设计能够给整体的动画设计注入灵魂，情节最终是为产品服务的，整体的故事情节要与产品紧密贴合，营造出更加符合产品文化的氛围[5]。

2.4 简约性设计

电商App 是一种即时性交互体验，过程快，时效短。在进行电商App 界面设计时，要考虑到其信息量巨大、层次多的情况，为了让电商用户能够及时有效地获得自己想要的物品，因此用户界面的动画设计不宜过于华丽，而是更应当注重简约、清晰、直观的设计理念，这样不仅不会对用户造成心理负担，反而可以帮助他们更快更便捷地找到自己想要的东西，并获得了互动体验所带来的快感。简约性的设计摒弃了一些不必要的装饰，元素相对简单，将界面所承载的“信息”作为核心，使得电商平台的表达更加清晰明了。对于目前如此快的生活节奏，用户更加乐于接受这种简约性的设计。在进行动态图形的设计时，通过摒弃图形中一些不必要的阴影、描边、质感，通过一些简单的线条、几何形状来表现，这样做在突出主题的同时也大大提高了系统的运行效率[6]。在电商App 中，动画设计的广泛应用并不是单一的在视觉上呈现出来，应当在表达电商平台理念的同时强调设计的简约性、实用性，通过简约的动态图形设计来传达信息，这样的方式表达更精确，使用起来也更高效率。动画设计的过程当中，简约性的设计是一种对于图形表达的高度概括和提炼，使得动画在运行的过程当中速率大大加快，缩短了用户在操作反馈后等待的时长。

2.5 风格统一的整体性设计

电商App 中的动画设计为了给电商用户带来非常炫酷的视觉效果，这就意味着要融入很多复杂的视觉元素在其中，为了对元素进行有效的编排、整合，这就需要对整体的风格进行把控。电商App中的动画设计必须要贴合产品的特性、品牌的整体风格，过于复杂的动态效果会打破App 整体画面的统一，从而增加了用户的操作压力和视觉负担，不能够在第一时间内将商家的有效信息传递给电商用户。在视觉风格统一方面，不同视觉元素的位置、大小、颜色、造型上保持相对的一致，在这些元素的运动变化当中，通过相同频率的变速运动设计来达到统一。在设计App 品牌人物角色动画的时候，要把握好品牌的整体调性，人物角色的整体动态变化不能过于夸张，可以采用与品牌相符合的颜色、品牌当中已经有的相关元素来进行动态设计。人物角色的细节变化也要与App 当中其他的动态图形设计的变化规律相互协调、统一，这样才能够使得设计的人物角色动画融入App 的整体风格当中。在电商用户的实际操作层面，用户在浏览商品，加入购物车，到最终购买商品这一系列的操作过程当中非常容易产生一些不必要的操作，一些动态图形的指引给用户带来了麻烦。为了降低用户的操作难度，给用户带来最节省时间、最便捷的电商购物体验，其中的引导动画、提示动画和反馈动画的设计在风格上要达到一致。用户在对电商平台一系列的使用操作过程，就是一个对于整个平台用户界面的熟悉过程，这其中的动画设计风格越统一，用户就能更早熟悉操作，对于产品更加上手，整个购物体验的过程将会更加流畅、便捷。

结语

传统的静态界面设计和页面信息处理已经远远不能满足电商App 开发者和电商用户之间的需求，电商App 开发者为了增进和扩展与用户之间的交互方式，用户为了拥有更好的体验，静态界面设计向外开始延伸为界面动画设计，有趣、更加人性化的动画设计在电商App 中逐渐增多。用户界面中的动画设计因其具有高效的引导和反馈、提示用户操作状态、提升用户体验等特点在电商App 用户界面中有非常大的优势。