我为Android版Microsoft Edge所带来的变化

Posted guolin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我为Android版Microsoft Edge所带来的变化相关的知识,希望对你有一定的参考价值。

本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每个工作日都有文章更新。

掰手指数一数,我入职微软也已经有一年半的时间了。

从入职以来,我一直在从事于开发android版的Edge浏览器。这么长时间下来,我也慢慢从完全不知如何上手,提个PR都困难,到现在能够负责独立开发一个比较大的功能模块了。

不得不说,Edge是我见过的最复杂的一个项目,我是真的很难想象一个浏览器工程可以庞大到如此地步。Chromium本身就已经是一个巨型工程了,而Edge又要在其基础之上加入许多微软定制的需求,那就肯定避免不了一通魔改,代码自然就变得更加复杂。

记得当初刚加入微软不久时,有一些公众号上的小伙伴还跟我提了一些建议,说Android版的Edge有哪些方面体验不够好,问我可不可以优化?

我的回答都是不可以。

说真的,这个项目连让我改个文字颜色我都觉得费劲。没进来之前觉得这多么简单的一个功能啊,进来之后才发现,任何一个看似简单的功能背后牵扯的都是一套庞大的系统。

所以,最初我的想法就是,能完成好分配给我的工作就行了,不去思考额外的事情。

但是,随着受到一些热爱产品体验的同事们的影响,我逐渐意识到Android版的Edge确实存在一些体验上的问题。并且随着我对这个项目的了解程度加深,貌似我是有能力可以去优化一些长期的体验问题的。

一旦有了这个想法之后,很快就会生根发芽,挡都挡不住。后来跟领导反复沟通之后,终于争取到了机会,可以在自己想做的事情上大展拳脚了。

这次我做的改动都是用户明显可以观察到变化的部分。其实我们平时还做了很多工作用户是轻易看不出来的,比如说提升性能,降低崩溃率等等。虽然可能没有那么明显的感知,但确实每个版本的质量都在变好。

那么就来说一说当前Android版的Edge浏览器存在哪些用户体验上的问题吧。

这是你首次安装Edge并打开后看到的界面:

看上去还不错对吗?有搜索框用于搜索内容,有热门站点用户快速访问,有精美的必应每日一图。底部还有新闻资讯,如果想要看新闻的话向下滑动即可。

但是,当你真的想要向下滑动阅读新闻的话,问题就出现了:

你会发现,当你轻轻向下滑动时,是很难滑到新闻区域的,Edge的回弹力度会很大。必须用非常快的滑动,或者滑动比较远的距离才能够成功滑到新闻区域,滑回来也是同样的道理。总之就是让人感觉很不舒服。

这其实就挺影响用户体验的,如果你以前就是Edge Android的用户,不知道有没有被这种不太友好的体验困扰过呢?

据我所知,这是一个长久以来就存在的问题了,至少从我加入Edge时就是这样。并且这东西还很难修。它就属于前面我所说的,没进来之前觉得这多么简单的一个功能,进来之后才发现,这背后真的藏着一个庞大的系统。

我倒是想在这里展开一些技术细节的讨论,但Edge毕竟不是一个开源的项目,讲太多我怕会违反公司隐私方面的一些政策。

简单来说,主要问题的原因集中在搜索框上。因为当你向下滑动查看新闻时,搜索框会跟着进行一个动画联动,从页面中间的搜索框过渡到顶部的搜索框。而这个过程是不可以有中间状态的,也就是说搜索框要么就得顶到最上面,要么就只能回弹回去。

那么为什么说它很难呢?因为这个搜索框关联到了Chromium中一个非常庞大的Toolbar系统。看不懂、改不动是我对Chromium Toolbar的一种常态化认识了。

不过这部分代码倒全部都是开源的,感兴趣的小伙伴可以去瞧一瞧:

https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/android/toolbar/java/src/org/chromium/chrome/browser/toolbar/top/ToolbarPhone.java

除此之外还有什么用户体验上的问题呢?

这个可能需要考一考你的眼力了,当你想要去搜索什么东西的时候一定会点击搜索框对不对?那么点击之后的效果如下所示:

有没有看出什么问题?

没有的话很正常,因为我也一直没看出,我们很多的同事都没有看出。

但是当我将动画进行5倍速慢放的时候,我们再来看一遍:

在5倍慢镜头下,一切都是那么的明显。

这根本就是个Bug嘛。

有趣的是,当你知道有这样一个Bug之后,再回去看之前一倍速的效果图,你会发现这个点击搜索框的动画效果简直不能忍受。

至于这个Bug是如何出现的我就不在这里说了,这是我们团队内部的事情。比较讽刺的是,这个Bug在Android版的Edge上已经存在挺长时间了,但却鲜有人发现并指出这个Bug。我也是受到团队内一些热爱产品体验的同事们影响,才认识并正视了这个长期被忽视的Bug。它确实也是很影响用户体验的。

不过这个问题相比于刚才第一个问题就好修太多了,待会我会带大家看一看修复之后的效果。

