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

Arc Tech Sharing

注意事项

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

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

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


布局

不同于 chrome 的上下布局,Arc 选择了左右布局,并将侧边栏分为 FavoritesPinned tabsToday 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 是一个很常见的概念,在 ArcSpace 的设计能更好的避免我们收藏标签的混乱。
  • Space 的创建很简单,侧边栏加号点击 New Space 以后就可以创建一个新的空间。
  • 同一个 ProfileSpace 仅会共享 Favorites , 而 Pinned TabsToday Tabs 是独立的。
  • 这意味着你可以通过 Space 把工作,生活,娱乐等标签页区分开来
  • 可以新建 Profile 来实现不同的空间,同一个网站,登录不同的账号

浏览器新的打开方式

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

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

⌘ + T

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

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

分屏

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

⌃ + Tab

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

专注模式

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

一些额外的功能

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

boost

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

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

Easel + Note

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

总结

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

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

相关推荐
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2136 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy6 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js