web端在内容分发页/表格页/导航页等点击某一条内容/按钮后，新的内容应该用什么容器来承载，影响到操作流程的流畅性、用户的注意力转换、用户操作的简便性。比如浏览商品时，想要查看商品的详情，应该用什么方式打开商品详情页？

本质而言，是用户在浏览信息摘要、列表等简略数据时，需要查看某一条信息的全部或部分详情，产品如何去承载更多的信息。

模式

浏览器新页签

点击后，在浏览器上新打开一个页签。主要有两种模式：

直接打开。打开后跳转并聚焦到新页面上。

后台打开。停留在当前页面，需要手动切换到新的内容。鼠标右键-选择在新标签页中打开一般使用这个模式。

优点：

页面之间比较独立，互不影响，逻辑简单。对比查看方便，可以互为补充/参考。可以在查看当前内容时，预加载等会要看的内容，减少等待时间。

单个页面可以基于浏览器地址直接分享、收藏。

缺点：

不断地新开页面，焦点在页面间不断跳转，前后的连贯性比较差，容易迷失。后台打开模式可以一定程度上避免这一问题，让用户来主导焦点的切换。而且如果页签开太多，要在不同页面找某一项内容也不方便。新开的页签过多，让用户关闭/退出某一任务的操作成本过高。

对于使用手机等移动端查看场景，新开页签的管理可能不是很友好。

特性：

对于仅查看的内容，则要保持原有的列表不受到新开页签打开/关闭的影响，用户可以随时回来，以此为起点，重新出发。

对于可编辑的内容，要在列表与编辑页面之间做好数据同步，也就是一旦用户在新页面中修改并保存了信息，原页签下对应项需要更新信息。

适合的场景：

内容聚合分发的产品，各页面内容之间的关联性比较弱、彼此之间比较独立。比如打开不同的视频内容、查看不同的新闻详情。

主流程中的支线流程，新开浏览器页签可以让当前的流程不被打断。比如购买下单时的推荐商品详情。

外部系统的链接。

需要多个内容对比查看的场景，比如查看多个商品的详情。

新建/填写资料比较复杂，需要原有内容作为参考。

查看大型附件，让用户在等待加载过程中可以浏览其它信息。

浏览器当前页签打开

点击后刷新当前页的内容显示，包括站点内新页签、当前内容刷新、分区布局、当前页向下展开等几种形式。

站点内新页签

结合当前页打开与新页签打开，关闭时可以一键关闭。而由于页签的形式，页面之间又彼此独立，一般用在功能复杂的后台管理系统。

优点：

各页面之间对比查看、复制引用比较方便。原有内容也可以较好地保持，鼓励用户探索。在查看当前内容时，可以预加载等会要看的内容，提高效率。

不离开当前的页面，可以避免浏览器多个页签，关闭比较麻烦的问题。

缺点：

每个页签并没有单独的URL，不能像浏览器新页签那样基于地址来分享、收藏，需要单独设计入口。可以容纳的页签数量有限，页签的标题也不能太长。太多的并行任务会影响每一个页签的识别性（标题省略的话没法区分不同的页签）与整个页面的加载性能。

与浏览器新页签模式一样，也面临焦点切换、移动端查看不方便的问题。

特性：

与浏览器新页签类似，对于可编辑的内容，要在列表与编辑页面之间做好数据同步，也就是一旦用户保存了信息，原页签下的列表需要刷新内容。

适合的场景：

站点功能复杂，用户需要同时查看不同的数据或者需要将不同条目下的内容互为参考，但是又不想通过浏览器增加页签来增加用户的退出成本。

用户的目的并不明确，需要随意浏览、发现、探索新的功能/内容。

当前内容刷新

用新的内容覆盖/替换现有的内容，也就是同一页面在同一时间只展示某一部分的内容。

优点：

保持任务、操作的连贯性，让用户更加沉浸。结合面包屑、弹窗等形式，可适用于信息层级比较深的场景。不离开当前的页面，可以避免浏览器多个页签关闭比较麻烦的问题。

