移动界面的动效类型/分类维度有哪些?

移动界面的动效类型/分类维度有哪些?

一、动效起源于什么?

  • 01

    ios6(视觉表层&信息的外观)→ios7(动效&信息的运作方式)

    二、动效是用来干什么的?

    • 01

      表现视觉层级关系的 是几种UI元素之间的相互转换

    三、动效如何分类?

    • 01

    • 02

      一个元素如何能够填满整个页面? 如何引导用户的视线? (1)icon→Page ios镜头运动&焦点移动

    • 03

      icon即APP&文件夹本身 高级视图→细节视图 Z轴,镜头向icon图层做相向运动,视野缩小,视野中物体变大; XY轴,icon放大变成app&文件夹,切换为app界面&文件夹

    • 04

      (iOS的视差效果&镜头运动&空间深度) APP的icon→全屏APP界面 APP的空间态

    • 05

      同理, ios的相册 年度→精选→时刻→照片 照片缩略图在不同尺寸上的的放大直至全屏查看 动态运动轨迹取决于用户在屏幕上的触摸点 年度→精选

    • 06

      精选→时刻

    • 07

      时刻→照片

    • 08

      Android Launch

    • 09

      (2)list→Page

    • 10

      Android

    • 11

      1.涟漪反馈→旧页面fade

    • 12

      2.新页面上浮

    • 13

      涟漪纹 List上浮,展开Detail View

    • 14

      (3)button→Page ios

    • 15

      android (4)tilte→Page (5)page→多任务 ios APP的时间态 单任务&全屏界面—— APP在空间上无法跳转→(APP间不能同时呈现而只能用)时间先后次序选择 X轴水平排列,APP间共处于同一平面 镜头向图标图层做反向运动则视野扩大,APP界面缩小

    • 16

      andriod XY轴,垂直,上下排列,高低叠加 APP的Page和其他APP同在Z轴空间

    • 17

      safari:Z轴&镜头从平视变为俯瞰

    • 18

      chrome:Y轴,被拉下去了

    • 19

      锁屏界面 若锁屏前是icon界面 镜头穿过icon图层,向icon界面做相对运动

    • 20

      若锁屏前是APP界面 镜头则向APP界面做相对运动

    • 21

      临时图层: 当锁屏界面收到通知&密码解锁&拉出通知中心&拉出控制中心 表明有”临时“图层覆盖 则, 毛玻璃&背景虚化&浅景深&距离感&层次感 前景“浅景深” 背景“视差” 附一张图

    (0)

    相关推荐

    • 腾讯干货!交互微动效设计指南

      导语 本设计指南适用于UI界面中交互微动效,涵盖入场.出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率. 一.本指南的适用范围 ...

    • 关于动效赋能产品体验的思考

      会AE的设计师有很多,似乎动效已经是设计师的标配,但你懂得如何利用动效提升产品体验吗?什么是动效呢?动效就是使UI富有表现力且让产品易于使用的元素和表现手段. 设计师在工作中经常会收到"我觉 ...

    • AE基础动效快速入门秘籍

      一个合格的UI设计师,动效必须会做.动效有啥用?让你的老板,团队,甚至客户,在产品未上线前知道它是怎么玩的,促进感情,友好沟通必备神技能.当然,用来装装B也很好.. AE做动效,说实话 很方便,其实也 ...

    • UI设计中我们为什么需要设计动效

      最近越来越多的国内公司开始动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性.更多的射鸡师们也开始投身动效设计领域. 随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始动效设计了,越 ...

    • App动效原理和应用设计

      时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...

    • 设计一个界面动效的时候,我们需要考虑什么?

      @鸿影  坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样.刚好最近有在和团队的小伙伴们一起进行动 ...

    • 实用动效技能靠这篇搞定

      对如今的UX设计师来说,会点动效什么的基本已是常规操作了.作为UX设计师,动效可以辅助的产出可以涵盖界面交互动效.项目宣传MG动画.产品吉祥物表情包.年终汇报PPT等等.这些技能点虽然广,但是只需要掌 ...

    • iSee制作动效字和艺术字

      iSee软件全新推出了动效字和艺术字效果。动效字包括:闪闪字、闪入字、跳动字、闪烁字。 艺术字包括:渐变字、纹理字、泼溅效果。 再结合文字的阴影、描边、边缘发光等效果,就可以创造出很多不同的文字效果, ...

    • 值得你关注的动感粒子动效设计趋势

      现代风盛行的网页设计圈中,不少设计师会倾向于用动态.抽象的元素来为页面渲染出富有科技和未来感的氛围.在这其中,飘散的粒子动效是比较常见也颇受欢迎的一种元素,而今天我们要聊的就是这种设计元素. 有的网页 ...