本文翻譯自 Examples of Great URL Design，作者：Jim Nielsen， 略有刪改。

以下是Kyle Aster關於URL的設計為何重要的觀點（2010年）：

URL是通用的。它們可以在Firefox、Chrome、Safari、Internet Explorer、cURL、wget、iPhone、Android中使用，甚至可以寫在便籤上。它們是網絡的一種通用語法，但別認為這是理所當然的。

我喜歡這個關於URL無處不在的提醒。它們不只是用來在瀏覽器欄裏打字的。它們有很多用途：

• 作為腳本的時候抓取數據以及其他編程數據檢索的地址。
• 作為參考，寫在實體書的腳註和附錄中。
• 作為可操作的觸發器，可通過物理介質訪問，例如可掃描的QR碼或IoT設備按鈕。
• ...

當我回顧這些年來我遇到的優秀URL設計的案例時，我停下來想：“哇，這真的很整潔！”，以下是我想到的一些案例：

StackOverflow

StackOverflow是我記得遇到的第一個在計算機和人類需求之間取得良好平衡的URL。

URL遵循這樣的模式：

/questions/:id/:slug

:id是問題的唯一標識符，它不會顯示任何內容。另一個 :slug 是一個人類可讀的問題釋義，讓你理解這個問題，而不需要真正去網站查看。

:slug是URL中的可選參數。舉例來説：

stackoverflow.com/questions/16245767

這個地址不會告訴你關於被問到的問題的任何信息，但它是一個有效的URL，允許服務器輕鬆地找到並提供該問題的內容。

但是StackOverflow還支持URL的:slug部分，這使得人們可以快速理解該URL中的內容。

stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/

如上所述，:slug是可選的。服務器不需要查找和提供頁面真正所討論的內容，頁面內容可以很容易地隨着時間的推移而改變，但不會影響URL地址（我覺得這很優雅）。

當然它也可以被用來欺騙。例如這是與上面相同的URL，但它預示着完全不同的內容（不中斷鏈接）：

stackoverflow.com/questions/16245767/how-to-bake-a-cake

Slack

我記得Slack發起過一場營銷活動，教育人們瞭解該產品。他們使用的營銷活動的語言是“Slack is.”在頁面以及URL中，例如

• slack.com/is
• slack.com/is/team-communication
• slack.com/is/everything-in-one-place
• slack.com/is/wherever-you-are

我對這種將講故事活動的設計帶到URL本身的設計非常感興趣。

從那以後，我總是發現那些試圖形成自然語言句子的URL很有趣，slack.com/is/team-communication，而不是連接一系列層次關鍵字 slack.com/product/team-communication。

這是在URL中使用句子為結構的設計。

Jessica Hische

Jessica Hische的網站在.is域名下（顯然是冰島的）。

在她的網站上反覆使用這種有趣的第三人稱形式的“我是...”。例如，點擊主導航中的“關於”，它會帶您進入：

jessicahische.is/anoversharer

很有意思，mydomain.com/about也很清楚，但我更喜歡描述“關於”的具體事項，並在句子結構中這樣使用。

她的主要導航中的所有名詞都遵循這種模式，以及她的個人作品。就像這篇關於她的一個假日烹飪包裝演出文章的URL：

jessicahische.is/sofulloffancypopcorn

URL作為產品

我一直喜歡那些URL能夠很好地映射到它們的服務。例如，GitHub

/:owner/:project/compare/ref1...ref2

例如

github.com/django/django/compare/4.2.7...main

對於技術產品來説，這種在不需要看到用户界面的情況下瀏覽網站的能力是一種很酷的超能力。

NPM有些類似。想要查看在NPM上的react-router嗎？您無需訪問NPM的主頁並四處點擊，也無需使用他們的搜索框。一旦您熟悉了他們的站點結構，您就知道可以使用以下方法查找一個包：

/package/:package-name

例如

npmjs.com/package/react-router

想要查找包的特定版本？

/package/:package-name/v/:semver

例如

npmjs.com/package/react-router/v/5.3.4

在使用特定產品時，這些快捷方式非常有用。在NPM的情況下，當您在查找package.json並需要查找特定版本的特定軟件包的一些詳細信息時，您可以通過僅僅標識您想要的版本並將詳細信息輸入URL欄來導航到NPM的該軟件包的詳細信息。

NPM的CDN，比如unpkg，也很好地遵循這些語義。想要從已發佈的包獲取一個文件嗎？unpkg的主頁提示按如下格式獲取：

unpkg.com/:package@:version/:file

在這種情況下，URL本身就是產品，這使得其設計變得更加重要。

你喜歡什麼樣的？

這些是我多年來喜歡使用或看到的URL的一些例子。我相信還有其他的，但我很想知道你最喜歡的是什麼？一起分享分享😉

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）