PRAT 1 移动UI动态效果与After Effects概述

1 移动UI动态效果设计概述

1.1 UI和UE的基本概念

UI 即 User Interface（用户界面）的简称，从字面上看，用户界面不但包括“用户的界面”，还包括“用户与界面”的含义，涉及用户与界面的交互体验。但不管是用户的界面还是用户与界面，视觉始终是它们的落脚点。移动 UI 的概念是建立在 UI 之上，移动互联网产品中的 UI便是移动 UI。

移动 UI 设计是指对移动产品软件的美化与设计，包括人机交互、操作逻辑与界面美观的整体设计。而移动 UI 视觉设计是移动 UI 设计的一部分，是针对移动产品界面美观的设计。移动 UI 视觉设计是移动产品的“门面”，必须考虑产品的物理特性和软件的使用特性。要考虑移动产品的尺寸、重量、屏幕大小等物理特性和考虑什么人群使用，什么人群对此感兴趣，是否满足用户需求，用户使用是否方便等使用特性。这些特性使得移动 UI 视觉设计不仅要对构图、色彩搭配、排列、版式设计等视觉设计方面进行思考，而且还必须对页面层级转换效果、对象动态效果、交互的视觉引导等交互层面进行思考。

用户体验（User Experience, UE 或 UX）是指“产品或服务中，用户所能体验到的各个部分，涉及用户对产品的认知、寻找、分类、购买、安装、服务、支持以及升级的各个方面。在当今的移动互联网产业中，一些产品项目经理没有意识到用户体验的重要性，在项目开发中并不采用以用户为中心的设计理念，对他们而言，用户体验设计仅仅是对产品的美化，甚至一部分项目主管会认为用户体验设计是对项目资金及项目时间的浪费。他们将产品设计交由程序员来完成，程序员由于站在编程技术人员的角度思考，在设计时会优先考虑编程效率，而不是使产品去迎合用户或使用者的需求。并且，程序员在项目组中更多的是主要负责程序代码的编写，几乎没有时间与用户进行交谈，在不能详细了解产品的一般用户时即会将自身假定为产品的一般用户，这就造成了用户模型的偏差，使得产品仅适用于类似程序员自身的具有较高电子设备操作能力的用户，而不是去迎合更广泛的一般用户。

在数字电子科技迅速发展的背景下，各类相关产品之间的竞争激烈。用户在使用中的感想和体验，已成为宣告竞争局势状况的晴雨表，势必能够影响数字电子产品的开发者的发展前景。对于 UI 设计师而言，他们需要对 UI 界面实施不断的更新和优化，使其更能够满足用户的操作习惯和情感倾向，为用户提供呈现能力更为高效、更为精准的界面设计，同时满足其在审美体验和使用体验上的要求。今天，UI设计存在着设计过程形式化，设计理念浅薄化的问题。在当下新科技的发展和互联网信息的膨胀的环境下，滋生出了 UI界面承载能力与互联网环境信息量之间的矛盾和新的科技与当下UI设计理念之间的矛盾。信息传输速度的提升加速了信息量的增长速度，导致了 UI界面中信息混乱的问题。新科技的发展过程中旧的UI设计理念中的弊端逐渐凸显。

1.2 用户体验的5个层级

用户体验要素可以以一个模型图来表现，模型图将用户体验划分了5个层级，从下到上分别是：战略层、范围层、结构层、框架层和表现层。

（1）战略层：战略层是企业寻求自身发展而制定的目标，也是企业根据对自身的一个长期发展的规划与期望而制定的方针政策，为此需要明确用户期望与产品目标。良好的用户体验要求企业能够明确自己的战略，通过分析用户的期望与产品目标来制定自己将要发展的目标方向，并且明确用户期望与产品目标也是企业在用户体验方面的全面方针制定的一个基础出发点。

（2）范围层：明确好目标，下一步就是要做出来。用户体验的范围层也就是明确产品的功能、特性，确定出符合用户期望与目标的产品应该包括哪些内容，且具备什么功能或者特性。范围层是思考应该给用户呈现哪些内容的一个过程，在这个过程中要始终贯穿着一个信念，那就是用户想要什么，我们就呈现什么。

