我为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版》,点击此处查看详情。


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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38690.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微软 Edge 浏览器无法调用 麦克风 原因及解决办法

非 https 安全网址无法直接通过浏览器获取电脑硬件的访问权限,如:麦克风、摄像头等;需要手动将对应网址设置为安全的域名网址。 以 Edge 浏览器,http://192.168.1.100:8080 网址为例: 第一步:在浏览器地址…

微软 Edge “不务正业”,新功能遭用户抵制:“你是在抢钱吧?”

继 Windows 11 因硬件配置“太高”,遭网友吐槽“微软催买新电脑”后,最近微软又被骂“在抢钱”了,不过这次遭抵制的不是 Windows 11,而是 Edge 浏览器。 一、新增的 BNPL 功能 本月中旬,微软宣布了一项正在测试的新功…

关于office及edge浏览器无法登录微软账号的问题

文章目录 前言解决方法 前言 前段时间,突然想到微软账号密码忘了,就去微软官网更改了密码。谁知更改之后,edge浏览器和office重新登陆一直转圈圈,挂加速器也说未连接网络、连接失败等等,试了很多种方法都不行。后来了…

AI - AI绘画的精准控图(ControlNet)

一、介绍 在上一篇 《AI - stable-diffusion(AI 绘画)的搭建与使用》 中, 介绍了 SD 的环境搭建与使用,搭配各种特色模型文件,SD 的文生图功能就可以根据我们输入的提示词(Prompt),绘制出各种各样的精美图…

油猴插件安装以及好用的脚本推荐 包含电脑版本和手机版本

📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正! 包含电脑版本和手机版本 (目录前8是电脑版 第9是手机版本) 文章目录 📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正&#xff01…

油猴插件(Tampermonkey)安装教程

简介:小白第一次创作,欢迎大家投稿回复,多多支持,共勉。 油猴安装教程 一、下载Tampermonkey压缩包二、压缩包重命名三、解压确定路径四、打开浏览器进行配置五、补充 一、下载Tampermonkey压缩包 下载Tampermonkey.crx 提取码:p…

油猴(Tampermonkey)简介及使用教程

如有更新请访问原文查看,博客原文:https://alvincr.com/2021/01/tampermonkey-introduction/ 背景 我的浏览器虽然装了油猴插件,但是一直并没有去使用,久仰大名,但是却没用心去找好的脚本。 个人使用稳定版经常出现无…

浏览器油猴插件Tampermonkey下载安装

没有插件的浏览器,不是真正的浏览器,当我们的浏览器装上插件之后,瞬间强大了许多,下面给大家介绍一下浏览器插件神器油猴插件Tampermonkey的下载安装。 油猴Tampermonkey插件下载安装方法一 直接打开油猴Tampermonkey插件的官方…

谷歌浏览器油猴插件(Tampermonkey)安装使用教程

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。 虽然有些受支持的浏览器拥有原生的用户脚本支持,但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。 它提…

谷歌浏览器 Chrome 安装 Tampermonkey 油猴插件的方法

谷歌浏览器 Chrome 安装 Tampermonkey 油猴插件的方法 一、什么是油猴脚本二、油猴安装方法方法一:Google官方商店安装(推荐)方法二:本地安装(无需KX上网) 一、什么是油猴脚本 油猴脚本作为一个浏览器拓展&…

油猴脚本插件教程

目录 一、配置本地开发环境配置方式 二、 发布及更新脚本附:常见标签参考文章 TamperMonkey,这是一款非常流行的免费浏览器插件,网络上俗称:油猴插件,油猴脚本。作为一款浏览器插件,油猴的作用只是管理安装…

油猴插件使用

油猴插件使用 一,下载安装二,脚本功能2.1 找到界面2.2 访问Greasyfork2.3 找到插件2.4 安装插件2.5 使用脚本 三,体验小结 一,下载安装 若没有安装过Tampermonkey,会弹窗让你安装点击Tampermonkey安装,Tam…

油猴插件-Tampermonkey插件下载

现在很多情况下我们都会用到各种各样功能强大的网站,但大多数这些网站的许多功能又需要付费,如果工作需要频繁使用,那我们付费的性价比就比较高,但如果我们只是偶尔使用,为了一两次的使用而去付费就显得没那么划算了。…

浏览器扩展插件:「油猴」使用详解 ( Tampermonkey )

最近发现一款浏览器神器插件:油猴 ,英文名:Tampermonkey 一、介绍 Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。 通过安装一系列脚本优…

2023 ChatGPT公众号 解锁授权版 支持AI绘画

源码介绍 2023最新ChatGPT公众号版本源码,该产品支持用户付费套餐,多Key轮询,AI绘画等功能,并且可以免费使用,同时附带详细的教程文档。 这款产品采用了最新的 ChatGPT 技术,可以生成、重写和汇总文本&am…

CEO们,患上“AI焦虑症”

深燃(shenrancaijing)原创 作者 | 王敏 编辑 | 黎明 过去半年多,ChatGPT爆红,带火AI大模型,业界人士认为,AI已经从1.0时代进入2.0时代,一场真正的划时代性技术变革,正在发生。 AI浪潮…

GPT-4火爆出圈,GPT-5或年底发布?这儿有一份原创最全NLP学习路线请查收!

首先声明:此篇文章非GPT-4生成!由OpenAI发布的GPT-4火爆全网,可预见未来5-10年都将是大模型的天下,它带来了多少本质突破?多少职业会被取代?NLP是否还值得学习以及如果值得具体怎么学?一文带你分…

李永乐线性代数手写笔记-特征值和特征向量

李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看。 概览请移步:李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 特征值和特征向量二 相似矩阵三 实对称矩阵 一 特征值和特征向量 二 相似矩阵 三 实对称矩阵

李永乐(六)线性相关——笔记

线性相关 选择证明题是重点 一、判断方法 n个n维向量判断相关无关:计算行列式n-1个n维向量判断相关无关:解齐次方程组,加减消元n1个n维向量必线性相关 二、重要推论 1、 2、 简单证明: 3、 简单证明: 4、 注&…

李永乐(五)向量、线性表出——笔记

这部分内容考研考:选择题,证明题 向量 1、n维向量概念 线性表出 1、线性表出计算题——向量β能否用向量α线性表出 1.1 共三种情况: ①有唯一解②有无数解③无解 1.2 解法: ①向量形式写成方程组形式②写出增广矩阵&#xff…