App动效类型,其实就是五部分

App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效而做动效,要把握住动效的“度”,不可华而不实,需要服务于具体的需求和场景。


App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效而做动效,要把握住动效的“度”,不可华而不实,需要服务于具体的需求和场景。

App动效类型,其实就是五部分

App的庞大复杂度和动效的丰富度成反比,App越复杂,其动效也应该轻量化而简洁。App功能越简单,其动效则可以适度丰富,甚至形成与自己App相符合的动效风格。

主要分为以下几部分:

一、控件动画

控件动画,可在动画运动曲线、动画出现方向等方面,进行统一处理。给用户带来顺滑的转场动画,让整个页面更加顺滑,并且有规则。

分为以下6种:

  1. toast 提示条(出现——消失动画)
  2. dialog(出现——操作——消失动画)
  3. 导航/页签切换动画
  4. actionsheet动画
  5. 分享控件动画
  6. 选择控件动画

App动效类型,其实就是五部分

二、加载动画

App动效类型,其实就是五部分
分为以下4种:

  1. 下拉刷新加载:下拉加载一般分为两种形式:动画加文字、纯动画。
  2. 切换新页面数据加载:当切换到新页面时,常常会有加载数据的时候。主要有:转菊花的动画,进度条的动画,百分比的进度动画。
  3. 页面上拉加载:上拉加载的样式不会过于复杂,一般与下拉加载的动画配套来实现,上下尽量保持一致。
  4. 页面局部加载:常见的局部加载场景有视频列表、加载图片的占位图等。

三、细节动画

有以下2种:

1、点赞动画

点赞分为连续赞和单独赞。点赞时为了给用户营造良好的用户体验和心里满足,一般会藏有彩蛋动画,从而刺激用户点击欲。

2、二维码动画

下落收起动画,二维码作为社交app中的个人身份的代表,大多使用card下落又收起的动画。

App动效类型,其实就是五部分

四、功能模块动画

根据各个app的突出特色功能和亮点功能,一体化的设计它那个模块的动画,详细刻画。启动页加载动画。

例如社交类app的寻找好友模块,加好友模块。

例如安全类app的安全扫描模块,安全检测模块。

App动效类型,其实就是五部分

五、彩蛋动画

为了用户营造惊喜,和体现产品设计逼格的地方。在产品关键路线中的一些彩蛋动画设计,能为用户带来较高的愉悦感。在聊天软件中的,关键词彩蛋,丰富聊天情感,增强互动。

例如same app中,随着上拉刷新,鸡的眼神和嘴形都有变化。

例如涂手 app中,随着上拉刷新,手指间的小动作,戳戳手的小互动,让人在等待刷新过程中,更加有情感化和趣味性。

App动效类型,其实就是五部分

除此之外,还有运营动画,各类banner动画。它需要根据各类需求,选择适合的动画。在这里不做统一的划分,它需要结合具体的场景、表达内容点以及传达意图来说。

 

作者:戴维,来自Tencent ISUX的一枚交互设计师, 知乎专栏:戴小维的交互学习小站

本文由 @戴维 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23613/

(0)
CatherineCatherine
上一篇 2017-05-06 02:26
下一篇 2017-05-06 04:15

相关推荐

  • [学生看过来]国外的大学交互设计学科的专业与相关分析!

    标签:交互设计专业 交互设计5个重要组成部分 Five Dimensions of Interaction Design。 交互设计Interaction Design 缩写为:IxD,也可以理解成Human-Computer Interaction 人与机器互动设计,旨在通过设计让电子…

    交互设计 2015-01-26
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 交互设计框架-PACT浅谈(一):关于人的部分

    本文内容来自于《交互式系统设计:HCI,UX和交互设计指南》,交互设计框架一章的思考。空间:空间关系到页面的布局,以及用户操作的方便性,不同的人手指大小不一样,我曾经在想,NBA球员使用iphone4的时候是不是真的很方便?关于MD设计空间方面的标准可以参考排版与布局章节,如果有兴趣的话还可以深究一下,为什么他们要将行距,图标和边框的距离定义为这么宽,这么高。

    2017-05-16
  • 零基础入门交互设计为什么会失败?

    所有群里最常见的新人问题就是——零基础怎么学习交互设计?其实,很多时候零基础不可怕,但最怕的就是零基础带来的那种浮躁,比如往往他们都追求速成。每个职业人都有零基础的时候(废话),而在社会上获得工作机会…

    2015-12-02
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • Apple Watch界面设计规范之UI设计基础(2/2)

    六、布局 并排放置的按钮数量要控制好。当并排放置按钮时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。 完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在…

    2015-03-10
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • iOS10交互设计启示

    数十万互联网从业者的共同关注!作者:MOGU_Dribbbler。作者授权早读课发表,转载请联系作者。来源:站酷。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com背景前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势…

    2017-08-04
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24