Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

移动端微动效设计

No description
by

0 0

on 15 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 移动端微动效设计

为什么重要
必要
有趣
有用
强化引导,降低理解成本
作用
表示过程
让反馈更自然
表达层级、空间等关系
会动
酷炫
讨喜,如丝般顺畅
像空气一样
Inception
方法
4
确定演示对象和可行性
确定动效细节的目标
制作动画效果demo
回顾检查
用户
团队成员
Boss
实现成本
设备能力
范围和程度
2
1
强化引导?
表示过程?
表示层级关系?
反馈?
情感化?

3
有没有达到目的?
有没有过度设计? 增加了操作、等待时间、干扰

工具
"低保真":纸面

Quartz compose是Xcode开发环境中集成的工具之一,主要用于制作图形动画、图像处理和渲染。
Origami是Facebook 设计团队开发的QC的一个工具包,为移动端的动效设计定义和封装了一批QC插件(patch),使得用QC制作动效更容易、高效。
QC的关键思想
节点触发(node-based)
参数化控制
Origami在此基础上,将移动端原型设计最常用的模块进行优化和重新封装。
设定起始状态和结束状态
规划简单的分镜
列出需要遵循的变化规律
分解运动元素
分配运动任务
定义中间过程的具体形态和参数
使用合适的工具制作和输出
步骤
设定起始状态和结束状态
规划简单的分镜
列出需要遵循的变化规律
分解运动元素
分配运动任务
定义中间过程的具体形态和参数
使用合适的工具制作和输出
以类Path菜单的制作为例
垂直向上移动并旋转
向右上方移动并旋转
水平向右移动并旋转

逆时针旋转
垂直位移:+150
顺时针旋转:360°
水平位移:+120
垂直位移:+120
顺时针旋转:360°
水平位移:+120
顺时针旋转:360°

逆时针旋转:45°
过程可逆
有一定的滑动和回弹效果
Friction(阻力):8
http :
交互设计师

看起来像个只想不做的书呆子,
实际上有工匠情结,
努力成为有人性和有实现能力的设计师。
//uegeek.com
@kidult00,

从“描物化”到真正的“拟物化”
微动效的五个境界
掌控感之外的情绪注入
H=1/2gt²
前臂


后臂
位置,位移,大小,形状,透明度,角度……
POP
"高保真":
"中保真":Axure
Justinmind
时间轴
时间轴+编码
时间轴+编码
信号流
基于图层编码
模块化,可封装
元素1:
元素2:
元素3:
元素4:
Tension is the stiffness of the spring, friction the amount of effort it takes to move the object and velocity the initial velocity of the object.
Tension(张力):80
移动端微动效设计
-_- |
吐个槽……
FramerJS
Flash
AE
Edge Animation
Quartz Composer
此处省略5000字……
Full transcript