不知各位产品经理、UE/UI设计师在设计产品时，除了考虑交互解释、功能状态、页面逻辑等之外，是否会关注页面跳转间的“转场效果”？？？
可能有人会以为：“不就普通的界面左移和右移，须要讲这个吗？” 但是如果我问：“为什么要有页面转场？有哪些转场类型？要把稳哪些细节？” 你能一五一十地回答出来么？
毕竟页面间的转场过渡，是用户体验我们产品最直接的感知形式，也是人机交互中最主要的传达要素。其余市情上还没有系统性先容’页面转场’的文章，以是本日就写下这方面的干货，希望能给你带来一些收成。
Part1：页面转场的浸染
页面转场最根本的浸染，无疑是拉通页面与页面间的利用流程，使产品的信息内容、功能交互等有一个承接点。但除了这个打底浸染外，页面转场还可以表示出多个方面的浸染。
1. 加深用户印象
一些新奇独特、差异于竞品的转场效果，完备可以加深用户对自己产品的印象，留下特定的产品影象点。如《红板报》的‘折页’效果就很让人影象尤新，进一步提升了产品的竞争力。
2. 更有仪式感、增加代入感
就如《逐日故宫》在查看文物时，会缓慢放大封面、退出局部元素。营造一种‘神秘感、即将探索’的氛围，很符合该产品独占的特色。其余一些日志产品，会利用“翻书”的转场效果来加强用户的代入感、意见意义性。
3. 突出重点用户
产品里的重点用户（如vip用户、平台作家）都是须要特殊照顾的工具。界面设计时除了在背景色、视觉元素不同于普通用户外，分外的页面转场也能给带来一种‘专门定制’的感知。
像《大家都是产品经理》APP，在打开普通页面和专栏作家的文章时，前者是普通的‘左移’，后者则‘高下开启’，给读者一种‘开启知识宝库’的进场感想熏染。
Part2：页面转场类型
说完页面转场的浸染后，下面便是你可能感兴趣的内容：页面转场到底有哪些类型？（以移动端页面转场为例，PC端亦可复用该类型）
1. 翻书/页、折叠
翻书/页：指模仿现实生活中书本和纸张的切换效果，是一种拟归天的转场办法。常用于杂志、小说、日记等产品中。
折叠：根据水平或者垂直线为中央点，将页面的另一部分进行翻折，适宜各种带有“日历”功能的转场。
2. 3D翻转、立体旋转
3D翻转：将二维的页面以3D形式（类似魔方）进行切换。适宜表示产品功能的“空间感”。
立体旋转：根据水平或者垂直线为中央点，将全体页面进行立体旋转。适宜表示另一个“页面空间”的效果，用于容纳更多的信息内容。
3. 拉伸、高下合并
拉伸：根据水平或者垂直线为中央点，将页面进行拉长消逝处理，可分为’内拉‘与’外拉‘两种办法。
高下合并：将即将进场的页面分为高下两部分进场，使页面更有层次感。适宜给用户营造一种“打开新天下/新天地”的交互认知。
4. 扭曲、页面领悟
扭曲：根据水平或者垂直线为中央点，将全体页面进行旋转、压缩等处理，适宜给用户传达一种“异次元、空间传送”的效果。
页面领悟：根据页面的某个视觉元素，通过变形、变色、缩放、位移等办法过渡到其余一个页面中去。这种转场是最能表示两个页面之间的‘关联性’，也是过渡效果最和谐的办法之一。
5. 弹出、缩放
弹出：根据页面的某个视觉元素，将其弹入到下一个页面中去。适宜突出某视觉元素，将其重点弹出展示。
缩放：将全体页面自大而小或者自小而大进行缩放过渡，很适宜大封面的转场。
6. 移入、淡化
这是我们最常见、最普通的转场办法了，大部分的产品利用这两种转场办法。移入有“高下旁边”4个进入方向，而一贯利用“左移进入、右移退出”的转场，最能表示产品功能的利用流程。
Part3：转场时该当考虑的细节
各种效果只是供应一种选择而已，根据自己的产品特性、想要传达的交互理念等选择得当的办法即可。而在一些转场过程中的细节点，是交互设计师不能忽略的事变。
1. 页面间的关联性
页面之间都是通过“入口信息”和“页面标题”建立关联的，为了增加用户转场后的代入感、避免产生认知缺点（以为进错页面），可以考虑用相同的背景色、视觉元素等加强页面间的关联。
比如之前QQ游戏中央，将前页的背景图沿用到后页中，让后页的游戏描述更有代入感，用户第一韶光就以为“来对地方了～”
2. 进退方向
页面的进入和退出只管即便是成反方向的，即页面从右加载边移入，退出时则从左边移出。否则混乱无序地进退方向，会利用户的操作流和视觉流感到不适。
3. 返回逻辑的不同
用户习以为常的页面返回习气，一是点击左上角‘返回/关闭’图标、二是屏幕扣边（叫法不同，即按住屏幕最左边位置向右滑到，iOS与Android均可实现该办法）。因“返回/关闭”图标在视觉上带有明确的指向性，用户知道点击后到底是“返回”还是“关闭”。但不同页面类型的屏幕抠边，对应的含义和逻辑却是各不相同的。
原生页面：屏幕抠边是返回上一级页面
就犹如伙朋友圈一样，原生页面在屏幕抠边后是可以回到退出前的页面位置、状态，亦可以重新加载页面。
H5页面：屏幕抠边是关闭全体链接
无论在H5里操作了多少内容/页面，屏幕抠边都会关闭全体H5链接，再次进入时只能重新加载页面，操作记录都会被清空。
4. 更高效的返回办法
除了点击“返回/关闭”图标、屏幕抠边外，可以根据自己产品的页面形态，考虑是否有更高效的退出形式。比如《下厨房》的食品详情页里，采纳“下滑“的形式返回上级页面。
缘故原由在于：该详情页因此大图+笔墨的构造描述食品，而大图的展示区域很靠近于手指的“黄金操作区”。相对付将手指移动到屏幕左上角点击返回、或者移到最左边抠边返回，“下滑”可以在最短间隔内、最快速地让用户返回顾页浏览其他内容。
4. 是否保存/打消用户操作
页面间的跳转和退出，势必会对当前页面内容和状态产生影响。当用户想要离开时，不同的产品都会选择不同的退出策略。举个特殊范例的例子：微信朋友圈。
当退出朋友圈再重新进入时，是会勾留在退出前的页面位置，方便连续浏览好友内容。而退出朋友圈后，入口处提示有好友新动态时，再次进入朋友圈则回到顶部初始位置，以担保可以第一韶光获取好友动态，知足用户日常的社交需求。
逐日故宫在这一方面的处理也很存心：无论用户在详情页里进行了什么操作（屏幕伸缩或滑动位置），退出页面时都会打消用户的操作痕迹，还原到文物的初始状态，给人带来一种“保护文物、细心严谨”的生理感想熏染。
结尾
好了，关于“页面转场”的话题就先写到这，各位根据自己的产品特性、想要传达的交互理念等选择得当的办法即可。
下面是总结条记：
作者：和出此严，微信ID：elffzh，"大众号：和出此严
本文由 @和出此严 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自Unsplash, 基于CC0协议
