🔥 热搜 🔥
百度今日热点微信公众平台贴吧opggdnf私服百度贴吧知乎dnf公益服百度傻逼
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
百度今日热点微信公众平台贴吧opggdnf私服百度贴吧知乎dnf公益服百度傻逼
分类
社会娱乐国际人权科技经济其它
查看原文
其他

B 端设计师，都要试用一下 Arc 浏览器

CE青年 CE青年Youthce 2023-04-07
收录于合集
#浏览器 1 个
#设计师 3 个
#全部文章 71 个


「一个打破常规设计的浏览器」

浏览器真的非常难设计，一方面我们日常的工作生活根本离不开它，比如：你做设计，需要打开 figma 网页、你找灵感，需要打开 Pinterest 、你创建文档，需要打开 notion 来进行书写。
另一方面又会觉得浏览器就应该设计成这样，比如 顶部的地址栏、右侧的个人设置、下方的内容区域。
如果让你重新设计师一个浏览器，让你对它进行设计改版？我相信很多同学都会十分迷茫。（类似的问题，在同学面试字节时也被问到过）

今天我们就来说说一款全新的 浏览器：Arc，以及它对 B 端设计师都有哪些启发。

Arc 浏览器的介绍

第一次了解到 Arc 是源自一个视频，以及他们的 slogn 「Paint the internet」

随后看到了他们的公司官网，非常有意思
这让我非常的好奇，都 2022 年了，还有人会做浏览器？

因为在浏览器这个赛道当中，已经很久没有出现新的产品去打破传统，通过 statcounter 给出的数据我们不难发现，Chrome 占据着王者的地位，而其他产品，也几乎采取着和 Chrome 同样的交互方式，这也就让我不免好奇，Arc 到底厉害在哪里？
在打开浏览器的那一刻，我就发现它的不同，接下来我们会从：页签、
布局、新手引导、场景设计 四个维度来进行分析。
（PS：因为是设计师，所以我们不去讨论什么 “浏览器内核、内存占用” 等话题）

页签调整

页签，是我在使用浏览器时最为头疼的点。
因为现在大多数社畜，每天的工作都是从浏览器开始的，浏览器本身已经被赋予更多的功能与使命，我们日常使用浏览器时，你会发现会打开各种页签，以至于最终页面就是混沌不堪。
「如果你得浏览器也混沌不堪，记得文末点个赞~」
作为浏览器的设计人员，其实也早已发现了这个问题。
Chrome 在多个版本的更新当中，都试图通过设计来解决这个问题。
同时其他浏览器也针对这一问题，纷纷给出了自己的解答
Edge 浏览器给到的 垂直页签、Safari 的标签页组
你会发现这些情况的出现，代表着我们确实需要赶紧解决这个问题。
而这次 Arc 浏览的改变，是将页签从顶部迁移到了左侧，并且赋予了很多新的功能。
通过这样的改变，我们来看看会有哪些好处：

1.空间的更合理利用：这个观点我在文章当中讲过多次，作为一个桌面端的设备，我们一定要考虑屏幕当中的横纵空间，明显 横向空间会更多（宽屏）因此我们需要更多利用横向的空间，因此 侧边导航 则更推荐进行使用。
这个观点可以通过 figma、sketch 等软件的布局设计了解到。

2.鼠标滚动 查看更多页签：多页签的场景，在之前的浏览器我们只能通过 分组、固定 来解决，并且在浏览页签时，我们大多数情况是 阅读 的场景，因此比起之前我们只能通过图标找内容，现在我们可以通过鼠标滚动来进行获取。这样每个页签的标题才会有他的发挥作用。

3.分组设置更为合理：虽然 Chrome 上很早就出现了分组，但是横向分组的逻辑给人的感觉就是特别的别扭，通过颜色进行强行分割
纵向上，设计师就可以通过树型来展示对应的层级关系，相对更加明确。
当然 如果只是纵向的页签，其实很多浏览器也能做到（比如 Edge Safari beta）但是其难点在于，整体的布局，Arc都做了相应调整。

布局优化

上面是 Edge、Safari 打开垂直标签时的样子，下面是 Arc 浏览器的整体布局。

不得不说，Arc浏览器在布局上是下足了功夫。首先 Arc 将 页签、操作、地址栏、自定义展示、个人设置、账号 等页面全部集成到左侧，同时进行合理布局。
操作放在右上角，充分利用顶部空间，同时地址栏、页签紧随其后。

个人设置、账号 则被迁移到设置栏当中。同时在设计上，又深入思考，比如地址栏，本身空间不大，因此通过 气泡卡片 来进行输入，这样能够保证用户查看地址的完整性。
同时在地址输入后，它的最大功能便是复制网址，因此我们可以快速点击复制，就能够达到目的。
这或许就是设计师在去考虑用户使用的场景时，它的所有思考，这部分真的不错。

同时关于页签过多的情况，Arc 也做了相应的优化。

1.置顶页签
2.工作区
3.分类页签

其实上面三种思路，也是我们在面临数据过多时需要做到的，今天这篇文章就不啰嗦了。

新手引导

因为 Arc 它具备颠覆般的交互模式，所以一定需要一个合理的新手引导给到用户。
在 Arc 浏览器当中，新手引导的交互分为两类：

1.系统引导
主要介绍左侧的页面交互，因为本身存在 收藏、置顶、今日标签 三种完全不同的交互概念，因此通过新手引导的方式，能让用户快速熟悉。
而引导方式有点特别，鼠标 hover 过后，提示界面信息，这部分大家就看看动图。
2.模块引导
一些小的模块，Arc 浏览器也会进行相应引导，毕竟交互创新过多，肯定需要多多的帮忙才行
（好像还没写过新手引导应该怎么做，果断放进话题库list）

场景细分

其实我们在日常使用浏览器时，还会有很多特定的使用场景，而考虑到了这些点，确实值得点赞。

分屏

在使用浏览器的过程中，我们经常这样打开浏览器进行分屏。而现在 Arc 浏览器，只需要在右上角点击图标，就可以快速实现分屏页面。

清除页签

分割线其实在我们日常的页面设计当中非常常见，我认为 Arc 厉害的地方就是能够将页面当中的设计进行交互的汇总。比如分割线，就可以与清除所有页签进行绑定，进而让其交互更方便。

我的感受

当我身处在设计行业当中，我真的非常乐意看到有很多产品的更新。因为大家都知道它不是最完美的，也希望能够有更多破壁者来去改变。
行业里面也曾有很多类似的产品，比如 Facebook Paper、Path 一样，会逐渐消失，但设计本身，就应该需要创新。
至于设计的创新，我认为很多地方都能够打动我，后续我可能会将其保存到电脑当中，虽然不会是主力浏览器（因为性能原因），但是也会仍然进行使用。



本周六晚上 8:30 ，会有一节 B 端交互设计公开课，主要讲《B 端竞品分析应该如何做》，与其他设计师的观点不同，会分享一下我是如何 查看分析近 300+ 竞品的具体思路。会在 B 站进行直播~ 大家可以扫码进行预约，也可直接 B 站关注 CE青年

如果想要系统性的学习 B 端设计，了解更多产品的使用特点，不妨尝试我们的第七期 B 端课程，课程受到很多同学的一致好评，可以扫码了解详情。为 2023 年开一个好头~
课程详情

您可能也对以下帖子感兴趣

文章有问题？点此查看未经处理的缓存