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

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

相关推荐

  • 今天的扁平化设计中,值得注意的4个要点

    扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王,而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧?

    2017-05-08
  • 交互设计师必须知道的五大交互设计流程

    交互设计又称互动设计,从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点。同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充,交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。其实,交互设计需要做的事情也不是一成不变的,它会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别。下面我就在马海祥博客上...

    微信热点 2018-03-16
  • 巴塞罗那发团丨LES FONTS DEL LLOBREGAT探寻自然一日游

    看腻了古镇城堡?看够了沙滩海岛?那就跟随我们深入略夫雷加特河的源头Fonts del Llobregat来一次悠闲的探寻自然之旅吧!发团日期:2月17日行程价格:42欧/人行程包含:1.大巴游览2. 西语陪同导游3. 餐食午餐包括:escalivada炭烤蔬菜拼盘,加泰罗尼亚沙拉,咸火腿,白肠、黑肠、香肠拼盘,Escudella炖菜,酱汁bandejas de pies de poco,蘑菇牛肉+烤鸡肉甜品:Bunyols amb mo...

    2018-02-05
  • 交互设计背后的心理学原理

    作者介绍郑少娜,云之家里一只特立独行的用户研究员。想把生活踩在脚下,说:“叫你搞事情!叫你搞事情!”✦✦✦✦✦某次下班偶遇一开发,他问:“你们平常做的交互设计,有什么准则吗?”我列举了尼尔森十原则之类,却遭到…

    2017-08-01
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • 音控音乐播放器"乐流":最懂你的播放器

    不得不说最近这个简单到极致的音乐播放器已经在你的身边成为了话题,大家在讨论这个新颖的设计,我很早就关注到这个爱派派了,最近安卓版也上线了,下载下来做了一番体验,我从UE交互进行了解析,看看这款爱派派做…

    2014-11-17
  • 在设计项目中,用好小图标的七个技巧

    图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。

    2017-05-10
  • 天下产品一大抄!!!

    提要:互联网的产品设计是个快速迭代的过程,我们都希望自己的产品和别人不一样,也提倡创新精神。而笔者提出了一个不同的观点——抄越。因为抄袭,所以卓越。 个人觉得互联网的产品设计首先是个快速迭代的过程,其次…

    2015-01-08
  • 撕逼时,要不要说“我觉得…”?

    你可能也碰到过类似的场景,一个撕逼的场景:“考虑到用户的使用场景,用户到这个页面,更关注信息B,而不是A,我觉得,这个页面,更应该突出信息B…”。反驳的声音说:“你觉得,只是你的个人感受、猜测而已,真实的场景和情况,并不是你觉得的那样…”

    2017-05-21
  • 移动设计:体验、交互和创新之精髓

    移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上,而不会被传统桌面产品中过多的无关因素所干扰。

    2017-06-04