Contents

浏览器的Tab管理

Chrome是我工作中最常用的浏览器,但是它的Tab管理确实是一团糟。经常会遇到工作一天之后,CHrome的浏览器Tab开了一堆,要找到之前的Tab简直比登天还难。

浏览器的窗口管理

在chrome大行其道之前,IE是流行的浏览器之一,IE在新建窗口的时候就真的是在你的桌面上新建一个窗口,也许当时的用户工作一天之后桌面上会是一堆的窗口?当时的网页功能肯定没有现在这么强大,不是所有的应用都是运行在网页上的。

chrome已经在IE的基础上进行了改进,通过Tab来管理新建的窗口,至少我们不用看到桌面上的一堆浏览器窗口。Chrome的界面UI设计在刚问世的时候也是以其简洁、快速著称的,它也因此赢得了市场。

问题从桌面上的一堆窗口变成了一条Tab栏上的一个个Tab。这条Tab栏是有上限的,一般来说在10个tab左右就已经填满了整条Tab栏。按照我自己的习惯同时开启的Tab远在这个数字之上,Chrome的Tab页面至少在40个以上,而且习惯开启新的Tab但是不习惯关闭Tab。当我们的Tab栏都看不清标题分不清哪个Tab是你要切换寻找的,这时候我还倾向于新建一个Tab,而不是在一大堆Tab中寻找之前的Tab(除非这上面有我依赖的数据,新建一个需要重新操作一遍)。一天的工作结束之后会发现这些窗口中很大一部分都是一次性的,没有意义的中间窗口,例如导航类型的页面,搜索中间页面等等。

Chrome也在改进Tab页面的设计 引入了Tab分组,支持在已经开启的Tab页面中搜索,但是实际使用中并没有多大程度地解决问题。

Edge、Arc等浏览器开始抛弃最原始的Tab栏的桎梏,开始尝试竖排的Tab页面管理。

为什么?

为什么我们的浏览器页面会变得如此拥挤? 拆解和分析一下这个问题,会发现我们的问题变成了,为什么我们要新建一个浏览器Tab?这个问题很简单:

  • 用户主动通过url打开Tab 比如我想要搜索一个主题,我会打开google进行搜索,或者直接在Tab栏搜索,这都会新建一个Tab
  • 网站的新建 这不是用户的行为,更多的是网页的设计,例如Google搜索完成之后会有google 的搜索结果页面,当我点击其中一个搜索结果的时候Google可以选择在新的Tab页面中打开搜索结果网页,也可以选择forward,覆盖现有的搜索结果。(现在baidu的默认是新建Tab,Google采用的是forward的方案)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Link in New Tab or Same Tab</title>
</head>
<body>
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<a href="https://www.example.com" target="_self">Open in Same Tab</a>
</body>
</html>

竖排标签管理

现代用户的屏幕大多是16:9甚至更加宽的比例,在空间上宽会比高更加富裕。竖排的标签不会因为标签过多导致标签名称被挤占,因为竖排之后标签管理的宽度是可调整的,新的tab排列是竖向的,标签名称是横向的,不在一个方向上。

树状标签管理

用户的标签是否可以组织成一颗二叉树一样的形式。

https://chromewebstore.google.com/detail/tree-style-tab/oicakdoenlelpjnkoljnaakdofplkgnd 看上去已经有人在做类似的尝试,先试用一下看。

目前在使用的是

https://chrome.google.com/webstore/detail/nelmjkbalflkmcnnnhjgiodpndcebfgo

插件基本实现了树状Tab管理的基础功能,由于是插件的原因,功能打磨上没有arc做得那么好,也占用了挺多屏幕空间

新建Tab

tree tab可以让tab页面之间的生成逻辑更加清晰,不知道有没有插件可以减少新Tab页面的创建。会不会改造的最后就是zuo c