浅聊四个主流的页面间跳转动效

最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

文章目录[隐藏]

最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30635/

(0)
CatherineCatherine
上一篇 2017-05-29 15:29
下一篇 2017-05-29 17:26

相关推荐

  • 交互小细节——信息层级展示规则

    信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

    2017-05-20
  • H5可能会死,但总有人用它带来惊喜

    天猫这个双11邀请函能够让圈内人产生好感,是不是也从侧面印证了这个H5的体内是具有爆发能量的?

    2017-05-16
  • 混合型界面:对话式UI会走向何方?

    2016年是对话式设计之年。消息应用正以惊人的好评度和参与率,占领世界和app store的排行榜。每个社区产品、应用市场、点播服务、约会应用、社交游戏和电商产品,为了提高好评度、参与率和销量,都已经或即将加入消息功能。

    2017-05-11
  • 前Apple员工谈交互设计的未来

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing本文长度2731字,建议阅读5分钟现在,有很多流行的有关未来交互设计的想象。机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏和After Effects合成的特效。我对视频中的一些交互表示怀疑,因为我尝试过实现它们,而制作视频的动画师显然没有。但是,这不是这个视频真正存在的问题。我觉得这个视频真正出了问题的地...

    2018-01-30
  • 腾讯干货!从四个方面帮你做好移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

    2017-05-27
  • 从事交互设计3年多,聊聊交互设计师的核心价值

    很多同行说交互设计 师就是要对用户体验负责,这点我当然是非常认同的。但是交互设计 师并不是独立的个体,虽然我们时常和产品、运营、开发因意见不同而产生争论,但站在公司层面来说,我们和产品、运营、开发等部门是一个大团队,我们既服务于用户又服务于大团队,服务于公司的商业价值。如果你只谈用户体验可能会不赚钱,只讲商业目标则会失去用户,用户体验和商业目标是需要保持平衡的。

    2017-09-16
  • 交互设计基本原则(第二部分:默认和可见性)【UXRen译#157】

    作者:Bruce Tognazzini  |  翻译:邱金,校审:Chen Jing   一、默认Defaults 1.1 原则:输入框的默认值应该很容易“吹走” 当用户激活一个输入框,当前条目应该自动被选择,以便按退格/删除键或开始键入来清空条目…

    交互专题 2017-08-07
  • 用户体验丨有一点,我特别不服:我一向健康,这本“生命说明书”却告诉我,风险无处不在!

    我与优福的故事聚 集 幸 福 之 因[图片]癌症,是人们的恐惧中心。很多人平时身体棒棒,突然就倒下了,永远的离开。比如我婆家的姑爷,发现时已经晚了,无力回天[图片][图片][图片]。2013年,安吉丽娜·朱莉检测了自己的基因,发现乳腺癌症易感基因患癌率是87%!她提前知道,提前预

    微信热点 2018-02-01
  • 在你重新设计网页的时候考虑好用户体验

    在过去的几年中,网页设计和在线营销有一些奇妙的转变,具体来说,就是网页设计风格从很重的内容和关键字塞满的网页 转为 简约的设计,让用户视觉能更集中的体验。

    2017-05-27
  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25