Kyle Aster 在 2010 年就寫過為什麼認真設計 URL 很重要：
URL 是通用的，它們適用於 Firefox, Chrome, Safari, Internet Explorer, cURL, wget, 以及 iPhone，Android, 甚至便籤。它們是網絡的唯一通用語法，不要把這當作理所當然。
我喜歡這個提醒，讓人意識到 URL 的無處不在。它們不僅僅可以在瀏覽器的地址欄中使用，還可以以多種方式使用：
- 作為腳本和爬蟲等程序化數據檢索的目標。
- 作為參考，在實體書籍的腳註和附錄中打印出來。
- 作為可通過物理介質進行操作觸發的方式，例如可掃描的二維碼或物聯網設備按鈕。
- 和其他！
當我回顧過去遇到過的優秀 URL 設計示例[1]時 - 那些會讓我停下來想「哇，真棒！」- 以下幾個就會浮現在我的腦海中。
Stack Overflow
Stack Overflow 是我印象裏遇到的第一個在滿足計算機和人類需求之間取得了優秀平衡的 URL。
URL 遵循以下模式：
/questions/:id/:slug
:id 是個唯一的標識符，沒有任何透露任何問題的內容。:slug 則是對問題的人類可讀的釋義，讓你能夠理解問題而無需訪問網站。
美妙之處在於 :slug 是 URL 中的可選參數。比如：
stackoverflow.com/questions/16245767
沒有交代關於所提問題的任何信息，但它是一個有效的 URL，可以讓服務器輕鬆地找到網頁。
但 Stack Overflow 也支持 URL 中的 :slug 部分，這使人們能夠快速理解該網頁裏的內容。
stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/
如前所述，:slug 是可選的。服務器不需要它來查找和提供相關內容。實際上，它可以在時間推移中輕鬆被更改而不會破壞 URL（太優雅了！）。
當然，它也可以具有欺騙性。例如，下面是與上述相同的 URL，但指向着完全不同的內容（鏈接還是好的，只是指向的內容和 slug 不符合）：
stackoverflow.com/questions/16245767/how-to-bake-a-cake
嘿嘿，一切都有取捨。
順便提一嘴，Bytebase 的 URL 也採用了類似的方式 👇
Slack
我記得 Slack 推出的一個營銷活動，他們在頁面副本和 URL 中使用了營銷活動的口號「Slack is ...」。
- 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, 而不是連接一系列層次關鍵詞的 URL: slack.com/product/team-communication.
説到在 URL 中做有趣的句子結構。。。
Jessica Hische
Jessica Hisch 在一個 .is 域名下擁有自己的網站（顯然 .is 代表着冰島）。
jessicahische.is
她在整個網站上都使用了這種有趣的第三人稱形式的「我是」。例如，點擊主導航中的 About (關於我) 按鈕，它會帶你到：
jessicahische.is/anoversharer
太有趣了！雖然 mydomain.com/about 也很清晰，但我喜歡用句子結構來描述「關於我」頁面，讓人覺得更有趣。
她主導航中所有名詞都遵循這個模式，並且她個別作品也是如此。就像這篇關於她做過的一個節日烹飪包裝工作的介紹文章，URL 為：
jessicahische.is/sofulloffancypopcorn
有點意思！
URL 作為產品
我一直很喜歡 URL 與其領域語義相匹配的功能。例如，GitHub 的 URL 非常好地映射了 git 的語義 (https://www.quora.com/Which-sites-have-the-best-URL-design/an...)，比如在 git 中進行差異比較：
/: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 上該軟件包的詳細信息頁面。
像 unpkg (https://unpkg.com/) 這樣的 NPM CDN 也遵循了這些語義。想要從已發佈軟件包中獲取某個文件可以這樣：
unpkg.com/:package@:version/:file
在這種情況下，URL 可以是產品本身，這使得其設計變得更加重要[2]。
你喜歡的 URL?
這些是我多年來喜歡使用和看到的一些優秀 URL 示例。我確信還有其他的，也很想知道你最喜歡哪個？歡迎留言分享！
[1] 我在「優秀 URL 設計」方面沒有找到很多好資源。Alex 的這篇文章 相當不錯。我夢想有一個專門展示優秀 URL 的 Dribbble。如果你有想法，url-gallery.com 域名還可用。。。
[2] unpkg 的創始人 Michael Jackson 提到過：「令我驚訝的是，考慮到每個人使用 unpkg 時都要手寫 URL，它竟然如此受歡迎。即便沒有搜索框。」這確實令人驚訝！unpkg 非常受歡迎：2020 年 9 月至 10 月間每月達到了 500 億次請求。
💡 更多資訊，請關注 Bytebase 公號：Bytebase
