移动APP设计：7种动效设计和10个设计原则

   <p>请让动效的每一帧都得有它的道理，那样的动效设计才算是成功的，在动效设计中切忌为了炫而炫，为了动效而动效。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1efa38f740b2084668239cc931b70a4d.jpg"></p>    <p>你可能听说过：好的设计是显而易见的而优秀的设计是无形的。对于App的动效设计来说也是一样的。一个优秀的动效能你的App变得友好而且抓人眼球，但是绝不会让用户分心。任何动效的主要任务都是向用户阐释APP的逻辑。在此我希望分享一下我们在设计美观并实用的动效时的一些经验。</p>    <h2><strong>动效的种类：</strong></h2>    <p>为了充分利用动效，你必须了解动效在App中的定位和职责，我们一起看一些动效的种类吧。</p>    <h3><strong>视觉反馈</strong></h3>    <p>对于任何用户界面来讲，视觉反馈都是至关重要的。在现实生活中，人们和任何物体的交互都是伴随着回应的。</p>    <p>同样地，人们期待从APP元素中得到一个类似的效果。App给的视觉，听觉及触觉反馈，使用户感到他们在操控APP。同时视觉反馈有个更简单的用途：它暗示着您的APP运行正常。当一个按钮在放大或者一个被滑动图像在朝着正确方向移动，那么很明显，这个APP在运行着呢，在回应着用户的操作。下面的例子显示，当用户点击屏幕以示完成任务时，包含有数据的方块就缩小并且变成了绿色。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/550eba44c7cdb532e2097e23aaa86515.gif"></p>    <p style="text-align: center;">来自:Workout book</p>    <p>Tinder中使用的左划喜欢右划跳过被大家所熟知，而这种交互方式同样也是一种视觉反馈。这个动画效果已经被我们实现出来放在开源库Koloda中了。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e5e8825f841a4f08731db172cde23263.gif"></p>    <p style="text-align: center;">来自：Koloda</p>    <h3><strong>功能改变</strong></h3>    <p>这种动效展示出元素在与用户进行交互的时候是如何发生变化的当您想要阐明一个元素功能如何变化时，这种动效是最好的选择。它经常与按钮，图标和其它小设计元素一起使用。</p>    <p>从第一个例子中您可以看到一个图标从汉堡菜单变成了“X”状，以表示按钮的功能其实已经发生了改变。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2bd6e98dc8e71d86816f22de00aae787.gif"></p>    <p style="text-align: center;">来自：Principle animation</p>    <p>第二个例子中，图标随着内容的变化而变化：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d5ec6ed714126bcd335d8e45eb11aa39.gif"></p>    <p style="text-align: center;">来自:Contact display switch</p>    <h3><strong>空间扩展</strong></h3>    <p>大部分的移动APP都有非常复杂的结构，所以设计师的的工作就是尽可能地简化APP的导航。对于这项任务来讲，动效是极其有帮助的。如果您的动效展示出了元素被藏在哪里，那么用户下次找起来就会很容易了。第一个例子中，我们看到导航栏的菜单，当用户点击按钮时，它颠倒过来了：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/c0f9cd0a8aed293b38b4527a8de29054.gif"></p>    <p style="text-align: center;">来自：Guillotine</p>    <p>下面这个例子中，我们可以看到更多选项是如何从屏幕底部出现的，这也改进了用户进行选择的流程：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d7a8f7cdd413d35e3de99e9c30d7257b.gif"></p>    <p style="text-align: center;">来自：Bottom navigation</p>    <h2><strong>元素的层次结构及其交互</strong></h2>    <p>动效完美地描述了界面的各个部分并且阐明了它们之间是如何进行交互的。动效中每个元素都有其目的和定位。比如，一个按钮可以激活弹出菜单，那么此菜单最好从按钮弹出而不是从屏幕侧面滑出来：这样就会给用户显示按下按钮的回应。这样就会帮助用户理解这两个元素（按钮和弹出菜单）是有联系的。</p>    <p>所有动效都应该阐释元素之间是如何联系的。这种层次结构和元素的互动对于一个直观的界面来讲是非常重要的。下面第一个例子显示当按钮被点击后菜单栏出现，并且在用户的眼里，菜单栏和按钮本质上是同样的元素，只是变大了：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/92b92fda39b9182d5c8243c695fd541e.gif"></p>    <p style="text-align: center;">来自：Hamburger menu</p>    <p>第二个例子中，一张包含信息的卡片在用户点击了之后变大，让用户知道这是同一个元素，唯一的不同是尺寸：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/73cc766b5da240d3a7d8f818574e4523.gif"></p>    <p style="text-align: center;">来自：3D Touch and Apple Pay concept.</p>    <h2><strong>视觉提示</strong></h2>    <p>动效暗示如何与元素进行交互。当一款APP的元素间有不可预估的互动模式时，动效提供视觉线索就十分必要了。在这个例子中，当用户打开一个博文系列时，带有文章的卡片就从屏幕的右侧出现，用户就可以知道要水平地滑动来浏览这些卡片：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/73cc766b5da240d3a7d8f818574e4523.gif"></p>    <p style="text-align: center;">来自：Travel blog app.</p>    <p>第二个例子中，用了同样的方法，只是运用到了社交图标上：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/93c41d320baa23225db0616b017f250b.gif"></p>    <p style="text-align: center;">来自：Share and statistics menu concept</p>    <h2><strong>系统状态</strong></h2>    <p>在您的APP中，总有那么几个进程在后台运行着：从服务器下载数据，进行计算等。您的任务就是让用户知道APP并没有停止运行或者崩溃掉，要让用户知道APP在工作着。通过App表现出来的视觉符号的进展给用户一种控制感。理想状态下，APP中的每个进程都应该被一个独立的动效所伴随。比如，当音频录制正在进行，屏幕可能要显示一条波动的音频轨道。实时声波动效就可以显示出声音的大小。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/93cbc01bc8a42384d220d593b923f327.gif"></p>    <p style="text-align: center;">来自：Record audio sample.</p>    <p>这种动效最常见的一种类型就是下拉刷新动效：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a3c11ec36459d5faa8b219ba84bb114d.gif"></p>    <p style="text-align: center;">来自：Latest news.</p>    <h2><strong>有趣的动效</strong></h2>    <p>有趣的动效可以画龙点睛也可以画虎类犬。它们通常都没有什么意义，而且会让开发的工作变得异常复杂。但一个非常独特的动效就可能很吸引用户并且让您的APP脱颖而出。这是设计师让用户爱上他们产品的一个秘密武器。独特的动效可以助您创立一个识别度高的品牌。</p>    <p>在我们的例子中，移动的圆圈看起来非常别致并且很吸引人的注意力。沿着屏幕移动的这种效果能够带来愉悦感和游戏感，简单并且有趣。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/089412c0b159033df9e29226ec1fb272.gif"></p>    <p style="text-align: center;">来自：Workout book design concept.</p>    <p>我也非常确信下拉刷新的动效如果做成正在煮菜的锅，会给人耳目一新的感受：</p>    <p style="text-align: center;"><img alt="移动APP设计：7种动效设计和10个设计原则" src="https://simg.open-open.com/show/47776aeab2e7589303dd3c9a92fe2fce.gif" width="544" height="557"></p>    <p style="text-align: center;">来自：Pull to Make Soup animation.</p>    <p>在制作有趣的动效时要注意两点：</p>    <ul>     <li>一定保证动效不会遮盖或者隐藏APP的功能；</li>     <li>一定不能耗时间。</li>    </ul>    <p>请参照：https://www.behance.net/gallery/35371211/The-Best-Interface-Animation-by-Yalantis</p>    <h2><strong>设计的主要原则</strong></h2>    <p>我们已经看过了动效的主要类型和功能。为了设计出真正成功的动效，请时刻牢记Walt Disney最初提出来的动画的9条原则，这些原则可以非常有效地应用在UI设计中。</p>    <h3><strong>1. 材质</strong></h3>    <p>给用户展示界面元素是由什么构成的：轻盈的还是笨重的？死板的还是灵活的？平面的还是多维度的？你需要让用户对界面元素的交互模式有个基本的感觉。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f93b62244ee6cff7e91d85557573e034.gif"></p>    <h3><strong>2. 运动轨迹</strong></h3>    <p>你需要阐明运动的自然属性。一般原则显示没有生命的机械物体的运动轨迹通常都是直线，而有生命的物体拥有更为复杂和非直线性的运动轨迹。您要决定您的UI要给用户呈现的什么样的印象，并且将这种属性赋予它。</p>    <p style="text-align: center;"><img alt="移动APP设计：7种动效设计和10个设计原则" src="https://simg.open-open.com/show/570f6b6448285dec4aa51d5d7c9430d3.gif" width="450" height="260"></p>    <h3><strong>3. 时间</strong></h3>    <p>在设计动效时，时间是最有争议的和最重要的考虑之一。在现实世界中，物体并不遵守直线运动规则因为它们需要时间来加速或者减速，使用曲线运动规则会让元素的移动变得更加自然。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/07b7a60a67e7c42658faa999556dd672.gif"></p>    <h3><strong>4.聚焦动效</strong></h3>    <p>要集中注意力于屏幕的某一特定区域。例如，闪烁的图标就会吸引用户的注意，用户会知道那有个提醒并去点击。这种动效常用于有太多细节和元素从而无法将特殊元素区别化的界面中。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/67d9eba26ac60bb5e3c2ff35c8471b8f.gif"></p>    <h3><strong>5. 跟随和重叠</strong></h3>    <p>跟随是一个动作的终止部分。物体不会迅速地停止或者开始移动，每个运动都可以被拆解为每个部分按照各自速率移动的细小动作。例如，当您扔个球，在球出手后，您的手也依然在移动。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/042ae543c6ac13cf2c6a243205757a5c.gif"></p>    <p>重叠意味着在第一个动作结束前开始的第二个动作，这样可以吸引用户的注意力，因为两个动作之间并没有一段静止期。</p>    <h3><strong>6. 次要动效</strong></h3>    <p>次要动效原则类似于跟随和重叠原则。简要地讲，主要动效可被次要动效伴随。次要动效使画面更加生动，但如果一不小心就会引起用户不必要的分神。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8a9a89ceec851a2cfba134593a091088.gif"></p>    <h3><strong>7. 缓入和缓出</strong></h3>    <p>缓入/缓出是设计的基础原则，尤其是在移动开发UI动效，和普通的动画制作中同等重要。虽然易于理解，但此原则却常常容易被忽略。缓入/缓出原则是来自于现实世界中物体不可能立刻开始或者立刻停止运动的事实。任何物体都需要一定的时间用来加速或者减速。当你使用缓入/缓出原则来设计动效时，将会导出非常真实的运动模式。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d625277b01caedfe8104c8d9626e86df.gif"></p>    <h3><strong>8. 预期</strong></h3>    <p>预期原则适用于提示性视觉元素。在动效展现之前，我们给用户点时间让他们预测一些要发生的事情。完成预期其中一种方法就是使用我们上述的缓入原则。物体朝特定方向移动也可以给出预期视觉提示：例如，一叠卡片出现在屏幕上，你可以让这叠卡片最上面的一张卡倾斜，那么用户就可以推测出这些卡片可以移动。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/42832f799032cc19aae56d9c44ee4cf7.gif"></p>    <h3><strong>9. 韵律</strong></h3>    <p>动效中的韵律和音乐与舞蹈中的韵律有着同样的功能；它使动效结构化。使用韵律可以使您的动效更加自然。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d95876e56d1da0620fd1cea4cff635eb.gif"></p>    <h3><strong>10. 夸张</strong></h3>    <p>夸张的表现方法常常会被用到，但它并不是那么容易被阐释，因为它是基于被夸张化的预期动作或效果。它可以帮助吸引额外的注意力到特殊元素上。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bb62bad430fb169145d19a1ef35c0bc4.gif"></p>    <p>在这篇文章中，我们探讨了动效的类型，以及设计动效的原则。希望能帮助你创造出独特有效的动效。</p>    <p><strong>这里有需要您记住的且非常重要的5点：</strong></p>    <p>1.记住谁是您的目标用户，并且设计您的原型方案去解决他们的问题；</p>    <p>2.请确保您的动效的每个元素都具有其背后的基本原因（为什么是这样？为什么会是如此？为什么这个时间点？）；</p>    <p>3.为了使您的产品有特色，努力模仿自然界的运动模式来创造自然的动效；</p>    <p>4.在项目的任何阶段，都要随时与开发人员保持沟通；</p>    <p>5.做出好的动效，记得分享哦</p>    <p> </p>    <p> </p>    <p> </p>    <p>来自：http://www.woshipm.com/ucd/420060.html</p>    <p> </p>