絕大多數(shù)的互聯(lián)網(wǎng)從業(yè)人士都無法避免長時間，高強度地使用瀏覽器產(chǎn)品。在使用這些瀏覽器產(chǎn)品的時候，我們往往會遇到這樣的問題：

1.當打開過多的瀏覽器標簽的時候，過度擁擠的標簽欄，無法區(qū)分網(wǎng)頁。

2.當關(guān)閉瀏覽器的時候，會清空全部的標簽，從而形成內(nèi)存式的使用習慣，恢復(fù)工作區(qū)作為一個簡單而繁瑣的動作，每天被低效執(zhí)行。

3.越來越多的saas應(yīng)用做成了網(wǎng)頁單頁應(yīng)用，是否能夠兼容應(yīng)用管理？

本文基于一款定位為團隊協(xié)作的瀏覽器的左側(cè)欄設(shè)計路線來闡述如何從分析競品到最終選型確定方案，以及如何執(zhí)行。

step1.搜尋競品

國內(nèi)瀏覽器近幾年發(fā)展緩慢，基本沒有大的突破性創(chuàng)新，暫時沒有太大的參考性。主流瀏覽器為了兼顧主流用戶的使用習慣，并未引入標簽組管理。

那么我們的目標范圍基本被確定在國外瀏覽器與瀏覽器插件兩個方向。

1.1瀏覽器插件

搜尋瀏覽器插件一般依賴于各大瀏覽器的插件市場。

目前瀏覽器插件方面，對于標簽組的管理基本圍繞著瀏覽器提供的api展開。找尋一些方案之后，了解了workona這款瀏覽器插件。

workona可以通過標簽組的工作空間管理來實現(xiàn)標簽管理。

少數(shù)派有一篇關(guān)于workona的文章，是付費文章。由于workona國內(nèi)有墻，無法直接訪問，注冊也挺麻煩的，需要一些技巧。注冊賬號后體驗。

由于這個產(chǎn)品包含插件和應(yīng)用界面兩部分，展開篇幅過大。直接說結(jié)論:

基于插件的使用門檻較高，有一定的安裝門檻。基于chrome自帶api的分組切換有一定的局限性。墻外的世界很精彩，但是國內(nèi)環(huán)境下無法使用。

總體來說，通過工作區(qū)的劃分，確實解決了標簽欄的問題，但是由于是獨立頁面，切換過于繁瑣。

瀏覽器插件由于使用門檻總體都是比較高的。僅供參考。

1.2國外瀏覽器

在國外早已有工作瀏覽器的概念了。

比較有名的sidekick。這里提一嘴如何搜索國外的獨立產(chǎn)品。國外有一個ProductHunter的網(wǎng)站，上面可以搜索很多潛在競品。并且PH本身也有一個比較好的開發(fā)者社區(qū)，可以看到開發(fā)者與用戶的互動。此外還有投票等方式進行產(chǎn)品質(zhì)量的篩選。

國外的瀏覽器產(chǎn)品主要看sidekick、sigma和Safari3款。

①.sidekick

sidekick算是比較有名的工作瀏覽器了，在國外很重視web應(yīng)用。所以sidekick集成了一個功能強大的左側(cè)欄。

?左側(cè)欄集成了一些常用的web應(yīng)用。點擊即可打開web應(yīng)用。默認情況下，web應(yīng)用不出現(xiàn)在右側(cè)標簽欄。以主界面標簽的方式打開。

啟動了的web應(yīng)用，左側(cè)會有小標記，類似mac的dock欄。

右鍵可以看到一個功能菜單?？梢钥焖偬砑硬煌馁~戶，進行簡單設(shè)置?？梢钥吹?，sidekick的左側(cè)欄主要作用是改善web應(yīng)用的體驗，而非對標簽組進行整理。

sidekick設(shè)計主要是解決web應(yīng)用的體驗問題。

