PC页面打开方式

结合三中链接打开方式的页面交互关系，进行使用场景举例，并总结每种方式的优缺点，方便在设计中根据不同的场景选择合适的页面打开方式。

总结

页面打开方式作为连接产品路径的基础，尤其是产品功能复杂，层级较多时，如何让用户按照自己的意愿清晰的浏览信息，保持操作连贯性，是值得体验设计仔细思考与分析的。

一、页面打开方式的类型

网页中可操作的链接，主要有按钮，icon以及文字链接，设计中常用的打开方式主要包括：
1.当前页面打开

点击操作链接后，在当前的浏览器页面中进行内容显示与操作。

2.新开页面
点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。

3.弹出窗

点击操作链接后，在当前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。

二、当前页打开 & 新开页面

最具争议的新开页面和当前页打开。在HTML语言中，target目标有【target=_blank】和【target=_self】两种属性，分别代表新窗口打开和当前窗口打开。

从这两个参数的属性来看，当前窗口打开是系统默认的处理方式。在国外的网站中实现方式比较统一，用户也形成了一致的习惯，但国内的形式则不尽相同，颇具争议。

不同声音

我们以同类型网站淘宝和亚马逊的打开处理方式举例对比，思考用户习惯、功能场景对链接打开方式选择的影响。
首先我们确定一致的功能场景：用户从首页中根据各种筛选条件，查找到心仪的商品，来看一下两个网站的处理方式：

可以看出基本是两个极端，差异明显。但是亚马逊中国的商品搜索方式竟然又和淘宝一致了，难道链接打开方式的差异竟是中外用户习惯的差异？

这确实占了很大一部分原因，造成这种差异的主要原因有：
a.早期的W3C标准不支持targe="blank"的属性，国外互联网普及比国内早，于是用户满满养成了习惯。
b.默认当前页面打开让国外用户觉得更有【礼貌】。如果用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方式；如果默认新开页面，则让用户失去选择权。
c.早期国内互联网发展较为浮躁，网站想通过新标签打开方式，提高PV.
d.国内网络普及晚，部分用户尤其老年人不习惯甚至或许不知道，页面中有个后退前进按钮，面包屑可用，新开页面便于他们的操作。
那么淘宝中所有的页面打开方式都是新开吗？不是。像【我的收藏】、【已买到的商品】、【购物车】等功能页面就是当前页打开。

同一个产品内部，如此区别设计的原因我认为有：
a.用户的目的较为明确，查找对象确定。用户想要查看的对象是确定的，如购物车中的产品，用户有明确的目标，找到链接打开页面即可，不像搜索查找商品，需要一步步缩小范围甚至比对查看。
b.链接入口常驻网站的信息栏，用户可以随时切换，操作方便，且不存在重新输入的成本。
关于这两种打开方式，到底哪种操作更顺畅，确实难分高下，就跟【确定和取消哪个在左，哪个在右】是一种性质的问题，没有好坏之分，关键是要看在哪种场景下使用更合适。

*新页面打开适用的场景
a.页面内容没有关联性，且从逻辑上没有从属关系，相对独立。如：产品中的外链。
b.存在多页面【比较】的操作，需要经常切换，如：淘宝商品详情。
c.需要保留住前一页的操作不丢失。如：知乎上过滤出来的结果列表。
d.功能分支存在穿插，当路径发生交叉时，最好新开页面。如：产品内部的跳转链接，导致信息关联的层级发生改变。
e.具有辅助功能的操作，如：使用文档（PDF、图片等）需要来回参照。

*当前页打开适用的场景
a.流程性的功能页面，前后操作存在关联和影响。如：下单支付、按步骤新增。
b.同一层级内容的操作。如tab栏的切换。
c.同一路径中的操作，用户当前的操作会对主页的内容产生影响。如编辑一个配置，用户操作完会回到当前页查看最新结果。
d.用户具有明确目的性的操作，当前页有利于锁定用户注意力。如淘宝中【我的收藏】。
以上是结合功能场景进行的选择侧重，如果【用户体验】一定要分出个高低上下，我个人比较支持默认【当前页打开】，从体验角度分析有以下原因：
a.尊重用户的决定。当前页打开，将更多选择机会留给用户（鼠标中键、按住Ctrl点击链接或者右键新窗口打开），一个具有良好用户体验的产品，在用户做操作的时候，总是能让他们按照自己的意志做决定。网站对每个链接强制打开新页面则剥夺了用户的选择权，因为不用的人有不用的浏览习惯和使用需求。
b.体验一致，保持一致的体验设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候，可以顺畅的知道、理解，并且能预料到将会发生什么，不会被分神，也不会被打断。任何违反这个原则的设计都会演变成一种【以设计方意志为导向】的设计，而不是【以用户为中心】的设计。
*总结：当我们不知道两种方式如何选择时，或许【不强制用户】才是最好的体验，因为我们面临的用户多样，电脑操作熟悉程度多样，因此不同用户对于打开方式的习惯也具有多样性，这个是设计者无法揣测和调查清楚的。在【两害取其轻】的情况下，在当前窗口打开链接不失为一个选择，尊重用户自己的决定，让用户对交互界面自主可控。

三、弹窗框

弹层又叫模态对话框，是指用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上，避免了页面跳转。弹出框通常是为了显示一个单独的内容，在不离开整体页面的情况下有一些互动，提供信息和交互。
如知乎中的【写想法】，用户可以快速的在弹出框中记录个人想法，记录发布后，很顺畅的回到之前的路径上继续操作，便捷高效，操作思路清晰。

现在很多产品中的新增、创建也都会采用输出框的交互方式，当然前提是在弹出框中编辑的内容不是很多，此时弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。如iconfont中的新建项目，用户新增后，页面会直接跳转到新的项目空间。

*弹出框适用的场景
a.内容简单，没有复杂的操作，且具有临时性。如：新增一个收货地址，进行简要的输入编辑。
b.更为详细的辅助说明，是对房钱内容的快速扩展。如：缩略图，点击放大查看。
因此，弹出框可以较好的实现上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后的作用。
以上是个人的理解与经验，没有统一的用法和标准，在具体设计实践中要靠设计者的直觉和经验来进行综合考量和判断。
作为体验设计师，如何规划用户浏览路径，是需要严肃对待的命题。没有绝对的好与坏，但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。