Maria 及其团队如何让超过 4.25 亿用户享受经过革命性改进的 Gmail

如何让某种事物具有普遍实用性？采用的方式是不是既要尊重人们过去的使用习惯，又要能够预见新的行为？

如果您是 Gmail 前端工程团队的成员，则可以找到极具说服力的统计数据，但仍需要观察实际用户，才能深入了解您的想法在实际中的效果。您要对代码进行大量更改来尽可能减少视觉干扰。您还会发现，如果在保留旧代码的同时实施新代码，将能够得到更强大且适合每个人的单一解决方案。怎样才能打造出最佳的网络邮件体验呢？

自 2004 年 4 月发布测试版以来，Gmail 已从一项简单的网络邮件服务发展成为使用最广泛的交流平台之一，在全球拥有超过 4.25 亿活跃用户。在 2012 年集体讨论 Gmail 的下次飞跃时，Maria 和她的团队受命继续提高 Gmail 的工作效率。“多年来，我们一直在努力实现离线提供 Gmail 服务这一目标，但好像很难知道接下来怎么做才能产生同类影响。”当她的技术主管提出简化邮件撰写体验的想法时，该团队（5 名工程师、1 名用户体验设计人员，还有一些用户测试专家）抓住了这次机会。在研究了用户实际如何使用当前的邮件撰写功能后，该团队发现，大多数用户发送的电子邮件都非常短，在撰写邮件时使用任何类型的富文本格式的用户只有不到 10%%。Maria 解释说：“在过去的十年中，人们彼此之间互动交流的方式发生了很大变化，比如说，他们不再撰写长篇邮件，而是改为发送短信。我们希望确保 Gmail 既方便用户发送较短的消息，也非常适合撰写较长的邮件。我们希望提供简单、流畅的邮件撰写体验。”

那么，你们是如何打造出这种卓越的电子邮件撰写体验的呢？

一种精简且反应迅捷的体验，适合所有浏览器。

根据通过用户调查获得的数据，Maria 和她的同事发现，需要进行一些改动来提高用户撰写电子邮件时的速度和易用性。首先，他们创建了一个新的邮件撰写窗口，称为“badger”。为什么叫 badger 呢？Maria 解释说：“在 Gmail 中，我们将这些小的聊天窗口称为 mole。于是我们决定将新的邮件撰写窗口称为‘badger’。其实，我们就是选择了一种更大的动物来称呼这种更大的窗口。”

与当时经典的邮件撰写体验不同，badger 窗口会从 Gmail 屏幕的右下角弹出。这使得用户可以同时撰写多封邮件，还可以在撰写邮件期间阅读背景中的电子邮件。此外，该团队还决定让 badger 窗口能够随着用户撰写或删除文本进行缩放。从原理上讲，将可修改的字段设为根据内容进行调整并不是特别困难，但是在按照 Gmail 团队设想的流畅方式调整内容可修改区域的大小时，却在浏览器中出现了一些意想不到的行为。

我们不得不想出大量新的代码解决方案来处理这些互动，使它们不会跳转、截断文本行，也不会在用户输入文本时调整文本的格式。

正如 Maria 所说：“我们希望实现这么一种体验，就是文本区域能够逐渐扩大，但最大只能达到顶部工具栏所在的位置，达到该位置时，它将改用滚动条。在我们支持的 Chrome、Firefox 和 Internet Explorer 这三种浏览器中，很难以一致的方式执行多个此类操作。我们不得不想出大量新的代码解决方案来处理此类互动，使它们不会跳转、切断文本行，也不会在用户输入文本时重新设置文本的格式。”

当该团队开始试验这种自适应文本框时，他们发现，这种改变非常适合富文本，但不能很好地支持纯文本。最简单的解决方法就是不再支持处理纯文本，但再次进行用户调查后，该团队发现许多邮寄名单只接受纯文本。由于总体目标是简化各种类型的交流，因此忽略这种使用情况根本不可取。

纯文本通常由 textarea html 元素处理，富文本则由 contenteditable div 处理。为了保留纯文本功能，Maria 说：“我们最终重写了纯文本的处理方式，以便对纯文本也开始使用 contenteditable div”。她还说：“我们不得不停用所有格式设置功能，并在用户撰写完邮件后去除所有标记，然后将格式重新设为纯文本。当我们将电子邮件从 html 更改为纯文本时，确保纯文本电子邮件的格式正确无误是一个非常棘手的问题。只是去除 html 标记并不能获得正确的结果，您必须了解这些 html 标记在文档中创建了哪种类型的格式。然后，再将这些格式转换为以纯文本撰写时的样子。实际上，这个过程非常有趣，旧版 Gmail 通常采用两种完全不同的方式来处理文本格式，而我们现在则采用统一的方式来进行处理。”

