設計師把最常用網站放一起做一個獨一無二的導航頁

來自專欄設計1 人贊了文章

相信大家對網址導航網站並不陌生。這類網站通常將各類網址集合起來，再按照一定條件進行分類。方便各類用戶快速找到自己想要的網站。儘管他們經常和一些軟體捆綁，一些導航網站的口碑並不好，但由於本身具有較高的實用性，長期以來一直霸佔著許多人的瀏覽器主頁。

來看看如何做一個桌面和手機同步的導航網頁。

為什麼要自己做一個導航頁面？

網頁導航為了滿足更多用戶的需求，需要收錄大量網址，導致他們的界面千篇一律。再加上新聞、廣告，看上去免不了有點雜亂。儘管網址導航眾多，但是適配手機端的卻很少。許多手機的首頁導航頁面都是瀏覽器自帶的，不乏充斥著各種熱點新聞推送，很少收錄一些小眾站點。

今天介紹的自製導航網頁則不同，不需要伺服器，不需要繁瑣的操作，你只需安裝一個 Chrome 插件：Infinity New Tab Pro。

Infinity New Tab Pro 本身是一個非常優質的 Chrome 新標籤頁插件，但是它僅支持 Chrome 內核的瀏覽器（官方頁面顯示支持 Chrome、360 極速瀏覽器、百度瀏覽器），其他瀏覽器的用戶只能望而卻步。但是它提供的「生成導航頁面」功能，完全可以用在其他的瀏覽器中。

如何製作導航頁面？

通過 官網 下載並安裝 Infinity New Tab Pro 插件，提供了 Chrome 應用商店 和 Crx 離線下載 兩種下載方式。

在 Infinity New Tab Pro 中可以搜索網頁名稱、添加網頁鏈接，通過這種方式添加的網頁通常會有一個美觀的圖標。

如果在這裡搜不到網頁，你也可以先打開需要添加的網頁，然後點擊右上角的 Infinity 圖標，將該網頁添加到標籤頁中。這裡的圖標默認採用網頁的前兩個字，添加網頁後可以自行上傳圖標。

做完所有的準備工作，你需要註冊一個 Infinity 賬號。點擊右上角的 ∞ 標誌，點擊「我的」，選擇「備份數據」，再選擇賬號右側的手機圖標，會自動生成一個二維碼和一個鏈接。

生成出來的以 http://m.infinitynewtab.com/ 為開頭的鏈接就是你的專屬導航頁了，用手機掃描二維碼，最終得到一個這樣的網頁，你可以把它添加到主屏幕。如果你不確定是否喜歡這個效果，可以先看看我生成的導航頁。

這個頁面除了適合手機端訪問，還可以在任何 PC 瀏覽器上訪問，在 Edge、Safari、Firefox 等瀏覽器中將這個網頁設置為瀏覽器首頁。不過要注意，由於這個鏈接是公開的，盡量不要在這個頁面上放置與隱私內容相關的網頁。

註：評論區反應手機端打開網頁不顯示導航。那是因為這個頁面使用了一些 Google 提供的樣式文件，所以初次打開時會非常慢，等文件緩存到本地即可。

實時更新 + 定製化的導航網頁

我曾經在自己的伺服器上搭建過自己的導航網站，雖然並不複雜，但是距離「美觀又實用」還是有一定距離的，而且每次想添加和修改網址都很繁瑣，對移動端的優化也不簡單，不久就荒廢了。

而 Infinity New Tab Pro 則將用戶的備份數據轉為一個網頁，通過這種方式生成的網頁與 Infinity 賬號關聯，在 PC 端每次修改順序後只要進行一次備份，這個頁面就會同步刷新一次，手機端不需要重新掃描二維碼。無論是使用還是添加都非常直觀。同時保留了 Chrome 中的網頁順序，可以對圖標進行自定義。實現了一個實用、美觀、方便調整的導航網頁，可以算得上是一個實用的方案。