如何从零开始设计一个高效的浏览器左侧栏?

发布时间:2022-02-06编辑:admin

  src=绝大多数的互联网从业人士都无法避免长时间,高强度地使用浏览器产品。在使用这些浏览器产品的时候,我们往往会遇到这样的问题:

  当关闭浏览器的时候,会清空全部的标签,从而形成内存式的使用习惯,恢复工作区作为一个简单而繁琐的动作,每天被低效执行。

  本文基于一款定位为团队协作的浏览器的左侧栏设计路线来阐述如何从分析竞品到最终选型确定方案,以及如何执行。

  国内浏览器近几年发展缓慢,基本没有大的突破性创新,暂时没有太大的参考性。主流浏览器为了兼顾主流用户的使用习惯,并未引入标签组管理。

  目前浏览器插件方面,对于标签组的管理基本围绕着浏览器提供的 api 展开。找寻一些方案之后,了解了 workona 这款浏览器插件。

  少数派有一篇关于 workona 的文章,是付费文章。由于 workona 国内有墙,无法直接访问,注册也挺麻烦的,需要一些技巧。注册账号后体验。

  src=由于这个产品包含插件和应用界面两部分,展开篇幅过大。直接说结论:

  基于插件的使用门槛较高,有一定的安装门槛。基于 chrome 自带 api 的分组切换有一定的局限性。墙外的世界很精彩,但是国内环境下无法使用。

  总体来说,通过工作区的划分,确实解决了标签栏的问题,但是由于是独立页面,切换过于繁琐。

  比较有名的 sidekick。这里提一嘴如何搜索国外的独立产品。国外有一个 ProductHunter 的网站,上面可以搜索很多潜在竞品。并且 PH 本身也有一个比较好的开发者社区,可以看到开发者与用户的互动。此外还有投票等方式进行产品质量的筛选。

  sidekick 算是比较有名的工作浏览器了,在国外很重视 web 应用。所以 sidekick 集成了一个功能强大的左侧栏。

  src=左侧栏集成了一些常用的 web 应用。点击即可打开 web 应用。默认情况下,web 应用不出现在右侧标签栏。以主界面标签的方式打开。

  启动了的 web 应用,左侧会有小标记,类似 mac 的 dock 栏。

  src=右键可以看到一个功能菜单。可以快速添加不同的账户,进行简单设置。可以看到,sidekick 的左侧栏主要作用是改善 web 应用的体验,而非对标签组进行整理。

  结论:sidekick 的左侧栏便于切换,对于 web 应用兼容性好, 还提供了便捷的账号管理。是主流用户比较容易接收的方案。但对于多标签的整理这方面较弱。

  另外一款国外的工作浏览器 sigma 目前不算太成熟,但是主打标签组管理,也成功出圈了。

  src=sigma 允许用户展开一个左侧栏,并在左侧栏进行分组管理,可以自定义分组,设置图标,随时切换标签分组。

  左侧栏切换标签组的方案,提升了标签管理能力。也引入了新的问题,当左侧栏被收起来的时候,仅通过图标记忆,仍然存在难度。而展开后,占据较多的屏幕空间,不适合小屏幕使用。

  sigma 并未对 web 应用进行针对性优化,主要还是标签组管理,功能较为单一。

  本来主流浏览器对标签分组都是有不同程度的支持的。chrome 有标签组的实验室功能,开启后,可以在标签栏增加分组。但是拥挤的顶部栏本身空间有限,在这里进行管理会比较局促。

  伴随着 MacOSMonterey 的发布,新版本 Safari 加入了紧凑模式,同时加入了标签组的功能。

  src=新版本的 Safari 可以开启左侧栏,可以对标签页组进行管理,任意添加分组,并保持分组的独立性和持久性。关闭浏览器仍然后,下次打开依然可以快速打开这个标签组。

  Safari 的标签组整体体验不错,也支持跨平台。体验也比较简单,无需安装浏览器插件,无需开启实验室功能,使用成本低廉。

  src=基于左侧栏与基于标签栏的方案,进行提炼后,考虑到不同的屏幕尺寸以及用户结构感知。初步认为左侧栏更符合切换的结构认知。形成如下的布局模式:

  至于产品形态方面,如果是在 5-10 年前,基本只能以浏览器插件的方式实现。然而现在的开发环境下,已经有一些小众开源的浏览器产品,基于 chromium 的开发生态也逐步完善,所以开发独立浏览器产品已经成为可能。

  使用浏览器插件模式,毕竟存在很大的局限性,未来的扩展性、性能的优化等方面都将存在问题。综合之后,选择独立浏览器。

  一款有特色的网页应用管理产品 station 出现在了我的眼中,通过对 station 的研究,总结提炼了一个最终解决方案。

  station 是一款高效管理 web 应用的产品,旨在让用户无需安装各种 web 网页客户端,只需要以一个小应用的方式接入即可。

  其左侧栏设计和 sidekick 很类似,但是 station 更加激进,砍掉了浏览器功能。只保留了服务于 web 应用的基本浏览功能。

  src=src=station 的左侧栏方案以及应用商店的概念也很不错。

  src=通过商店对 web 应用进行归类整理,用户只需要搜索并添加应用即可。station 是开源免费的,而 sidekick 是收取订阅费的。如果仅仅使用 web 应用,其实 station 也足够了。

  综合了一些市面上常见的方案后,通过绘制原型图,以及对这些不同方案的产品进行试用,总结其使用不便的方面。最终确定产品方案。

  为了兼容大小屏设备,提供左侧栏的折叠、展开、自动三种模式(未来甚至还可以拓展到独立于主界面,侧吸到屏幕左侧,方便随时呼出)

  宽度设置为 45 个像素,通过牺牲 45 个左右常驻尺寸换取更加容易理解的标签组和工作区切换入口。

  标签组采用应用原图,以第一个应用的图标作为分组图标,减少用户的认知和操作成本。

  应用则采用圆形带线框图标与传统网站 logo 进行区分。从视觉上产生较大差异。

  src=当鼠标移动到标签上的时候,通过悬浮窗快速预览组内标签,抵消由于区隔了标签而造成的使用不便。降低用户的学习成本。

  src=用户可以直接点击分组标题进行编辑,直接点击其中多标签切换,也可以锁定标签,防止被误关闭。

  当用户鼠标移动到应用上时,出现应用的界面截图。这样用户可以快速预览其中的应用状态。

  src=为了改善 web 应用的使用体验,增加了沉浸式的主题色、独立的窗体、应用打开自启动等功能。

  鼠标移动到应用管理图标上的时候,出现全部运行中的应用,可以进行设置或者关闭。

  这方面我们也提供了一个收藏夹的功能,在里面内置了应用导航,放了一些常用应用,可以一键安装。同时支持用户在浏览网站的时候一键安装到应用。

  src=安装完成后,应用会自动启动。这样用户就能够很好地分辨新安装的应用。

  由于独立窗体的存在,分屏模式下,也可以方便地将文档类应用放到扩展屏上,实现随时阅读文档的功能。为了方便应用使用,我们在标题栏上添加了返回、前进、刷新和回到起始页(首页)的功能。

  在功能的设计的时候,我们往往需要参考大量的竞品,通过对竞品的不断研究和体验,找到真正好用的解决方案。

  同时也要考虑分析不同方案的使用成本、用户学习成本,不论是空间还是时间都需要进行妥协。每一种方案都有其优劣性,当无法做决定的时候,可以考虑使用配置选项的方式,让用户自行决定。

导航栏

Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

香港跑狗图沦坛| 六合脑筋急转弯彩图图片| 六和彩开奖记录2019| 香港马会资料小喜图库| 财神牛魔王精准出码| 香港摇钱树心水主论坛| 香港王中王一句中特话| 牛魔王管家婆彩图全年| 红姐红公式心水论坛| 波肖门尾图库7467皇冠|