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