APP界面动效设计技巧

2022-06-02    分类: 网站建设

创新互联与大家分享,《APP界面动效设计技巧》,其中有7个小技巧。

APP界面动效设计技巧

APP界面动效设计技巧1. 内容标签的滑动动效

APP界面动效设计技巧

左边的内容是淡入淡出的,右边的是内容会随着标签一起滑动。

一个好的动画会把内容从一种状态淡出到另一种状态。

一个优秀的动画则是使内容在不同状态之间转换保持连续性。

当你设计一个类似标签或弹出菜单的交互时,尝试将内容的位置与打开它的动作相关联。这样做不仅可以提升内容的可见性,同时也可以使该内容的位置动画化。当你在设计这个动画的时候,记得要加上内容切换的滑动手势操作。

APP界面动效设计技巧2. 连接卡片的共用元素

APP界面动效设计技巧

左边的内容是向上打开一个新的界面,右边则是将卡片展开并填充整个屏幕。

一个好的动画是使用像向左或者向上滑动来展示内容细节。

一个优秀的动画是通过公共元素的动画来建立两个状态之间的联系。

在不同状态之间动画时,查看它们之间是否有任何公共元素并将它们联系起来。在 InVision Studio 中,当你创建一个转场动画时,会自动连接两个屏幕之间的重复组件。这使得原型动画的设计变得轻而易举。

查看 Motion Manifesto ,看看你能够应用的动画类型。上面的例子使用了遮罩,转换,子父级关系,缓动等原则。

APP界面动效设计技巧3. 在内容中使用级联效果

APP界面动效设计技巧

左边的卡片在动画中有滑动和淡入,右边是相同的动画,但是每张卡片都有一个很短的延时。

一个好的动画会改变元素在进入界面时的位置和透明度。

一个优秀的动画是能够快速的将界面元素错落有序的出现。

要实现瀑布流效果,尝试将延迟应用到每一块或者每一组内容上。保持相同的缓动和持续时间,这样会给人感觉是一致的。 不要将每个小元素都去做瀑布流效果,而是将这些元素组合起来,保持动画的流畅和快速。谷歌推荐每个元素开始运动不超过 20ms 的间隔。 查看 Material Motion 中的编排原则并看看更多的例子。

APP界面动效设计技巧4. 让内容把界面中的元素撑开至界面以外

APP界面动效设计技巧

左边的动画是盖在其他内容之上,右边的动画则是随着内容的展开将内容推出来。

一个好的动画是在上下文中移动并显示元素。

一个优秀的动画则是当元素发生改变时会影响周围环境。

让内容中的元素了解周围的环境。这意味着内容在发生改变时会吸引或者排斥周围的元素。有关更多示例,请查看 Material Design 中的意识运动原理。

APP界面动效设计技巧5. 让菜单显示在上下文中

APP界面动效设计技巧

左边的菜单从下面飞进来,右边的菜单则从创建它的动作展开。

好的动画菜单是从打开它们的按钮方向显示出现的内容。

优秀的动画是从创建它们的动作中浮现出来,是从触摸点展开而来。

APP界面动效设计技巧6. 使用按钮显示不同的状态

APP界面动效设计技巧

左边的按钮显示指示状态的文本,右边的按钮则使用变化的容器显示不同的事件。

好的交互方案是在按钮附近显示事件。

优秀的交互方案是使用按钮本身来显示不同的状态。

尝试使用按钮的容器来提供状态的视觉反馈。例如,你可以使用一个变形或者加载动画来替换纯文本,也可以在显示进度的背景中添加一个动画。解决方案取决于你,想法是利用用户已经与之交互的空间。如果使用按钮颜色和样式来确认成功状态,则额外加分。

APP界面动效设计技巧7. 使注意力集中在重要的事情上

APP界面动效设计技巧

左边的例子是用颜色和位置来突出元素,右边则是使用一个微动画来引起用户的注意。

好的设计会使用颜色,大小和位置来突出用户需要注意或采取的重要操作。

优秀的设计会使用动画来引起用户对重要操作的关注,并且不会对用户造成干扰。

当用户需要做一些重要的事情时,尝试用动画来吸引他们的注意力。从一个微动画开始,根据操作的重要程度增加强度(改变大小,颜色和速度)。这种动画只能用于关键操作——使用的次数越多,效果反而越差,并且用户会受到的骚扰也会越多。

总结

望这些例子可以帮助到你。有了像 InVision’s Studio 一样新的动画原型工具,预计我们很快就会看到互动创意的爆发。我们只需要负责在这个新的王国里任意发挥。让界面动效设计更加有趣,更能吸引用户。

综上是上海网站建设公司——创新互联小编与大家分享的《APP界面动效设计技巧》,下面显示APP界面设计相关资讯,找APP手机开发服务直接联系创新互联客服。

当前名称:APP界面动效设计技巧
当前URL:https://www.cdcxhl.com/news/162542.html

成都网站建设公司_创新互联,为您提供搜索引擎优化营销型网站建设域名注册品牌网站制作服务器托管关键词优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设