适合于手机等小屏幕浏览器查看。

缺点：

不适合对于对比查看具有强烈需求的场景。用户必须手动在浏览器复制一份，分别打开不同的内容来切换查看。容易丢失原来的内容、焦点，不适合于需要用户自主探索的场景，容易迷失方向。

需要等待新内容的加载，对于数据量比较大的场景，需要注意加载性能。

特性：

对于搜索、过滤后的结果列表，进入某一条内容查看后，再次返回时，需要保持原有的结果列表，避免用户需要重复搜索。对于层级结构的信息，页面可以通过面包屑的形式来保持上下文。

对于步骤性的操作，可以通过步骤条来建立整个流程的全局感知，让用户对于操作的复杂性和进度有一个清晰的预期。

适合的场景：

用户目的比较明确、任务比较聚焦，不存在反复对比的查看场景。

前后顺序性、有关联的步骤操作。比如上一页、下一页。

分区布局

Apple 的 Human Interface Guidelines中，有一种模式是Split View（分屏视图），就是通过分割屏幕区域来组织内容。本质上就是利用电脑、平板等显示区域比较大的优势，将内容分组后放在不同的位置。

同时，在《亲爱的界面》一书中，指出位置关系可以表达层级结构的概念：层级结构可以通过布局、位置来表达。比如从左至右、从上至下、由内而外。

也就是说，通过左右、上下等多栏结构，可以将列表与详情放在一个视图中来同时展示，分别作为导航与显示区域，便于在不同条目之间快速切换查看。常见的如PPT在左侧显示缩略图，右侧显示当前页的内容。或者使用Tab来组织同一层级的内容，可以切换查看。

优点：

不同区域之间互相对照，可以在不同条目之间的快速切换，便于对比查看操作。与当前页刷新类似，不离开当前的页面，可以避免浏览器多个页签关闭比较麻烦的问题。

编辑与查看位于同一页面内，可实时看到影响变化。

缺点：

分区数量有限，对于层级比较深的场景不适用。内容作为一个整体，各部分内容必须要单独设计分享、收藏等操作入口。

如果内容整体一次性加载，加载的数据量会比较大。如果每个部分分别加载，则在切换每一个部分时都需要等待页面加载。

特性：

一般而言，或者说对于从左向右阅读顺序的用户而言，通常是左侧/上方来切换右侧/下方的显示。

内容的展示区域被分割，在手机等小屏幕设备上浏览时，需要突出显示区域，减少导航区域的显示面积。

适合的场景：

内容层级不深，多个同级别内容对比查看的场景。

当前页向下展开

Apple 的 Human Interface Guidelines中，有一个披露控件（Disclosure controls），主要目的就是隐藏那些与当前重点内容相关性没有那么强的细节。通过切换这些更多信息的隐藏/显示，可以帮助用户在一开始进入页面时，快速找到最基本的信息，而不会因为过多的细节选项而不知所措。同时想要全面深入了解某一些细节时，又能够自然、顺滑地将焦点过渡到更多的信息。

当前页向下展开的模式，可以利用页面的纵向空间，点击后将省略的信息显示完整。常见的比如商品详情描述文字过长时，默认省略一部分，点击后再显示全部。

优点：

原有内容不消失，可以很好地保持上下文。由于纵向滚动比较方便，理论上而言纵向的长度不受限制，所以可以承载的内容量也比较大。内容是懒加载的，可以避免内容量大时一次性加载时间过长的问题。

对于移动端场景也比较适用。

缺点：

内容与原有的内容是连续的，难以表达层级结构。

承载的维度有限，不适合需要多条目对比查看的场景。

特性：

可以在展开后增加一个对称的收起操作。

适合的场景：

内容量比较大、具有连贯性的场景。

单个条目的深入浏览，而不需要多个条目之间互相对比。

弹出层

也就是当前的内容上，利用Z轴的高度差异，增加一层，让新的信息更加独立，不影响原有内容的展示。一般作为临时性的窗口，随手处理后进入下一状态。

