无痕模式

by Patryk Adaś

通过PatrykAdaś

无痕网络导航 (Lossless Web Navigation with Trails)

Since the early 2000’s, the desktop metaphor of tabbed browsing has dominated the way we navigate the web. With Browser.html, a Mozilla Research project aimed at building a browser user interface built in HTML for nightly builds of Servo, we are experimenting with evolving the standard tabbed browser towards a model based on trails.

自2000年代初以来，选项卡式浏览的桌面隐喻主导了我们浏览网络的方式。 通过Mozilla Research项目Browser.html ，该项目旨在为Servo的夜间构建构建使用HTML内置的浏览器用户界面，我们正在尝试将标准的选项卡式浏览器发展为基于轨迹的模型。

The goal of trails is to construct not only a window into web content but a narrative of user activity. Our hope is that our work might help advance the state of browsing closer to the ideal of a tool that enhances our cognitive process, rather than increasing our cognitive load.

Trails的目标不仅是构造一个进入Web内容的窗口，而且是一个关于用户活动的叙述。 我们希望我们的工作可能有助于使浏览状态更接近理想的工具，该工具可以增强我们的认知过程，而不是增加我们的认知负担。

To illustrate the kind of scenario we’re thinking about, we’ll introduce you to our friend Nala.

为了说明我们正在考虑的那种情况，我们将向您介绍我们的朋友Nala。

寻找完美的比萨 (The search for the perfect pizza)

Nala’s scouting out pizza joints. In her traditional, tabbed browser, she sets off with a search (1) that takes her to a page of search results (2).

娜拉正在寻找比萨饼。 在传统的标签式浏览器中，她以搜索(1)开始 ，将其带到搜索结果页面(2) 。

She follows a link to a list of restaurants on Yelp (3), and checks out a promising pizza joint (4).

她跟随一个链接到Yelp上的餐厅列表(3) ，并查看了一个很有前途的披萨店(4) 。

External links on Yelp open in separate tabs, so when Nala clicks a link to a restaurant’s website, it starts a new tab (5).

Yelp上的外部链接在单独的标签中打开，因此当Nala单击指向餐厅网站的链接时，它将启动一个新标签(5) 。

The new tab doesn’t have any history, or any connection to the first tab. All history about how Nala got to the restaurant’s website is lost!

新标签页没有任何历史记录，也没有与第一个标签页的任何连接。 关于Nala如何到达餐厅网站的所有历史都丢失了！

The browser’s amnesia compounds as she goes to look at more options: switching back to the first tab (6) and navigating back to the Yelp results (7), she looks for another restaurant.

浏览器的失忆感随着她寻找更多选项而变得复杂：切换回第一个选项卡(6)并导航回Yelp结果(7) ，她寻找另一家餐厅。

Now when she selects a new restaurant (8), part of the current tab’s navigation history is lost as well:

现在，当她选择新餐厅(8)时 ， 当前选项卡的导航历史记录的一部分也会丢失：

Clicking an external link to the next restaurant’s website again opens a new tab (9), and again severs the connection from the history that preceded it.

单击指向下一家餐厅网站的外部链接，再次打开一个新标签(9) ，并再次断开其前身的历史联系。

To look at the results of her initial search results again, Nala goes back a few steps in the history of the first tab and opens another pizza venue directly from there (10).

为了再次查看其初始搜索结果，Nala回顾了第一个标签的历史记录中的几步，并直接从那里打开了另一个披萨店(10) 。

In this example of a common search scenario, more than a third of the history is lost!

在这个常见搜索方案的示例中，丢失了超过三分之一的历史记录！

Of course, browsers typically provide tools like history views and “recent tabs” menus, but none of these presents a narrative that matches the actual course Nala followed.

当然，浏览器通常提供诸如历史视图和“最近的选项卡”菜单之类的工具， 但是这些工具都没有提供与Nala遵循的实际课程相匹配的叙述。

从标签到足迹 (From tabs to trails)

With Browser.html we are prototyping a user interface that tells not just the fragments of Nala’s history that a tabbed browser preserves (Version 1), but all of it (Version 2):

借助Browser.html，我们为用户界面制作了原型，该界面不仅告诉我们选项卡式浏览器保留的Nala历史片段(版本1) ，还包括所有内容(版本2) ：

But these trees can easily get intricate. What we think matters most is not where each exploration diverged, but the complete path leading to a result. So that’s what we display to the user (Version 3):

但是这些树很容易变得复杂。 我们认为最重要的不是每次探索的分歧之处，而是导致结果的完整途径。 这就是我们向用户显示的内容(版本3) ：

