V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
catfan
V2EX  ›  分享创造

Gear 浏览器里程碑升级到 v3.0,带来全新的自适应黑暗模式算法

  •  1
     
  •   catfan · 2020-10-13 05:51:17 +08:00 · 5924 次点击
    这是一个创建于 1513 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Gear Browser v3

    Dark Mode,黑暗模式

    虽然目前很多桌面软件和 app 都对黑暗模式进行了适配,但是浏览器的黑暗模式却是迟迟没有普遍开来。要适配 app 界面比较简单,都是自身可控的。但是要自动适配互联网上各式各样的的网站却是一个很困难的任务,因为每个网站的设计和配色风格都不一样,除非网站自身为此专门设计了一套新的样式(这样效果最好)。

    目前市面上部分浏览器的黑暗模式解决方案主要是对页面的所有元素进行反色滤镜处理( filter: invert ),虽然此方式简单粗暴,但是效果很差,页面会失去原本的色彩配搭(尤其是图片),并且性能也会受到影响;或者写一套简单的通用 CSS,对元素某些属性进行 override 。但此方式的兼容性有很大的限制,无法判断该元素在页面中的作用,以及呈现方式,导致页面会有各种奇怪的颜色配搭问题;还有一些浏览器直接在 app 上覆盖一层灰色透明图层了事,那效果不说也罢…

    并且以上的所有方式都无法适配那些自身就是黑色风格或者具备黑暗模式的网站,颜色都是固定转换的。

    Gear Dark Mode 2

    Next Gen Dark Mode

    而 Gear 浏览器终于在研究和迭代多次后,终于研究出全新的自适应黑暗模式算法。它会智能分析页面的所有样式,元素在页面的作用与位置的信息,基于颜色 HSL 值,在保留页面的元素色相饱和度情况下,计算出合理的样式。

    例如:
    
    普通情况下元素的 background: #FFF 白色 -> background: #000 黑色。
    
    如果此元素是在页面中是悬浮固定位置的。
    
    则:background: #FFF 白色 -> background: #020202 浅黑
    
    如果此元素是一个按钮。
    
    则:background: #FFF 白色 -> background: #5C5C5C 深灰
    

    并且此算法还会分析整个页面的配色方案,适配那些自身是黑色风格和具备黑暗模式的网站。虽然分析的复杂度提升了好几个指数级,但不会有明显的延迟感觉。


    简单来说,Gear 的新算法不但改善了性能(不使用滤镜),效果(智能生成)和兼容性(适配所有网站)上都比以往有了质的提升。并且,你也可以直接使用网站自带的黑暗模式或者访问黑色主题的网站,并不会导致样式冲突。能让你在夜间环境下,以更舒适的亮度来阅读和浏览网页,进一步保护眼睛。


    Gear v3.0 版本不但带来了新的黑暗模式算法,还大幅度调整和改善了界面风格,强化了控制台和油猴脚本的功能,并适配 iOS 14 (可以设置成默认浏览器了),希望大家用得愉快。接下来还会不断有为 iOS 14 设计的新功能提供,敬请期待。

    PS:目前新的自适应算法只是第一版,并不够完美,在未来还会不断更新,预计还能把效果再提升几个档次。


    官网:https://gear4.app

    App Store: https://apps.apple.com/cn/app/gear-browser/id1458962238?ls=1

    21 条回复    2021-11-02 18:21:22 +08:00
    wzw
        1
    wzw  
       2020-10-13 05:53:18 +08:00 via iPhone
    还不如增强脚本方面,毕竟这是特色
    catfan
        2
    catfan  
    OP
       2020-10-13 05:57:47 +08:00
    @wzw 脚本方面的功能一直都在增强和改进。(可查看我们的更新历史)
    cyitao
        3
    cyitao  
       2020-10-13 08:25:28 +08:00 via iPhone
    使用 gear 看帖子中。
    gear 有两个地方比较违反我的直觉。

    一个是上下菜单栏的自动显示和隐藏,当我向上滑动隐藏了菜单栏以后,想要向下滑动显示菜单时,要等滚动结束以后才会显示。而不是像 Safari 一样,一开始向下滚动就立刻显示菜单栏。

    第二点是当我打开一个网页,然后点击菜单中间的按钮显示所有 tab,然后点击小房子按钮回到主页,这时候 tab 数量显示的还是 1 。按我的理解,此时应该是打开的网页+home 页=2 。

    最后,暗黑模式很赞。现在基本晚上用 gear,白天用 Safari 。
    catfan
        4
    catfan  
    OP
       2020-10-13 10:35:40 +08:00
    @cyitao 这个滚动设计是让快速上下文滚动定位的时候,上下菜单栏不会弹来弹去(用户粗略定位的情况),依然保持隐藏。只有在结束滚动,才会去触发判断下拉滚动是否需要展示菜单栏(用户需要准确定位的情况)。

    标签页这样的设计是避免打开过多空白 Home 标签。你可以把它理解成永远只有一个 Home 页面 + n 个标签页,点击标签管理页的小房子按钮就是回到 Home 页,逻辑和 iOS 桌面相似(永远只有一个桌面,但可以在桌面打开 n 个 app )。这样可以减少不必要的内存损耗,让每个标签都必定展示页面。目前其它浏览器那种新建空白 Home 标签页的设计其实是没有意义的,会经常开了一堆这样无意义的标签,还要手动去逐个清理。
    Echoldman
        5
    Echoldman  
       2020-10-13 11:07:56 +08:00   ❤️ 1
    坐等 Android 版
    catfan
        6
    catfan  
    OP
       2020-10-13 12:27:29 +08:00
    @Echoldman 未来也许会有的,但目前还是 iOS 为主。
    SingeeKing
        7
    SingeeKing  
       2020-10-13 12:31:28 +08:00
    是否可以添加对某些网站关闭暗色模式?
    catfan
        8
    catfan  
    OP
       2020-10-13 13:18:52 +08:00
    @SingeeKing 目前没有此功能。不过新算法都是自适应的了,而且切换黑暗模式其实也就只需要两个步骤而已。
    headwindx
        9
    headwindx  
       2020-10-14 12:38:55 +08:00 via iPhone
    黑暗模式,还是火狐好用一些
    catfan
        10
    catfan  
    OP
       2020-10-14 17:59:06 +08:00
    @headwindx Firefox 使用的是反色方式,会导致部分颜色失真,例如会把红色转换成橙色。对比度也过高,不太利于夜间阅读。可以试试都访问煎蛋网( jandan.net ),便能有明显的对比。
    wdhwg001
        11
    wdhwg001  
       2020-10-16 03:30:14 +08:00
    希望可以滑条调整夜间模式的对比度。

    另外一些菜单文字和图标的对比度在夜间模式下不统一。

    以及,WebView 有右滑白屏的 Bug,是这样的:当上一页面离开时的 WebView 高度和当前的 WebView 高度不一致的时候,右滑会出现白屏,这里需要单独对这个 WebView 的 Bug 做调整。

    还有一些界面交互上可以明显看得出想学 ios,但是却在许多小的地方是反直觉的,比如阅读模式下滑不能关闭,比如一个有 Grip 的设置栏不能上下滑等等。

    另外基于私心,我比较希望地址栏编辑时可以左右拖拽滚动,并且拥有语法高亮。
    catfan
        12
    catfan  
    OP
       2020-10-16 07:58:35 +08:00
    @wdhwg001 谢谢这么详细的反馈。

    某些颜色对比度都是算好的,不好调。不过推荐直接从屏幕中拉出 control center,在里面调整手机屏幕亮度会更方便。

    WebView 白屏主要是内存中的内容被清理,layer 需要重绘的问题,没有直接设置该颜色的属性。这个涉及到 WebView 核心的一些东西,不太好处理。未来会进一步研究。
    wdhwg001
        13
    wdhwg001  
       2020-10-16 13:54:27 +08:00 via iPhone
    @catfan 我是说右划的时候看不到上一页的预览的问题。如果点击链接前顶栏是缩回去的,点击后又打开了,那么前后 webview 高度不一致会使得右划无预览。
    catfan
        14
    catfan  
    OP
       2020-10-20 01:11:29 +08:00
    已小幅更新到 v3.0.3,黑暗模式算法小度强化。
    justNoBody
        15
    justNoBody  
       2020-10-21 18:16:35 +08:00
    能不能改个名字 四川人觉得 Gear 不好读 😂 容易被误解是脏话, 类似罗永浩老师的锤子
    catfan
        16
    catfan  
    OP
       2020-10-21 19:35:35 +08:00
    @justNoBody 这本来是英文啊,很难兼顾所有地区的读音...😂

    Gear 本身意思为齿轮、工具、装置等,而且读音类似 Geek

    很多游戏名字也是用它:
    Metal Gear Solid - 合金装备
    Guilty Gear - 罪恶装备
    Gears / Gears of War - 战争机器

    无主之地的开发商叫 Gearbox

    著名汽车节目 Top Gear

    还有很多...是相当正派且猛男的名字
    justNoBody
        17
    justNoBody  
       2020-10-21 22:01:38 +08:00
    @catfan 是我的问题, 去查了一下 Google 翻译, 应该是读 “给尔” 误解了误解了
    stkstkss
        18
    stkstkss  
       2021-06-23 10:48:29 +08:00
    支持 刚使用 ablook 可以丢了
    HandSonic
        19
    HandSonic  
       2021-11-02 17:28:43 +08:00
    请教一下作者,Gear 安装过的油猴脚本如何管理,比如禁用,启用,更新,删除之类的,我在设置里找了半天也没找到
    HandSonic
        20
    HandSonic  
       2021-11-02 18:11:00 +08:00   ❤️ 1
    找到了,必须要打开一个网页才有,主页里面的设置没有😂
    catfan
        21
    catfan  
    OP
       2021-11-02 18:21:22 +08:00
    @HandSonic iPhone 的话,访问任意网页,点击在页面右下角的菜单,右划进入高级菜单,在右下角选择「插件」进入插件管理器便可管理、更新、甚至编辑和创建插件。

    iPad 则是点击右上角的菜单进入。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1063 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 19:19 · PVG 03:19 · LAX 11:19 · JFK 14:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.