起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何從零開始設計一個高效的瀏覽器左側欄？
編輯導讀：瀏覽器是每一個互聯網人每天使用的產品，在不斷演進的需求過程中，對瀏覽器的效率、兼容等提出了更高的要求。本文作者基于一款定位為團隊協作的瀏覽器的左側欄設計路線來闡述如何從分析競品到最終選型確定方案，以及如何執行，與你分享。
絕大多數的互聯網從業人士都無法避免長時間，高強度地使用瀏覽器產品。在使用這些瀏覽器產品的時候，我們往往會遇到這樣的問題：
- 當打開過多的瀏覽器標簽的時候，過度擁擠的標簽欄，無法區分網頁。
- 當關閉瀏覽器的時候，會清空全部的標簽，從而形成內存式的使用習慣，恢復工作區作為一個簡單而繁瑣的動作，每天被低效執行。
- 越來越多的saas應用做成了網頁單頁應用，是否能夠兼容應用管理？
本文基于一款定位為團隊協作的瀏覽器的左側欄設計路線來闡述如何從分析競品到最終選型確定方案，以及如何執行。
一、搜尋競品
國內瀏覽器近幾年發展緩慢，基本沒有大的突破性創新，暫時沒有太大的參考性。主流瀏覽器為了兼顧主流用戶的使用習慣，并未引入標簽組管理。
那么我們的目標范圍基本被確定在國外瀏覽器與瀏覽器插件兩個方向。
1.1 瀏覽器插件
搜尋瀏覽器插件一般依賴于各大瀏覽器的插件市場。
目前瀏覽器插件方面，對于標簽組的管理基本圍繞著瀏覽器提供的api展開。找尋一些方案之后，了解了workona這款瀏覽器插件。
workona可以通過標簽組的工作空間管理來實現標簽管理。
少數派有一篇關于workona的文章，是付費文章。由于workona國內有墻，無法直接訪問，注冊也挺麻煩的，需要一些技巧。注冊賬號后體驗。
由于這個產品包含插件和應用界面兩部分，展開篇幅過大。直接說結論：
基于插件的使用門檻較高，有一定的安裝門檻?；赾hrome自帶api的分組切換有一定的局限性。墻外的世界很精彩，但是國內環境下無法使用。
總體來說，通過工作區的劃分，確實解決了標簽欄的問題，但是由于是獨立頁面，切換過于繁瑣。
瀏覽器插件由于使用門檻總體都是比較高的。僅供參考。
1.2 國外瀏覽器
在國外早已有工作瀏覽器的概念了。
比較有名的sidekick。這里提一嘴如何搜索國外的獨立產品。國外有一個ProductHunter的網站，上面可以搜索很多潛在競品。并且PH本身也有一個比較好的開發者社區，可以看到開發者與用戶的互動。此外還有投票等方式進行產品質量的篩選。
國外的瀏覽器產品主要看sidekick、sigma和Safari3款。
①.sidekick
sidekick算是比較有名的工作瀏覽器了，在國外很重視web應用。所以sidekick集成了一個功能強大的左側欄。
左側欄集成了一些常用的web應用。點擊即可打開web應用。默認情況下，web應用不出現在右側標簽欄。以主界面標簽的方式打開。
啟動了的web應用，左側會有小標記，類似mac的dock欄。
右鍵可以看到一個功能菜單?？梢钥焖偬砑硬煌馁~戶，進行簡單設置?？梢钥吹?，sidekick的左側欄主要作用是改善web應用的體驗，而非對標簽組進行整理。
sidekick設計主要是解決web應用的體驗問題。
結論：sidekick的左側欄便于切換，對于web應用兼容性好， 還提供了便捷的賬號管理。是主流用戶比較容易接收的方案。但對于多標簽的整理這方面較弱。
②sigma
另外一款國外的工作瀏覽器sigma目前不算太成熟，但是主打標簽組管理，也成功出圈了。
sigma允許用戶展開一個左側欄，并在左側欄進行分組管理，可以自定義分組，設置圖標，隨時切換標簽分組。
結論：
左側欄切換標簽組的方案，提升了標簽管理能力。也引入了新的問題，當左側欄被收起來的時候，僅通過圖標記憶，仍然存在難度。而展開后，占據較多的屏幕空間，不適合小屏幕使用。
sigma并未對web應用進行針對性優化，主要還是標簽組管理，功能較為單一。
③Safari
本來主流瀏覽器對標簽分組都是有不同程度的支持的。chrome有標簽組的實驗室功能，開啟后，可以在標簽欄增加分組。但是擁擠的頂部欄本身空間有限，在這里進行管理會比較局促。
伴隨著MacOSMonterey的發布，新版本Safari加入了緊湊模式，同時加入了標簽組的功能。
新版本的Safari可以開啟左側欄，可以對標簽頁組進行管理，任意添加分組，并保持分組的獨立性和持久性。關閉瀏覽器仍然后，下次打開依然可以快速打開這個標簽組。
結論：
Safari的標簽組整體體驗不錯，也支持跨平臺。體驗也比較簡單，無需安裝瀏覽器插件，無需開啟實驗室功能，使用成本低廉。
二、整理總結提煉方案
基于step1的方案，初步整理思維導圖如下：
基于左側欄與基于標簽欄的方案，進行提煉后，考慮到不同的屏幕尺寸以及用戶結構感知。初步認為左側欄更符合切換的結構認知。形成如下的布局模式：
這樣的方案也被蘋果接受，充分說明其可行性。
至于產品形態方面，如果是在5-10年前，基本只能以瀏覽器插件的方式實現。然而現在的開發環境下，已經有一些小眾開源的瀏覽器產品，基于chromium的開發生態也逐步完善，所以開發獨立瀏覽器產品已經成為可能。
使用瀏覽器插件模式，畢竟存在很大的局限性，未來的擴展性、性能的優化等方面都將存在問題。綜合之后，選擇獨立瀏覽器。
那么，如何將網頁應用與標簽組管理融合在一起，形成一個健壯有效的方案呢？
一款有特色的網頁應用管理產品station出現在了我的眼中，通過對station的研究，總結提煉了一個最終解決方案。
station是一款高效管理web應用的產品，旨在讓用戶無需安裝各種web網頁客戶端，只需要以一個小應用的方式接入即可。
其左側欄設計和sidekick很類似，但是station更加激進，砍掉了瀏覽器功能。只保留了服務于web應用的基本瀏覽功能。
station的左側欄方案以及應用商店的概念也很不錯。
通過商店對web應用進行歸類整理，用戶只需要搜索并添加應用即可。station是開源免費的，而sidekick是收取訂閱費的。如果僅僅使用web應用，其實station也足夠了。
三、形成成熟的方案
綜合了一些市面上常見的方案后，通過繪制原型圖，以及對這些不同方案的產品進行試用，總結其使用不便的方面。最終確定產品方案。
關鍵詞：左側欄，小程序
對前文的左側欄進行小幅度修改，將上方置頂區取消，更改為應用區。
為了兼容大小屏設備，提供左側欄的折疊、展開、自動三種模式（未來甚至還可以拓展到獨立于主界面，側吸到屏幕左側，方便隨時呼出）
寬度設置為45個像素，通過犧牲45個左右常駐尺寸換取更加容易理解的標簽組和工作區切換入口。
標簽組采用應用原圖，以第一個應用的圖標作為分組圖標，減少用戶的認知和操作成本。
應用則采用圓形帶線框圖標與傳統網站logo進行區分。從視覺上產生較大差異。
同時使用運行色與非運行色區分。最終得到效果如下：
當鼠標移動到標簽上的時候，通過懸浮窗快速預覽組內標簽，抵消由于區隔了標簽而造成的使用不便。降低用戶的學習成本。
用戶可以直接點擊分組標題進行編輯，直接點擊其中多標簽切換，也可以鎖定標簽，防止被誤關閉。
瀏覽器關閉的時候，保留全部的標簽，以便用戶下次訪問恢復工作區。
當用戶鼠標移動到應用上時，出現應用的界面截圖。這樣用戶可以快速預覽其中的應用狀態。
為了改善web應用的使用體驗，增加了沉浸式的主題色、獨立的窗體、應用打開自啟動等功能。
同時攔截了應用的自彈窗，改為在窗體內打開。
為了方面應用的安裝管理，增加了一個應用管理功能。
鼠標移動到應用管理圖標上的時候，出現全部運行中的應用，可以進行設置或者關閉。
點擊應用管理圖標，展開快速啟動應用的面板。這里的設計參考了微信小程序。
增加了應用搜索功能，支持中文拼音。
最后一個問題就是如何安裝應用了。
station等產品采用應用中心模式。
這方面我們也提供了一個收藏夾的功能，在里面內置了應用導航，放了一些常用應用，可以一鍵安裝。同時支持用戶在瀏覽網站的時候一鍵安裝到應用。
安裝完成后，應用會自動啟動。這樣用戶就能夠很好地分辨新安裝的應用。
由于獨立窗體的存在，分屏模式下，也可以方便地將文檔類應用放到擴展屏上，實現隨時閱讀文檔的功能。為了方便應用使用，我們在標題欄上添加了返回、前進、刷新和回到起始頁（首頁）的功能。
四、寫在最后
在功能的設計的時候，我們往往需要參考大量的競品，通過對競品的不斷研究和體驗，找到真正好用的解決方案。
同時也要考慮分析不同方案的使用成本、用戶學習成本，不論是空間還是時間都需要進行妥協。每一種方案都有其優劣性，當無法做決定的時候，可以考慮使用配置選項的方式，讓用戶自行決定。
作者：短說社區-奕瀟，短說社區產品經理，想天瀏覽器產品經理。
本文由@短說社區-奕瀟 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
側面獨立窗口好像更美觀
增加上標題欄主題色之后也非常不錯。
在功能的設計的時候，我們往往需要參考大量的競品，通過對競品的不斷研究和體驗，找到真正好用的解決方案。