編輯導(dǎo)讀：瀏覽器是每一個(gè)互聯(lián)網(wǎng)人每天使用的產(chǎn)品，在不斷演進(jìn)的需求過(guò)程中，對(duì)瀏覽器的效率、兼容等提出了更高的要求。本文作者基于一款定位為團(tuán)隊(duì)協(xié)作的瀏覽器的左側(cè)欄設(shè)計(jì)路線來(lái)闡述如何從分析競(jìng)品到最終選型確定方案，以及如何執(zhí)行，與你分享。

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

• 當(dāng)打開過(guò)多的瀏覽器標(biāo)簽的時(shí)候，過(guò)度擁擠的標(biāo)簽欄，無(wú)法區(qū)分網(wǎng)頁(yè)。
• 當(dāng)關(guān)閉瀏覽器的時(shí)候，會(huì)清空全部的標(biāo)簽，從而形成內(nèi)存式的使用習(xí)慣，恢復(fù)工作區(qū)作為一個(gè)簡(jiǎn)單而繁瑣的動(dòng)作，每天被低效執(zhí)行。
• 越來(lái)越多的saas應(yīng)用做成了網(wǎng)頁(yè)單頁(yè)應(yīng)用，是否能夠兼容應(yīng)用管理？

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

一、搜尋競(jìng)品

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

那么我們的目標(biāo)范圍基本被確定在國(guó)外瀏覽器與瀏覽器插件兩個(gè)方向。

1.1 瀏覽器插件

搜尋瀏覽器插件一般依賴于各大瀏覽器的插件市場(chǎng)。

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

workona可以通過(guò)標(biāo)簽組的工作空間管理來(lái)實(shí)現(xiàn)標(biāo)簽管理。

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

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

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

總體來(lái)說(shuō)，通過(guò)工作區(qū)的劃分，確實(shí)解決了標(biāo)簽欄的問(wèn)題，但是由于是獨(dú)立頁(yè)面，切換過(guò)于繁瑣。

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

1.2 國(guó)外瀏覽器

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

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

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

①.sidekick

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

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

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

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

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

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

②sigma

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

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

結(jié)論：

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

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

③Safari

本來(lái)主流瀏覽器對(duì)標(biāo)簽分組都是有不同程度的支持的。chrome有標(biāo)簽組的實(shí)驗(yàn)室功能，開啟后，可以在標(biāo)簽欄增加分組。但是擁擠的頂部欄本身空間有限，在這里進(jìn)行管理會(huì)比較局促。

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

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

結(jié)論：

Safari的標(biāo)簽組整體體驗(yàn)不錯(cuò)，也支持跨平臺(tái)。體驗(yàn)也比較簡(jiǎn)單，無(wú)需安裝瀏覽器插件，無(wú)需開啟實(shí)驗(yàn)室功能，使用成本低廉。

二、整理總結(jié)提煉方案

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

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

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

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

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

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

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

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

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

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

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

三、形成成熟的方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

點(diǎn)擊應(yīng)用管理圖標(biāo)，展開快速啟動(dòng)應(yīng)用的面板。這里的設(shè)計(jì)參考了微信小程序。

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

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

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

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

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

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

四、寫在最后

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

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

作者：短說(shuō)社區(qū)-奕瀟，短說(shuō)社區(qū)產(chǎn)品經(jīng)理，想天瀏覽器產(chǎn)品經(jīng)理。

本文由@短說(shuō)社區(qū)-奕瀟 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議