页面转场设计，有哪些类型和作用？
更新时间：2022-10-31 作者：爱短链
为什么要有页面转移？转移类型是什么？应该注意哪些细节？本文将逐一回答~
不知各位产品经理，UE/UI在设计产品时，设计师除了考虑交互描述、功能状态、页面逻辑等外，是否会关注页面跳转之间的转移效果？
有些人可能会想：你需要谈谈普通界面的左右移动吗？ 但如果我问:为什么要有页面转移？转移类型是什么？需要注意哪些细节？ 你能一五一十回答吗？
毕竟，页面之间的转移过渡是用户体验我们产品最直接的感知形式，也是人机交互中最重要的沟通元素。
此外，市场上还没有系统地介绍页面转移的文章，所以今天写下这方面的干货，我希望能给你带来一些收获。
Part1.页面转移的作用 页面转换最基本的作用无疑是打开页面和页面之间的使用过程，使产品的信息内容和功能交互有一个承担点。
但除了这个基本功能外，页面转换还可以反映多种功能。
1. 加深用户印象 与竞争产品不同，一些新颖独特的转移效果可以完全加深用户对自己产品的印象，留下特定的产品记忆点。
例如，《红板日报》的折叠效果非常令人难忘，进一步提高了产品的竞争力。
2. 更有仪式感，增加代入感 就像《每日故宫》在查看文物时，会慢慢放大封面，退出局部元素。
营造一种神秘、即将探索的氛围，符合产品的独特特点。
其他日志产品会利用翻书的转移效果来增强用户的替代感和兴趣。
3. 突出关键用户 产品中的关键用户(如vip用户和平台作家）都是需要特殊照顾的对象。
除了背景色和视觉元素与普通用户不同外，特殊的页面转换也可以带来殊定制的感知。
就像《每个人都是产品经理》APP，打开普通页面和专栏作家的文章时，前者是普通的左移动，后者是上下打开，给读者一种打开知识宝库的感觉。
Part2.页面转换类型 在完成页面转换的功能后，以下是您可能感兴趣的内容：页面转换的类型是什么？（以移动页面转换为例，PC该类型也可以复用于端) 1. 翻书/页，折叠 翻书/页:指模仿现实生活中书纸的切换效果，是一种拟物化的转移方式。
常用于杂志、小说、日记等产品。
折叠:以水平或垂直线为中心点，翻转页面的另一部分，适用于具有日历功能的各种转移。
2. 3D翻转，立体旋转 3D翻转:将二维页面3D切换形式(类似魔方)。
适用于反映产品功能的空间感。
三维旋转：以水平或垂直线为中心点，三维旋转整个页面。
适用于反映另一个页面空间的效果，以容纳更多的信息内容。
3. 拉伸，上下合并 拉伸:以水平或垂直线为中心点，可分为内拉和外拉两种方式。
上下合并：将即将到来的页面分为上下两部分，使页面更具层次感。
适用于为用户创造打开新世界/新世界的互动认知。
4. 扭曲，页面集成 扭曲：以水平或垂直线为中心点，旋转、压缩整个页面，适合向用户传达不同维度、空间传输的效果。
页面集成：根据页面的一个视觉元素，通过变形、颜色变化、缩放、位移等方式过渡到另一个页面。
这种转换是反映两个页面之间相关性和过渡效果最和谐的方式之一。
5. 弹出、缩放 弹出：根据页面的某一视觉元素，将其弹入下一页。
适用于突出某一视觉元素，重点弹出显示。
缩放:缩放过渡整个页面自大而小或自小而大，非常适合大封面的转移。
6. 移入、淡化 这是我们最常见和最常见的转移方式。
大多数产品使用这两种转移方式。
有四个进入方向：上、下、左、右，左、右的转移最能反映产品功能。
Part3:转移时应考虑的细节 各种效果只是提供一种选择，可以根据自己的产品特点和想要传达的互动概念选择合适的方式。
在转移过程中的一些细节是交互设计师不能忽视的。
1. 页面之间的相关性 页面之间的关联是通过入口信息和页面标题建立的。
为了增加用户转移后的替代感，避免认知错误（感觉错误的页面），可以考虑使用相同的背景颜色和视觉元素来加强页面之间的关联。
比如之前QQ在游戏中心，将前页的背景图沿用到后页，使后页的游戏描述更具代入感，用户第一时间就觉得来对地方~ 2. 进退方向 页面的进出尽可能与方向相反，即页面从右加载边移动，退出时从左边移动。
否则，无序的进出方向会使用户的操作流和视觉流感到不舒服。
3. 不同的回归逻辑 用户习惯于返回页面，一是点击左上角的返回/关闭图标，二是屏幕扣边(名称不同，即按屏幕最左边位置向右滑动，iOS与Android所有这些都可以实现)。
由于返回/关闭图标在视觉上具有明确的方向性，用户知道点击后是返回还是关闭。
但不同页面类型的屏幕抠边，相应的含义和逻辑是不同的。
原始页面:屏幕抠边是返回上一级页面 就像朋友圈一样，原始页面可以在屏幕被拉回到退出前的页面位置和状态，也可以重新加载页面。
H5页:屏幕抠边是关闭整个链接 无论在H5里操作了多少内容/页面，屏幕会关闭整个H5链接，再次进入时只能重新加载页面，操作记录将被清空。
4. 返回方式更高效 除了点击返回/关闭图标和屏幕剪辑外，您还可以根据您产品的页面形式考虑是否有更有效的退出形式。
例如，在厨房食品细节页面中，以下降的形式返回上级页面。
原因是详情页是大图 文本的结构描述了食物，而大图的显示区域非常接近手指的黄金操作区。
与将手指移动到屏幕左上角点击返回或移动到最左边的边缘返回相比，下降可以让用户在最短的距离内返回主页浏览其他内容。
4. 用户操作是否保存/清除 页面之间的跳转和退出必然会影响当前页面的内容和状态。
当用户想要离开时，不同的产品会选择不同的退出策略。
例如：微信朋友圈。
退出朋友圈再次进入时，会停留在退出前的页面位置，方便继续浏览朋友内容。
退出朋友圈后，入口处提示朋友有新动态时，再次进入朋友圈后，会回到顶部的初始位置，保证第一时间获取朋友动态，满足用户的日常社会需求。
紫禁城在这方面的日常处理也非常小心：无论用户在详细信息页面（屏幕伸缩或滑动位置）进行什么操作，用户的操作痕迹都会被删除，恢复到文物的初始状态，给人们带来保护文物、小心、严谨的心理感受。
结尾 好了，先写页面转换这个话题。
你可以根据自己的产品特点和想要传达的互动概念选择合适的方式。
以下是总结笔记： 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
此外，市场上还没有系统地介绍页面转移的文章，所以今天写下这方面的干货，我希望能给你带来一些收获。
Part1.页面转移的作用 页面转换最基本的作用无疑是打开页面和页面之间的使用过程，使产品的信息内容和功能交互有一个承担点。
但除了这个基本功能外，页面转换还可以反映多种功能。
1. 加深用户印象 与竞争产品不同，一些新颖独特的转移效果可以完全加深用户对自己产品的印象，留下特定的产品记忆点。
例如，《红板日报》的折叠效果非常令人难忘，进一步提高了产品的竞争力。
2. 更有仪式感，增加代入感 就像《每日故宫》在查看文物时，会慢慢放大封面，退出局部元素。
营造一种神秘、即将探索的氛围，符合产品的独特特点。
其他日志产品会利用翻书的转移效果来增强用户的替代感和兴趣。
3. 突出关键用户 产品中的关键用户(如vip用户和平台作家）都是需要特殊照顾的对象。
除了背景色和视觉元素与普通用户不同外，特殊的页面转换也可以带来殊定制的感知。
就像《每个人都是产品经理》APP，打开普通页面和专栏作家的文章时，前者是普通的左移动，后者是上下打开，给读者一种打开知识宝库的感觉。
Part2.页面转换类型 在完成页面转换的功能后，以下是您可能感兴趣的内容：页面转换的类型是什么？（以移动页面转换为例，PC该类型也可以复用于端) 1. 翻书/页，折叠 翻书/页:指模仿现实生活中书纸的切换效果，是一种拟物化的转移方式。
常用于杂志、小说、日记等产品。
折叠:以水平或垂直线为中心点，翻转页面的另一部分，适用于具有日历功能的各种转移。
2. 3D翻转，立体旋转 3D翻转:将二维页面3D切换形式(类似魔方)。
适用于反映产品功能的空间感。
三维旋转：以水平或垂直线为中心点，三维旋转整个页面。
适用于反映另一个页面空间的效果，以容纳更多的信息内容。
3. 拉伸，上下合并 拉伸:以水平或垂直线为中心点，可分为内拉和外拉两种方式。
上下合并：将即将到来的页面分为上下两部分，使页面更具层次感。
适用于为用户创造打开新世界/新世界的互动认知。
4. 扭曲，页面集成 扭曲：以水平或垂直线为中心点，旋转、压缩整个页面，适合向用户传达不同维度、空间传输的效果。
页面集成：根据页面的一个视觉元素，通过变形、颜色变化、缩放、位移等方式过渡到另一个页面。
这种转换是反映两个页面之间相关性和过渡效果最和谐的方式之一。
5. 弹出、缩放 弹出：根据页面的某一视觉元素，将其弹入下一页。
适用于突出某一视觉元素，重点弹出显示。
缩放:缩放过渡整个页面自大而小或自小而大，非常适合大封面的转移。
6. 移入、淡化 这是我们最常见和最常见的转移方式。
大多数产品使用这两种转移方式。
有四个进入方向：上、下、左、右，左、右的转移最能反映产品功能。
Part3:转移时应考虑的细节 各种效果只是提供一种选择，可以根据自己的产品特点和想要传达的互动概念选择合适的方式。
在转移过程中的一些细节是交互设计师不能忽视的。
1. 页面之间的相关性 页面之间的关联是通过入口信息和页面标题建立的。
为了增加用户转移后的替代感，避免认知错误（感觉错误的页面），可以考虑使用相同的背景颜色和视觉元素来加强页面之间的关联。
比如之前QQ在游戏中心，将前页的背景图沿用到后页，使后页的游戏描述更具代入感，用户第一时间就觉得来对地方~ 2. 进退方向 页面的进出尽可能与方向相反，即页面从右加载边移动，退出时从左边移动。
否则，无序的进出方向会使用户的操作流和视觉流感到不舒服。
3. 不同的回归逻辑 用户习惯于返回页面，一是点击左上角的返回/关闭图标，二是屏幕扣边(名称不同，即按屏幕最左边位置向右滑动，iOS与Android所有这些都可以实现)。
由于返回/关闭图标在视觉上具有明确的方向性，用户知道点击后是返回还是关闭。
但不同页面类型的屏幕抠边，相应的含义和逻辑是不同的。
原始页面:屏幕抠边是返回上一级页面 就像朋友圈一样，原始页面可以在屏幕被拉回到退出前的页面位置和状态，也可以重新加载页面。
H5页:屏幕抠边是关闭整个链接 无论在H5里操作了多少内容/页面，屏幕会关闭整个H5链接，再次进入时只能重新加载页面，操作记录将被清空。
4. 返回方式更高效 除了点击返回/关闭图标和屏幕剪辑外，您还可以根据您产品的页面形式考虑是否有更有效的退出形式。
例如，在厨房食品细节页面中，以下降的形式返回上级页面。
原因是详情页是大图 文本的结构描述了食物，而大图的显示区域非常接近手指的黄金操作区。
与将手指移动到屏幕左上角点击返回或移动到最左边的边缘返回相比，下降可以让用户在最短的距离内返回主页浏览其他内容。
4. 用户操作是否保存/清除 页面之间的跳转和退出必然会影响当前页面的内容和状态。
当用户想要离开时，不同的产品会选择不同的退出策略。
例如：微信朋友圈。
退出朋友圈再次进入时，会停留在退出前的页面位置，方便继续浏览朋友内容。
退出朋友圈后，入口处提示朋友有新动态时，再次进入朋友圈后，会回到顶部的初始位置，保证第一时间获取朋友动态，满足用户的日常社会需求。
紫禁城在这方面的日常处理也非常小心：无论用户在详细信息页面（屏幕伸缩或滑动位置）进行什么操作，用户的操作痕迹都会被删除，恢复到文物的初始状态，给人们带来保护文物、小心、严谨的心理感受。
结尾 好了，先写页面转换这个话题。
你可以根据自己的产品特点和想要传达的互动概念选择合适的方式。
以下是总结笔记： 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
相关搜索
