[译] 优秀的 URL 设计

本文翻译自 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）