2023年B端设计｜页面标签的认识和实操应用

B端设计｜页面标签的认识和实操应用class="size-fullwp-image-5800237aligncenter"src="/wp-files/2023/04/7Ch4RFTHYmDIdcQCu8Pv.jpg"alt=""width="900"height="420"/>

今日来做一个比较简洁的共享，也是许多在做B端项目的同学发出过的疑问，那就是既然扫瞄器中可以使用页面标签，那为什么在项目中还需要使用这个组件和交互框架的形式。

以软件层面来说，页面标签的使用可以说特别的普及，但是在网站的系统中，这个组件普及度并不高，第一个能想到的应当就是邮箱系统了。

而日常会接触到的B端SAAS工具里，也很少会用到这个组件。想必大家都能理解背后的缘由，由于网站系统也需要扫瞄器访问，扫瞄器自带了页面标签，直接使用扫瞄器的标签不就行了！

所以问题来了，为什么在网站页面里再做一个页面标签组件？这就要先从页面标签组件消失的过程说起了，在上古时期……

全球使用最广泛的扫瞄器当然是非Windows的IE(InternetExplorer)扫瞄器莫属。这个扫瞄器是Windows系统捆绑自带的扫瞄器，从1995年上线，在短短几年间胜利成为全球开发者最痛恨的扫瞄器，阻碍整个互联网进展的脚步，苟活到2022年6月15日21:00正式停止更新（普天同庆）。

IE不仅本身的引擎内核一般，而且和Windows捆绑的特性而猎取的浩大用户体量，成为全部网页新技术普及的最大阻力。由于绝大多数网站开发，都不行能忽视这个群体，就需要花费大量的精力去适配稀烂的老版IE。

比如在2022年以前做网站的时候，假如想要使用已经发布许多年的CSS来做样式，你就要首先解决怎么在Windows2000和XP默认安装的IE5、6能正常显示（对CSS支持极差），它们是全部网页前端和设计师的噩梦。

而早期IE还有个很重要的缺陷，就是它们本身是没有页面标签栏的，Windows会将打开的软件窗口显示在底部栏中，假如打开的页面较多，则会进行折叠，通过点击折叠菜单后绽开。

这是一个特别低效的操作方法，由于当时的显示器普遍在1280或1440宽，一旦打开网页稍多，绽开的菜单就不够放，选择之前打开的网页就很麻烦。

不是没有人没留意到这个问题，现代扫瞄器的先驱Oprea，在1995年发布上线后就首个支持多窗口文档模式（页面标签前身，如下图版本形式）。但这个优秀的交互由于软件本身的普及度不够高，无法代表真正的用户使用场景。

于是，渐渐兴起的网页管理系统（从本地软件转移到扫瞄器访问），就开头继承并普及这个交互框架，通过在一个类似软件的页面中，以标签的形式打开站内的新页面，而不用让扫瞄器窗口被折叠起来，提升交互的效率。

这有肯定的主观成分，我也不能确定是哪个欧美管理系统最先使用这个交互框架，但从最早期了解到和自己项目的实际状况分析，这是产生最关键影响的因素。

当然，它也不是仅仅具备这一个优点而已，它还同时包含另一个优点——提升加载效率。

正常加载一个网页，就是客户端向服务器猎取相关文本代码和外部资源的过程，代码即服务器返回的HTML、CSS、JS等代码，外部资源即图片音视频等文件。

理论上每打开一个页面，你就需要重新和服务器猎取一遍这些内容，虽然存在缓存的优化机制，但不管怎么优化，还是会产生许多额外的恳求和资源的重复加载。而页面标签的这种模式，就可以避开大量的重复恳求和加载，提升页面核心内容的打开效率。

看过HTML课程的话，都应当知道一个标准的HTML文档必定会包含head、body两个标签。其中head标签的内容是不行见的，而且包含许多需要预加载的引用文件，本身就能消耗许多带宽资源。

而在body部分中，全局组件等模块也无需重新加载，只需要将全部重心放在对应页面的内容区域即可，可能加载数据量仅为原先的一半，这对拨号上网的年月来讲是详细的减负。

除此之外，在高频切换页面的使用场景中，就可以削减许多白底背景和视觉界面交替消失的“闪耀感”，这是一种特别熬煎人的过程，只有大量使用SAAS服务的同学才能感同身受。

这些优势虽然都很明显，但它们主要是建立在过去的技术条件和背景上的。随着时代进展，IE的消亡，扫瞄器普遍自带页面标签，网速提升数十倍，这些优势就变得越来越小，而缺点则越来越明显。

那就是网页内的页面标签会很简单和扫瞄器中标签“打架”，它不仅会占用本就不多的窗口高度，还在样式和操作上都和扫瞄器标签很像，导致识别内容效率很难提升。更要命的是，网页里做的页面标签操作体验和扫瞄器的可没法比……

所以今日的B端系统中，使用这个组件的项目越来越少，虽然不是消亡，但它的确已经完成了自己的主要历史使命。

那究竟在今日它还有什么存在的场景和价值呢？

这个我很难给出统一的答案，可以确定的是，其中有一部分设计被老板和甲方强制要求添加页面标签，是基于过去的习惯动身，仅仅是“路径依靠”。

而其它缘由，究竟是项目需要提升加载的效率，如网络很差，页面数据量太浩大，还是不新建页面的模式能带来更好的操作连贯性，如深色背景但