（3）结构层：用户体验的结构层是开始执行实施的阶段，是明确用户期望与产品目标后创建一个结构思路的过程，是对用户期望与产品目标的一个梳理与整合，并且在梳理这些层级关系和交互设计模式时，要站在用户的角度，理解用户的行为习惯、思考方式。

（4）框架层：框架层是对结构层的进一步提取与完善。框架层也可以说是原型层，是将前面的战略层、范围层、结构层的一个原型展现，通过软件绘制出交互模式、界面细节的分布、信息内容等。如果将结构层比喻成骨骼的话，那么框架层就是依附在骨骼上的关节、肌肉。

（5）表现层：表现层也就是最终呈现给用户的视觉层。上述所有的用户期望、产品目标、结构框架等都会通过这层来展现，这一层是用户接触到的第一层，所以表现层的视觉设计是非常重要的，无论是文字排版、配色方案还是整体布局等在这层都需要细细考究，除了完成基本的信息传递外，同时还能满足用户的不同审美需求是表现层的最终目标。

1.3 用户体验的需求层次

全世界大约有70多亿的人口，不同的皮肤、不同的语言、不同的文化形成了各色各异的人，即使是同一个国家，同一个地区的人，也会因为周围的环境或者接受教育的不同形成不一样的性格，每一个人都有不一样的需求，根据马斯洛需求层次理论的研究方法，可以推断出用户体验的需求层次关系。

（1）感觉需求：感觉需求就如同马斯洛需求里的生理需求，是一个最基本的需求。感觉需求通过人的视觉、听觉、触觉、肤觉等去感受外在的物质而产生的一种需求。这种需求必然是好的需求，比如生活中人们会选择精致的外包装、舒适触感的产品等，而不是丑陋的外表、手感粗糙的产品。

（2）交互需求：交互需求可以理解为我们常说的产品的能用与易用。能用是一个产品的基本功能，是指用户能在正常的情况下完整的使用该产品；而易用则是用户与产品交互过程中的一个更高层次的需求，旨在交互过程减去繁琐冗长、不必要的步骤，达到易用、简单的交互需求。微信没改版时，曾有一个实时对讲的功能，但是因为步骤太繁琐而被大家放弃使用，甚至至今很多用户都不知道这个实时对讲到底该怎么操作，满足不了用户对简单交互的需求。

（3）情感需求：随着经济的发展、消费水平的提高，用户对商品不仅仅是基本功能的需求，还期待使用产品时能带来愉悦的感受，满足用户的情感需求。用户会对产品产生某种情感的寄托，或是某种心理上的认同感。不同的用户会有不一样的情感需求，如女性因自身的细腻、浪漫等性格特点，在消费时会更加注重产品的品牌寓意、色彩带来的美感需求等，而男性则更加注重功能与便捷的需求。

（4）社会需求：社会需求是满足用户感觉、交互、情感这些基本的需求后出现的更高层次的需求，也是产品在满足基本的功能时还能为用户体现其社会地位的额外需求，特别是现代经济的迅速发展，生活物质的丰富，人们不需再为温饱问题而发愁，人们根据自身的经济条件购买名牌衣服、名牌手表、名牌包等，不仅仅是功能的需求，更是人们利用品牌效应去体现其社会地位的一个社会需求的追求。

（5）自我需求：是对自我个性的一种特殊需求，可通过非大众化的设计或者限量的产品来满足用户对个性化的追求。自我需求的用户一般具备不墨守成规的性格，对创造力的事物保持着极高的兴趣。鉴于用户对个性化的追求，市场上逐渐出现了各种个性化的定制服务，如个性化餐厅、个性化酒店、个性化婚礼、个性化礼品盒等。

1.4 移动 UI交互设计中动态体验表达

通常我们利用手指在界面上的操作来完成我们预期的结果，一般界面上的点击方式主要有单击（Tab）、双击（Double Tap）、拖动（Drag）、滑动（Flick）、横扫（Swipe）、放大（Pinch open）、缩小（Pinch close）、长按（Touch&Hold）等。

