第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

交互微动效小结:Web、App中添加动效设计所遵循的12条原则(2)

时间:2017-10-11 09:15来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
覆盖用于在扁平化(没有厚度)设计的界面上阐明两个相互独立的元素的位置关系。在实际上没有厚度、没有纵深概念扁平化设计中,覆盖动画的使用能让本

  覆盖用于在扁平化(没有厚度)设计的界面上阐明两个相互独立的元素的位置关系。在实际上没有厚度、没有纵深概念扁平化设计中,覆盖动画的使用能让本来就非常有限的屏幕空间被更好的利用起来。

  例子:微信横划删除聊天记录。

  8. 蒙层(Obscuration)

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

  蒙层与覆盖非常相似,在没有纵深概念的扁平化设计中表现纵深,它并不完全将处于下方的元素遮盖住,而通常是通过高斯模糊或变暗的手段让下方的元素保留一定的可视性。

  例子:在 iOS 里面随处可见的毛玻璃效果。

  9. 生成(Cloning)

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

  当元素被生产出来时,表达元素与元素之间的连续性的关系。这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

  例子:苹果的 Messages 发送信息的效果。

  10. 视差(Parallax)

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

  界面元素同时开始运动,但运动的效率不同,构成一种视差的效果。用户在进行滚动操作的时候通过视差效果可以在扁平化的界面里面表现空间中个元素的位置及层级关系。这种效果还非常的美观高端,能让整个页面看起来更加活泼一些。通过视差的特性,我能引导用户去关注应该应该关注的地方,运动效率高的元素通常表达的是距离用户更近,适合承载更加有使用性意义的重要信息,而运动效率较低的元素通常表达的是距离用户较远,而且或许没有承载什么重要的信息。

  例子:苹果官网各商品详情页。

  11. 多维化(Dimensionality)

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

  将界扁平化的界面元素多维化从而表达空间中个元素的位置及层级关系。其实扁平并不符人类认知逻辑的(而符合人类认知逻辑是几乎可以说是可用性的第一原则),所以人们在扁平化的界面里面下足了功夫来在没有纵深和厚度的界面里表达纵深和厚度,这句话读起来非常拗口,但实际上就是这样的。多维化的使用比较少,因为添加纵深感有很多种手法(覆盖、蒙层、阴影,etc.),而多维化的开发成本是比较高的。

  例子:iBooks 的翻页效果和 Flipboard 的翻页效果,滴滴打车退出呼叫状态的 Appbar 动画。

  12. 镜头平移与缩放(Dolly & Zoom)

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

  镜头平移与缩放听起来好像是一样的东西,事实上确完全是两码事。镜头平移是拍摄的术语,被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动,缩放是镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。镜头平移与缩放效果表明元素与空间之间的关系,也能表现出一种纵深感。

  例子:iOS 的解锁动画是典型的镜头平移效果,而双击放大图片操作的那个动画是典型的缩放效果。

  优秀的微动效,归纳成三个核心原则

  克制有度:控制出现频率和出现时长,不增加额外的操作,不干扰用户和给予用户足够的理解时间。

  清晰聚焦:符合逻辑,重点突出,给予用户充足清晰的阅读时间。

  自然流畅:保持基本视觉的连续性,缓冲过渡,做到一气呵成。

  I Remember — 一个有关回忆的网站,点开后给你耳目一新的浏览体验。

  

交互微动效小结:Web、App中添加动效设计所遵循的12条原则

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