接下来,你觉得Edge的主页还有什么用户体验不友好的地方吗?

我们要不要来看一看这部分:

准确来讲这里并不存在什么Bug,但是有没有觉得就是看上去很别扭呢?

拜托,今年都已经2022年了,Android系统都快出到13了,Edge竟然还没有实现沉浸式状态栏的效果?

有这种想法的小伙伴我不知道人数会有多少,但一定会有。

这个功能对于Edge来说是非常委屈的。如果是在别的App上实现沉浸式状态栏效果我可能分分钟就能搞定,但Edge是基于Chromium的项目,而Chromium并没有支持这项功能。

当然Chromium也完全不需要支持这项功能,因为Google又没有必应每日一图,所以Chrome的首页完全没有违和感:

而Edge的代码基于Chromium,效果又想做出沉浸式的样子,这就比较为难了。

我有专门去评估一下,如果想要让Edge实现沉浸式状态栏的效果需要付出多大的代价,评估下来它的难度比刚才两个问题加起来还要大好几倍。

这个功能的坑点极多,而且越做会发现坑越多。做到中途的时候我甚至怀疑自己到底能不能把这个功能实现,某个天坑蹚不过去可能就让自己前面的努力都白费了。

好在最终的结果是好的,以上提到的所有用户体验问题,都解决了。

现在最新的Edge已经发布到了101版本,这个版本带上了我对前面提到的所有影响用户体验问题的修复。大家现在去各大手机应用市场应该就能下载到Edge 101版本了。

不过,当你安装了Edge 101版本并进入Edge主页之后,你会发现前面我所提到的所有问题,仍然都还在。这是因为目前这些体验性问题的修复默认还是处于关闭的状态,大家正好也可以趁机先操作一把,感受一下我提到的这几点问题是不是都比较影响用户体验。

感受完了之后,下面我来教大家如何体验全新版本的Edge主页。

首先在Edge的地址栏输入edge://flags,你会看到如下界面:

这个界面是Edge用于配置一些实验性功能开关的界面,里面显示的都是目前Edge正处于测试阶段的一些功能。

接下来在这个界面的搜索框当中输入New NTP Experience,如下所示:

然后将这个功能的开关打开,选择Enabled选项即可:

当你选择了Enabled之后,底部会弹出一个提醒告诉你重启浏览器来使开关生效。

一般的实验性功能重启一次就可以生效了,但是我做的这个功能受制于一些技术上的限制,还得再重启一次才能生效。所以请记得,你得在重启之后手动杀掉App,再重启一次才行。

再次重启之后进入Edge主页,你将看到如下的界面:

毫无疑问,最明显最直观的变化就是,Edge主页终于变成沉浸式状态栏的效果了,仅这一点的变化就让App的视觉体验提升了不少档次。

关于沉浸式状态栏的优化我们也得到了一些用户的肯定,因为Edge Canary版是可以先行体验各种新功能的,所以不少用户在Canary版本上已经体验过了,我们得到的反馈也都是正面的。

另外在沉浸式状态栏这个功能当中我还运用了一些小黑科技,不过今天这篇文章不太适合讲技术细节,我准备后面专门再写一篇文章来跟大家讲讲这背后涉及的技术。

第一直观变化的感受体验完了之后,接下来我们可以操作看看了。

刚才有说到,在Edge主页向下滑动去查看新闻时,滑动感受非常差,回弹力度很大。而现在我们可以再试一试滑动的效果:

你将不会再感受到任何的回弹在与你作对,甚至可以用丝般顺滑来形容了。由此用户体验又上了一个台阶。

最后,我们再来看一看刚才那个5倍速慢放的Bug吧。我前面说过,从技术上来讲,这个最容易解决的一个问题,但是从用户体验提升上来说,它也毫不含糊。

5倍慢镜头下,点击搜索框,效果如下图所示:

各种动画的细节在慢镜头下一览无余,之前那奇怪的动画效果已经不复存在了。

然后我们再看看正常一倍速的效果吧:

体验方面的提升还是相当明显的吧?

好了,这些就是在最近几个月时间里,我为Android版Microsoft Edge所带来的变化。

最后,如果你还从来没有体验过Edge,那么不妨扫描下方二维码下载一波试试吧。


如果想要学习Kotlin和最新的Android知识,可以参考我的新书 《第一行代码 第3版》点击此处查看详情


关注我的技术公众号,每天都有优质技术文章推送。

微信扫一扫下方二维码即可关注:

以上是关于我为Android版Microsoft Edge所带来的变化的主要内容,如果未能解决你的问题,请参考以下文章

我为Android版Microsoft Edge所带来的变化

全新 Chromium 版 Microsoft Edge 浏览器到底长啥样?

连接电脑与手机 Microsoft Edge 安卓版

Microsoft Edge Beta for Mac(Edge浏览器官方内部版) v79.0.309.51中文版

无法在 Windows 10 预览版的 Microsoft Edge (Project Spartan) 中打开 localhost

无法在 Windows 10 预览版的 Microsoft Edge (Project Spartan) 中打开 localhost