結(jié)論：sidekick的左側(cè)欄便于切換，對于web應(yīng)用兼容性好， 還提供了便捷的賬號管理。是主流用戶比較容易接收的方案。但對于多標簽的整理這方面較弱。

②sigma

另外一款國外的工作瀏覽器sigma目前不算太成熟，但是主打標簽組管理，也成功出圈了。

sigma允許用戶展開一個左側(cè)欄，并在左側(cè)欄進行分組管理，可以自定義分組，設(shè)置圖標，隨時切換標簽分組。

結(jié)論：

左側(cè)欄切換標簽組的方案，提升了標簽管理能力。也引入了新的問題，當左側(cè)欄被收起來的時候，僅通過圖標記憶，仍然存在難度。而展開后，占據(jù)較多的屏幕空間，不適合小屏幕使用。

sigma并未對web應(yīng)用進行針對性優(yōu)化，主要還是標簽組管理，功能較為單一。

③Safari

本來主流瀏覽器對標簽分組都是有不同程度的支持的。chrome有標簽組的實驗室功能，開啟后，可以在標簽欄增加分組。但是擁擠的頂部欄本身空間有限，在這里進行管理會比較局促。

伴隨著MacOSMonterey的發(fā)布，新版本Safari加入了緊湊模式，同時加入了標簽組的功能。

新版本的Safari可以開啟左側(cè)欄，可以對標簽頁組進行管理，任意添加分組，并保持分組的獨立性和持久性。關(guān)閉瀏覽器仍然后，下次打開依然可以快速打開這個標簽組。

結(jié)論：

Safari的標簽組整體體驗不錯，也支持跨平臺。體驗也比較簡單，無需安裝瀏覽器插件，無需開啟實驗室功能，使用成本低廉。

step2.整理總結(jié)提煉方案

基于step1的方案，初步整理思維導(dǎo)圖如下：

基于左側(cè)欄與基于標簽欄的方案，進行提煉后，考慮到不同的屏幕尺寸以及用戶結(jié)構(gòu)感知。初步認為左側(cè)欄更符合切換的結(jié)構(gòu)認知。形成如下的布局模式：

這樣的方案也被蘋果接受，充分說明其可行性。

至于產(chǎn)品形態(tài)方面，如果是在5-10年前，基本只能以瀏覽器插件的方式實現(xiàn)。然而現(xiàn)在的開發(fā)環(huán)境下，已經(jīng)有一些小眾開源的瀏覽器產(chǎn)品，基于chromium的開發(fā)生態(tài)也逐步完善，所以開發(fā)獨立瀏覽器產(chǎn)品已經(jīng)成為可能。

使用瀏覽器插件模式，畢竟存在很大的局限性，未來的擴展性、性能的優(yōu)化等方面都將存在問題。綜合之后，選擇獨立瀏覽器。

那么，如何將網(wǎng)頁應(yīng)用與標簽組管理融合在一起，形成一個健壯有效的方案呢？

一款有特色的網(wǎng)頁應(yīng)用管理產(chǎn)品station出現(xiàn)在了我的眼中，通過對station的研究，總結(jié)提煉了一個最終解決方案。

station是一款高效管理web應(yīng)用的產(chǎn)品，旨在讓用戶無需安裝各種web網(wǎng)頁客戶端，只需要以一個小應(yīng)用的方式接入即可。

其左側(cè)欄設(shè)計和sidekick很類似，但是station更加激進，砍掉了瀏覽器功能。只保留了服務(wù)于web應(yīng)用的基本瀏覽功能。

station的左側(cè)欄方案以及應(yīng)用商店的概念也很不錯。

通過商店對web應(yīng)用進行歸類整理，用戶只需要搜索并添加應(yīng)用即可。station是開源免費的，而sidekick是收取訂閱費的。如果僅僅使用web應(yīng)用，其實station也足夠了。

step3.形成成熟的方案