主要包括侧边面板/抽屉、弹窗/对话框、气泡弹窗几种模式。

侧边面板/抽屉

从父页面边缘滑入，覆盖住部分父页面内容。适合作为一个临时的容器，与父页面中的内容互相参照。比如购物车或者选择需要对比的车型。

优点：

不离开当前页，可以快速回到原流程，整体比较流畅。与父页面中的内容可以互为参照，便于比对、参考、复制、实时查看影响变化等。加载比较快，响应迅速。

内容区域相对弹窗更大，可以承载更多的内容。

缺点：

与整个页面相比，弹出层的区域有限，一般不适合放置太复杂、数量太多的内容。作为临时性的窗口，不适合层级比较复杂的操作。

弹出层的信息，一般不会拥有单独的URl，所以如果内容需要分享，则需要单独设置分享的入口与形式（比如转发到邮件、IM系统等）

特性：

需要尽量避免弹出层上再弹出一层，由于弹出层比较独立，多层嵌套会失去上下文，让用户迷失。可以分为模态与非模态，模态的好处是让用户注意力更加聚焦，但是会中断原来的操作。非模态的好处是用户在浮出层中操作时，可以参考、复制父页面中的内容。可以定义通过把手拖拽调节大小。

可以从上、下、左、右四个方向滑出。

适合的场景：

比较独立的编辑、新建等操作。查看较为复杂、需要联系上下文的附加信息。

影响父页面内容显示的设置条件，可以在设置的过程中实时看到结果。

弹窗/对话框

出现在页面正中间，根据所承载内容的多少，有不同的尺寸。一般用于临时的任务操作、查看内容不多的辅助信息。

优点：

不离开当前页，可以快速回到原流程，与整个页面跳转相比，整体比较流畅。比较独立、聚焦。

加载比较快，响应迅速。

缺点：

弹出层的区域有限，一般不适合放置太复杂、数量太多的内容或者层级比较复杂的操作。作为临时性的窗口，不适合层级比较复杂的操作。

弹出层的信息，一般不会拥有单独的URl，所以如果内容需要分享，则需要单独设置分享的入口与形式（比如转发到邮件、IM系统等）

特性：

需要尽量避免弹出层上再弹出一层，由于弹出层比较独立，多层嵌套会失去上下文，让用户迷失。

可以分为模态与非模态，模态的好处是让用户注意力更加聚焦，但是会中断原来的操作。非模态的好处是用户在浮出层中操作时，可以参考、复制父页面中的内容。

适合的场景：

需要查看的内容信息量不大，比较独立。

登录等中间流程/状态，操作完以后原有页面状态切换。

气泡弹窗

比对话框更轻量，承载的任务/内容更少，一般出现在触发位置附近。

优点：

不离开当前页，可以快速回到原流程，整体比较流畅。加载比较快，响应迅速。

小巧、便捷、轻量，对当前心流干扰较小。

缺点：

承载的内容比较少，不适合复杂操作或者内容。

特性：

提示类查看信息可以使用悬浮作为触发条件，减少操作成本。

出现位置在触发区域附近，可以是上下左右任一方向，关键在于减少遮挡。

适合的场景：

轻量化的编辑操作，比如修改某一个属性值。

不中断原有流程时，查看内容信息量不大的辅助信息，比如查看邮件时点击联系人信息。

如何选择

在很多的文章中，主要涉及的是页面内的链接使用哪种模式打开，往往也会提到使用鼠标中键、Ctrl+鼠标左键、拖拽链接到浏览器等方式来实现在新页签打开。这种时候，默认当前页打开，然后用户可以选择是否新页签打开是可行的，也比较灵活，让用户有掌控感。

但是对于WEB产品，特别是管理类、工具类产品而言，很多情况下新内容都是由按钮触发的，无法响应鼠标中键等快捷操作，这时候就需要综合考虑，设计适合于当前场景、业务目的的打开方式。

需考虑的基础因素

新打开内容的内容量

根本来说，不管是新页签的页面、当前页面刷新还是弹窗，都是承载内容的容器，受限于页面属性，不同的模式承载的内容量也是有所差异，大致可以分为：

新页签打开≥站点内新页签=当前内容刷新>当前页向下展开>侧边面板/抽屉>分区布局≥弹窗/对话框>气泡弹窗

前后内容、流程的连贯性

新打开的内容与当前页面的关系是逻辑上的顺序关系，还是独立的/附属的/并列的模块？如果有逻辑关系，则考虑在当前页打开。如果比较独立且打开后会干扰到当前流程的内容，则使用弹出层或者新页签打开。

业务特点

父页面如果信息复杂，那么往往作为内容分发的起始点或者功能聚合的工作台，新页签（浏览器新页签/页面内新页签）打开的形式，一旦有问题可以随时回到原点，让用户有掌控感，可以鼓励用户探索与发现新的内容。

对于临时/支线任务，弹出层的形式可以让用户操作时不必离开当前页面。操作完成后，可以平滑地回到原任务，对于原有主流任务的干扰较小。

如果任务或浏览具有连贯性、顺序性，那么用户往往目的比较明确，当前页面刷新或者当前页向下展开可以保持整个流程的连贯性，避免多个页签分散了用户的注意力。

对功能场景的影响

对于新的内容，考虑可能会遇到的场景以及不同模式对这些功能需求是否有影响：

用户执行的操作包括：顺序浏览、对比查看、复制原页面内容、编辑、分享、收藏、退出新内容查看。系统执行的过程包括：加载、数据刷新与同步。

移动端打开的辅助场景：屏幕变小、多页签管理不便、没有鼠标悬浮效果。

所以，在选择用何种模式来承载新的内容时，需要考虑新的内容是否需要这些操作，结合每种模式的特点来合理选用。

比如需要对比查看的场景，就不适合采用【当前内容刷新+面包屑】的模式，可以考虑浏览器新页签、站点内新页签、侧边面板等形式。

其他方式

让用户可以设置

比如谷歌在国外默认是当前页刷新内容，但是也提供了设置，用户可以选择在新页签打开。这样就兼顾了不同使用习惯人群的需求，这种对于用户基数大且用户间差异比较大的产品比较实用。

用户可以选择

对于页面中的链接而言，默认设置为当前页打开，可以通过鼠标右键选择在新页签中打开、鼠标中键点击后在新页签中打开的形式，兼容当前页打开与浏览器新页签打开。

其他值得注意的

保持一致

在同一产品内，同样的场景、业务内容、逻辑保持同样的打开方式，让用户形成稳定的心理预期。

结合使用

根据场景、内容等的不同，综合使用多种新内容的打开模式，充分利用各种模式的优点。比如当前页内容刷新与弹窗的结合使用，可以应对内容、流程有所差异的不同场景。

有所取舍

每种模式都会有局限性，在考虑用户目的、诉求时，需要考虑用户需求的优先级，明确重点需要满足哪种需求，而不是想要通过一种方案满足所有场景。

比如当前页打开可以通过复制页面的形式，间接实现多个浏览器页签对比查看的需求，可以应付对比查看需求不那么强烈场景。

总结

Every coin has two sides. 用辨证法的观点来看，不管什么方案，都会既有优点也有缺点。核心在于根据场景、目的和用户的习惯选择，寻求与当前的场景更匹配、利益最大化。

参考

https://www.uisdc.com/how-the-page-opens-interactivelyhttp://www.cjzzc.com/article/1251.htmlhttps://cloud.tencent.com/developer/article/1485441https://www.woshipm.com/pd/126021.htmlhttps://www.woshipm.com/ucd/3502268.htmlhttps://www.woshipm.com/pd/438404.htmlhttps://www.woshipm.com/pd/1622572.htmlhttps://www.woshipm.com/ucd/3508964.htmlhttps://www.zhihu.com/question/509127756https://www.zhihu.com/question/20957838https://www.zhihu.com/question/22431678https://www.zhihu.com/question/24921705https://www.zhihu.com/question/19563426/answer/12234132https://zhuanlan.zhihu.com/p/57705935