随着这些想法不断发展完善，该团队的用户体验研究人员进行了一些用户调查，以便协助该团队确定产品功能的优先级并对产品功能进行分组。测试人员尝试使用新的邮件撰写功能执行各种各样的任务，然后就使用体验填写调查问卷。为了确保功能开发按部就班地进行并充分考虑用户反馈，该团队采用了一种经过改进且非常灵活的开发流程。Maria 解释说：“我们所有人会坐在一起共同讨论，包括我们的 4 位工程师，还有产品经理和用户体验设计人员，因此我们能够根据这些内容非常快速地进行改进。”通过结合使用快速、频繁收到的用户数据，该团队的改进周期缩短为两周。在改进周期内，新的想法会被快速纳入到总体开发计划中，如果出现新的障碍，则会进行进一步的优化和测试。

确保从不可修改变为可修改时不会出现跳位

Maria 和她的团队以这种方式解决了一个非常难的问题，就是设计了一种新的电子邮件收件人处理方式。当用户在新的邮件撰写窗口中查看收件人列表时，每个名称都显示在不可修改的框中。但当用户点击这些框后，这些框就会变成可修改的字段。“我们必须找到一种方式来将其对齐，从而使这种从不可修改到可修改的转变不会涉及任何向上或向下跳位。”由于不同浏览器的处理方式不同（这是显而易见的），因此不同浏览器中输入字段的高度也不相同，这使情况变得非常复杂。“我们需要创建能够在所有浏览器中适当对齐所有内容的样式表。当然，对于 Gmail 内新的邮件撰写窗口中的所有功能，每次我们对界面进行一些更改，都会有内容发生移位，而这可能会导致 2/3 的浏览器遇到问题，于是我们会再次进行修复。实际上，我们最终编写了一个自动测试，该测试会测量收件人列表的高度，然后点击该测试即可再次测量高度，借此您可以检查在此过程中高度有没有发生变化。这时候，诸如 Webdriver 之类的产品就派上用场了，可确保在使用各种浏览器时我们的新功能始终都能正常发挥作用，特别是在处理收件人列表变更时。”

但解决了这个问题后，又出现了非常奇怪的新错误。当用户放大 Chrome 的显示比例时，badger 的右侧会随机显示一个不需要的滚动条。显然，出现这种问题是因为内容突然变得比边框稍大了一些，但边框本应根据现有内容的高度来调整大小，因此这种错误非常令人意外。“在检查高度时，我们发现高度存在不到一个像素的差异，例如内容的高度是 9px，而边框的高度却是 8.98px。因此，当您放大 Chrome 的显示比例时，它会开启亚像素呈现模式，导致出现这种差异。在亚像素呈现模式下，高度的计算值将会有四舍五入误差。我们最终上报了一个错误，该错误已在 Chrome 呈现工具中得到解决，但我们也必须仔细对计算出的高度数字进行四舍五入，以确保此问题不再出现。”

开发同等功能和集成功能

后来我们开发出了同等功能。“大多数人都认为 Gmail 的邮件撰写窗口就像这种简单的文本框一样，在其中输入内容，点击发送，然后就搞定了。但实际上，我们的邮件撰写窗口中具有很多功能，如果不查看代码，您不一定能知道到底有多少功能。例如，在 Gmail 中，您可以在撰写邮件时为草稿添加标签、插入表情符号、进行各种格式设置、打印草稿、插入照片和文档，等等。此外，其中还有许多集成了邮件撰写功能的实验室，比如电子邮件回复模板。我们不仅要在新的邮件撰写体验中同样提供所有这些内容，还必须要想办法将它们集成到新界面中，而这涉及到解决许多设计难题。能够看到这些独特功能都能在内部正常运作，并想出办法在 badger 中重现这些功能，这种感觉真是太棒了。”

…我们是完美主义者，非常希望这种无缝的美好体验没有任何瑕疵。

让每个元素都妥当是前端项目的关键，正如 Maria 所说：“想方设法针对新的邮件撰写窗口的所有功能设计精确的对齐方式非常有趣。将元素对齐听起来似乎无关紧要，但我们是完美主义者，非常希望这种出色无缝的体验没有任何瑕疵。虽然尝试了很多次才做好，但我们一如既往地奉行了严苛的标准。为了获得完美的结果，一切付出都值得。”

“我最喜欢的一条用户反馈是这样说的：‘就像抓痒一样，我甚至自己都没意识到痒。’我非常高兴能够负责这个项目。在我们开展这个项目期间，我一直觉得它潜力无限：它能够实实在在地提高用户处理电子邮件的效率，这一变化具有非常大的影响。”

Maria 现在是 Chrome 团队的工程师，还是安妮塔·博格奖学金 (Anita Borg Scholarship) 委员会的成员。