专栏首页互联网杂技初步总结页面间跳转动效

初步总结页面间跳转动效

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

转场动效也是在APP中应用最多的动效,连接两个页面。通过合理的动效让户能更清楚我从哪里来,现在在哪,怎么回去等一系列问题。初次接触产品,恰当的动效使产品页面间的逻辑关系与用户自身建立起来的认知模型相吻合,操作后的反馈符合用户的心理预期。(这种认知与预期一部分来自长时间使用电子设备的使用习惯,一部分来自对现实世界的物理环境认知)。

我将现在主流的转场动画分为四类,并结合了一些使用场景和例子。

弹出

场景:

多出现于信息内容页面,用户将绝大部分注意力集中在内容信息本身上。当信息不足或者展现形式上不符合自身要求,临时调用工具对该页面内容进行添加、编辑等操作。在临时页面停留时间短暂,只想快速操作后重新回到信息内容本身上面。

例子:

社交类APP如Twitter发表推文;工具类APP如Evernote中新建笔记;基本大部分苹果原生APP顶部的工具调出都采用这种方式

下面并不完全属于页面间的切换,但是使用场景很相似且归到一类

当功能较多时有可能需要多个按钮而又不好将如此多的临时调用工具堆在页面上,则通过一个按钮触发显示一系列功能,同时主要的信息内容页面并不离开用户视线,始终提醒用户你来的这里的初衷。

app主要功能都集中在一个页面上,侧面弹出调出其他页面的导航入口,但这些次要页面也都属于临时调出

例子:

Facebook中的快速和联系人通讯 ;与地图关系很大的APP如Uber Google地图 。(但Linkedin为了尽可能把feed流的空间扩大而将导航隐藏在侧滑出的边栏中用着很不方便,作为职场社交,所关注人发表的信息只是APP功能的一部分,发现人与工作也是相对重要的功能,所以页面间需要频繁切换。而这样的导航设计让用户在切换选项过程中付出了很大的成本,久之则不愿意再麻烦的去切换,慢慢APP丧失掉了原本属于职场社交的一部分重要功能。)

侧滑

场景:

当页面见存在父集子集的时候,也是最常见到的一种转场动效。基本看到这样的动效,用户就会在头脑中形成树的模型——哪些内容在属性上相似,量级相同,以及不同层级间的关系。

渐变放大

场景:

页面post了很多同等级信息,就如同贴满了信息、照片的墙面,用户有时需要近距离看看上面都是什么内容,在快速浏览和具体查看之间轻松切换。渐变放大的切换动效与左右滑动切换的动效最大的区别是,前者大多用在张贴显示信息的面板中,后者主要用于罗列信息的表单中。在张贴信息的面板中左右切换进入详情总会给人一种不符合心理预期的感觉,违背了人们在物理世界中形成的习惯认知。

例子:

Guardian的新闻流 ,Snapchat中的兴趣发现 社交feed流中的照片 苹果原生app Photo中的照片流

其他

还有很多其他的切换动画,它们大多是高度模仿物理现实世界的样式。比如iBook里电子书翻页就是在模仿现实世界中翻书的效果,还有Flipboard文章切换的样式真的是flip的感觉。

产品中的动画不仅仅局限于转场之间的动效,还有控件,页面元素的动画。产品的动画的样式,持续时间和幅度都会在一定程度上影响用户的使用体验。把握好这种体验更要好好学习心理学方面的内容,觉得这是个越研究越有趣的领域!

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 沿着这7个思路,你可以正确的使用动效取悦用户

    现如今,数字化的服务和产品已经深入到我们生活的方方面面,可以说各种网站和APP已经成为我们现代生活的基础设施了。如今数字产品设计依然是首先聚焦到可用性上,因为首...

    前朝楚水
  • 5个小技巧,用动效提升界面的用户体验就这么简单

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过...

    前朝楚水
  • 产品容错性设计原则

    随着互联网的飞速发展,越来越多产品尤其是2C类产品更加注重用户体验,其中错误对用户体验的影响是灾难性的,在此我总结出一些容错性设计原则供大家参考和探讨。 ? 一...

    前朝楚水
  • 当产品经理遇到数据分析这个槛,怎么办?

    导读:大数据时代的到来,对产品经理提出了更加严格的数据分析要求。一个懂数据分析的产品经理可以利用数据驱动产品设计优化,并提升客户体验。那么,产品经理到底该关注哪...

    灯塔大数据
  • 用Python搭建一个校园维基网站(一)

    專 欄 ❈ treelake ,Python中文社区专栏作者 项目Github地址: https://github.com/zr777/school-wik...

    Python中文社区
  • 云南首个新文旅IP落地!《英雄联盟》校园电竞文创村大理揭幕

    ? 7月16日,《英雄联盟》校园电竞文创村开幕仪式在云南大理开启。 大理白族自治州文化和旅游局、大理市文化和旅游局、银桥镇人民政府、马久邑村委会、腾讯公司、云...

    腾讯文旅
  • 这年头,不会斗图都毕不了业?

    作者:腾讯 ISUX 交互设计师 梁睿思 在刚过去的考试月里,别人家的期末考试都在一本正经的考“老九门”,南京的一所高校期末考试居然考起了表情包!而面对这样的“...

    梁睿思
  • 如何实现用户行为的动态采集与分析

    哈喽,大家好,我是清音,来自政采云前端团队。从去年开始负责用户行为采集与分析体系的建设。很高兴有机会能在这里给大家分享我们从 0-1 建设用户采集与分析系统的经...

    政采云前端团队
  • 个性化推荐沙龙 | 跨领域推荐,实现个性化服务的技术途径

    曹健,上海交通大学计算机系教授。近年来在大数据智能分析领域进行研究与应用。 一、跨领域推荐的概念 推荐系统在我们这个时代扮演了越来越重要的角色。如何利用海量数据...

    携程技术
  • 5 mysql底层解析——b+ tree和每个page存储结构,包括连接、解析、缓存、引擎、存储等

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    天涯泪小武

扫码关注云+社区

领取腾讯云代金券