前言

之前在SaaS管理端界面设计时，遇到了一个比较纠结的问题，当前界面的交互动作触发以后，新的内容通过怎样的方式来展现比较好。查阅学习了相关文章，结合实际项目经验进行复盘分析，作出小结以加深理解，方便日后更好的运用。

类型

早先的国内互联网产品，因为大多呈列表式，加上网速环境也不好，用户喜欢一个链接一个链接新开窗口加载浏览，养成了早期的用户习惯。在后来的界面设计中，设计师会考虑用户的使用习惯，同时根据产品类型，功能场景，设计目的等实际情况，采用合适的交互方式。

当前常见的页面打开方式主要有三种，当前界面打开、新开界面显示、弹出框模式。

当前界面显示

点击界面当中的操作区域，新的内容在当前界面刷新后显示。

适用场景

1.同层级不同栏目的切换

如马蜂窝官网，①界面菜单栏目之间的切换适用当前界面切换。②属于“去旅行"里面的平行菜单，与顶部其他菜单栏目同级,同样适用当前界面显示来切换内容。

马蜂窝

2.有明确的流程步骤

Ant Design Pro 表单

3.新旧界面有着密切的逻辑从属关系 

如下图，“我的作品集”当前没有任何作品，点击“+”，在当前视窗打开添加作品集的内容。

起点学院-我的作品集

优点

1.减少新增的标签，方便查找删减

2.路径清晰，不易迷失

3.聚焦当前界面，注意力集中

4.用户拥有自主选择权，可以右键再选择新窗口打开

缺点

1.当前界面内容被覆盖，返回可能丢失之前的信息

2.信息层级越深，用户路径就会越复杂

3.需要考虑返回功能的设置  

关于返回

目前，浏览器左上角都有前进和后退的功能，可以帮助在界面中的路径往返。一般在浏览性，内容展示性比较强的界面，可以直接借助浏览器自带的此功能完成内容切换。

对于流程性，界面逻辑性比较强的界面，建议通过增加面包屑或者明确的“上一步”“下一步”按钮等方式帮助用户更加快速的在路径中进退。

新开界面显示

点击界面当中的某一操作区域，浏览器的标签栏会出现一个新的标签，新的内容在新开的标签当中显示。在内容展示为主的网页中很常见。

人人都是产品经理

适用场景

1.页面内容没有太大的关联性，相对独立

2.想要保留前一界面的当前信息

3.路径交叉的共通界面（如A能链接到C,B也能链接到C，那么C界面就建议使用新开界面显示。）

优点

1.页面内容独立，各自操作方便

2.可同时加载多个界面，提高浏览效率

3.方便保留前一界面的信息

缺点

1.标签过多，不方便查找

2.容易分心，界面之间的关联性弱

3.剥夺用户选择的权利，用户无法自主决定是否新窗口打开

弹出框模式

点击界面当中的操作区域，当前界面浮层出现弹出框显示相关内容和操作。

百度首页-我的导航追加

适用场景：

1.临时性的信息展示

2.展示的内容少且操作简单

优点：

1.避免界面跳转，刷新、体验比较流畅

缺点：

1.弹窗的出现会对当前操作进行打断

2.显示内容有限

如何选择

事实上，对于这三种方式很难给予一个直接的判断，哪个好哪个不好。每一种页面打开方式都有自己的优缺点，在实际项目当中，要综合考虑产品的类型，使用的功能场景，功能的设计目的，进行合适的交互方式。

参考文章

https://www.zhihu.com/question/19563426（知乎）

https://www.jianshu.com/p/bf0691f5d71b（简书）

https://www.uisdc.com/how-the-page-opens-interactively（优设）