| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 移动开发 -> 我为Android版Microsoft Edge所带来的变化 -> 正文阅读 |
|
[移动开发]我为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的一种常态化认识了。 不过这部分代码倒全部都是开源的,感兴趣的小伙伴可以去瞧一瞧: 除此之外还有什么用户体验上的问题呢? 这个可能需要考一考你的眼力了,当你想要去搜索什么东西的时候一定会点击搜索框对不对?那么点击之后的效果如下所示: 有没有看出什么问题? 没有的话很正常,因为我也一直没看出,我们很多的同事都没有看出。 但是当我将动画进行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,那么不妨扫描下方二维码下载一波试试吧。
|
|
移动开发 最新文章 |
Vue3装载axios和element-ui |
android adb cmd |
【xcode】Xcode常用快捷键与技巧 |
Android开发中的线程池使用 |
Java 和 Android 的 Base64 |
Android 测试文字编码格式 |
微信小程序支付 |
安卓权限记录 |
知乎之自动养号 |
【Android Jetpack】DataStore |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/25 1:44:05- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |