本篇文章分别从页面打开方法的种类、目前页打开&新开页面、弹出框三方面对页面链接打开方法进行了探讨，给大伙提出一些建议以供参考。
页面打开方法作为链接商品路径的基础，在设计的过程中，多少都会遇见选择的困扰，特别是商品功能复杂，层级较多时，怎么样让用户根据我们的意愿明确的浏览信息，维持操作连贯性，是值得体验设计仔细考虑与剖析的。
最近在所负责的设计项目中，团队对链接操作的打开方法产生了分歧，借此机会整理了一些案例与资料，就这个问题进行剖析探讨，也给遇见同样问题的同行一些参考建议。
1、页面打开方法的种类
网页中可操作的链接，主要有按钮、icon 与文字链接，设计中常见的打开方法则主要有以下三种：
1. 目前页打开
点击操作链接后，在目前的浏览器页面中进行内容显示与操作。
2. 新开页面
点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。
3. 弹出框
点击操作链接后，在目前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。
2、目前页打开 & 新开页面
第一来讲说最具争议的新开页面&目前页打开。在 HTML语言中，target目的有「target=_blank」和「target=_self」两种属性，分别代表「新窗口打开」和「目前窗口打开」，下图是这两个参数的属性描述。
从这两个参数的属性上来看，「目前窗口打开」是系统默认的处置方法。这个打开方法在海外的网站中达成方法比较统一，用户也形成了一致的习惯，但国内的形式则不尽相同，以至于一直颇具争议，不相同种类型网站之间、同一网站不同场景之间也没一个明确的规则标准可供大伙学习和参照。
针对这个问题的讨论，可以听到两种不一样的用户声音，并且都站在各自的角度讲解其道理。
举例，大家以相同种类型网站（淘宝和亚马逊）的打开处置方法进行对比，来看一下用户习惯、功能场景对链接打开方法选择的影响。
第一，大家确定一致的功能场景：用户从首页中依据各种筛选条件，查找到心仪的产品。来看一下两个网站的处置方法：
可以看出基本是两个极端，差异很明显，再来看个有意思的现象，亚马逊中国的产品搜索方法居然又和淘宝一致了，难道链接打开方法的差异竟是中外用户习惯的差异？
这确实占了非常大一部分缘由，那样导致这种差异是什么原因主要有：
· 早期的 W3C标准不支持 target=”_blank”（HTML语言中，在新窗口中打开链接）的属性，海外网络普及也比国内早，于是用户慢慢培养了习惯。
· 默认目前页面打开让海外用户感觉更有「礼貌」。假如用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方法；假如默认新开页面，则让用户失去了选择权。
· 早期国内网络进步较为浮躁，网站想通过新标签页打开方法，提升PV。
· 国内互联网普及晚，部分用户特别不少老年人不习惯甚至可能不了解，页中有个后退前进按钮、面包屑可用，新开页面便于他们的操作。
那样，淘宝中所有些页面打开方法都是新开吗？不是。像「我的珍藏」、「已买到的产品」、「购物车」等功能页面就是目前页打开。
同一个商品内部，这样不同设计是什么原因我觉得有：
· 用户的目的较为明确，查找对象确定。（用户想要查询的对象是确定的，如购物车中的商品，用户有明确的目的，找到链接打开页面即可，不像搜索查找产品，需要一步步缩小范围甚至比对查询）
· 链接入口常驻在网站的信息栏，用户可以随时切换，操作便捷，且没有重新输入的本钱。
关于这两种打开方法，到底哪种操作更顺畅，确实难分高下，就跟「确定和取消什么在左，什么在右」是一种性质的问题，没好坏之分，重点是要看在哪种场景下用更适合。
新页面打开适用的场景：
· 页面内容没关联性，且从逻辑上没从属关系，相对独立。如：商品中的外部链接。
· 存在多页面「比较」的操作，需要常常切换。如：淘宝产品详细情况。
· 需要保留住前一页的操作不丢失。如：知乎上过滤出来的结果列表。
· 功能分支存在穿插，当路径发生交叉时，最好新开页面。如：商品内部的跳转链接，致使信息关联的层级发生改变。
· 具备辅助功能的操作。如：用文档（PDF、图片等）需要来回参照。
目前页打开适用的场景：
· 步骤性的功能页面，前后操作存在关联和影响。如：下单支付、按步骤新增。
· 同一层级内容间的操作。如：tab栏的切换。
· 同一路径中的操作，用户目前的操作会对主页的内容产生影响。如：编辑一个配置，用户操作完，会回到目前页查询最新结果。
· 用户具备明确目的性的操作，目前页有益于锁定用户注意力。如：淘宝中「我的珍藏」。
以上是结合功能场景进行的选择侧重，假如就「客户体验」必须要分出个高下，我还是比较支持默认「目前页打开」，从体验角度剖析，「目前页打开」略胜一筹的重要原因有以下两个：
· 尊重用户的决定。目前页打开，将更多选择机会留给用户（鼠标中键、按住ctrl点击链接或者可以右键新窗口打开），一个具备好客户体验的商品，在用户做操作的时候，一直能让他们按我们的意志做出决定。网站对每一个链接强制打开新页面则剥夺了用户的选择权，由于不一样的人有不一样的浏览习惯和用需要。
· 体验一致。维持一致体验的设计才能让用户产生信赖感与安全感。当用户在操作界面元素的时候，可以顺畅的了解、理解，并且能预料到将会发生什么，不会被分神，也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计，而不是「以用户为中心」的设计。
小结
当大家不了解两种方法怎么样选择时，可能「不强制用户」才是最好的体验。由于大家面临的用户多样，电脑操作熟知程度多样，因此不同用户对于打开方法的习惯也具备多样性，这个是设计者没办法揣测和调查了解的。
在「两害取其轻」的状况下，在目前窗口打开链接，不失为一个选择，尊重用户我们的决定，让用户对交互界面自主可控。
3、弹出框
弹出框（弹层）又叫模态对话框，是指在用户想要对目前对话框以外的应用程序或内容进行操作时的提示方法。它一般覆盖在整体页面之上，防止了页面跳转。
弹出框一般是为了显示一个单独的内容，在不离开整体页面的状况下有一些互动，提供信息和交互。
如下图知乎中的「写想法」，用户可以迅速的在弹出框中记录个人想法，记录发布后，非常顺畅的回到之前的路径上继续操作，便捷高效，操作思路明确。
△ https://www.zhihu.com/
目前不少商品中的新增、创建，也都会使用弹出框的交互方法，当然首要条件是在弹出框中编辑的内容不是不少，此时弹出框不只承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。
如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。
△ http://www.iconfont.cn
弹出框适用的场景：
· 内容简单，没复杂的操作，且具备临时性。如：新增一个收货地址，进行简要的输入编辑。
· 更为详细的辅助说明，是对目前内容的迅速扩展。如：缩略图，点击放大查询。
因此，弹出框可以较好的达成上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后有哪些用途。
总结
本文结合这三种链接打开方法的页面交互关系，进行适用场景举例，并总结每种方法的优势和弊端，便捷在设计中更好的依据不一样的场景选择适合的页面打开方法。
当然，以上总结也是基于我的理解与经验，没统一的使用方法和标准，在具体设计实践中，仍要靠设计者的直觉和经验来进行综合考量与判断。
作为体验设计师，怎么样规划用户浏览路径，是个需要严肃对待的命题。没绝对的好与坏，但必须要结合商品种类、场景、目的用户等进行具体问题具体剖析。
本文题目：网站制作中页面打开的交互方法，这篇堪称最全方位的总结！文章转载：https://www.cdcxhl.com/news/18809.html
网站制作、网络营销推广公司-博久网络，是专注品牌与成效的网站建设，网络推广营销网站优化公司；服务项目有网站制作等
