B端設(shè)計(jì)｜頁(yè)面標(biāo)簽的認(rèn)識(shí)和實(shí)操應(yīng)用
今天來(lái)做一個(gè)比較簡(jiǎn)單的分享，也是很多在做B端項(xiàng)目的同學(xué)發(fā)出過(guò)的疑問(wèn)，那就是既然瀏覽器中可以使用頁(yè)面標(biāo)簽，那為什么在項(xiàng)目中還需要使用這個(gè)組件和交互框架的形式。
頁(yè)面標(biāo)簽是用來(lái)反應(yīng)系統(tǒng)中已打開(kāi)的頁(yè)面的標(biāo)識(shí)，最常見(jiàn)于瀏覽器頂部，每當(dāng)我們新建一個(gè)頁(yè)面，就會(huì)創(chuàng)建一個(gè)新的標(biāo)簽。我們不僅可以通過(guò)它來(lái)判斷打開(kāi)了多少頁(yè)面，也可以用通過(guò)點(diǎn)擊它們來(lái)切換當(dāng)前聚焦的頁(yè)面或關(guān)閉頁(yè)面。
當(dāng)然，除了瀏覽器外，還有很多其它的軟件也熱衷于使用頁(yè)面標(biāo)簽組件，如我們常用的設(shè)計(jì)軟件、辦公軟件和通訊軟件。
以軟件層面來(lái)說(shuō)，頁(yè)面標(biāo)簽的使用可以說(shuō)非常的普及，但是在網(wǎng)站的系統(tǒng)中，這個(gè)組件普及度并不高，第一個(gè)能想到的應(yīng)該就是郵箱系統(tǒng)了。
而日常會(huì)接觸到的B端 SAAS 工具里，也很少會(huì)用到這個(gè)組件。想必大家都能理解背后的原因，因?yàn)榫W(wǎng)站系統(tǒng)也需要瀏覽器訪問(wèn)，瀏覽器自帶了頁(yè)面標(biāo)簽，直接使用瀏覽器的標(biāo)簽不就行了！
所以問(wèn)題來(lái)了，為什么在網(wǎng)站頁(yè)面里再做一個(gè)頁(yè)面標(biāo)簽組件？這就要先從頁(yè)面標(biāo)簽組件出現(xiàn)的過(guò)程說(shuō)起了，在上古時(shí)期……
全球使用最廣泛的瀏覽器當(dāng)然是非 Windows 的 IE ( Internet Explorer) 瀏覽器莫屬。這個(gè)瀏覽器是 Windows 系統(tǒng)捆綁自帶的瀏覽器，從 1995 年上線，在短短幾年間成功成為全球開(kāi)發(fā)者最痛恨的瀏覽器，阻礙整個(gè)互聯(lián)網(wǎng)發(fā)展的腳步，茍活到2022 年6月15日21:00 正式停止更新（普天同慶）。
IE 不僅本身的引擎內(nèi)核一般，而且和 Windows 捆綁的特性而獲取的龐大用戶體量，成為所有網(wǎng)頁(yè)新技術(shù)普及的最大阻力。因?yàn)榻^大多數(shù)網(wǎng)站開(kāi)發(fā)，都不可能忽視這個(gè)群體，就需要花費(fèi)大量的精力去適配稀爛的老版 IE。
比如在2010年以前做網(wǎng)站的時(shí)候，如果想要使用已經(jīng)發(fā)布很多年的 CSS 來(lái)做樣式，你就要首先解決怎么在Windows 2000 和 XP 默認(rèn)安裝的 IE5、6 能正常顯示（對(duì)CSS支持極差），它們是所有網(wǎng)頁(yè)前端和設(shè)計(jì)師的噩夢(mèng)。
而早期IE還有個(gè)很重要的缺陷，就是它們本身是沒(méi)有頁(yè)面標(biāo)簽欄的，Windows 會(huì)將打開(kāi)的軟件窗口顯示在底部欄中，如果打開(kāi)的頁(yè)面較多，則會(huì)進(jìn)行折疊，通過(guò)點(diǎn)擊折疊菜單后展開(kāi)。
這是一個(gè)非常低效的操作方法，因?yàn)楫?dāng)時(shí)的顯示器普遍在 1280 或1440 寬，一旦打開(kāi)網(wǎng)頁(yè)稍多，展開(kāi)的菜單就不夠放，選擇之前打開(kāi)的網(wǎng)頁(yè)就很麻煩。
不是沒(méi)有人沒(méi)注意到這個(gè)問(wèn)題，現(xiàn)代瀏覽器的先驅(qū) Oprea，在1995年發(fā)布上線后就首個(gè)支持多窗口文檔模式（頁(yè)面標(biāo)簽前身，如下圖版本形式）。但這個(gè)優(yōu)秀的交互因?yàn)檐浖旧淼钠占岸炔粔蚋?，無(wú)法代表真正的用戶使用場(chǎng)景。
于是，逐漸興起的網(wǎng)頁(yè)管理系統(tǒng)（從本地軟件轉(zhuǎn)移到瀏覽器訪問(wèn)），就開(kāi)始繼承并普及這個(gè)交互框架，通過(guò)在一個(gè)類似軟件的頁(yè)面中，以標(biāo)簽的形式打開(kāi)站內(nèi)的新頁(yè)面，而不用讓瀏覽器窗口被折疊起來(lái)，提升交互的效率。
這有一定的主觀成分，我也不能確定是哪個(gè)歐美管理系統(tǒng)最先使用這個(gè)交互框架，但從最早期了解到和自己項(xiàng)目的實(shí)際情況分析，這是產(chǎn)生最關(guān)鍵影響的因素。
當(dāng)然，它也不是僅僅具備這一個(gè)優(yōu)點(diǎn)而已，它還同時(shí)包含另一個(gè)優(yōu)點(diǎn) ——?提升加載效率。
正常加載一個(gè)網(wǎng)頁(yè)，就是客戶端向服務(wù)器獲取相關(guān)文本代碼和外部資源的過(guò)程，代碼即服務(wù)器返回的 HTML、CSS、JS等代碼，外部資源即圖片音視頻等文件。
理論上每打開(kāi)一個(gè)頁(yè)面，你就需要重新和服務(wù)器獲取一遍這些內(nèi)容，雖然存在緩存的優(yōu)化機(jī)制，但不管怎么優(yōu)化，還是會(huì)產(chǎn)生很多額外的請(qǐng)求和資源的重復(fù)加載。而頁(yè)面標(biāo)簽的這種模式，就可以避免大量的重復(fù)請(qǐng)求和加載，提升頁(yè)面核心內(nèi)容的打開(kāi)效率。
看過(guò) HTML 課程的話，都應(yīng)該知道一個(gè)標(biāo)準(zhǔn)的 HTML 文檔必然會(huì)包含 <head>、<body> 兩個(gè)標(biāo)簽。其中 head 標(biāo)簽的內(nèi)容是不可見(jiàn)的，而且包含很多需要預(yù)加載的引用文件，本身就能消耗很多帶寬資源。
而在 body 部分中，全局組件等模塊也無(wú)需重新加載，只需要將全部重心放在對(duì)應(yīng)頁(yè)面的內(nèi)容區(qū)域即可，可能加載數(shù)據(jù)量?jī)H為原先的一半，這對(duì)撥號(hào)上網(wǎng)的年代來(lái)講是具體的減負(fù)。
除此之外，在高頻切換頁(yè)面的使用場(chǎng)景中，就可以減少很多白底背景和視覺(jué)界面交替出現(xiàn)的 “閃爍感”，這是一種非常折磨人的過(guò)程，只有大量使用 SAAS 服務(wù)的同學(xué)才能感同身受。
這些優(yōu)勢(shì)雖然都很明顯，但它們主要是建立在過(guò)去的技術(shù)條件和背景上的。隨著時(shí)代發(fā)展，IE的消亡，瀏覽器普遍自帶頁(yè)面標(biāo)簽，網(wǎng)速提升數(shù)十倍，這些優(yōu)勢(shì)就變得越來(lái)越小，而缺點(diǎn)則越來(lái)越明顯。
那就是網(wǎng)頁(yè)內(nèi)的頁(yè)面標(biāo)簽會(huì)很容易和瀏覽器中標(biāo)簽 “打架”，它不僅會(huì)占用本就不多的窗口高度，還在樣式和操作上都和瀏覽器標(biāo)簽很像，導(dǎo)致識(shí)別內(nèi)容效率很難提升。更要命的是，網(wǎng)頁(yè)里做的頁(yè)面標(biāo)簽操作體驗(yàn)和瀏覽器的可沒(méi)法比……
所以今天的B端系統(tǒng)中，使用這個(gè)組件的項(xiàng)目越來(lái)越少，雖然不是消亡，但它確實(shí)已經(jīng)完成了自己的主要?dú)v史使命。
那到底在今天它還有什么存在的場(chǎng)景和價(jià)值呢？
這個(gè)我很難給出統(tǒng)一的答案，可以肯定的是，其中有一部分設(shè)計(jì)被老板和甲方強(qiáng)制要求添加頁(yè)面標(biāo)簽，是基于過(guò)去的習(xí)慣出發(fā)，僅僅是 “路徑依賴”。
而其它原因，到底是項(xiàng)目需要提升加載的效率，如網(wǎng)絡(luò)很差，頁(yè)面數(shù)據(jù)量太龐大，還是不新建頁(yè)面的模式能帶來(lái)更好的操作連貫性，如深色背景但新建頁(yè)面是白色，就需要自己去探尋，找到合適的理由了。
所以，針對(duì)頁(yè)面標(biāo)簽組件的使用建議，就是：
如果找不到明確的理由，就不放！如果別人讓你放且說(shuō)不出理由，那就是他們的偏執(zhí)，沒(méi)有爭(zhēng)論的必要。職位比你高就做，沒(méi)你高就拒絕。
結(jié)尾
以上就是關(guān)于頁(yè)面標(biāo)簽的分享，如果有什么其它的看法，或者有應(yīng)用頁(yè)面標(biāo)簽的優(yōu)秀 SAAS 案例，也可以在下方留言。
我們下篇再賤～
新一期B端產(chǎn)品設(shè)計(jì)課程五一回來(lái)后開(kāi)課，感興趣的同學(xué)就可以下方文章了解課程??