（1）单击（Tab）：单击是指在界面的有效范围内，用手指进行单击的交互动作。单击是界面中最常用的点击方式，类似于我们使用鼠标时光标控制在电脑界面有效范围内单击鼠标左键的过程。

（2）双击（Double Tap）：双击是指在界面的有效范围内，用手指进行两次单击的交互动作。一般用于图片或者页面的放大与恢复原图大小，也用于短信文字编辑时的激活。

（3）拖动（Drag）：拖动是指手指长按界面中的页面或者可拖动的移动条进行拖动，在到达指定位置后松手，完成拖动的交互过程。

（4）滑动（Flick）：滑动是指手指在屏幕接触面上不断地移动，以达到界面的切换、图片的移动或者界面的上下翻页等。

（5）横扫（Swipe）：横扫手势主要运用在激活界面中隐藏的菜单栏，通过向左、向右或者上下方向的横扫，弹出菜单列表。

（6）放大（Pinch open）：放大一般用于查看图片细节或者阅读文章时字体太小时，可以单击界面中放大镜图标实现放大的操作，或者是使用双指同时反方向拉伸来实现放大的效果，其中后者的交互方式使用较多。

（7）缩小（Pinch close）：缩小是与放大手势相对的一种交互方式，实现与放大相反的交互效果，缩小图片或者阅读的页面，在有的界面中，缩小也可以是关闭当前页面的交互命令。

（8）长按（Touch&Hold）：长按手势是现在界面的交互方式中运用的比较多的手势，长按通常可以激活页面里隐藏的编辑模式，例如长按图标时，可出现删除程序、移动程序、程序组合排列等模式；长按文字时，可出现复制、收藏、删除文字等命令。长按图片时，也可出现复制、转发、收藏、删除图片等命令。

1.5 动态界面的切换方式

移动UI界面设计要求向用户传递信息的过程中，通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系，将空间深度变化为能帮助传递一定信息的视觉表达元素，其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形，通过有组织、有目的的设计理念和设计手段把时间与空间串联，结合现实中的三维空间及时间，从而扩大界面视觉语言的表现力。由于手机在其屏幕尺寸大小以及交互方式与PC端的差异性，用户在与界面交互时常常需要面对界面切换的操作，界面通过用户的点击或者滑动等手势来完成切换。

为了给用户带来好的交互体验，设计师一般会采用平滑过渡的方式来引导用户完成界面的切换。这些方式主要有：平行滑动切换、旋转切换、变形切换、黑色背景切换、放大切换、多种方式同时使用等。

（1）平行滑动切换：平行滑动是界面中最常用也是接受度最高的切换方式，由于手机屏幕大小的限制，平行滑动让视觉达到一个屏幕延伸的错觉，在界面设计上要求达到风格统一，在平行滑动时使用户觉得界面是一个连续的整体。

（2）旋转切换：旋转切换一般指界面采用180°旋转的方式切换到下一个界面，如微信相册就采用了这种方式，方便用户查看相册的评论内容，旋转后就点击完成回到无评论的相册图片中。

（3）变形切换：变形切换类似于旋转切换，是对界面进行一个旋转或者压缩的变形，最后再恢复成正常的大小过渡到下一个界面。一般这种方式在界面中运用的很少，主要在手机开机或者关机的界面中会经常用到，变形能够增加界面切换时的趣味性，但不适合在点击率高的界面使用，容易增加软件的内存以及消耗用户的忍耐度。

（4）黑色背景切换：一般黑色背景切换的方式用户不会轻易地发觉，因为黑色背景的停留时间非常短，不仔细看的话会认为是直接弹出了下一个界面，在手机游戏的界面中会经常用到黑色背景的切换，单击play或者settings的按钮时，会出现0.5秒甚至更短的黑色背景的切换，一般不易察觉。

（5）放大切换：放大切换一般用于单击小的图标或者按钮等元素后，向完整的界面切换的过渡。

（6）多种方式同时使用：一些界面为了达到某种特定的效果，往往需要借助多种切换的方式来完成，比如在平行滑动的同时也可加入放大的效果，以达到最佳的、生动自然的使用效果。