页面跳转交互方式如何设计更合理？ 网站优化

　　常见的页面跳转方式有直接跳转、左右跳转、上下跳转等，再设计时需要考虑好其中的关联性，给出最符合用户心理预期的过渡方式，从而做出最合适的设计。

　　我们常见的跳转方式：直接跳转、左右跳转、上下跳转、翻转、联动；其它酷炫的效果我们看过很多，但是现实中能做到的又有几个呢？

　　首先我们看一下，我们的视觉顺序「阅读顺序」是：左→右，上→下。因此延伸出目前APP最常见的两种页面跳转方式：左右跳转，上下跳转。

　　最原始、最简单的跳转方式，web端常见，在APP中出现较少，标签切换常见，这个比较简单，没什么讲的。

　　这里有个细节要注意，就是我们的返回键在左上角，也就养成了用户一种习惯，左上角的键，与点击之后的效果，往往就应该是页面从右侧退出的样子，与进入时反向的效果。

　　那么左上角这个位置，除了给返回键当做固有的位置外。还常常用于抽屉式导航，因为抽屉式导航的方向，与返回时的移动方向是一致的。常见抽屉式导航APP如：滴滴打车、摩拜单车等。

　　这种跳转方式也很常见，但是大部分人不清楚什么时候用，这里我们简单分析下。

　　我们用微信聊天页面在举例：点击＋号离的内容时：图片、拍照、位置、红包、收藏等，都是采用下到上的方式呈现，因为这些创建都是对当前聊天窗口一次性产生内容。（大家可以去感受一下这些细节）

　　下面我们看下百度的设置地址管理添加地址：左右左右上下。

　　如APP store 每日推荐到介绍页。类似的还有Behance APP的作品展示。国内APP很少有这种联动效果，因为一旦页面结构改变，整个效果基本无法复用。

　　类似于这种强联动，我们会在很多概念设计稿中看到，但是在实际的APP是很少见到的。因为开发成本/维护成本都很高。

　　这里强调一下搜索页面。搜索页面的进入往往有两种形式。一直是icon做入口，另一种是搜索框做入口。SEO优化

　　搜索框做入口：点击就给与获取光标的感知，所已做好做简单的联动过渡效果。比如：微信、云音乐。

　　其它的方式，要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果，因为元素要浮动，为了更加贴合所以有了收缩的效果。

　　形式上其实就是上下左右内外。考虑好之间的关联性，给出最符合用户心理预期的过渡方式，就可以帮助我们找到最合适的设计。

　　作者：Booze-kai（包子凯），一个来自草原的野生交互设计师，原华为CCO交互设计师，从事过吉利汽车，中广核的相关设计工作

　　本文由 @Booze-kai 原创发布于人人都是产品经理。未经许可，禁止转载。

　　本文所指：“左到右”是如图一所示 A→B页面的效果。（形式上一致，细节上略有差别，大部分APP是有叠压错位效果。）

　　没问题，iOS和Android是一样的。可能对“左到右”“右到左”的语意理解有偏差。

　　新页面从屏幕右侧进入，向左侧移动，盖掉上一级页面或把上一级页面推出屏幕。

　　听到很多言论说在中国程序员是吃青春饭的，那么产品经理呢，也吃青春饭吗？

　　人人都是产品经理（是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立9年举办在线+期，线+场，产品经理大会、运营大会20+场，覆盖北上广深杭成都等15个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。