对 mobile.twitter.com 的彻底翻修

产品

Twitter 是一个为全球用户随时随地的提供即时信息的工具,为了真正达到随时随地的让每个人都获取信息,我们为新旧浏览器同时更新了 mobile.twitter.com。我们彻底进行了翻修,使得网页客户端变得更加轻便,使用起来就像是在 PC 上使用 twitter.com 或者在手机上使用移动客户端一样。

这是 mobile.twitter.com 主页的修改前后对比图:

在最顶部,我们按照之前在 12月份发布的 Twitter 新版的移动客户端来设计,这样在使用的时候就能够获得一致的用户体验。接下来我们彻底检视了 RAILS后端 的视图层, 采用了新的模板和流线型样式表。

我们的移动工程师和设计师花了九个月的时间来为 mobile.twitter.com 的启动进行设计,试验,开发,测试和校准。期间我们也碰到了一些难题:

  • 我们需要对上千种设备上13中不同的浏览器来进行调试,他们都有各自不同的渲染方式。
  • 适应各种输入方式。
  • pre-CSS3/HTML5 的标准布局。
  • 对未开启 JavaScript 的浏览器进行优化。
  • 不断适应小到 240×240 ,大到宽屏桌面设备的不同分辨率。
  • 在网络差的时候最小化页面体积
  • 即使是没有图像,也要看起来像 Twitter
  • 与 twitter.com 以及客户端的功能保持一致。

首先我们分析了收集到的数据,用户会多久刷新一次数据?登录/注册按钮放在哪里会比较合适?用户最常用的功能是哪个?用户多久会发一次推?我们在整个过程中都是用这些用户行为数据来进行决策。

期间我们勾勒出主要的意见建议以及导航。然后我们再整理 Twitter 的交互流比如说推文,搜索和发送对话:

image01

经过和设计以及移动网页的团队的反复测试,做了很多纸上功夫之后,我们迅速转移到 HTML/CSS 框架,这样我们才开始用设备来进行测试。即使是一个简单的框架,只要是对整个项目有价值的,即使是很小一部分,这也为我们的前端工作奠定了一个会很好的基础。

这是在 Samsung Corby 上对第一版的预览图:

image05

接下来,我们建立了这样的页面比如“主页”,“联系”,“发现”和“我”。在适当的剖析了 Twitter (Twitter anatomy)之后,我们在样式表里增加了一个 进文本(text-only)的分支 。这是我们在设计中面临的最大的挑战:如何忠于 Twitter 的结构和行为,以保证用户在很低的分辨率下的体验。如何适应触屏,点击和物种输入方式。我们在决定之前测试了最终三种版本,最终从中做出了一个艰难的决定。

这样一来,我们就有了一条基线,但是在其他设计上我们依旧需要一个广泛的设置。注册以及登录的流程,注销查看,错误,通知和资料预览像跟随者和收藏。我们还有很多路要走,而且我发现,在办公区张贴一张打印的设计图可以很好的配合我们。这使得整个团队可以快速便捷的在工作中参考设计图,这可以帮我们发现不协调的地方。

image03

一路下来,我们认真的测试了一整套设备(仓库里可是有 300 台啊!!)

image00

经过了两个多月的工作,mobile.twitter.com 终于有了很多改进:
页面大小只有原来的 63%
会话缩小了 37%
一些预览,比如个人资料的响应速度加快了 63%

当我们终于将新版推送给所有用户的时候,我们很开心看到如此之多的正面评价。

当然,我们也听取了很多用户关于 Bug 的反馈以及一些尚未完整的特性。我们根据 JavaScript 的支持,将会很快支持宽屏设备。

改变永远是最难的,因为这代表着你需要重新学习,抛弃过去那些认为很舒服的东西。我们希望这种改变可以让你在移动设备以及旧版浏览器上感觉到更加快捷,更加舒服和方便使用 mobile.twitter.com 。

原文链接:Overhauling mobile.twitter.com from the ground up