最近一贯在做交互规范总结的事情,在不断梳理页面间跳转逻辑的同时,创造页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对付页面间逻辑的认知。为了输出详细的规范,花了大量韶光把玩现在公司线上的产品以及国内外精良的APP,尤其是苹 果、谷歌自己开拓的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!
)
转场动效也 是在APP中运用最多的动效,连接两个页面。通过合理的动效让户能更清楚我从哪里来,现在在哪,怎么回去等一系列问题。初次打仗产品,恰当的动效使产品页 面间的逻辑关系与用户自身建立起来的认知模型相吻合,操作后的反馈符合用户的生理预期。(这种认知与预期一部分来自永劫光利用电子设备的利用习气,一部分 来自对现实天下的物理环境认知)。
我将现在主流的转场动画分为四类,并结合了一些利用场景和例子。
弹出
场景:
多涌现于信息内容页面,用户将绝大部分把稳力集中在内容信息本身上。当信息不敷或者展现形式上不符合自身哀求,临时调用工具对该页面内容进行添加、编辑等操作。在临时页面勾留韶光短暂,只想快速操作后重新回到信息内容本身上面。
例子:
社交类APP如Tweeter揭橥推文;工具类APP如Evernote中新建条记;基本大部分苹果原生APP顶部的工具调出都采取这种办法
下面并不完备属于页面间的切换,但是利用场景很相似且归到一类。
当功能较多时有可能须要多个按钮而又不好将如此多的临时调用工具堆在页面上,则通过一个按钮触发显示一系列功能或者一系列次要内容导航,同时紧张的信息内容页面并不离开用户视线,始终提醒用户你来的这里的初衷。
App紧张功能还是都集中在一个页面上,侧面弹出调出其他页面的导航入口,但这些次要页面也都属于临时调出。
例子:
Facebook中的快速和联系人通讯 ;与舆图关系很大的APP如Uber Google舆图 。(但Linkedin为了尽可能把feed流的空间扩大而将导航隐蔽在侧滑出的边栏中用着很未便利,作为职场社交,所关注人揭橥的信息只是APP功能的 一部分,创造人与事情也是相对主要的功能,以是页面间须要频繁切换。而这样的导航设计让用户在切换选项过程中付出了很大的本钱,久之则不愿意再麻烦的去切 换,逐步APP损失掉了原来属于职场社交的一部分主要功能。)
侧滑
场景:
当页面见存在父集子集的时候,也是最常见到的一种转场动效。基本看到这样的动效,用户就会在头脑中形成树的模型——哪些内容在属性上相似,量级相同,以及不同层级间的关系。
渐变放大
场景:
页面post了很多同等级信息,就犹如贴满了信息、照片的墙面,用户有时须要近间隔看看上面都是什么内容,在快速浏览和详细查看之间轻松切换。渐变 放大的切换动效与旁边滑动切换的动效最大的差异是,前者大多用在张贴显示信息的面板中,后者紧张用于罗列信息的表单中。在张贴信息的面板中旁边切换进入详 情总会给人一种不符合生理预期的觉得,违背了人们在物理天下中形成的习气认知。
例子:
Guardian的新闻流 ,Snapchat中的兴趣创造 社交feed流中的照片 苹果原生app Photo中的照片流
其他
还有很多其他的切换动画,它们大多是高度模拟物理现实天下的样式。比如iBook里电子书翻页便是在模拟现实天下中翻书的效果,还有Flipboard文章切换的样式真的是flip的觉得。
产品中的动画不仅仅局限于转场之间的动效,还有控件,页面元素的动画。产品的动画的样式,持续韶光和幅度都会在一定程度上影响用户的利用体验。把握好这种体验更要好好学习生理学方面的内容,以为这是个越研究越有趣的领域!
原文地址:Miyuhao