移动APP设计：7种动效设计和10个设计原则精选.pdfVIP

移动A PP设计 ：7种动效设计和10个设计原则 请让动效的每一帧都得有它的道理 ，那样的动效设计才算是成功的 ， 动效设计中切忌为了 炫而炫 ，为了动效而动效。 你可能听说过 ：好的设计是显而易见的而优秀的设计是无形的。对于A pp的动效设计来说也是一 样的。一个优秀的动效能你的A pp变得友好而且抓人眼球 ，但是绝不会让用户分心。任何动效的主 要任务都是向用户阐释A PP的逻辑。 此我希望分享一下我们 设计美观并实用的动效时的一些 经验。 动效的种类 ： 为了充分利用动效 ，你必须了解动效 A pp中的定位和职责 ，我们一起看一些动效的种类吧。 视觉反馈 对于任何用户界面来讲 ，视觉反馈都是至关重要的。 现实生活中 ，人们和任何物体的交互都是伴 随着回应的。 同样地 ，人们期待从A PP元素中得到一个类似的效果。A pp给的视觉 ，听觉及触觉反馈 ，使用户感 到他们 操控A PP。同时视觉反馈有个更简单的用途 ：它暗示着您的A PP运行正常。当一个按钮 放大或者一个被滑动图像 朝着正确方向移动 ，那么很明显 ，这个A PP 运行着呢 ， 回应着用户 的操作。下面的例子显示 ，当用户点击屏幕以示完成任务时 ，包含有数据的方块就缩小并且变成了 绿色。 来自:Wo rko ut boo k T inder中使用的左划喜欢右划跳过被大家所熟知 ，而这种交互方式同样也是一种视觉反馈。这个动 画效果已经被我们实现出来放 开源库Ko loda中了。 来自 ：Ko loda 功能改变 这种动效展示出元素 与用户进行交互的时候是如何发生变化的当您想要阐明一个元素功能如何变 化时 ，这种动效是最好的选择。它经常与按钮 ，图标和其它小设计元素一起使用。 从第一个例子中您可以看到一个图标从汉堡菜单变成了“X ”状 ，以表示按钮的功能其实已经发生了 改变。 来自 ：Principle animat io n 第二个例子中 ，图标随着内容的变化而变化 ： 来自:Co nt act display s it ch 空间扩展 大部分的移动A PP都有非常复杂的结构 ，所以设计师的的工作就是尽可能地简化A PP的导航。对于 这项任务来讲 ，动效是极其有帮助的。如果您的动效展示出了元素被藏 哪里 ，那么用户下次找起 来就会很容易了。第一个例子中 ，我们看到导航栏的菜单 ，当用户点击按钮时 ，它颠倒过来了 ： 来自 ：Guillot ine 下面这个例子中 ，我们可以看到更多选项是如何从屏幕底部出现的 ，这也改进了用户进行选择的 流程 ： 来自 ：Bot t o m navigat io n 元素的层次结构及其交互 动效完美地描述了界面的各个部分并且阐明了它们之间是如何进行交互的。动效中每个元素都有其 目的和定位。比如 ，一个按钮可以激活弹出菜单 ，那么此菜单最好从按钮弹出而不是从屏幕侧面滑 出来 ：这样就会给用户显示按下按钮的回应。这样就会帮助用户理解这两个元素 （按钮和弹出菜单 ）是有联系的。 所有动效都应该阐释元素之间是如何联系的。这种层次结构和元素的互动对于一个直观的界面来讲 是非常重要的。下面第一个例子显示当按钮被点击后菜单栏出现 ，并且 用户的眼里 ，菜单栏和按 钮本质上是同样的元素 ，只是变大了 ： 来自 ：Hamburger menu 第二个例子中 ，一张包含信息的卡片 用户点击了之后变大 ，让用户知道这是同一个元素 ，唯一的 不同是尺寸 ： 来自 ：3D To uch and A pple Pay co ncept . 视觉提示 动效暗示如何与元素进行交互。当一款A PP的元素间有不可预估的互动模式时 ，动效提供视觉线索 就十分必要了。 这个例子中 ，当用户打开一个博文系列时 ，带有文章的卡片就从屏幕的右侧出现 ，用户就可以知道要水平地滑动来浏览这些卡片 ： 来自 ：T ravel blog app. 第二个例子中 ，用了同样的方法 ，只是运