Each row represents a trail from the root of the navigation tree to a result. The benefit is that a trail tells a self-contained story from left to right. On the other hand, duplicates lead to a lot of distracting visual noise. Luckily, that can be removed by focusing on a single trail while folding the others.

每行表示从导航树的根到结果的路径。 这样做的好处是，一条小道从左到右讲述了一个完整的故事。 另一方面，重复会导致很多分散注意力的视觉噪音。 幸运的是，可以通过将注意力集中在单个路径上，同时折叠其他路径来消除这种情况。

This is what Nala would have actually seen:

这是Nala实际会看到的：

制表符和踪迹：相同，但不同。 (Tabs and trails: the same, but different.)

If you ignore the paths leading up to each explored topic, trails are no different from conventional tabs. This is intentional: our goal is to enhance existing user experiences, not to replace them. Users can continue using browsers as they always have. And yet each navigation trail is a tab that tells a complete story from start to finish. This provides us with opportunities to explore further enhancements to the user experience. Here are a few we’re considering:

如果您忽略通向每个已探究主题的路径，则路径与常规选项卡没有什么不同。 这是有意的：我们的目标是增强现有的用户体验，而不是取代它们。 用户可以像往常一样继续使用浏览器。 但是， 每个导航路径都是一个选项卡，从头到尾讲述一个完整的故事。 这为我们提供了探索进一步改善用户体验的机会。 以下是我们正在考虑的一些方法：

• Sharing not just URLs but entire trails.不仅共享URL，还共享整个路径。
• Fading trails as they become irrelevant and eventually moving them off the grid.当它们变得无关紧要时，它们会逐渐消失，最终将它们移出网格。
• Persisting trails in a form as they were during the visit, so that they can be revisited (offline).以访问期间的形式保留路径，以便可以对其进行重新访问(脱机)。
• Allowing annotation of trails so users can record their thoughts while researching a topic.允许注释路径，以便用户在研究主题时可以记录他们的想法。
• Collaborative topic research.合作主题研究。
• Optionally opening pages in a new trail.(可选)在新线索中打开页面。

步道 (The Path To Trails)

The idea of visualizing a user’s journey through the web as a trail is by no means a new one. Even seventy years ago, in his landmark As We May Think essay popularizing the idea of hyperlinked data, Vannevar Bush described a “memex machine.” He envisioned this machine would help us collect and share data through a personal library that would help us leave a trail through our research process.

将用户的网络旅程可视化为一条路径的想法绝不是一个新想法。 甚至在七十年前， Vannevar Bush在其具有里程碑意义的《 我们可能认为》一文中推广了超链接数据的概念时， Vannevar Bush也描述了“ memex机器”。 他设想这台机器将帮助我们通过一个个人图书馆收集和共享数据，这将有助于我们在研究过程中走得更远。

Since then, there have been several attempts to create such a tool, beginning with Trailmeme by Xerox Trails. This concept was continued by Trailblazer by MacWarriors in 2004, currently followed by Trailblazer.io. It’s our hope that by connecting the ideas of trails to familiar tabbed idioms, we’ll build on existing workflows and make the idea broadly appealing. And Browser.html serves as a great test-bed for these ideas.

从那以后，从Xerox Trails的 Trailmeme开始，已经进行了多次尝试来创建这样的工具。 MacWarriors的Trailblazer于2004年继续了这一概念，随后是Trailblazer.io 。 我们希望通过将路径的想法与熟悉的选项卡式习惯用法联系起来，我们将在现有工作流程的基础上进一步扩大想法的吸引力。 Browser.html是这些想法的理想测试平台。

空间模型 (A Spacial Model)

I’m working on a spacial model through various user interactions and animations. This should help users better understand what’s going on and how to navigate the web most effectively.

我正在通过各种用户交互和动画来开发空间模型。 这应该可以帮助用户更好地了解正在发生的事情以及如何最有效地浏览网络。

You can read more about this here.

您可以在此处了解更多信息。

加入我们！ (Join us!)

We’re currently working on building our first working prototype. If this sounds like fun to you, please come check out the Browser.html project! You can find our list of open issues on GitHub, or come chat with us on our Slack.

我们目前正在构建第一个可运行的原型。 如果您觉得这很有趣，请查看Browser.html项目！ 您可以在GitHub上找到我们的未解决问题列表，或者在Slack上与我们聊天。

翻译自: https://www.freecodecamp.org/news/lossless-web-navigation-with-trails-9cd48c0abb56/

无痕模式