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