找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 264|回复: 0

[ps教程] 【设计理论】12条提高产品可用性的动效设计原理

[复制链接]

该用户从未签到

发表于 2017-7-4 00:00:00 | 显示全部楼层 |阅读模式

您需要 登录 才可以下载或查看,没有账号?立即注册

×
   
本文将市面上最常被使用的动效进行了一次总结并逐条阐明这些设计背后的原理,每条原理后面我都会为朋友们选出一些大家最常用的 App 作为例子,顺手打开就能体验啦。 缓动(Easing)、偏移量和延迟(Offset & Delay)主要与时间相关。 父子关系(Parenting)用于阐述元素之间的关系。 变形(Transformation)、数值变化(Value Change)、遮罩(Masking)、覆盖(Overlay)、生成(Cloning)多作用于加强元素自身的延续性。 视差(Parallax)多作用于表明元素的层级关系。 蒙层(Obscuration)、多维化(Dimensionality)、镜头平移与缩放(Dolly & Zoom)作用于表明元素与空间的关系。 1. 缓动(Easing)

                               
登录/注册后可看大图
当运动发生的时候,元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的,没有任何东西能够完美的保持匀速运动,缓动效果能够让运动看起来更加接近自然,符合用户的认知,达到用户的预期。 例子:你手机里面几乎所有动态效果都是缓动的,看起来是不是非常舒服和谐呢? 2. 偏移量和延迟(Offset & Delay)

                               
登录/注册后可看大图
利用偏移和延迟来错开元素的运动...

   
内容已隐藏,请关注公众号输入验证码查看

               
验证码 

  

本帖支持关注公众号查看

【无套路  无套路  无套路 扫描二维码关注公众号发送【验证码】收到验证码 在上面输入点击提交查看即可显示隐藏内容】

回复

使用道具 举报

网站地图|页面地图|Archiver|手机版|小黑屋|找资源 |网站地图

GMT+8, 2025-6-27 07:06

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表