登陆

章鱼竞彩-交互动效 | 优异的UI动画设计技巧

admin 2019-07-26 248人围观 ,发现0个评论

本文笔者将为咱们展现一些UI动画的事例,期以经过这些事例,协助咱们在为交互增加动画时做出更好的决议计划。

本文笔者将为咱们展现一些UI动画的事例,期以经过这些事例,协助咱们在为交互增加动画时做出更好的决议计划。

让咱们看章鱼竞彩-交互动效 | 优异的UI动画设计技巧一些UI动画从好到优异的比如,经过这儿和那里的一些调整,你能够运用动画提高你的UI形式。

列出的交互表明状况之间的连续性,表明同享元素之间的联系,并将用户的留意力引证到他们应留意和采纳举动的事物上。

为了创立这些动画,我遵从了Material Motion、IBM的动画准则和UX in Motion Manifesto中的辅导准则。

一切的交互都是运用InVision Studio的前期拜访版别完结的。

01 使标签中的内容章鱼竞彩-交互动效 | 优异的UI动画设计技巧滑动

左面的内容淡入淡出。右边那个带标签的幻灯片。

  • 一个好的动画将内容从一个状况转化为另一个状况。
  • 一个优异的动画经过使内容在状况之间移动来显现转化的连续性。

当您规划像标签或弹出菜单这样的交互时,请测验将内容的方位相对于翻开它的操作。这样,您不仅能够设置内容的可见性,还能够设置方位的动画。哦,当你在阅读它的时分,增加一个轻扫手势,将你从一个内容带到另一个内容。

02 衔接卡片的同享元素

左面的内容翻开了一个新的屏幕,能够向上滑动。右边的卡片翻开并填满屏幕。

  • 一个好的动画运用左推或向上滑动等过渡来在章鱼竞彩-交互动效 | 优异的UI动画设计技巧细节屏幕上显现内容。
  • 一个优异的动画经过动画同享内容在两个状况之间树立衔接。

在不同状况之间制造动画时,检查它们之间是否存在任何同享元素并衔接它们。运用InVision Studio时,在创立Motion转化时会主动衔接两个链接屏幕之间重复的组件,这使得原型制造动画变得垂手可得。

检查Motion Manifesto,了解您能够运用的动画类型。上面的示例运用了Masking、Transformation、Parenting和Easing准则的组合。

03 在您的内容中运用级联作用

左面的卡片经过滑动和淡入显现。右侧的卡片具有相同的动画,但每张卡片都有时间短的推迟。

  • 一个好的动画会在资料进入屏幕时改动原料的方位和不透明度。
  • 一个优异的动画很快就会错开每个组或元素的外观。

要完结瀑布作用,请测验对每个内容或每组内容运用推迟。坚持相同的缓和和持续时间,因而感觉共同。

尽管如此,不要对每个小元素进行级联,使内容组具有动画作用。坚持动画的快速和生动。谷歌主张开端每个元素不超越20毫秒。检查Material Motion中的编列原理以检查更多示例。

04 使内容将其他元素扫除在外

左面的动画在其他内容之上进举动画。右边的动画跟着内容的增加将内容推出。

  • 好的动画移动并在上下文中显现元素。
  • 优异的动画在改变时会显现影响周围环境的元素。

使你内容中的元素了解周围环境。这意味着使内容招引或排挤其周围的元素。有关更多示例,请检查Material Design中的Aware运动原理。

05 使菜单显现在上下文中

左面的菜单从下面飞进来。右边的菜单从创立它的操作按钮翻开。

  • 好的动画菜单显现从翻开它们的按钮方向呈现的内容。
  • 优异的动画从发明它们的动作中呈现了很棒的动画菜单,从接触点开端增加。

左面的按钮显现指示状况的文本。右侧的按钮运用容器显现不同的工作。

  • 杰出的交互显现按钮周围的工作。
  • 优异的交互运用按钮自身来显现不同的状况。

测验运用按钮的容器来供给状况的可视反应,例如:你能够运用微调器或加载动画替换CTA;或许你能够在显现进展的布景中增加动画。

解决方案取决于你,咱们的主意是运用用户现已与之交互的空间。假如你运用按钮色彩并仿制以承认成功状况,则奖赏积分。

07 留意重要的工作

左面的示例运用色彩和方位使元素锋芒毕露。右侧的那个运用奇妙的动画来引起用户的留意。

  • 好的规划运用色彩,巨细和方位来杰出用户需求留意或采纳的重要举动。
  • 优异的规划运用动画来引起对重要动作的留意,而不会形成破坏性。

当用户需求对重要事项采纳举动时,请测验设置动作以招引他们的留意力。从一个奇妙的动画开端,增加与动作重要程度相关的强度(巨细,色彩和速度的改变),仅将其用于要害操作——你运用此作用的次数越多,其影响就越小……用户取得的烦恼越多。

定论

我期望这些示例能够协助您在为交互增加动画时做出更好的决议计划。凭借InVision studio等新动画和原型制造东西,我猜测咱们很快就会看到构思互动的复兴。咱们只需求记住认真负责地运用这个新的强壮东西。

让咱们运用动画来解说状况的改变,引起对必要动作的留意,确认元素之间的联系,并为咱们的产品增加一些趣味和特征。经过遵从这些准则,咱们将动画从好转变为优异。

本文由@Chris 原创发布于人人都是产品司理,未经许可,制止转载

题图来自Unsplash, 根据CC0协议

简谱大全
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP