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

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

相关推荐

  • Web注册设计:参考下这5种类型的网站设计

    提到登录注册,大家想必不会陌生,要使用某个网站提供的全部服务,我们就需要进行账号登录操作;而要获取账号,就要进行注册网站用户了。

    2017-05-29
  • iOS和Android规范解析:警告框(Alerts)

    规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。警告框是一种紧急的打扰(提示),以告知用户一个发生了的情况。警告框传达了你的应用或设备某种状态的重要信息,并且常常需要用户来进行操作。

    2017-05-04
  • 回音专栏丨交互设计中的规律

    回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

    2018-01-30
  • 互联网公司官方标志Logo的颜色选择依据

    小编导读 : 颜色的作用,就是在图形都追求尽可能简约的时候,又可以保持企业标识的高度识别性。

    2014-12-28
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • UI设计师:教你以问答形式“来“把玩”APP

    作为APP狂热分子,定期去App Store或者其他渠道找新鲜的产品来玩儿,已经持续了很多年。但是光浮于表面的玩儿,还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。

    2017-05-02
  • 用户体验设计必须知道的产品9种状态

    作者:Yjjj @ UI设计狮联盟   之前在脉脉上有看见过有人提到的这12种状态,但是明确的说应该是用户在使用产品时的状态,但是细想之后觉得有几个状态应该修改一下,那么我们重新定义为9种状态吧: 等待 初始 寻找 无…

    交互专题 2017-08-07
  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • 百货类微信服务号改版:一个“失败”的设计案例?

    整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。

    2017-05-07
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08