綜合了一些市面上常見的方案后，通過繪制原型圖，以及對這些不同方案的產(chǎn)品進行試用，總結(jié)其使用不便的方面。最終確定產(chǎn)品方案。

關(guān)鍵詞：左側(cè)欄，小程序

對前文的左側(cè)欄進行小幅度修改，將上方置頂區(qū)取消，更改為應(yīng)用區(qū)。

為了兼容大小屏設(shè)備，提供左側(cè)欄的折疊、展開、自動三種模式（未來甚至還可以拓展到獨立于主界面，側(cè)吸到屏幕左側(cè)，方便隨時呼出）

寬度設(shè)置為45個像素，通過犧牲45個左右常駐尺寸換取更加容易理解的標簽組和工作區(qū)切換入口。

標簽組采用應(yīng)用原圖，以第一個應(yīng)用的圖標作為分組圖標，減少用戶的認知和操作成本。

應(yīng)用則采用圓形帶線框圖標與傳統(tǒng)網(wǎng)站logo進行區(qū)分。從視覺上產(chǎn)生較大差異。

同時使用運行色與非運行色區(qū)分。最終得到效果如下：

當鼠標移動到標簽上的時候，通過懸浮窗快速預(yù)覽組內(nèi)標簽，抵消由于區(qū)隔了標簽而造成的使用不便。降低用戶的學習成本。

用戶可以直接點擊分組標題進行編輯，直接點擊其中多標簽切換，也可以鎖定標簽，防止被誤關(guān)閉。

瀏覽器關(guān)閉的時候，保留全部的標簽，以便用戶下次訪問恢復(fù)工作區(qū)。

當用戶鼠標移動到應(yīng)用上時，出現(xiàn)應(yīng)用的界面截圖。這樣用戶可以快速預(yù)覽其中的應(yīng)用狀態(tài)。

為了改善web應(yīng)用的使用體驗，增加了沉浸式的主題色、獨立的窗體、應(yīng)用打開自啟動等功能。

同時攔截了應(yīng)用的自彈窗，改為在窗體內(nèi)打開。

為了方面應(yīng)用的安裝管理，增加了一個應(yīng)用管理功能。

鼠標移動到應(yīng)用管理圖標上的時候，出現(xiàn)全部運行中的應(yīng)用，可以進行設(shè)置或者關(guān)閉。

點擊應(yīng)用管理圖標，展開快速啟動應(yīng)用的面板。這里的設(shè)計參考了微信小程序。

增加了應(yīng)用搜索功能，支持中文拼音。

最后一個問題就是如何安裝應(yīng)用了。

station等產(chǎn)品采用應(yīng)用中心模式。

這方面我們也提供了一個收藏夾的功能，在里面內(nèi)置了應(yīng)用導(dǎo)航，放了一些常用應(yīng)用，可以一鍵安裝。同時支持用戶在瀏覽網(wǎng)站的時候一鍵安裝到應(yīng)用。

安裝完成后，應(yīng)用會自動啟動。這樣用戶就能夠很好地分辨新安裝的應(yīng)用。

由于獨立窗體的存在，分屏模式下，也可以方便地將文檔類應(yīng)用放到擴展屏上，實現(xiàn)隨時閱讀文檔的功能。為了方便應(yīng)用使用，我們在標題欄上添加了返回、前進、刷新和回到起始頁（首頁）的功能。

寫在最后

在功能的設(shè)計的時候，我們往往需要參考大量的競品，通過對競品的不斷研究和體驗，找到真正好用的解決方案。

同時也要考慮分析不同方案的使用成本、用戶學習成本，不論是空間還是時間都需要進行妥協(xié)。每一種方案都有其優(yōu)劣性，當無法做決定的時候，可以考慮使用配置選項的方式，讓用戶自行決定。

作者簡介：

短說社區(qū)產(chǎn)品經(jīng)理，想天瀏覽器產(chǎn)品經(jīng)理。