不是技术的创新,却是交互的颠覆

Arc Tech Sharing

注意事项

本文使用 Craft 编辑, 这里 阅读体验更佳

第一次使用时,打开增强模式

Arc 与 chrome 用的是同一个内核,可以无缝转移插件


布局

不同于 chrome 的上下布局,Arc 选择了左右布局,并将侧边栏分为 Favorites 、 Pinned tabs 、Today tabs 三个区域。

左右布局在屏幕横向区域充裕的桌面端能完整显示 document.title ,而且不会占用有限的纵向空间,无疑是十分合适的。

Arc 着重宣传的就是他们解决了传统浏览器标签页混乱问题,那么具体是通过什么方式来解决的呢?

Today Tabs

首先,在 Arc 中一个重要的概念就是 Archive,也就是归档。Today tabs 所有的标签页以及网页都在默认在 12 小时后归档,而且无法彻底阻止这种行为,最多可以在设置里调整为30天

当然你也可以手动进行手动归档,归档以后所有的标签都可以在 Archive tabs 中找到

并且 Arc 还做了一些很细节的地方让我们尽量少打开一些标签页,例如

  • 当我们在网页打开一些链接时,并不是直接新建一个标签页,而是一种浮窗预览模式,
  • 对于外链打开,会直接新建一个 little arc 窗口, 让我们自己选择是否在当前窗口打开
  • 通过 ⌘ + T 直接打开新的标签页,避免无意义的空白标签页

Pinned Tabs

当然,我们有些时候想避免标签页被归档,这个时候我们就需要 Pinned Tabs。

Pinned Tabs 类似于我们的标签页,但是又有一些不同

这 Arc 这种纵向布局中,我们能更好的组织多级标签,毕竟这样更有树结构的感觉

同时为了避免层级过深后,不能及时找到想要的标签页。在根目录收起的状态下,我们可以用 hover 触发搜索

想要收藏或者取消收藏一个标签页,我们只需要在当前标签页按住 ⌘ + D,或者直接拖拽标签页进行操作。

与传统收藏标签不同的是,我们可以反复添加同一个网页为 Pinned Tabs 这意味着我们可以按照团队的工作流来组织标签。以我们的工作流为例

  1. 在 JIRA 上建立任务卡,创建远程分支
  2. 拉取远程分支,上传任务代码后去 GitHub 提交 Pull Request 请求
  3. 去 slack 发送 pr 通知,进行 codeReview 以及测试
  4. 通过验收后去 GitHub 合并 pr

PS: 一个小技巧,Pinned Tabs 名字如果设置英语可以更快被搜索到

Favorites

相较于 Pinned Tabs , Favorites 更加类似于 docker 栏。在这个区域内收藏的网页会常驻你的后台。并且如果收藏的是以下网站的话还会有一个很好用的预览功能

  • Gmail, Outlook
  • Google Cal, Outlook Cal
  • Github
  • Notion
  • Figma
  • Linea

Space + Profile

  • Space 是一个很常见的概念,在 Arc 中 Space 的设计能更好的避免我们收藏标签的混乱。
  • Space 的创建很简单,侧边栏加号点击 New Space 以后就可以创建一个新的空间。
  • 同一个 Profile 的 Space 仅会共享 Favorites , 而 Pinned Tabs 和 Today Tabs 是独立的。
  • 这意味着你可以通过 Space 把工作,生活,娱乐等标签页区分开来
  • 可以新建 Profile 来实现不同的空间,同一个网站,登录不同的账号

浏览器新的打开方式

介绍完 Arc 最有特点的侧边栏,我们再来聊聊 Arc 的slogan , Meet the internet again

在我看来,Arc 的野心就是把浏览器打造成一个操作系统。

⌘ + T

⌘ + T 是 Arc 中最重要的一个快捷键。如果你是 Raycast 或者 Alfred 的重度使用者,这种将命令行作为系统入口的启动方式你一定很熟悉

在这里,你可以搜索你任意一个收藏或者打开的标签、已经归档的历史、直接打开一个新的网站,或者在谷歌中搜索你想要的内容, 一切都是这么简单,快速

分屏

分屏也是 Arc 中很好用的一个功能, 无须借助 Rectangle 或者 Magnet 等工具,我们也能很好的完成浏览器分屏

⌃ + Tab

与 ⌘ + Tab 一样,Arc 中也有一个一个快速切换当前窗口的快捷键,也就是 Control + Tab。

专注模式

当我们把侧边栏收起来时(⌘ + S ), 整个网页就相当于做成了一个 PWA,特别是 Arc 还做了一些细节上面的小处理,在网页头部空白处我们可以直接像原生 App 一样拖拽,很有意思

一些额外的功能

Arc 除了上面交互方式的创新以外,还有一些额外的小功能

boost

上面两个地方都可以打开 boost ,boost 显著降低了修改前端页面门槛,而对于专业的开发者又给予了自由发挥的空间

此外, 虽然现在生态还不是十分丰富。 Arc 为 boost 做了一个 Gallery, 用来分享自己的 boost

Easel + Note

Easel 和 Note 是 Arc 中提供的画图以及记笔记功能,有一个很好用的地方就是配和 Arc 自带的 Caption portion (截图) 功能,当我们看到某些网站的组件或者动效很惊艳的时候,我们可以截图下来保存到 Easel 后分享。

总结

除了上述功能以为, Arc 还做了很多细节的地方优化使用体验,例如 ⇧ + ⌘ + C 快速复制当前网址,便捷打开开发模式等等。

Arc 虽然在技术上不是绝对的创新,但是交互以及细节绝对可以算得上颠覆的存在,希望大家有机会都可以体验一下 Arc

相关推荐
weifont4 分钟前
自动化抓取和上架商品:能不动手,就少动手
运维·前端·自动化
米柆9 分钟前
HTML5 audio /video 完整事件监听模板
前端·html·html5
IT_陈寒36 分钟前
Vite热更新失效?你可能也踩了这个坑
前端·人工智能·后端
程序员大阳1 小时前
副队长CSS教程(30)–CSS Grid 实战:实现复杂自适应表单布局
前端·css·自适应·grid·表单
Csvn1 小时前
微前端实现
前端
Chrischaan2 小时前
做 AI 塔罗小程序时,我为什么不让大模型自己抽牌:一次上线复盘
前端
骑着蜗牛撵大象3273 小时前
LangChain 工具调用从声明到闭环:给智能体接上真实的手脚
前端
数据掘金3 小时前
百度统计后台页面数据异常?从手动调用时机开始排查
前端
hunteritself3 小时前
10 层 4K 实时剪辑,国产工作站进入广电制作核心
大数据·前端·人工智能·深度学习·transformer
踩着两条虫3 小时前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js